r4sas
/
webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Style fixes 

Fancy animations for main menu
Added primary md button
Minor fixes
master
Igor Zhukov 10 years ago
parent
7412a02ef1
commit
3fdb5aba45
11 changed files with 151 additions and 71 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

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

67
app/css/desktop.css
Unescape View File

@ -31,6 +31,11 @@
background: #497799; background: #497799;
} }
/*.dropdown.open .tg_head_btn {
position: relative;
z-index: 5;
}*/
.tg_head_logo_dropdown .dropdown-toggle { .tg_head_logo_dropdown .dropdown-toggle {
color: #FFF; color: #FFF;
padding: 17px 20px 15px 22px; padding: 17px 20px 15px 22px;
@ -52,6 +57,7 @@
display: inline-block; display: inline-block;
width: 18px; width: 18px;
height: 14px; height: 14px;
-webkit-transform: translate3d(0,0,0);
} }
.tg_head_logo_dropdown .icon-hamburger-wrap { .tg_head_logo_dropdown .icon-hamburger-wrap {
margin: 0 40px 0 0; margin: 0 40px 0 0;
@ -64,11 +70,51 @@
background: #fff; background: #fff;
display: block; display: block;
height: 2px; height: 2px;
margin: 0;
}
.icon-hamburger-wrap .icon-bar:nth-child(2) {
margin-bottom: 4px; 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 { .tg_head_logo_dropdown .dropdown-menu {
border-radius: 0; border-radius: 0;
@ -81,7 +127,24 @@
-webkit-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27); -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); -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); 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 { .tg_head_logo_dropdown .dropdown-menu > li > a {
font-size: 12px; font-size: 12px;
line-height: 21px; line-height: 21px;

2
app/partials/desktop/chat_create_modal.html
Unescape View File

@ -17,7 +17,7 @@
<div class="md_simple_modal_footer"> <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-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>
</div> </div>

2
app/partials/desktop/chat_edit_modal.html
Unescape View File

@ -17,7 +17,7 @@
<div class="md_simple_modal_footer"> <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-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>
</div> </div>

2
app/partials/desktop/confirm_modal.html
Unescape View File

@ -50,7 +50,7 @@
<button class="btn btn-md" ng-click="$dismiss()"> <button class="btn btn-md" ng-click="$dismiss()">
<span my-i18n="modal_cancel"></span> <span my-i18n="modal_cancel"></span>
</button> </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="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="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> <span ng-switch-when="FILES_CLIPBOARD_PASTE" my-i18n="confirm_modal_clipboard_files_send_submit"></span>

6
app/partials/desktop/contacts_modal.html
Unescape View File

@ -66,10 +66,10 @@
<div ng-switch-when="new_group" class="pull-right"> <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-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> </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()"> <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> <my-i18n msgid="contacts_modal_edit_delete"></my-i18n>
@ -77,7 +77,7 @@
</button> </button>
<div ng-switch-default class="text-center"> <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>
</div> </div>

2
app/partials/desktop/edit_contact_modal.html
Unescape View File

@ -27,7 +27,7 @@
<div class="md_simple_modal_footer"> <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-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>
</div> </div>

2
app/partials/desktop/import_contact_modal.html
Unescape View File

@ -27,7 +27,7 @@
<div class="md_simple_modal_footer"> <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-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>
</div> </div>

2
app/partials/desktop/profile_edit_modal.html
Unescape View File

@ -22,7 +22,7 @@
<div class="md_simple_modal_footer"> <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-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>
</div> </div>

114
app/partials/desktop/settings_modal.html
Unescape View File

@ -34,81 +34,85 @@
<div class="md_modal_body"> <div class="md_modal_body">
<div class="md_modal_iconed_section_wrap md_modal_iconed_section_number"> <div class="md_modal_sections">
<i class="md_modal_section_icon md_modal_section_icon_phone"></i>
<div class="md_modal_section_param_wrap"> <div class="md_modal_iconed_section_wrap md_modal_iconed_section_number">
<div class="md_modal_section_param_value" ng-bind="profile.phone | phoneNumber"></div> <i class="md_modal_section_icon md_modal_section_icon_phone"></i>
<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-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_wrap">
<div class="md_modal_section_param_value" ng-switch="profile.username.length > 0"> <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-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> <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>
<div class="md_modal_section_param_name" my-i18n="user_modal_username"></div>
</div> </div>
</div>
<div class="md_modal_iconed_section_wrap md_modal_iconed_section_toggle"> <div class="md_modal_iconed_section_wrap md_modal_iconed_section_toggle">
<i class="md_modal_section_icon md_modal_section_icon_notification"></i> <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' : ''"> <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="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
<span class="tg_checkbox_label" my-i18n="settings_modal_notifications"></span> <span class="tg_checkbox_label" my-i18n="settings_modal_notifications"></span>
</a> </a>
<a class="md_modal_section_toggle_wrap tg_checkbox" ng-click="toggleSound()" ng-class="notify.volume ? 'tg_checkbox_on' : ''"> <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="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
<span class="tg_checkbox_label" my-i18n="settings_modal_sound"></span> <span class="tg_checkbox_label" my-i18n="settings_modal_sound"></span>
</a> </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> <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"> <div class="tg_radios_wrap">
<i class="md_modal_section_icon md_modal_section_icon_keyboard"></i> <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(0)" ng-class="send.enter == 0 ? 'tg_radio_on' : ''">
<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 class="icon icon-radio-outer"><i class="icon-radio"></i></span> <span my-i18n="settings_modal_ctrl_enter_send_description_md"></span>
<span my-i18n="settings_modal_enter_send_description_md"></span> </a>
</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> <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"> <div class="md_modal_section_param_name" my-i18n="settings_modal_language"></div>
<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>
<div class="md_modal_section_param_name" my-i18n="settings_modal_language"></div> <div class="md_modal_section_link_wrap">
</div> <a class="md_modal_section_link" ng-click="terminateSessions()" my-i18n="settings_modal_terminate_sessions"></a>
</div>
<div class="md_modal_section_link_wrap"> <div class="md_modal_section_link_wrap">
<a class="md_modal_section_link" ng-click="terminateSessions()" my-i18n="settings_modal_terminate_sessions"></a> <a class="md_modal_section_link" ng-click="logOut()" my-i18n="head_log_out"></a>
</div> </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>
</div> </div>

2
app/partials/desktop/username_edit_modal.html
Unescape View File

@ -20,7 +20,7 @@
<div class="md_simple_modal_footer"> <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-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> </div>

Write Preview
Loading…
Cancel
Save