diff --git a/app/css/app.css b/app/css/app.css index 4ea8e00b..e32f5e72 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -4,14 +4,12 @@ html { display: none; background: #dee4e9 url(../img/bg_tile.png) 0 0 repeat; overflow: visible; - /*background-size: 300px 468px;*/ } body { color: #000; background: none; font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif; overflow: visible; - /*-webkit-font-smoothing: antialiased;*/ } .font-light { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Light", Helvetica, Arial , Verdana, sans-serif; @@ -65,14 +63,23 @@ input[type="number"]::-webkit-inner-spin-button { input[type="number"] { -moz-appearance:textfield; } - -.btn-primary:focus { +.btn { + border: 0; + padding: 7px 13px; +} +.btn:hover, +.btn:active, +.btn.active, +.btn:focus, +.btn:active:focus, +.btn.active:focus, +.open .dropdown-toggle.btn { + box-shadow: none; outline: none; } .btn-success { color: #ffffff; background-color: #6AC065; - border-color: #6AC065; } .btn-success:hover, @@ -82,7 +89,6 @@ input[type="number"] { .open .dropdown-toggle.btn-success { color: #ffffff; background-color: #61b75b; - border-color: #61b75b; } .btn-success:active, @@ -96,7 +102,6 @@ input[type="number"] { .btn-danger { color: #ffffff; background-color: #c05f5a; - border-color: #c05f5a; } .btn-danger:hover, .btn-danger:focus, @@ -105,7 +110,6 @@ input[type="number"] { .open .dropdown-toggle.btn-danger { color: #ffffff; background-color: #ab5450; - border-color: #ab5450; } .btn-danger:active, .btn-danger.active, @@ -118,7 +122,6 @@ input[type="number"] { .btn-primary { color: #ffffff; background-color: #5d8db3; - border-color: #5d8db3; border-radius: 3px; } .btn-primary:hover, @@ -128,7 +131,6 @@ input[type="number"] { .open .dropdown-toggle.btn-primary { color: #ffffff; background-color: #4a80a9; - border-color: #4a80a9; } .btn-primary:active, .btn-primary.active, @@ -139,7 +141,6 @@ input[type="number"] { .btn-primary[disabled], .btn-primary.disabled { background: #7999b3; - border-color: #7999b3; } .btn-link { color: #3a6d99; @@ -156,7 +157,6 @@ input[type="number"] { } .btn-link.dropdown-toggle:active { outline: none; - box-shadow: none; } .tg_page_head .navbar-quick-nav, @@ -184,7 +184,7 @@ input[type="number"] { .ios_standalone .tg_page_head .navbar > .container { margin-top: 20px; } -.ios_standalone .modal.page_modal { +.ios_standalone .modal.mobile_modal { border-top: 20px solid #497495; } .tg_page_head .navbar > .container .navbar-brand { @@ -231,12 +231,6 @@ input[type="number"] { line-height: 20px; } -.navbar-peer-wrap { - display: none; -} -.navbar-toggle-wrap { - display: none; -} .tg_page_head .navbar-menu .navbar-nav.navbar-right { margin-right: 0; } @@ -319,9 +313,6 @@ input[type="number"] { overflow-y: auto; padding: 10px; } -.mobile_modal { - padding: 0; -} .modal-dialog { margin: 0 auto; } @@ -543,9 +534,6 @@ a.tg_checkbox:hover { line-height: 18px; vertical-align: middle; } -/*a.tg_checkbox:hover span.icon-checkbox-outer { - -webkit-filter: brightness(95%); -}*/ a.tg_checkbox:hover span.icon-checkbox-outer { background: #bdbdbd; } @@ -588,9 +576,6 @@ a.tg_radio:hover { line-height: 20px; vertical-align: middle; } -/*a.tg_radio:hover i.icon-radio { - -webkit-filter: brightness(95%); -}*/ a.tg_radio:hover i.icon-radio { background: #f2f2f2; border-color: #ccc; @@ -599,6 +584,56 @@ a.tg_radio_on:hover i.icon-radio { border-color: #5785aa; } +.tg_range_wrap { + line-height: 18px; +} +input.tg_range { + cursor: pointer; + outline: none !important; + -webkit-appearance: none; + width: 100%; + max-width: 362px; + display: inline-block; + background: #c7c7c7; + height: 3px; + line-height: 18px; + vertical-align: top; + margin: 8px 0; + border-radius: 2px; +} +input.tg_range::-moz-range-track { + cursor: pointer; + outline: none !important; + -webkit-appearance: none; + width: 100%; + max-width: 362px; + display: inline-block; + background: #c7c7c7; + height: 3px; + line-height: 18px; + vertical-align: top; + margin: 8px 0; + border-radius: 2px; +} +input.tg_range::-webkit-slider-thumb { + border: 0; + -webkit-appearance: none; + background: #568cb5; + width: 12px; + height: 12px; + border-radius: 6px; + overflow: hidden; +} + +input.tg_range::-moz-range-thumb { + border: 0; + background: #568cb5; + width: 12px; + height: 12px; + border-radius: 6px; + overflow: hidden; +} + .tg_form_group { padding: 6px 0; @@ -614,7 +649,6 @@ a.tg_radio_on:hover i.icon-radio { .img_fullsize_with_progress_wrap { position: relative; - /*margin: 0 auto 20px;*/ margin: 0 auto; } .img_fullsize_progress_overlay { @@ -623,7 +657,6 @@ a.tg_radio_on:hover i.icon-radio { height: 100%; } .img_fullsize_progress_wrap { - /*background: rgba(0,0,0, .1);*/ position: relative; } .img_fullsize_progress { @@ -794,6 +827,9 @@ a.tg_radio_on:hover i.icon-radio { .login_phone_number { width: 198px; } +.login_phone_code { + text-align: center; +} .login_first_name_wrap { margin-bottom: 11px; } @@ -803,48 +839,7 @@ a.tg_radio_on:hover i.icon-radio { -.im_page_wrap { - background: #FFF; - max-width: 1000px; - min-width: 300px; - margin: 0 auto; - - -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); - - border-radius: 0 0 3px 3px; - overflow: hidden; -} - - -.im_page_footer { - font-size: 11px; - text-align: center; - color: #9cacb9; - line-height: 40px; -} -.im_page_footer_brand { - color: #9cacb9; - font-weight: bold; -} -.im_page_footer_brand:hover, -.im_page_footer_brand:active { - color: #8499aa; - text-decoration: none; -} - -.im_dialogs_col_wrap { - float: left; - width: 31%; - border-right: 2px solid #E9EBED; - padding-bottom: 10px; -} -.im_history_col_wrap { - float: left; - width: 69%; -} /* Dialogs list */ @@ -865,34 +860,8 @@ a.tg_radio_on:hover i.icon-radio { margin-top: 10px; } -.im_dialogs_col { - margin-right: -7px; -} -.im_dialogs_col .nano > .nano-pane { - background : rgba(0,0,0,0.0); - width : 12px; - right: 0px; - -moz-border-radius : 0; - -webkit-border-radius : 0; - border-radius : 0; - /*-webkit-transition : .2s; - -moz-transition : .2s; - -o-transition : .2s; - transition : .2s;*/ - -webkit-transition : none; - -moz-transition : none; - -o-transition : none; - transition : none; -} -.im_dialogs_col .nano > .nano-pane > .nano-slider { - background: #A5B1B9; - margin: 0 5px; - -moz-border-radius : 0; - -webkit-border-radius : 0; - border-radius : 0; -} .im_dialogs_panel { padding: 12px 12px 6px; @@ -993,11 +962,7 @@ a.tg_radio_on:hover i.icon-radio { - -.im_dialogs_wrap { -} .im_dialogs_scrollable_wrap { - padding: 0 19px 0 12px; outline: none ! important; } .im_dialogs_scrollable_wrap .im_dialog_wrap { @@ -1136,108 +1101,6 @@ a.im_dialog_selected .im_dialog_date { /* IM history */ -.im_history_col { -} - -.im_history_col .nano > .nano-pane, -.contacts_modal_col .nano > .nano-pane, -.im_dialogs_modal_col .nano > .nano-pane { - background : rgba(3,36,64,0.08); - width : 9px; - right: 0; - top: 0; - /*-webkit-transition : .2s; - -moz-transition : .2s; - -o-transition : .2s; - transition : .2s;*/ - -moz-border-radius : 2px; - -webkit-border-radius : 2px; - border-radius : 2px; - - -webkit-transition : none; - -moz-transition : none; - -o-transition : none; - transition : none; -} - -.contacts_modal_col .nano > .nano-pane { - width: 6px; - right: 7px; -} - -.im_dialogs_modal_col .nano > .nano-pane { - width: 6px; - right: 2px; -} -.im_dialogs_modal_col .im_dialogs_scrollable_wrap { - padding: 0 12px 0 12px; -} - -.im_history_col .nano > .nano-pane { - top: 10px; - right: 8px; -} -.im_history_col .nano > .nano-pane > .nano-slider, -.contacts_modal_col .nano > .nano-pane > .nano-slider, -.im_dialogs_modal_col .nano > .nano-pane > .nano-slider { - background : rgba(3,46,79,0.22); - margin: 0; - -moz-border-radius : 2px; - -webkit-border-radius : 2px; - border-radius : 2px; -} - -.im_history_panel_wrap { - margin: 0 23px 0 15px; - cursor: pointer; - position: relative; - -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.12); - -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.12); - box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.12); - - position: relative; - z-index: 2; - min-height: 44px; -} -.im_history_panel { - padding: 10px 4px 0; -} -.im_history_panel_title h4 { - font-size: 17px; - line-height: 20px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - margin: 8px 0 6px; -} -.im_history_panel_title h4 small { - color: #999; - font-size: 13px; - margin-left: 5px; -} -.im_history_panel_info_link, -.im_history_panel_edit_link, -.im_history_panel_return_link, -.im_history_panel_media_dropdown .dropdown-toggle { - font-size: 13px; - font-weight: normal; - padding-top: 5px; - line-height: 1; -} -.im_history_panel_media_dropdown { - padding-top: 2px; -} -.im_history_panel_edit_link, -.im_history_panel_return_link, -.im_history_panel_media_dropdown { - font-size: 13px; - margin-right: 20px; -} -.im_history_panel_media_dropdown, -.im_history_panel_return_count { - margin-left: 5px; -} - .icon-caret { width: 8px; height: 4px; @@ -1254,22 +1117,7 @@ a.im_dialog_selected .im_dialog_date { background-image: url(../img/icons/IconsetW_1x.png); } -.im_history_panel_media_dropdown .dropdown-menu { - border-radius: 2px; - right: auto; - left: -15px; - margin-top: 11px; - padding: 0; - - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175); -} - -.im_history_no_dialogs_wrap { - margin: 122px 170px 60px; - text-align: center; -} .im_dialogs_empty_header { font-size: 15px; color: #808080; @@ -1282,10 +1130,6 @@ a.im_dialog_selected .im_dialog_date { -.im_history_wrap { - /*overflow: hidden;*/ - /*overflow-y: scroll;*/ -} .im_history_scrollable_wrap { outline: none ! important; -webkit-user-select: text; @@ -1293,38 +1137,27 @@ a.im_dialog_selected .im_dialog_date { -webkit-transform: translateZ(0); -webkit-perspective: 1000; -webkit-backface-visibility: hidden; + position: relative; +} +.im_history_to_bottom { + overflow: hidden; } - .im_history_to_bottom .im_history_scrollable { position: absolute; bottom: 0; width: 100%; } -.im_history_appending { - -webkit-transition: all ease-in-out 0.2s; - -moz-transition: all ease-in-out 0.2s; - -ms-transition: all ease-in-out 0.2s; - -o-transition: all ease-in-out 0.2s; - transition: all ease-in-out 0.2s; -} - .im_history { - /*padding: 20px 0 0 3px;*/ padding: 20px 0 0 0; - /*max-width: 500px;*/ - /*margin: 0 auto;*/ position: relative; } .im_history_typing_wrap { - /*margin-top: 13px;*/ - /*height: 18px;*/ line-height: 18px; width: 100%; height: 49px; - /*margin-bottom: 13px;*/ padding: 13px 0 18px; overflow: hidden; -webkit-user-select: none; @@ -1431,7 +1264,6 @@ a.im_message_contact_photo { } .im_message_contact_name { font-weight: bold; - /*color: #3C6E97;*/ } a.im_message_photo_thumb, a.im_message_video_thumb { @@ -1565,8 +1397,6 @@ div.im_message_video_thumb { margin-top: 3px; border-radius: 3px; display: inline-block; - /*line-height: 0;*/ - width: 340px; } .icon-document, @@ -1624,12 +1454,6 @@ img.im_message_document_thumb { max-width: 100px; max-height: 100px; vertical-align: middle; - /*-webkit-filter: blur(1px); - -moz-filter: blur(1px); - -o-filter: blur(1px); - -ms-filter: blur(1px); - filter: blur(1px); - filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='1');*/ } .im_message_document_name_wrap { overflow: hidden; @@ -1789,39 +1613,6 @@ img.im_message_document_thumb { .im_content_message_wrap { margin: 8px 0px 8px 16px } -.icon-message-status { - background: #43A4DB; - border: 0; - display: block; - width: 10px; - height: 10px; - border-radius: 7px; - position: absolute; - margin-left: -26px; - margin-top: 13px; - opacity: 0; -} -.im_message_unread .icon-message-status { - opacity: 1.0; -} -.im_message_pending .icon-message-status { - opacity: 0.5; -} - -.im_message_error_btn { - display: none; -} -.im_message_error .im_message_error_btn { - display: inline; -} -.im_message_error_btn .icon-message-status { - background: #da564d; - opacity: 0.85; -} -.im_message_error_btn .icon-message-status:hover { - opacity: 1; -} - .im_message_date, .im_message_fwd_date { color: #adadad; @@ -1830,50 +1621,11 @@ img.im_message_document_thumb { } -@media (max-width: 900px) { - - /* Status ticks */ - .icon-message-status, - .im_message_error_btn, - .icon-message-status-tick { - display: none; - } - .im_message_out .icon-message-status-tick { - display: inline-block; - width: 16px; - height: 10px; - background: url(../img/icons/Checks2_2x.png); - background-size: 16px 10px; - top: 2px; - position: relative; - } - .is_1x .im_message_out .icon-message-status-tick { - background-image: url(../img/icons/Checks2_1x.png); - } - .im_message_pending .icon-message-status-tick { - display: none; - } - .im_message_unread .icon-message-status-tick { - background: url(../img/icons/Checks1_2x.png); - background-size: 16px 10px; - } - .is_1x .im_message_unread .icon-message-status-tick { - background-image: url(../img/icons/Checks1_1x.png); - } - .im_message_date { - padding: 0; - } -} - - div.im_message_author, div.im_message_body { display: block; overflow: hidden; } -.im_message_fwd_title { - display: none; -} .im_message_fwd_from { margin-top: 5px; } @@ -1884,11 +1636,7 @@ div.im_message_body { margin-top: 4px; margin-bottom: 4px; } -.im_message_fwd .im_message_fwd_author_wrap, -.im_message_fwd .im_message_text, -.im_message_fwd .im_message_media { - margin-left: 42px; -} + a.im_message_fwd_photo { position: absolute; margin-top: 1px; @@ -1960,7 +1708,6 @@ span.emoji { } .im_send_panel_wrap { - max-width: 526px; margin: 0 auto; padding: 10px 15px 22px 15px; } @@ -1968,18 +1715,9 @@ span.emoji { position: relative; } .im_send_form { - max-width: 389px; margin: 0 auto; position: absolute; bottom: 0; - left: 62px; - right: 62px; -} -.im_submit { - padding: 5px 12px; - font-size: 13px; - line-height: 17px; - min-width: 60px; } .im_send_dropbox_wrap { @@ -2062,15 +1800,10 @@ textarea.im_message_field { background-position: -10px -36px; opacity: 1; } - -.im_head_attach { - display: none; -} .im_attach_input, .im_media_attach_input { cursor: pointer; font-size: 72px !important; - /*visibility: hidden;*/ opacity: 0.01; position: absolute; z-index: 100; @@ -2116,34 +1849,7 @@ textarea.im_message_field { opacity: 1; } -.im_panel_peer_photo, -.im_panel_own_photo { - width: 50px; - height: 50px; - border-radius: 3px; - overflow: hidden; -} -div.im_panel_peer_photo { - cursor: pointer; - margin-left: 12px; - height: 55px; -} -div.im_panel_own_photo { - margin-right: 12px; -} -.im_panel_peer_online { - background: #6DBF69; - border: 1px solid #FFF; - display: block; - width: 11px; - height: 11px; - border-radius: 6px; - overflow: hidden; - position: absolute; - margin-top: -7px; - margin-left: 43px; -} .icon-online { background: #6DBF69; border: 1px solid #FFF; @@ -2185,209 +1891,27 @@ img.img_fullsize { font-size: 12px; } -.user_modal_window .modal-dialog { - max-width: 506px; -} - -.user_modal_photo_profile_wrap { - padding: 13px 12px; - margin-bottom: 15px; -} -.user_modal_image_wrap { - display: block; - width: 100px; - margin-right: 22px; - overflow: hidden; - border-radius: 3px; -} -.user_modal_image { - width: 100px; - height: 100px; -} -.user_modal_header { - font-weight: bold; - margin: 2px 0 7px; +/* Emoji area */ +.emoji-wysiwyg-editor:empty:before { + content: attr(placeholder); + color: #9aa2ab; } -.user_modal_status { - color: #999; - margin-bottom: 16px; +.emoji-wysiwyg-editor:active:before, +.emoji-wysiwyg-editor:focus:before { + content: none; } -.user_modal_main_btn { - border: 0; - font-size: 12px; - padding-left: 16px; - padding-right: 16px; - margin: 8px 10px 0 0; - float: left; -} -.user_modal_other_btn { - margin: 8px 0 0 0; - float: left; -} -.user_modal_other_btn .dropdown-toggle { - border: 0; +.emoji-wysiwyg-editor { font-size: 12px; -} -.user_modal_other_btn .dropdown-menu { - margin-left: -3px; -} - -.user_modal_settings_wrap { - margin-top: 25px; -} -.user_modal_notifications { - font-weight: bold; -} -.user_modal_clear { - margin-top: 20px; -} - - -.chat_modal_window .modal-dialog { - max-width: 506px; -} - -.chat_modal_header { - font-weight: bold; - margin: 0 0 10px; -} -.chat_modal_members_count { - color: #999; - margin-bottom: 16px; -} - -.chat_modal_actions_wrap { - position: relative; -} - -.chat_modal_main_btn { - border: 0; - font-size: 12px; - padding-left: 16px; - padding-right: 16px; - float: left; - position: relative; - overflow: hidden; - margin-right: 10px; - margin-top: 8px; -} -.chat_modal_invite_btn { - border: 0; - font-size: 12px; - padding-left: 16px; - padding-right: 16px; - float: left; - position: relative; - margin-right: 10px; - margin-top: 8px; -} -.chat_modal_delete_btn { - border: 0; - font-size: 12px; - padding-left: 16px; - padding-right: 16px; - float: left; - margin-right: 10px; - margin-top: 8px; -} -.chat_modal_other_btn { - margin-top: 8px; - float: left; -} -.chat_modal_other_btn .dropdown-toggle { - border: 0; - font-size: 12px; -} -.chat_modal_other_btn .dropdown-menu { - margin-left: -3px; -} - -.chat_modal_photo_update_link { - display: block; - padding: 5px 14px; - clear: both; - font-weight: normal; - line-height: 1.428571429; - color: #333333; - white-space: nowrap; - font-size: 13px; - overflow: hidden; - position: relative; -} -.chat_modal_photo_update_link:hover { - text-decoration: none; - color: #262626; - background-color: #f5f5f5; -} - -.chat_modal_settings_wrap { - margin-top: 10px; -} - -.chat_modal_participant_wrap { - padding: 8px 0; - border-top: 1px solid #F0F0F0; -} -.chat_modal_participant_wrap:first-child { - border-top: 0; -} -.chat_modal_participant_kick { - padding: 11px 0; - display: block; -} -.chat_modal_participant_name { - display: block; - color: #3C6E97; - font-weight: bold; - margin: 1px 0 2px; -} -.non_osx .chat_modal_participant_name { - font-size: 12px; -} -.chat_modal_participant_status { - color: #999; -} -a.chat_modal_participant_photo { - width: 40px; - height: 40px; - margin-right: 10px; - border-radius: 2px; - overflow: hidden; -} -img.chat_modal_participant_photo { - width: 40px; - height: 40px; -} -.chat_modal_members_forbidden { - color: #999; -} - - - - - -/* Emoji area */ -.emoji-wysiwyg-editor:empty:before { - content: attr(placeholder); - color: #9aa2ab; -} -.emoji-wysiwyg-editor:active:before, -.emoji-wysiwyg-editor:focus:before { - content: none; -} - -.emoji-wysiwyg-editor { - font-size: 12px; - margin-bottom: 10px; - padding: 6px; - min-height: 50px; - height: auto; - max-height: 300px; - overflow: auto; - line-height: 17px; + margin-bottom: 10px; + padding: 6px; + min-height: 50px; + height: auto; + max-height: 300px; + overflow: auto; + line-height: 17px; border: 1px solid #d9dbde; border-radius: 2px; @@ -2503,7 +2027,6 @@ img.chat_modal_participant_photo { border-radius: 2px; } .emoji-menu .emoji-items a:hover { - /*background-color: rgba(0,0,0, 0.5);*/ background-color: #edf2f5; } .emoji-menu:after { @@ -2515,28 +2038,6 @@ img.chat_modal_participant_photo { display: none; } -.emoji-menu-tail { - display: none; - background: url(../img/icons/IconsetW.png) -14px -268px no-repeat; - background-size: 42px 891px; - width: 14px; - height: 7px; - margin: 0 83px; -} -.is_1x .emoji-menu-tail { - background-image: url(../img/icons/IconsetW_1x.png); -} - - -.emoji-menu .nano > .nano-pane { - background : rgba(255,255,255,0.0); - right: -2px; -} -.emoji-menu .nano > .nano-pane > .nano-slider { - background: #d1d1d1; - margin: 0 3px 0 4px; -} - .error_modal_window .modal-dialog { max-width: 350px; @@ -2621,183 +2122,14 @@ img.chat_modal_participant_photo { } - - - - -.settings_modal_window .modal-dialog { - max-width: 482px; -} - .settings_modal_wrap .im_attach_input { z-index: 999; } -.settings_modal_settings { - padding: 4px 0; - margin: 0; -} - -.settings_modal_wrap .user_modal_main_btn { - position: relative; - overflow: hidden; -} - -.settings_profile_edit_form { - margin-bottom: 15px; -} -.settings_profile_image_wrap { - float: left; - width: 120px; - margin-right: 22px; -} -.settings_profile_first_name, -.settings_profile_last_name { - width: 180px; - float: left; - margin-bottom: 0; -} -.settings_profile_first_name label, -.settings_profile_last_name label { - margin-bottom: 3px; -} -.settings_profile_first_name { - margin-right: 22px; - margin-bottom: 10px; -} -.settings_profile_last_name { - margin-right: 10px; - margin-bottom: 15px; -} -.settings_profile_save { - padding-top: 21px; - float: left; -} -.settings_profile_save_btn { - width: 50px; -} - -.settings_profile_edit_form { - margin-bottom: 0; -} -.settings_profile_edit_form input { - font-size: 12px; - line-height: normal; - background: #F2F2F2; - border: 1px solid #F2F2F2; - border-radius: 0; - padding: 6px 6px 6px 6px; - margin-bottom: 0; - margin: 0; -} -.settings_profile_edit_form input:focus, -.settings_profile_edit_form input:active { - background-color: #FFF; -} - -.settings_send_choose_form input { - margin-top: 2px; -} -.settings_send_choose_form { - margin-bottom: 20px; -} - -.settings_user_phone, -.settings_version { - color: #999; -} - - -.tg_range_wrap { - line-height: 18px; -} -input.tg_range { - cursor: pointer; - outline: none !important; - -webkit-appearance: none; - width: 100%; - max-width: 362px; - display: inline-block; - background: #c7c7c7; - height: 3px; - line-height: 18px; - vertical-align: top; - margin: 8px 0; - border-radius: 2px; -} -input.tg_range::-moz-range-track { - cursor: pointer; - outline: none !important; - -webkit-appearance: none; - width: 100%; - max-width: 362px; - display: inline-block; - background: #c7c7c7; - height: 3px; - line-height: 18px; - vertical-align: top; - margin: 8px 0; - border-radius: 2px; -} -input.tg_range::-webkit-slider-thumb { - border: 0; - -webkit-appearance: none; - background: #568cb5; - width: 12px; - height: 12px; - border-radius: 6px; - overflow: hidden; -} - -input.tg_range::-moz-range-thumb { - border: 0; - background: #568cb5; - width: 12px; - height: 12px; - border-radius: 6px; - overflow: hidden; -} - -.icon-volume-outer { +.settings_external_service { + line-height: 0; display: inline-block; - background: #c7c7c7; - border-radius: 10px; - overflow: hidden; - height: 18px; - padding: 5px 8px; - margin: 0 9px 0 0; - width: 32px; -} -.icon-volume-inner { - display: block; - background: #fff; - float: left; - width: 2px; - vertical-align: bottom; - margin: 0 1px 0; - height: 8px; -} -.icon-volume-inner1 { - height: 2px; - margin-top: 6px; -} -.icon-volume-inner2 { - height: 4px; - margin-top: 4px; -} -.icon-volume-inner3 { - height: 6px; - margin-top: 2px; -} - -.icon-volume-outer1 .icon-volume-inner2, -.icon-volume-outer1 .icon-volume-inner3, -.icon-volume-outer1 .icon-volume-inner4, -.icon-volume-outer2 .icon-volume-inner3, -.icon-volume-outer2 .icon-volume-inner4, -.icon-volume-outer3 .icon-volume-inner4 { - display: none; + padding: 7px 9px; } - .settings_about_section_body { padding-right: 0; } @@ -2805,11 +2137,6 @@ input.tg_range::-moz-range-thumb { margin-top: 7px; margin-bottom: 3px; } -.settings_external_service { - line-height: 0; - display: inline-block; - padding: 7px 9px; -} .icon-github { display: inline-block; width: 59px; @@ -2839,27 +2166,6 @@ a:hover .icon-twitter { } /* Contacts modal */ -.contacts_modal_window .modal-dialog { - max-width: 456px; -} -.contacts_modal_header { - padding: 6px 0 18px; -} -.contacts_modal_edit_wrap { - position: absolute; - margin-top: -1px; -} -.contacts_modal_edit_link { - font-size: 14px; - padding: 5px 7px; -} -.contacts_modal_title { - font-size: 14px; - margin: 0; - text-align: center; - font-weight: bold; -} - .contacts_modal_search { padding: 0 0 14px; position: relative; @@ -2897,11 +2203,7 @@ a:hover .icon-twitter { opacity: 1; } -.contacts_modal_col { - margin-right: -17px; -} .contacts_scrollable_wrap { - padding: 0 17px 0 0; outline: none ! important; } .contacts_modal_contacts_empty { @@ -2961,6 +2263,44 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status, color: #91a6ba; } +.chat_modal_participant_wrap { + padding: 8px 0; + border-top: 1px solid #F0F0F0; +} +.chat_modal_participant_wrap:first-child { + border-top: 0; +} +.chat_modal_participant_kick { + padding: 11px 0; + display: block; +} +.chat_modal_participant_name { + display: block; + color: #3C6E97; + font-weight: bold; + margin: 1px 0 2px; +} +.non_osx .chat_modal_participant_name { + font-size: 12px; +} +.chat_modal_participant_status { + color: #999; +} +a.chat_modal_participant_photo { + width: 40px; + height: 40px; + margin-right: 10px; + border-radius: 2px; + overflow: hidden; +} +img.chat_modal_participant_photo { + width: 40px; + height: 40px; +} +.chat_modal_members_forbidden { + color: #999; +} + .icon-contact-tick { position: absolute; right: 10px; @@ -2978,9 +2318,6 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status, .contacts_modal_members_list .contacts_modal_contact_wrap:hover .icon-contact-tick { background-position: -9px -481px; opacity: 0.5; -} -.contacts_modal_members_list .contacts_modal_contact_wrap.active { - } .contacts_modal_members_list .contacts_modal_contact_wrap.active .icon-contact-tick { background-position: -9px -481px; @@ -3016,28 +2353,8 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status, .im_panel_to_top .im_edit_panel_wrap { background: #FFF; position: absolute; - /*width: 652px;*/ width: 100%; } -.im_edit_flush_link, -.im_edit_cancel_link { - display: block; - padding: 6px 17px; - border-radius: 2px; - overflow: hidden; - margin: 6px 6px; -} -.im_edit_cancel_link { - float: left; -} -.im_edit_flush_link { - float: right; -} -.im_edit_flush_link:hover, -.im_edit_cancel_link:hover { - background: #f2f6fa; - text-decoration: none; -} .im_edit_selected_actions { text-align: center; @@ -3059,76 +2376,14 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status, line-height: 34px; } -.icon-delete { - display: inline-block; - width: 12px; - height: 15px; - - background: url(../img/icons/IconsetW.png) -15px -319px no-repeat; - background-size: 42px 891px; -} -.is_1x .icon-delete { - background-image: url(../img/icons/IconsetW_1x.png); -} -.im_message_selected .im_message_outer_wrap, -.im_message_focus .im_message_outer_wrap { - background: #f2f6fa; -} - -.im_history_selectable .im_message_outer_wrap { - cursor: pointer; -} -.im_history_selectable .im_message_outer_wrap:hover { - background: #f2f6fa; -} - -.im_message_selected .im_message_date, -.im_message_selected .im_message_document_size, -.im_message_selected .im_message_audio_duration, -.im_message_selected .im_message_audio_size, -.im_message_selected .im_message_fwd_date, .im_message_focus .im_message_date, .im_message_focus .im_message_document_size, .im_message_focus .im_message_audio_duration, .im_message_focus .im_message_audio_size, -.im_message_focus .im_message_fwd_date, -.im_history_selectable .im_message_outer_wrap:hover .im_message_date, -.im_history_selectable .im_message_outer_wrap:hover .im_message_document_size, -.im_history_selectable .im_message_outer_wrap:hover .im_message_audio_duration, -.im_history_selectable .im_message_outer_wrap:hover .im_message_audio_size, -.im_history_selectable .im_message_outer_wrap:hover .im_message_fwd_date { +.im_message_focus .im_message_fwd_date { color: #68839c; } -.im_message_wrap { - max-width: 526px; - padding: 0 15px; - margin: 0 auto; - position: static; -} -@media (min-width: 901px) { - .im_message_wrap { - position: relative; - } -} -.im_content_message_select_area { - display: none; - cursor: pointer; - position: absolute; - width: 112px; - height: 52px; - margin: -8px 0 0 -112px; - -webkit-user-select: text; -} -@media (min-width: 1024px) { - .im_content_message_select_area { - display: block; - } - .im_message_wrap { - position: relative; - } -} - .icon-select-tick { display: none; width: 26px; @@ -3140,28 +2395,6 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status, .is_1x .icon-select-tick { background-image: url(../img/icons/IconsetW_1x.png); } -.im_history_selectable .icon-select-tick, -.im_content_message_select_area:hover .icon-select-tick { - display: inline-block; -} -.im_message_selected .icon-select-tick, -.im_history_selectable .im_message_outer_wrap:hover .icon-select-tick, -.im_content_message_select_area:hover .icon-select-tick { - background-position: -9px -481px; - opacity: 0.5; -} -.im_message_selected .icon-select-tick { - opacity: 1 !important; -} - - -/* Dialogs modal */ -.peer_select_window .modal-dialog { - max-width: 506px; -} -.peer_select_modal_wrap .modal-body { - padding: 0 2px 14px; -} /* Colorized user names @@ -3199,58 +2432,6 @@ ce671b orange margin-left: 8px; } - -.tooltip-inner { - background: rgba(0,0,0, 0.8); -} -.tooltip-arrow { - opacity: 0.8; -} - - -.im_dialogs_panel_dropdown { - margin-left: 8px; -} - -.im_dialogs_panel_dropdown .dropdown-toggle { - background: #F2F2F2; - display: block; - border-radius: 2px; - overflow: hidden; - padding: 11px 12px; - width: 38px; - height: 34px; -} -.im_dialogs_panel_dropdown .dropdown-toggle .icon-bar { - background: #b3b3b3; - display: block; - height: 2px; - margin-bottom: 3px; -} -.im_dialogs_panel_dropdown .dropdown-toggle .icon-bar:last-child { - margin-bottom: 0; -} - - - -.im_dialogs_panel_dropdown.open .dropdown-toggle { - background: #6690b0; -} -.im_dialogs_panel_dropdown.open .dropdown-toggle .icon-bar { - background: #fff; -} - -/* Import contact modal */ -.import_contact_modal_window .modal-dialog { - max-width: 480px; -} - -.modal-content-animated { - -webkit-transition: margin-top linear 0.2s; - transition: margin-top linear 0.2s; -} - - /* Gif documents */ .img_gif_with_progress_wrap { position: relative; @@ -3271,15 +2452,9 @@ ce671b orange padding: 1px; max-width: 100%; } - .img_gif_image { max-width: 100%; } -/*.img_gif_image_wrap img { - overflow: hidden; - border-radius: 2px; -}*/ - .img_gif_info_wrap { color: #FFF; font-size: 10px; @@ -3325,16 +2500,11 @@ ce671b orange font-weight: normal; } -.countries_modal_col { - max-height: 350px; -} - .countries_modal_search { padding: 0 0 12px; margin: 0 20px; position: relative; } - .countries_modal_search_field { font-size: 12px; line-height: normal; @@ -3371,33 +2541,9 @@ ce671b orange .countries_modal_search_clear:hover { opacity: 1; } - .countries_modal_wrap .modal-body { padding: 14px 0; } - -.countries_modal_col .nano > .nano-pane { - background : rgba(3,36,64,0.08); - width : 3px; - right: 6px; - top: 0; - -webkit-transition : .2s; - -moz-transition : .2s; - -o-transition : .2s; - transition : .2s; - -moz-border-radius : 0; - -webkit-border-radius : 0; - border-radius : 0; -} -.countries_modal_col .nano > .nano-pane > .nano-slider { - background : rgba(3,46,79,0.22); - margin: 0; - -moz-border-radius : 0; - -webkit-border-radius : 0; - border-radius : 0; -} - - .countries_scrollable_wrap a.countries_modal_country { clear: both; overflow: hidden; @@ -3507,10 +2653,6 @@ ce671b orange } } - -.changelog_modal_window .modal-dialog { - max-width: 506px; -} .changelog_card_wrap { text-align: center; padding: 12px 0 18px; diff --git a/app/css/desktop.css b/app/css/desktop.css new file mode 100644 index 00000000..434a5f5d --- /dev/null +++ b/app/css/desktop.css @@ -0,0 +1,834 @@ +/** initial setup **/ +.nano { + position : relative; + width : 100%; + height : 100%; + overflow : hidden; +} +.nano > .nano-content { + position : absolute; + overflow : scroll; + overflow-x : hidden; + top : 0; + right : 0; + bottom : 0; + left : 0; +} +.nano > .nano-content:focus { + outline: thin dotted; +} +.nano > .nano-content::-webkit-scrollbar { + display: none; +} +.has-scrollbar > .nano-content::-webkit-scrollbar { + display: block; +} +.nano > .nano-pane { + background : rgba(0,0,0,.25); + position : absolute; + width : 10px; + right : 0; + top : 0; + bottom : 0; + visibility : hidden\9; /* Target only IE7 and IE8 with this hack */ + opacity : .01; + -webkit-transition : .2s; + -moz-transition : .2s; + -o-transition : .2s; + transition : .2s; + -moz-border-radius : 5px; + -webkit-border-radius : 5px; + border-radius : 5px; +} +.nano > .nano-pane > .nano-slider { + background: #444; + background: rgba(0,0,0,.5); + position : relative; + margin : 0 1px; + -moz-border-radius : 3px; + -webkit-border-radius : 3px; + border-radius : 3px; +} +.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed { + visibility : visible\9; /* Target only IE7 and IE8 with this hack */ + opacity : 0.99; +} + +.emoji-menu .nano > .nano-pane { + background : rgba(255,255,255,0.0); + right: -2px; +} +.emoji-menu .nano > .nano-pane > .nano-slider { + background: #d1d1d1; + margin: 0 3px 0 4px; +} + +.countries_modal_col .nano > .nano-pane { + background : rgba(3,36,64,0.08); + width : 3px; + right: 6px; + top: 0; + -webkit-transition : .2s; + -moz-transition : .2s; + -o-transition : .2s; + transition : .2s; + -moz-border-radius : 0; + -webkit-border-radius : 0; + border-radius : 0; +} +.countries_modal_col .nano > .nano-pane > .nano-slider { + background : rgba(3,46,79,0.22); + margin: 0; + -moz-border-radius : 0; + -webkit-border-radius : 0; + border-radius : 0; +} + + + +.im_page_wrap { + background: #FFF; + max-width: 1000px; + min-width: 300px; + margin: 0 auto; + + -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); + + border-radius: 0 0 3px 3px; + overflow: hidden; +} + + +.im_page_footer { + font-size: 11px; + text-align: center; + color: #9cacb9; + line-height: 40px; +} +.im_page_footer_brand { + color: #9cacb9; + font-weight: bold; +} +.im_page_footer_brand:hover, +.im_page_footer_brand:active { + color: #8499aa; + text-decoration: none; +} + +.im_dialogs_col { + margin-right: -7px; +} +.im_dialogs_col_wrap { + float: left; + width: 31%; + border-right: 2px solid #E9EBED; + padding-bottom: 10px; +} +.im_dialogs_scrollable_wrap { + padding: 0 19px 0 12px; +} +.im_dialogs_col .nano > .nano-pane { + background : rgba(0,0,0,0.0); + width : 12px; + right: 0px; + -moz-border-radius : 0; + -webkit-border-radius : 0; + border-radius : 0; + -webkit-transition : none; + -moz-transition : none; + -o-transition : none; + transition : none; +} +.im_dialogs_col .nano > .nano-pane > .nano-slider { + background: #A5B1B9; + margin: 0 5px; + -moz-border-radius : 0; + -webkit-border-radius : 0; + border-radius : 0; +} + +.im_history_col_wrap { + float: left; + width: 69%; +} +.im_history_col .nano > .nano-pane, +.contacts_modal_col .nano > .nano-pane, +.im_dialogs_modal_col .nano > .nano-pane { + background : rgba(3,36,64,0.08); + width : 9px; + right: 0; + top: 0; + -moz-border-radius : 2px; + -webkit-border-radius : 2px; + border-radius : 2px; + + -webkit-transition : none; + -moz-transition : none; + -o-transition : none; + transition : none; +} +.contacts_modal_col .nano > .nano-pane { + width: 6px; + right: 7px; +} + +.im_dialogs_modal_col .nano > .nano-pane { + width: 6px; + right: 2px; +} +.im_dialogs_modal_col .im_dialogs_scrollable_wrap { + padding: 0 12px 0 12px; +} +.contacts_modal_col { + margin-right: -17px; +} +.contacts_scrollable_wrap { + padding: 0 17px 0 0; +} + +.im_history_col .nano > .nano-pane { + top: 10px; + right: 8px; +} +.im_history_col .nano > .nano-pane > .nano-slider, +.contacts_modal_col .nano > .nano-pane > .nano-slider, +.im_dialogs_modal_col .nano > .nano-pane > .nano-slider { + background : rgba(3,46,79,0.22); + margin: 0; + -moz-border-radius : 2px; + -webkit-border-radius : 2px; + border-radius : 2px; +} + + +.im_history_panel_wrap { + margin: 0 23px 0 15px; + cursor: pointer; + position: relative; + -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.12); + -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.12); + + position: relative; + z-index: 2; + min-height: 44px; +} +.im_history_panel { + padding: 10px 4px 0; +} +.im_history_panel_title h4 { + font-size: 17px; + line-height: 20px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + margin: 8px 0 6px; +} +.im_history_panel_title h4 small { + color: #999; + font-size: 13px; + margin-left: 5px; +} +.im_history_panel_info_link, +.im_history_panel_edit_link, +.im_history_panel_return_link, +.im_history_panel_media_dropdown .dropdown-toggle { + font-size: 13px; + font-weight: normal; + padding-top: 5px; + line-height: 1; +} +.im_history_panel_media_dropdown { + padding-top: 2px; +} +.im_history_panel_edit_link, +.im_history_panel_return_link, +.im_history_panel_media_dropdown { + font-size: 13px; + margin-right: 20px; +} +.im_history_panel_media_dropdown, +.im_history_panel_return_count { + margin-left: 5px; +} + +.im_history_panel_media_dropdown .dropdown-menu { + border-radius: 2px; + right: auto; + left: -15px; + margin-top: 11px; + padding: 0; + + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175); +} + +.im_history_no_dialogs_wrap { + margin: 122px 170px 60px; + text-align: center; +} + +.im_history_appending { + -webkit-transition: all ease-in-out 0.2s; + -moz-transition: all ease-in-out 0.2s; + -ms-transition: all ease-in-out 0.2s; + -o-transition: all ease-in-out 0.2s; + transition: all ease-in-out 0.2s; +} + +/* Contacts modal */ +.contacts_modal_window .modal-dialog { + max-width: 456px; +} +.contacts_modal_header { + padding: 6px 0 18px; +} +.contacts_modal_edit_wrap { + position: absolute; + margin-top: -1px; +} +.contacts_modal_edit_link { + font-size: 14px; + padding: 5px 7px; +} +.contacts_modal_title { + font-size: 14px; + margin: 0; + text-align: center; + font-weight: bold; +} + +.icon-message-status { + background: #43A4DB; + border: 0; + display: block; + width: 10px; + height: 10px; + border-radius: 7px; + position: absolute; + margin-left: -26px; + margin-top: 13px; + opacity: 0; +} +.im_message_unread .icon-message-status { + opacity: 1.0; +} +.im_message_pending .icon-message-status { + opacity: 0.5; +} +.im_message_error_btn { + display: none; +} +.im_message_error .im_message_error_btn { + display: inline; +} +.im_message_error_btn .icon-message-status { + background: #da564d; + opacity: 0.85; +} +.im_message_error_btn .icon-message-status:hover { + opacity: 1; +} + + +.im_edit_flush_link, +.im_edit_cancel_link { + display: block; + padding: 6px 17px; + border-radius: 2px; + overflow: hidden; + margin: 6px 6px; +} +.im_edit_cancel_link { + float: left; +} +.im_edit_flush_link { + float: right; +} +.im_edit_flush_link:hover, +.im_edit_cancel_link:hover { + background: #f2f6fa; + text-decoration: none; +} + +.im_submit { + padding: 6px 13px; + font-size: 13px; + line-height: 17px; + min-width: 60px; +} + +.im_message_selected .im_message_date, +.im_message_selected .im_message_document_size, +.im_message_selected .im_message_audio_duration, +.im_message_selected .im_message_audio_size, +.im_message_selected .im_message_fwd_date, +.im_history_selectable .im_message_outer_wrap:hover .im_message_date, +.im_history_selectable .im_message_outer_wrap:hover .im_message_document_size, +.im_history_selectable .im_message_outer_wrap:hover .im_message_audio_duration, +.im_history_selectable .im_message_outer_wrap:hover .im_message_audio_size, +.im_history_selectable .im_message_outer_wrap:hover .im_message_fwd_date { + color: #68839c; +} + +.im_content_message_select_area { + display: none; + cursor: pointer; + position: absolute; + width: 112px; + height: 52px; + margin: -8px 0 0 -112px; + -webkit-user-select: text; +} +@media (min-width: 1024px) { + .im_content_message_select_area { + display: block; + } + .im_message_wrap { + position: relative; + } +} + +.im_history_selectable .icon-select-tick, +.im_content_message_select_area:hover .icon-select-tick { + display: inline-block; +} +.im_message_selected .icon-select-tick, +.im_history_selectable .im_message_outer_wrap:hover .icon-select-tick, +.im_content_message_select_area:hover .icon-select-tick { + background-position: -9px -481px; + opacity: 0.5; +} +.im_message_selected .icon-select-tick { + opacity: 1 !important; +} + +/* Dialogs modal */ +.peer_select_window .modal-dialog { + max-width: 506px; +} +.peer_select_modal_wrap .modal-body { + padding: 0 2px 14px; +} + + +@media (max-width: 900px) { + + /* Status ticks */ + .icon-message-status, + .im_message_error_btn, + .icon-message-status-tick { + display: none; + } + .im_message_out .icon-message-status-tick { + display: inline-block; + width: 16px; + height: 10px; + background: url(../img/icons/Checks2_2x.png); + background-size: 16px 10px; + top: 2px; + position: relative; + } + .is_1x .im_message_out .icon-message-status-tick { + background-image: url(../img/icons/Checks2_1x.png); + } + .im_message_pending .icon-message-status-tick { + display: none; + } + .im_message_unread .icon-message-status-tick { + background: url(../img/icons/Checks1_2x.png); + background-size: 16px 10px; + } + .is_1x .im_message_unread .icon-message-status-tick { + background-image: url(../img/icons/Checks1_1x.png); + } + .im_message_date { + padding: 0; + } +} + + +.im_message_fwd .im_message_fwd_author_wrap, +.im_message_fwd .im_message_text, +.im_message_fwd .im_message_media { + margin-left: 42px; +} + +.im_send_panel_wrap { + max-width: 526px; +} +.im_send_form { + max-width: 389px; + left: 62px; + right: 62px; +} + +.im_panel_peer_photo, +.im_panel_own_photo { + width: 50px; + height: 50px; + border-radius: 3px; + overflow: hidden; +} +div.im_panel_peer_photo { + cursor: pointer; + margin-left: 12px; + height: 55px; +} +div.im_panel_own_photo { + margin-right: 12px; +} + +.im_panel_peer_online { + background: #6DBF69; + border: 1px solid #FFF; + display: block; + width: 11px; + height: 11px; + border-radius: 6px; + overflow: hidden; + position: absolute; + margin-top: -7px; + margin-left: 43px; +} + +/* Peer modals */ +.user_modal_window .modal-dialog { + max-width: 506px; +} +.user_modal_photo_profile_wrap { + padding: 13px 12px; + margin-bottom: 15px; +} +.user_modal_image_wrap { + display: block; + width: 100px; + margin-right: 22px; + overflow: hidden; + border-radius: 3px; +} +.user_modal_image { + width: 100px; + height: 100px; +} +.user_modal_header { + font-weight: bold; + margin: 2px 0 7px; +} +.user_modal_status { + color: #999; + margin-bottom: 16px; +} + +.user_modal_main_btn { + border: 0; + font-size: 12px; + padding-left: 16px; + padding-right: 16px; + margin: 8px 10px 0 0; + float: left; +} +.user_modal_other_btn { + margin: 8px 0 0 0; + float: left; +} +.user_modal_other_btn .dropdown-toggle { + border: 0; + font-size: 12px; +} +.user_modal_other_btn .dropdown-menu { + margin-left: -3px; +} + +.user_modal_settings_wrap { + margin-top: 25px; +} +.user_modal_notifications { + font-weight: bold; +} +.user_modal_clear { + margin-top: 20px; +} + + +.chat_modal_window .modal-dialog { + max-width: 506px; +} + +.chat_modal_header { + font-weight: bold; + margin: 0 0 10px; +} +.chat_modal_members_count { + color: #999; + margin-bottom: 16px; +} + +.chat_modal_actions_wrap { + position: relative; +} + +.chat_modal_main_btn { + border: 0; + font-size: 12px; + padding-left: 16px; + padding-right: 16px; + float: left; + position: relative; + overflow: hidden; + margin-right: 10px; + margin-top: 8px; +} +.chat_modal_invite_btn { + border: 0; + font-size: 12px; + padding-left: 16px; + padding-right: 16px; + float: left; + position: relative; + margin-right: 10px; + margin-top: 8px; +} +.chat_modal_delete_btn { + border: 0; + font-size: 12px; + padding-left: 16px; + padding-right: 16px; + float: left; + margin-right: 10px; + margin-top: 8px; +} +.chat_modal_other_btn { + margin-top: 8px; + float: left; +} +.chat_modal_other_btn .dropdown-toggle { + border: 0; + font-size: 12px; +} +.chat_modal_other_btn .dropdown-menu { + margin-left: -3px; +} + +.chat_modal_photo_update_link { + display: block; + padding: 5px 14px; + clear: both; + font-weight: normal; + line-height: 1.428571429; + color: #333333; + white-space: nowrap; + font-size: 13px; + overflow: hidden; + position: relative; +} +.chat_modal_photo_update_link:hover { + text-decoration: none; + color: #262626; + background-color: #f5f5f5; +} + +.chat_modal_settings_wrap { + margin-top: 10px; +} + +.settings_modal_window .modal-dialog { + max-width: 482px; +} +.settings_modal_settings { + padding: 4px 0; + margin: 0; +} +.settings_modal_wrap .user_modal_main_btn { + position: relative; + overflow: hidden; +} +.settings_profile_edit_form { + margin-bottom: 15px; +} +.settings_profile_image_wrap { + float: left; + width: 120px; + margin-right: 22px; +} +.settings_profile_first_name, +.settings_profile_last_name { + width: 180px; + float: left; + margin-bottom: 0; +} +.settings_profile_first_name label, +.settings_profile_last_name label { + margin-bottom: 3px; +} +.settings_profile_first_name { + margin-right: 22px; + margin-bottom: 10px; +} +.settings_profile_last_name { + margin-right: 10px; + margin-bottom: 15px; +} +.settings_profile_save { + padding-top: 21px; + float: left; +} +.settings_profile_save_btn { + width: 50px; +} + +.settings_profile_edit_form { + margin-bottom: 0; +} +.settings_profile_edit_form input { + font-size: 12px; + line-height: normal; + background: #F2F2F2; + border: 1px solid #F2F2F2; + border-radius: 0; + padding: 6px 6px 6px 6px; + margin-bottom: 0; + margin: 0; +} +.settings_profile_edit_form input:focus, +.settings_profile_edit_form input:active { + background-color: #FFF; +} + +.settings_send_choose_form input { + margin-top: 2px; +} +.settings_send_choose_form { + margin-bottom: 20px; +} + +.settings_user_phone, +.settings_version { + color: #999; +} +.icon-volume-outer { + display: inline-block; + background: #c7c7c7; + border-radius: 10px; + overflow: hidden; + height: 18px; + padding: 5px 8px; + margin: 0 9px 0 0; + width: 32px; +} +.icon-volume-inner { + display: block; + background: #fff; + float: left; + width: 2px; + vertical-align: bottom; + margin: 0 1px 0; + height: 8px; +} +.icon-volume-inner1 { + height: 2px; + margin-top: 6px; +} +.icon-volume-inner2 { + height: 4px; + margin-top: 4px; +} +.icon-volume-inner3 { + height: 6px; + margin-top: 2px; +} + +.icon-volume-outer1 .icon-volume-inner2, +.icon-volume-outer1 .icon-volume-inner3, +.icon-volume-outer1 .icon-volume-inner4, +.icon-volume-outer2 .icon-volume-inner3, +.icon-volume-outer2 .icon-volume-inner4, +.icon-volume-outer3 .icon-volume-inner4 { + display: none; +} + + +.im_message_selected .im_message_outer_wrap, +.im_message_focus .im_message_outer_wrap { + background: #f2f6fa; +} +.im_history_selectable .im_message_outer_wrap { + cursor: pointer; +} +.im_history_selectable .im_message_outer_wrap:hover { + background: #f2f6fa; +} + +.im_message_wrap { + max-width: 526px; + padding: 0 15px; + margin: 0 auto; +} + +.im_message_wrap { + position: static; +} +@media (min-width: 901px) { + .im_message_wrap { + position: relative; + } +} + +.tooltip-inner { + background: rgba(0,0,0, 0.8); +} +.tooltip-arrow { + opacity: 0.8; +} + +.im_dialogs_panel_dropdown { + margin-left: 8px; +} + +.im_dialogs_panel_dropdown .dropdown-toggle { + background: #F2F2F2; + display: block; + border-radius: 2px; + overflow: hidden; + padding: 11px 12px; + width: 38px; + height: 34px; +} +.im_dialogs_panel_dropdown .dropdown-toggle .icon-bar { + background: #b3b3b3; + display: block; + height: 2px; + margin-bottom: 3px; +} +.im_dialogs_panel_dropdown .dropdown-toggle .icon-bar:last-child { + margin-bottom: 0; +} + + + +.im_dialogs_panel_dropdown.open .dropdown-toggle { + background: #6690b0; +} +.im_dialogs_panel_dropdown.open .dropdown-toggle .icon-bar { + background: #fff; +} + +/* Import contact modal */ +.import_contact_modal_window .modal-dialog { + max-width: 480px; +} + +.modal-content-animated { + -webkit-transition: margin-top linear 0.2s; + transition: margin-top linear 0.2s; +} + +.countries_modal_col { + max-height: 350px; +} + +.changelog_modal_window .modal-dialog { + max-width: 506px; +} \ No newline at end of file diff --git a/app/css/app_mobile.css b/app/css/mobile.css similarity index 89% rename from app/css/app_mobile.css rename to app/css/mobile.css index 855f6739..40be67e9 100644 --- a/app/css/app_mobile.css +++ b/app/css/mobile.css @@ -1,5 +1,3 @@ -@media (max-width: 479px) { - html { background: #FFF; } @@ -19,6 +17,7 @@ html { .tg_page_head .navbar > .container .navbar-brand { padding-left: 9px; + outline: none; } .im_history_panel_edit_link { margin-right: 0; @@ -40,7 +39,7 @@ html { } .tg_page_head .navbar-inverse .navbar-toggle:hover, -.tg_page_head .navbar-inverse .navbar-toggle:active, +/*.tg_page_head .navbar-inverse .navbar-toggle:active,*/ .tg_page_head .navbar-inverse .navbar-toggle:focus, .tg_page_head .navbar-inverse .open .navbar-toggle { background-color: rgba(0,0,0,0.1); @@ -160,8 +159,8 @@ html { font-size: 13px; height: 46px; } -.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:hover, -.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:active { +.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:hover/*, +.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:active*/ { background-color: rgba(0,0,0,0.1); } .navbar-quick-nav .icon-back { @@ -233,7 +232,6 @@ html { margin-right: 0; } .navbar_offline .navbar-quick-nav li > a > .navbar-quick-back-title, -.navbar_offline .im_head_attach, .navbar_offline .navbar-search-wrap, .navbar_offline .navbar-history-edit { display: none; @@ -283,6 +281,12 @@ html { text-align: center; } +.mobile_scrollable_wrap { + overflow: hidden; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; +} + .login_form_wrap { border-radius: 0; @@ -291,6 +295,29 @@ html { -webkit-box-shadow: none; margin: 30px auto 20px; } +.login_form_wrap .btn-primary { + padding: 12px 13px; +} +.login_phone_country, +.login_phone_number { + height: 42px; +} + +.im_dialogs_empty_header { + font-size: 19px; + margin-bottom: 10px; +} +.im_dialogs_empty_lead { + font-size: 14px; + line-height: 160%; +} +.im_dialogs_add_contact, +.im_dialogs_import_phonebook { + padding: 12px 13px; +} +.im_dialogs_add_contact + .im_dialogs_import_phonebook { + margin-top: 10px; +} .im_page_wrap { background: none; @@ -298,15 +325,6 @@ html { border: 0; overflow: hidden; } - -.im_page_footer { - display: none; -} - -.im_panel_own_photo, -.im_panel_peer_photo { - display: none; -} .im_history_selectable .im_message_outer_wrap:hover, .im_message_selected { background: #e1e9f0; @@ -425,10 +443,6 @@ html { width: auto; float: none; } -.im_message_audio_actions, -.im_message_document_actions { - display: none; -} .im_message_audio_player_wrap { height: 38px; line-height: 38px; @@ -486,9 +500,6 @@ img.im_message_video_thumb, -ms-filter: none; filter: none; } -.im_message_video .im_message_document_info { - display: none; -} .im_message_document_thumb_wrap { position: absolute; @@ -508,12 +519,18 @@ img.im_message_video_thumb, .im_send_panel_wrap { padding: 10px 0 12px; } -.icon-select-tick { - margin: 10px 0 0 -24px + +.im_history_scrollable_wrap.im_history_to_bottom { + overflow: hidden; + position: relative; } .im_history { position: static; } + +.icon-select-tick { + margin: 10px 0 0 -24px +} .im_message_wrap { padding: 0 8px; } @@ -578,6 +595,7 @@ img.im_message_video_thumb, } .im_message_date { font-size: 12px; + padding-left: 4px; } .im_message_out .im_message_meta { right: auto; @@ -701,20 +719,10 @@ a.im_message_from_photo { } -.form-control { +.im_dialogs_search_field, +.contacts_modal_search_field { font-size: 1.2em; } -.im_history_typing_wrap { - display: none; -} -.im_history_panel_info_link { - display: none; -} - -.im_edit_flush_link, -.im_edit_cancel_link { - display: none; -} .im_edit_delete_btn, .im_edit_forward_btn { background: none !important; @@ -734,27 +742,10 @@ a.im_message_from_photo { .im_edit_forward_btn strong { font-weight: normal; } - -.im_edit_panel_border { - display: none; -} .im_edit_panel_wrap { padding: 5px 0; margin: 0; } -.im_history_col .nano > .nano-pane { - top: 3px; - right: 3px; - width: 6px; -} -.im_history_col .nano > .nano-pane > .nano-slider, -.contacts_modal_col .nano > .nano-pane > .nano-slider, -.im_dialogs_modal_col .nano > .nano-pane > .nano-slider { - background : rgba(3,46,79,0.22); - border-radius: 3px; - margin: 0; -} - .im_dialogs_col_wrap { @@ -776,18 +767,6 @@ a.im_message_from_photo { .im_page_peer_not_selected .im_dialogs_col_wrap { display: block; } -.im_dialogs_col { - margin-right: 0; -} -.im_page_peer_not_selected .im_dialogs_col_wrap .nano-pane { - width: 6px; - right: 3px; -} -.im_page_peer_not_selected .im_dialogs_col_wrap .nano-pane > .nano-slider { - background : rgba(3,46,79,0.22); - border-radius: 3px; - margin: 0; -} .im_dialogs_panel { display: none; @@ -797,20 +776,13 @@ a.im_message_from_photo { .im_dialogs_panel_search.im_dialogs_panel { display: block; } -.im_dialogs_panel_dropdown { - display: none; -} .im_page_split .im_dialogs_search { margin-right: 0; } -.im_dialogs_modal_col .im_dialogs_scrollable_wrap, -.im_dialogs_scrollable_wrap { - padding: 0; -} .im_dialogs_scrollable_wrap a.im_dialog { - border-bottom: 1px solid #d4d4d4; - border-top: 1px solid #d4d4d4; + border-bottom: 1px solid #eee; + border-top: 1px solid #eee; margin-top: -1px; border-radius: 0 !important; padding-right: 11px; @@ -863,7 +835,9 @@ a.im_dialog:hover .im_dialog_message_text, a.im_dialog_selected .im_dialog_message_text { color: #8f8f8f; } - +.im_message_fwd_title { + display: none; +} .im_grouped_fwd_start .im_message_fwd_title { display: block; color: #8a8a8a; @@ -902,12 +876,6 @@ a.im_message_fwd_author { margin-left: 50px; } -.im_grouped_fwd_short .im_message_fwd.im_message_out .im_message_fwd_author_wrap, -.im_grouped_fwd_short .im_message_fwd.im_message_out .im_message_text, -.im_grouped_fwd_short .im_message_fwd.im_message_out .im_message_media { - /*margin-left: 0;*/ -} - .im_dialogs_scrollable_wrap a.im_dialog:hover, @@ -916,32 +884,32 @@ a.im_message_fwd_author { .im_dialogs_scrollable_wrap .active a.im_dialog:hover, .im_dialogs_scrollable_wrap .active a.im_dialog_selected { border-radius: 0; - background-color: #f0f0f0; + background-color: #f4f4f4; } - -.modal.page_modal { +.modal.mobile_modal { background: #FFF; + padding: 0; } -.page_modal .modal-content { +.mobile_modal .modal-content { border-radius: 0; box-shadow: none; } -.page_modal .modal-dialog { +.mobile_modal .modal-dialog { margin: 0; } -.page_modal .modal-content .modal-body { +.mobile_modal .modal-content .modal-body { padding-left: 0; padding-right: 0; } -.page_modal .modal-footer { +.mobile_modal .modal-footer { padding-left: 0; padding-right: 0; padding-bottom: 9px; } .mobile_modal_body, -.page_modal .modal-content .mobile_modal_body { +.mobile_modal .modal-content .mobile_modal_body { padding: 9px; } @@ -1092,9 +1060,6 @@ a.mobile_modal_action .tg_checkbox_label { .is_1x .im_submit { background-image: url(../img/icons/IconsetW_1x.png); } -.im_submit_text { - display: none; -} .im_attach { position: absolute; @@ -1124,7 +1089,6 @@ a.mobile_modal_action .tg_checkbox_label { opacity: 1; } -.im_media_attach, .im_attach, .im_send_form_empty .im_submit { display: none; @@ -1194,65 +1158,27 @@ a.mobile_modal_action .tg_checkbox_label { .emoji-menu { margin-left: -20px; - margin-top: -267px; + margin-top: -202px; width: 262px; } +.emoji-menu .emoji-items-wrap { + height: 106px; +} .emoji-menu .emoji-items a { padding: 5px; } -.im_head_attach { - display: block; - float: right; - cursor: pointer; - overflow: hidden; - position: relative; - margin: 5px 0 5px 5px; - height: 34px; - border-radius: 4px; - padding: 3px 7px; - border: 1px solid #497495; -} -.navbar_peer_not_selected .im_head_attach { - display: none; -} -.im_head_attach:active { - background-color: rgba(255,255,255,0.1); -} - -.im_head_attach .icon-paperclip { - display: inline-block; - width: 21px; - height: 22px; - vertical-align: text-top; - opacity: 0.8; - background: url(../img/icons/MobileIcons_2x.png) 0 -30px no-repeat; - background-size: 21px 52px; -} -.is_1x .im_head_attach .icon-paperclip { - background-image: url(../img/icons/MobileIcons_1x.png); -} -.im_head_attach:active .icon-paperclip { - opacity: 1; -} .contacts_modal_search { padding: 3px 0 12px; } .contacts_modal_col { - margin-right: -12px; -} -.contacts_scrollable_wrap { - padding-right: 12px; -} -.contacts_modal_col .nano > .nano-pane { - width: 6px; - right: 5px; + margin: 0 -9px; } .contacts_modal_members_list a.contacts_modal_contact { - padding: 8px 0; + padding: 8px 9px; border-radius: 0; - border-bottom: 1px solid #e0e0e0; + border-bottom: 1px solid #eee; } .contacts_modal_members_list li.contacts_modal_contact_wrap { margin: 0; @@ -1279,14 +1205,10 @@ a.mobile_modal_action .tg_checkbox_label { } .countries_modal_col { margin: 0 -9px; - max-height: none; } .countries_modal_members_list { padding: 0 12px 0 12px; } .countries_scrollable_wrap a.countries_modal_country { padding: 8px 8px; -} - - -} +} \ No newline at end of file diff --git a/app/index.html b/app/index.html index c87e26af..391f44f3 100644 --- a/app/index.html +++ b/app/index.html @@ -1,5 +1,5 @@ - +
@@ -8,9 +8,7 @@ - - @@ -77,6 +75,7 @@ PRODUCTION_ONLY_END--> + diff --git a/app/js/app.js b/app/js/app.js index c382122c..3f4f3b4a 100644 --- a/app/js/app.js +++ b/app/js/app.js @@ -53,21 +53,9 @@ config(['$locationProvider', '$routeProvider', '$compileProvider', 'StorageProvi StorageProvider.setPrefix('t_'); } - $routeProvider.when('/', {templateUrl: 'partials/welcome.html', controller: 'AppWelcomeController'}); - $routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: 'AppLoginController'}); - $routeProvider.when('/im', {templateUrl: 'partials/im.html', controller: 'AppIMController', reloadOnSearch: false}); + $routeProvider.when('/', {templateUrl: templateUrl('welcome'), controller: 'AppWelcomeController'}); + $routeProvider.when('/login', {templateUrl: templateUrl('login'), controller: 'AppLoginController'}); + $routeProvider.when('/im', {templateUrl: templateUrl('im'), controller: 'AppIMController', reloadOnSearch: false}); $routeProvider.otherwise({redirectTo: '/'}); }]); - - -(function () { - var classes = [ - Config.Navigator.osX ? 'osx' : 'non_osx', - Config.Navigator.retina ? 'is_2x' : 'is_1x' - ]; - if (Config.Modes.ios_standalone) { - classes.push('ios_standalone'); - } - $(document.body).addClass(classes.join(' ')); -})(); \ No newline at end of file diff --git a/app/js/controllers.js b/app/js/controllers.js index 40a0a527..70d40b66 100644 --- a/app/js/controllers.js +++ b/app/js/controllers.js @@ -43,18 +43,10 @@ angular.module('myApp.controllers', ['myApp.i18n']) $scope.callPending = {}; $scope.chooseCountry = function () { - var tUrl = 'partials/country_select_modal.html', - className = 'countries_modal_window page_modal'; - - if (Config.Navigator.mobile) { - tUrl = 'partials/mobile/country_select_modal.html'; - className += ' mobile_modal'; - } - var modal = $modal.open({ - templateUrl: tUrl, + templateUrl: templateUrl('country_select_modal'), controller: 'CountrySelectModalController', - windowClass: className + windowClass: 'countries_modal_window mobile_modal' }); modal.result.then(selectCountry); @@ -335,18 +327,10 @@ angular.module('myApp.controllers', ['myApp.i18n']) $scope.historyState = {selectActions: false, typing: []}; $scope.openSettings = function () { - var tUrl = 'partials/settings_modal.html', - className = 'settings_modal_window page_modal'; - - if (Config.Navigator.mobile) { - tUrl = 'partials/mobile/settings_modal.html'; - className += ' mobile_modal'; - } - $modal.open({ - templateUrl: tUrl, + templateUrl: templateUrl('settings_modal'), controller: 'SettingsModalController', - windowClass: className + windowClass: 'settings_modal_window mobile_modal' }); } @@ -366,10 +350,10 @@ angular.module('myApp.controllers', ['myApp.i18n']) scope.userIDs = userIDs; $modal.open({ - templateUrl: 'partials/chat_create_modal.html', + templateUrl: templateUrl('chat_create_modal'), controller: 'ChatCreateModalController', scope: scope, - windowClass: 'group_edit_modal_window' + windowClass: 'group_edit_modal_window mobile_modal' }); } @@ -379,7 +363,9 @@ angular.module('myApp.controllers', ['myApp.i18n']) $scope.importContact = function () { AppUsersManager.openImportContact().then(function (foundContact) { if (foundContact) { - $scope.$broadcast('contact_imported'); + $rootScope.$broadcast('history_focus', { + peerString: AppUsersManager.getUserString(foundContact) + }); } }); }; @@ -502,6 +488,14 @@ angular.module('myApp.controllers', ['myApp.i18n']) offset++; } $scope.dialogs.unshift(wrappedDialog); + + if (!peersInDialogs[dialog.peerID]) { + peersInDialogs[dialog.peerID] = true; + if (contactsShown) { + showMoreContacts(); + } + } + }); $scope.$on('dialog_flush', function (e, dialog) { @@ -524,12 +518,6 @@ angular.module('myApp.controllers', ['myApp.i18n']) } }); - $scope.$on('contact_imported', function () { - if (contactsShown) { - loadDialogs(); - } - }) - var prevMessages = false; $scope.$watchCollection('search', function () { if ($scope.search.messages != prevMessages) { @@ -554,20 +542,22 @@ angular.module('myApp.controllers', ['myApp.i18n']) } }); - if (Config.Navigator.mobile) { + if (Config.Mobile) { $scope.$watch('curDialog.peer', function () { $scope.$broadcast('ui_dialogs_update') }); } $scope.importPhonebook = function () { - PhonebookContactsService.openPhonebookImport().result.then(function (foundContacts) { - if (contactsShown && foundContacts.length) { - loadDialogs(); - } - }) + PhonebookContactsService.openPhonebookImport(); }; + $scope.$on('contacts_update', function () { + if (contactsShown) { + showMoreContacts(); + } + }); + $scope.searchClear = function () { $scope.search.query = ''; $scope.search.messages = false; @@ -636,14 +626,6 @@ angular.module('myApp.controllers', ['myApp.i18n']) }); }; - $scope.importPhonebook = function () { - PhonebookContactsService.openPhonebookImport().result.then(function (foundContacts) { - if (contactsShown && foundContacts.length) { - loadDialogs(); - } - }) - }; - function loadDialogs (force) { offset = 0; maxID = 0; @@ -675,6 +657,7 @@ angular.module('myApp.controllers', ['myApp.i18n']) AppMessagesManager.getDialogs('', maxID, 100); if (!dialogsResult.dialogs.length) { $scope.isEmpty.dialogs = true; + showMoreDialogs(); } } else { showMoreDialogs(); @@ -683,36 +666,40 @@ angular.module('myApp.controllers', ['myApp.i18n']) }); } + function showMoreContacts () { + contactsShown = true; + + var curJump = ++jump; + AppUsersManager.getContacts($scope.search.query).then(function (contactsList) { + if (curJump != jump) return; + $scope.contacts = []; + angular.forEach(contactsList, function(userID) { + if (peersInDialogs[userID] === undefined) { + $scope.contacts.push({ + userID: userID, + user: AppUsersManager.getUser(userID), + userPhoto: AppUsersManager.getUserPhoto(userID, 'User'), + peerString: AppUsersManager.getUserString(userID) + }); + } + }); + + if (contactsList.length) { + delete $scope.isEmpty.contacts; + } else if (!$scope.search.query) { + $scope.isEmpty.contacts = true; + } + }); + $scope.$broadcast('ui_dialogs_append'); + } + function showMoreDialogs () { if (contactsShown && (!hasMore || !offset)) { return; } if (!hasMore && !$scope.search.messages && ($scope.search.query || !$scope.dialogs.length)) { - contactsShown = true; - - var curJump = ++jump; - AppUsersManager.getContacts($scope.search.query).then(function (contactsList) { - if (curJump != jump) return; - $scope.contacts = []; - angular.forEach(contactsList, function(userID) { - if (peersInDialogs[userID] === undefined) { - $scope.contacts.push({ - userID: userID, - user: AppUsersManager.getUser(userID), - userPhoto: AppUsersManager.getUserPhoto(userID, 'User'), - peerString: AppUsersManager.getUserString(userID) - }); - } - }); - - if (contactsList.length) { - delete $scope.isEmpty.contacts; - } else if (!$scope.search.query) { - $scope.isEmpty.contacts = true; - } - }); - $scope.$broadcast('ui_dialogs_append'); + showMoreContacts(); return; } @@ -970,7 +957,7 @@ angular.module('myApp.controllers', ['myApp.i18n']) var curJump = jump, curMoreJump = moreJump, inputMediaFilter = $scope.historyFilter.mediaType && {_: inputMediaFilters[$scope.historyFilter.mediaType]}, - limit = Config.Navigator.mobile ? 20 : 0, + limit = Config.Mobile ? 20 : 0, getMessagesPromise = inputMediaFilter ? AppMessagesManager.getSearch($scope.curDialog.inputPeer, '', inputMediaFilter, maxID, limit) : AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID, limit); @@ -1021,9 +1008,6 @@ angular.module('myApp.controllers', ['myApp.i18n']) else if (forceRecent) { limit = 10; } - else if (Config.Navigator.mobile) { - limit = 20; - } moreActive = false; morePending = false; @@ -1067,6 +1051,9 @@ angular.module('myApp.controllers', ['myApp.i18n']) if ($scope.skippedHistory) { delete message.unread; } + if (historyResult.unreadOffset) { + message.unreadAfter = true; + } peerHistory.messages.push(message); }); peerHistory.messages.reverse(); @@ -1477,7 +1464,7 @@ angular.module('myApp.controllers', ['myApp.i18n']) AppPhotosManager.downloadPhoto($scope.photoID); }; - if (!$scope.messageID || Config.Navigator.mobile) { + if (!$scope.messageID || Config.Mobile) { $scope.nav.next = function () { $modalInstance.close(); } @@ -1499,7 +1486,7 @@ angular.module('myApp.controllers', ['myApp.i18n']) }; - if (Config.Navigator.mobile) { + if (Config.Mobile) { $scope.canForward = true; $scope.canDelete = true; return; @@ -1822,9 +1809,9 @@ angular.module('myApp.controllers', ['myApp.i18n']) }; $modal.open({ - templateUrl: edit ? 'partials/edit_contact_modal.html' : 'partials/import_contact_modal.html', + templateUrl: templateUrl(edit ? 'edit_contact_modal' : 'import_contact_modal'), controller: 'ImportContactModalController', - windowClass: 'import_contact_modal_window page_modal', + windowClass: 'import_contact_modal_window mobile_modal', scope: scope }).result.then(function (foundUserID) { if ($scope.userID == foundUserID) { @@ -2015,10 +2002,10 @@ angular.module('myApp.controllers', ['myApp.i18n']) scope.chatID = $scope.chatID; $modal.open({ - templateUrl: 'partials/chat_edit_modal.html', + templateUrl: templateUrl('chat_edit_modal'), controller: 'ChatEditModalController', scope: scope, - windowClass: 'group_edit_modal_window' + windowClass: 'group_edit_modal_window mobile_modal' }); } @@ -2109,9 +2096,9 @@ angular.module('myApp.controllers', ['myApp.i18n']) $scope.editProfile = function () { $modal.open({ - templateUrl: 'partials/profile_edit_modal.html', + templateUrl: templateUrl('profile_edit_modal'), controller: 'ProfileEditModalController', - windowClass: 'profile_edit_modal_window page_modal' + windowClass: 'profile_edit_modal_window mobile_modal' }); }; @@ -2298,6 +2285,9 @@ angular.module('myApp.controllers', ['myApp.i18n']) }; $scope.$watch('search.query', updateContacts); + $scope.$on('contacts_update', function () { + updateContacts($scope.search && $scope.search.query || ''); + }); $scope.toggleEdit = function (enabled) { $scope.action = enabled ? 'edit' : ''; @@ -2338,16 +2328,13 @@ angular.module('myApp.controllers', ['myApp.i18n']) selectedUserIDs.push(userID); }); AppUsersManager.deleteContacts(selectedUserIDs).then(function () { - resetSelected(); - updateContacts($scope.search.query); + $scope.toggleEdit(false); }); } }; $scope.importContact = function () { - AppUsersManager.openImportContact().then(function () { - updateContacts($scope.search && $scope.search.query || ''); - }); + AppUsersManager.openImportContact(); }; }) diff --git a/app/js/directives.js b/app/js/directives.js index d3b6967e..7fb4ef06 100644 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -15,14 +15,14 @@ angular.module('myApp.directives', ['myApp.filters']) .directive('myHead', function() { return { restrict: 'AE', - templateUrl: 'partials/head.html' + templateUrl: templateUrl('head') }; }) .directive('myDialog', function() { return { restrict: 'AE', - templateUrl: 'partials/dialog.html' + templateUrl: templateUrl('dialog') }; }) @@ -38,8 +38,8 @@ angular.module('myApp.directives', ['myApp.filters']) pendingClass = 'im_message_pending'; return { - link: link, - templateUrl: 'partials/message.html' + templateUrl: templateUrl('message'), + link: link }; function link($scope, element, attrs) { @@ -101,29 +101,33 @@ angular.module('myApp.directives', ['myApp.filters']) } }); - if ($scope.historyMessage.unread) { - var deregisterUnreadAfter; - if (!$scope.historyMessage.out) { - var applyUnreadAfter = function () { - if (unreadAfter != ($scope.historyUnreadAfter == $scope.historyMessage.id)) { - unreadAfter = !unreadAfter; - if (unreadAfter) { - if (unreadAfterSplit) { - unreadAfterSplit.show(); - } else { - unreadAfterSplit = $(unreadSplitHtml).prependTo(element); - } + var deregisterUnreadAfter; + if (!$scope.historyMessage.out && + ($scope.historyMessage.unread || $scope.historyMessage.unreadAfter)) { + var applyUnreadAfter = function () { + if ($scope.peerHistory.peerID != $scope.historyPeer.id) { + return; + } + if (unreadAfter != ($scope.historyUnreadAfter == $scope.historyMessage.id)) { + unreadAfter = !unreadAfter; + if (unreadAfter) { + if (unreadAfterSplit) { + unreadAfterSplit.show(); } else { - unreadAfterSplit.hide(); - if (deregisterUnreadAfter) { - deregisterUnreadAfter(); - } + unreadAfterSplit = $(unreadSplitHtml).prependTo(element); + } + } else { + unreadAfterSplit.hide(); + if (deregisterUnreadAfter) { + deregisterUnreadAfter(); } } - }; - applyUnreadAfter(); - deregisterUnreadAfter = $scope.$on('messages_unread_after', applyUnreadAfter); - } + } + }; + applyUnreadAfter(); + deregisterUnreadAfter = $scope.$on('messages_unread_after', applyUnreadAfter); + } + if ($scope.historyMessage.unread) { element.addClass(unreadClass); var deregisterUnread = $scope.$on('messages_read', function () { if (!$scope.historyMessage.unread) { @@ -158,42 +162,42 @@ angular.module('myApp.directives', ['myApp.filters']) .directive('myServiceMessage', function() { return { - templateUrl: 'partials/message_service.html' + templateUrl: templateUrl('message_service') }; }) .directive('myMessagePhoto', function() { return { - templateUrl: 'partials/message_attach_photo.html' + templateUrl: templateUrl('message_attach_photo') }; }) .directive('myMessageVideo', function() { return { - templateUrl: 'partials/message_attach_video.html' + templateUrl: templateUrl('message_attach_video') }; }) .directive('myMessageDocument', function() { return { - templateUrl: 'partials/message_attach_document.html' + templateUrl: templateUrl('message_attach_document') }; }) .directive('myMessageAudio', function() { return { - templateUrl: 'partials/message_attach_audio.html' + templateUrl: templateUrl('message_attach_audio') }; }) .directive('myMessageMap', function() { return { - templateUrl: 'partials/message_attach_map.html' + templateUrl: templateUrl('message_attach_map') }; }) .directive('myMessageContact', function() { return { - templateUrl: 'partials/message_attach_contact.html' + templateUrl: templateUrl('message_attach_contact') }; }) .directive('myMessagePending', function() { return { - templateUrl: 'partials/message_attach_pending.html' + templateUrl: templateUrl('message_attach_pending') }; }) @@ -365,7 +369,7 @@ angular.module('myApp.directives', ['myApp.filters']) dialogsColWrap = $('.im_dialogs_col_wrap')[0], scrollableWrap = $('.im_dialogs_scrollable_wrap', element)[0], headWrap = $('.tg_page_head')[0], - panelWrapSelector = Config.Navigator.mobile && attrs.modal + panelWrapSelector = Config.Mobile && attrs.modal ? '.mobile_modal_body .im_dialogs_panel' : '.im_dialogs_panel', panelWrap = $(panelWrapSelector)[0], @@ -435,7 +439,7 @@ angular.module('myApp.directives', ['myApp.filters']) $(element).css({ height: $($window).height() - (panelWrap ? panelWrap.offsetHeight : 58) - - (Config.Navigator.mobile ? 46 : 200) + (Config.Mobile ? 46 : 200) }); updateScroller(); return; @@ -491,7 +495,7 @@ angular.module('myApp.directives', ['myApp.filters']) height: $($window).height() - (panelWrap && panelWrap.offsetHeight || 0) - (searchWrap && searchWrap.offsetHeight || 0) - - (Config.Navigator.mobile ? 64 : 200) + (Config.Mobile ? 64 : 200) }); $(contactsWrap).nanoScroller(); } @@ -525,7 +529,7 @@ angular.module('myApp.directives', ['myApp.filters']) height: $($window).height() - (panelWrap && panelWrap.offsetHeight || 0) - (searchWrap && searchWrap.offsetHeight || 0) - - (Config.Navigator.mobile ? 46 + 18 : 200) + - (Config.Mobile ? 46 + 18 : 200) }); $(countriesWrap).nanoScroller(); } @@ -828,7 +832,7 @@ angular.module('myApp.directives', ['myApp.filters']) var marginTop = scrollableWrap.offsetHeight - historyMessagesEl.offsetHeight - 20 - - (Config.Navigator.mobile ? 0 : 49); + - (Config.Mobile ? 0 : 49); if (historyMessagesEl.offsetHeight > 0 && marginTop > 0) { $(historyMessagesEl).css({marginTop: marginTop}); @@ -892,7 +896,7 @@ angular.module('myApp.directives', ['myApp.filters']) var self = this; $scope.$apply(function () { $scope.draftMessage.files = Array.prototype.slice.call(self.files); - $scope.draftMessage.isMedia = $(self).hasClass('im_media_attach_input') || Config.Navigator.mobile; + $scope.draftMessage.isMedia = $(self).hasClass('im_media_attach_input') || Config.Mobile; setTimeout(function () { try { self.value = ''; @@ -1203,7 +1207,7 @@ angular.module('myApp.directives', ['myApp.filters']) return { link: link, transclude: true, - templateUrl: 'partials/full_photo.html', + templateUrl: templateUrl('full_photo'), scope: { fullPhoto: '=', thumbLocation: '=' @@ -1286,7 +1290,7 @@ angular.module('myApp.directives', ['myApp.filters']) return { link: link, transclude: true, - templateUrl: 'partials/full_video.html', + templateUrl: templateUrl('full_video'), scope: { video: '=' } @@ -1353,7 +1357,7 @@ angular.module('myApp.directives', ['myApp.filters']) return { link: link, - templateUrl: 'partials/full_gif.html', + templateUrl: templateUrl('full_gif'), scope: { document: '=' } @@ -1550,7 +1554,7 @@ angular.module('myApp.directives', ['myApp.filters']) function link($scope, element, attrs) { attrs.$observe('myModalWidth', function (newW) { - $(element[0].parentNode.parentNode).css({width: parseInt(newW) + (Config.Navigator.mobile ? 0 : 36)}); + $(element[0].parentNode.parentNode).css({width: parseInt(newW) + (Config.Mobile ? 0 : 36)}); }); }; @@ -1653,8 +1657,8 @@ angular.module('myApp.directives', ['myApp.filters']) function link($scope, element, attrs) { var updateMargin = function () { - if (Config.Navigator.mobile && - $(element[0].parentNode.parentNode.parentNode).hasClass('page_modal')) { + if (Config.Mobile && + $(element[0].parentNode.parentNode.parentNode).hasClass('mobile_modal')) { return; } var height = element[0].parentNode.offsetHeight, diff --git a/app/js/directives_mobile.js b/app/js/directives_mobile.js new file mode 100644 index 00000000..5e3374a7 --- /dev/null +++ b/app/js/directives_mobile.js @@ -0,0 +1,433 @@ +/*! + * Webogram v0.3.0 - messaging web application for MTProto + * https://github.com/zhukov/webogram + * Copyright (C) 2014 Igor ZhukovThis is an unofficial web-client for the Telegram Messenger.
+It's still an alpha-version and may not be 200% reliable
+