Browse Source

Style fixes

Fancy animations for main menu
Added primary md button
Minor fixes
master
Igor Zhukov 10 years ago
parent
commit
3fdb5aba45
  1. 21
      app/css/app.css
  2. 67
      app/css/desktop.css
  3. 2
      app/partials/desktop/chat_create_modal.html
  4. 2
      app/partials/desktop/chat_edit_modal.html
  5. 2
      app/partials/desktop/confirm_modal.html
  6. 6
      app/partials/desktop/contacts_modal.html
  7. 2
      app/partials/desktop/edit_contact_modal.html
  8. 2
      app/partials/desktop/import_contact_modal.html
  9. 2
      app/partials/desktop/profile_edit_modal.html
  10. 114
      app/partials/desktop/settings_modal.html
  11. 2
      app/partials/desktop/username_edit_modal.html

21
app/css/app.css

@ -173,15 +173,22 @@ input[type="number"] { @@ -173,15 +173,22 @@ input[type="number"] {
text-transform: uppercase;
font-size: 13px;
padding: 6px 10px;
font-weight: bold;
}
.btn-md,
.btn-md:focus,
.btn-md:hover {
color: #3a6d99;
color: #72a0c7;
/*color: #4680b3;*/
}
.btn-md:hover {
background: #f2f6fa;
}
.btn-md-primary,
.btn-md-primary:focus,
.btn-md-primary:hover {
color: #4680b3;
}
.btn-md-danger,
.btn-md-danger:focus,
@ -278,6 +285,7 @@ a.md_modal_action { @@ -278,6 +285,7 @@ a.md_modal_action {
float: right;
color: #dde8f1;
padding: 19px 15px 5px;
font-weight: bold;
}
a.md_modal_action:hover {
color: #FFF;
@ -767,11 +775,14 @@ a.tg_radio_on:hover i.icon-radio { @@ -767,11 +775,14 @@ a.tg_radio_on:hover i.icon-radio {
.login_head_submit_progress {
float: right;
}
.login_head_submit_wrap {
font-weight: bold;
}
.login_head_submit_btn,
.login_head_submit_progress {
font-size: 13px;
line-height: 20px;
padding: 26px 15px 29px;
padding: 27px 15px 28px;
display: inline-block;
color: #FFF;
}
@ -1108,9 +1119,10 @@ a.im_dialog_selected .im_dialog_message_text { @@ -1108,9 +1119,10 @@ a.im_dialog_selected .im_dialog_message_text {
background: #64c270;
font-size: 11px;
padding: 5px;
border-radius: 10px;
border-radius: 11px;
min-width: 21px;
text-align: center;
margin-top: 4px;
}
.active .im_dialog_badge {
color: #428bca;
@ -2446,7 +2458,8 @@ a.peer_photo_init:focus { @@ -2446,7 +2458,8 @@ a.peer_photo_init:focus {
.im_dialogs_contacts_wrap h5 {
color: #999;
font-size: 13px;
margin-left: 8px;
margin-left: 20px;
font-weight: bold;
}
/* Gif documents */

67
app/css/desktop.css

@ -31,6 +31,11 @@ @@ -31,6 +31,11 @@
background: #497799;
}
/*.dropdown.open .tg_head_btn {
position: relative;
z-index: 5;
}*/
.tg_head_logo_dropdown .dropdown-toggle {
color: #FFF;
padding: 17px 20px 15px 22px;
@ -52,6 +57,7 @@ @@ -52,6 +57,7 @@
display: inline-block;
width: 18px;
height: 14px;
-webkit-transform: translate3d(0,0,0);
}
.tg_head_logo_dropdown .icon-hamburger-wrap {
margin: 0 40px 0 0;
@ -64,11 +70,51 @@ @@ -64,11 +70,51 @@
background: #fff;
display: block;
height: 2px;
margin: 0;
}
.icon-hamburger-wrap .icon-bar:nth-child(2) {
margin-bottom: 4px;
margin-top: 4px;
}
.icon-hamburger-wrap .icon-bar:last-child {
margin-bottom: 0;
.tg_head_logo_dropdown .icon-bar {
opacity: 1;
-webkit-transition: -webkit-transform .1s ease-in;
-o-transition: -o-transform .1s ease;
-ms-transition: -ms-transform .1s ease;
-moz-transition: -moz-transform .1s ease;
transition: transform .1s ease-in;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.tg_head_logo_dropdown:not(.open) .dropdown-toggle:hover .icon-bar:nth-child(1) {
-webkit-transform: translateY(-1px);
}
.tg_head_logo_dropdown:not(.open) .dropdown-toggle:hover .icon-bar:nth-child(3) {
-webkit-transform: translateY(1px);
}
.tg_head_logo_dropdown.open .icon-bar:nth-child(1) {
-webkit-transform: translate3d(0,-6px,0) rotate(-45deg);
-moz-transform: translate3d(0,-6px,0) rotate(-45deg);
-ms-transform: translate3d(0,-6px,0) rotate(-45deg);
-o-transform: translate3d(0,-6px,0) rotate(-45deg);
transform: translate3d(0,6px,0) rotate(45deg);
}
.tg_head_logo_dropdown.open .icon-bar:nth-child(2) {
opacity: 0;
}
.tg_head_logo_dropdown.open .icon-bar:nth-child(3) {
-webkit-transform: translate3d(0,-6px,0) rotate(-45deg);
-moz-transform: translate3d(0,-6px,0) rotate(-45deg);
-ms-transform: translate3d(0,-6px,0) rotate(-45deg);
-o-transform: translate3d(0,-6px,0) rotate(-45deg);
transform: translate3d(0,-6px,0) rotate(-45deg);
}
.tg_head_logo_dropdown .dropdown-menu {
border-radius: 0;
@ -81,7 +127,24 @@ @@ -81,7 +127,24 @@
-webkit-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
-moz-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
overflow: hidden;
}
/*@-webkit-keyframes rollIn {
from { transform: translateY(-220px); }
to { transform: translateY(0); }
}
@keyframes rollIn {
from { transform: translateY(-220px); }
to { transform: translateY(0); }
}
.tg_head_logo_dropdown.open .dropdown-menu {
-webkit-animation: rollIn 0.2s cubic-bezier(0,2,1,0.5);
animation: rollIn 0.2s cubic-bezier(0,2,1,0.5);
z-index: 4;
}*/
.tg_head_logo_dropdown .dropdown-menu > li > a {
font-size: 12px;
line-height: 21px;

2
app/partials/desktop/chat_create_modal.html

@ -17,7 +17,7 @@ @@ -17,7 +17,7 @@
<div class="md_simple_modal_footer">
<button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
<button class="btn btn-md" ng-class="{disabled: group.creating}" ng-click="createGroup()" ng-bind="group.creating ? 'group_create_submit_active' : 'group_create_submit' | i18n" ng-disabled="group.creating"></button>
<button class="btn btn-md btn-md-primary" ng-class="{disabled: group.creating}" ng-click="createGroup()" ng-bind="group.creating ? 'group_create_submit_active' : 'group_create_submit' | i18n" ng-disabled="group.creating"></button>
</div>
</div>

2
app/partials/desktop/chat_edit_modal.html

@ -17,7 +17,7 @@ @@ -17,7 +17,7 @@
<div class="md_simple_modal_footer">
<button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
<button class="btn btn-md" ng-class="{disabled: group.updating}" ng-click="updateGroup()" ng-bind="group.updating ? 'group_edit_submit_active' : 'group_edit_submit' | i18n" ng-disabled="group.updating"></button>
<button class="btn btn-md btn-md-primary" ng-class="{disabled: group.updating}" ng-click="updateGroup()" ng-bind="group.updating ? 'group_edit_submit_active' : 'group_edit_submit' | i18n" ng-disabled="group.updating"></button>
</div>
</div>

2
app/partials/desktop/confirm_modal.html

@ -50,7 +50,7 @@ @@ -50,7 +50,7 @@
<button class="btn btn-md" ng-click="$dismiss()">
<span my-i18n="modal_cancel"></span>
</button>
<button class="btn btn-md" ng-switch="type" ng-click="$close()" my-focused >
<button class="btn btn-md btn-md-primary" ng-switch="type" ng-click="$close()" my-focused >
<span ng-switch-when="LOGOUT" my-i18n="confirm_modal_logout_submit"></span>
<span ng-switch-when="HISTORY_FLUSH" my-i18n="confirm_modal_history_flush_submit"></span>
<span ng-switch-when="FILES_CLIPBOARD_PASTE" my-i18n="confirm_modal_clipboard_files_send_submit"></span>

6
app/partials/desktop/contacts_modal.html

@ -66,10 +66,10 @@ @@ -66,10 +66,10 @@
<div ng-switch-when="new_group" class="pull-right">
<button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
<button class="btn btn-md" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit" my-i18n="modal_next"></button>
<button class="btn btn-md btn-md-primary" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit" my-i18n="modal_next"></button>
</div>
<button ng-switch-when="select" class="btn btn-md pull-right" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit" my-i18n="modal_next"></button>
<button ng-switch-when="select" class="btn btn-md btn-md-primary pull-right" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit" my-i18n="modal_next"></button>
<button ng-switch-when="edit" class="btn btn-md btn-md-danger pull-right" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="deleteSelected()">
<my-i18n msgid="contacts_modal_edit_delete"></my-i18n>
@ -77,7 +77,7 @@ @@ -77,7 +77,7 @@
</button>
<div ng-switch-default class="text-center">
<button class="btn btn-md" ng-click="importContact()" my-i18n="contacts_modal_new_contact"></button>
<button class="btn btn-md btn-md-primary" ng-click="importContact()" my-i18n="contacts_modal_new_contact"></button>
</div>
</div>

2
app/partials/desktop/edit_contact_modal.html

@ -27,7 +27,7 @@ @@ -27,7 +27,7 @@
<div class="md_simple_modal_footer">
<button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
<button class="btn btn-md" ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'contact_edit_modal_submit_active' : 'contact_edit_modal_submit'| i18n" ng-disabled="progress.enabled"></button>
<button class="btn btn-md btn-md-primary" ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'contact_edit_modal_submit_active' : 'contact_edit_modal_submit'| i18n" ng-disabled="progress.enabled"></button>
</div>
</div>

2
app/partials/desktop/import_contact_modal.html

@ -27,7 +27,7 @@ @@ -27,7 +27,7 @@
<div class="md_simple_modal_footer">
<button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
<button class="btn btn-md" ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'contact_import_modal_submit_active' : 'contact_import_modal_submit' | i18n" ng-disabled="progress.enabled"></button>
<button class="btn btn-md btn-md-primary" ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'contact_import_modal_submit_active' : 'contact_import_modal_submit' | i18n" ng-disabled="progress.enabled"></button>
</div>
</div>

2
app/partials/desktop/profile_edit_modal.html

@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
<div class="md_simple_modal_footer">
<button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
<button class="btn btn-md" ng-class="{disabled: profile.updating}" ng-click="updateProfile()" ng-bind="profile.updating ? 'profile_edit_submit_active' : 'profile_edit_submit' | i18n" ng-disabled="profile.updating"></button>
<button class="btn btn-md btn-md-primary" ng-class="{disabled: profile.updating}" ng-click="updateProfile()" ng-bind="profile.updating ? 'profile_edit_submit_active' : 'profile_edit_submit' | i18n" ng-disabled="profile.updating"></button>
</div>
</div>

114
app/partials/desktop/settings_modal.html

@ -34,81 +34,85 @@ @@ -34,81 +34,85 @@
<div class="md_modal_body">
<div class="md_modal_iconed_section_wrap md_modal_iconed_section_number">
<i class="md_modal_section_icon md_modal_section_icon_phone"></i>
<div class="md_modal_sections">
<div class="md_modal_section_param_wrap">
<div class="md_modal_section_param_value" ng-bind="profile.phone | phoneNumber"></div>
<div class="md_modal_section_param_name" my-i18n="user_modal_phone"></div>
</div>
<div class="md_modal_iconed_section_wrap md_modal_iconed_section_number">
<i class="md_modal_section_icon md_modal_section_icon_phone"></i>
<div class="md_modal_section_param_wrap">
<div class="md_modal_section_param_value" ng-bind="profile.phone | phoneNumber"></div>
<div class="md_modal_section_param_name" my-i18n="user_modal_phone"></div>
</div>
<div class="md_modal_section_param_wrap">
<div class="md_modal_section_param_value" ng-switch="profile.username.length > 0">
<a ng-switch-when="true" class="settings_modal_username_link" ng-click="changeUsername()" ng-bind="'@' + profile.username"></a>
<a ng-switch-default ng-click="changeUsername()" my-i18n="settings_modal_empty_username_set"></a>
<div class="md_modal_section_param_wrap">
<div class="md_modal_section_param_value" ng-switch="profile.username.length > 0">
<a ng-switch-when="true" class="settings_modal_username_link" ng-click="changeUsername()" ng-bind="'@' + profile.username"></a>
<a ng-switch-default ng-click="changeUsername()" my-i18n="settings_modal_empty_username_set"></a>
</div>
<div class="md_modal_section_param_name" my-i18n="user_modal_username"></div>
</div>
<div class="md_modal_section_param_name" my-i18n="user_modal_username"></div>
</div>
</div>
<div class="md_modal_iconed_section_wrap md_modal_iconed_section_toggle">
<i class="md_modal_section_icon md_modal_section_icon_notification"></i>
<div class="md_modal_iconed_section_wrap md_modal_iconed_section_toggle">
<i class="md_modal_section_icon md_modal_section_icon_notification"></i>
<a class="md_modal_section_toggle_wrap tg_checkbox" ng-click="toggleDesktop()" ng-class="notify.desktop ? 'tg_checkbox_on' : ''">
<span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
<span class="tg_checkbox_label" my-i18n="settings_modal_notifications"></span>
</a>
<a class="md_modal_section_toggle_wrap tg_checkbox" ng-click="toggleDesktop()" ng-class="notify.desktop ? 'tg_checkbox_on' : ''">
<span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
<span class="tg_checkbox_label" my-i18n="settings_modal_notifications"></span>
</a>
<a class="md_modal_section_toggle_wrap tg_checkbox" ng-click="toggleSound()" ng-class="notify.volume ? 'tg_checkbox_on' : ''">
<span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
<span class="tg_checkbox_label" my-i18n="settings_modal_sound"></span>
</a>
<a class="md_modal_section_toggle_wrap tg_checkbox" ng-click="toggleSound()" ng-class="notify.volume ? 'tg_checkbox_on' : ''">
<span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
<span class="tg_checkbox_label" my-i18n="settings_modal_sound"></span>
</a>
<div class="md_modal_section_range_wrap tg_range_wrap" ng-show="notify.volume > 0">
<div my-slider slider-model="notify.volume"></div>
</div>
<div class="md_modal_section_range_wrap tg_range_wrap" ng-show="notify.volume > 0">
<div my-slider slider-model="notify.volume"></div>
</div>
</div>
<div class="md_modal_iconed_section_wrap md_modal_iconed_section_radio">
<i class="md_modal_section_icon md_modal_section_icon_keyboard"></i>
<div class="md_modal_iconed_section_wrap md_modal_iconed_section_radio">
<i class="md_modal_section_icon md_modal_section_icon_keyboard"></i>
<div class="tg_radios_wrap">
<a class="md_modal_section_radio_wrap tg_radio" ng-click="toggleCtrlEnter(1)" ng-class="send.enter == 1 ? 'tg_radio_on' : ''">
<span class="icon icon-radio-outer"><i class="icon-radio"></i></span>
<span my-i18n="settings_modal_enter_send_description_md"></span>
</a>
<div class="tg_radios_wrap">
<a class="md_modal_section_radio_wrap tg_radio" ng-click="toggleCtrlEnter(1)" ng-class="send.enter == 1 ? 'tg_radio_on' : ''">
<span class="icon icon-radio-outer"><i class="icon-radio"></i></span>
<span my-i18n="settings_modal_enter_send_description_md"></span>
</a>
<a class="md_modal_section_radio_wrap tg_radio" ng-click="toggleCtrlEnter(0)" ng-class="send.enter == 0 ? 'tg_radio_on' : ''">
<span class="icon icon-radio-outer"><i class="icon-radio"></i></span>
<span my-i18n="settings_modal_ctrl_enter_send_description_md"></span>
</a>
</div>
<a class="md_modal_section_radio_wrap tg_radio" ng-click="toggleCtrlEnter(0)" ng-class="send.enter == 0 ? 'tg_radio_on' : ''">
<span class="icon icon-radio-outer"><i class="icon-radio"></i></span>
<span my-i18n="settings_modal_ctrl_enter_send_description_md"></span>
</a>
</div>
</div>
<div class="md_modal_iconed_section_wrap md_modal_iconed_section_link">
<i class="md_modal_section_icon md_modal_section_icon_more"></i>
<div class="md_modal_section_select_wrap" ng-controller="AppLangSelectController">
<div class="dropdown md_modal_section_select" dropdown>
<button class="btn btn-link dropdown-toggle" dropdown-toggle ng-bind="langNames[curLocale]"></button>
<ul class="dropdown-menu dropdown-menu-to-up">
<li ng-repeat="locale in ::supportedLocales">
<a ng-click="localeSelect(locale)" ng-bind="langNames[locale]"></a>
</li>
</ul>
</div>
<div class="md_modal_iconed_section_wrap md_modal_iconed_section_link">
<i class="md_modal_section_icon md_modal_section_icon_more"></i>
<div class="md_modal_section_select_wrap" ng-controller="AppLangSelectController">
<div class="dropdown md_modal_section_select" dropdown>
<button class="btn btn-link dropdown-toggle" dropdown-toggle ng-bind="langNames[curLocale]"></button>
<ul class="dropdown-menu dropdown-menu-to-up">
<li ng-repeat="locale in ::supportedLocales">
<a ng-click="localeSelect(locale)" ng-bind="langNames[locale]"></a>
</li>
</ul>
<div class="md_modal_section_param_name" my-i18n="settings_modal_language"></div>
</div>
<div class="md_modal_section_param_name" my-i18n="settings_modal_language"></div>
</div>
<div class="md_modal_section_link_wrap">
<a class="md_modal_section_link" ng-click="terminateSessions()" my-i18n="settings_modal_terminate_sessions"></a>
</div>
<div class="md_modal_section_link_wrap">
<a class="md_modal_section_link" ng-click="terminateSessions()" my-i18n="settings_modal_terminate_sessions"></a>
</div>
<div class="md_modal_section_link_wrap">
<a class="md_modal_section_link" ng-click="logOut()" my-i18n="head_log_out"></a>
</div>
<div class="md_modal_section_link_wrap">
<a class="md_modal_section_link" ng-click="logOut()" my-i18n="head_log_out"></a>
</div>
</div>

2
app/partials/desktop/username_edit_modal.html

@ -20,7 +20,7 @@ @@ -20,7 +20,7 @@
<div class="md_simple_modal_footer">
<button class="btn btn-md" ng-click="$dismiss()" my-i18n="modal_cancel"></button>
<button class="btn btn-md" ng-class="{disabled: profile.updating}" ng-click="updateUsername()" ng-bind="profile.updating ? 'username_edit_submit_active' : 'username_edit_submit' | i18n" ng-disabled="profile.updating"></button>
<button class="btn btn-md btn-md-primary" ng-class="{disabled: profile.updating}" ng-click="updateUsername()" ng-bind="profile.updating ? 'username_edit_submit_active' : 'username_edit_submit' | i18n" ng-disabled="profile.updating"></button>
</div>

Loading…
Cancel
Save