diff --git a/app/css/app.css b/app/css/app.css index 7ce1ede4..da0e1f95 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -2,30 +2,27 @@ html { display: none; - background: #dee4e9 url(../img/bg_tile.png) 0 0 repeat; + background: #e7ebf0; overflow: visible; } body { color: #000; background: none; - font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif; + font: 12px/18px 'Open Sans', "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif; overflow: visible; } -.font-light { - font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Light", Helvetica, Arial , Verdana, sans-serif; - font-weight: 300; -} -body.non_osx, -.non_osx .font-light { - font: 13px/18px Tahoma, sans-serif, Arial, Helvetica; - font-weight: normal; -} h1, h2, h3, h4, h5 { color: #222; } .non_osx h4 { font-size: 17px; } +.noselect { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} a { cursor: pointer; } @@ -186,59 +183,6 @@ input[type="number"] { background: #fbe7e6; } -.tg_page_head .navbar-quick-nav, -.tg_page_head .navbar-toggle { - display: none; -} -.tg_page_head .container { - display: block; - width: auto; - padding-left: 0; - padding-right: 0; -} -.tg_page_head .container .navbar-header { - margin: 0; -} -.tg_page_head .navbar-inverse { - border: 0; - - -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11); - -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11); - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11); - - margin: 0; -} -.ios_standalone .tg_page_head .navbar > .container { - margin-top: 20px; -} -.ios_standalone .modal.mobile_modal { - border-top: 20px solid #497495; -} -.tg_page_head .navbar > .container .navbar-brand { - padding: 8px 15px; - opacity: 0.9; - margin-left: 0; - margin-right: 20px; - -webkit-transition: opacity swing .9s; - display: block; - line-height: 0; - height: auto; -} -.tg_page_head .navbar > .container .navbar-brand:hover { - opacity: 1; -} -.tg_head_logo { - background: url(../img/T_LogoM.png) 0 0 no-repeat; - background-size: 143px 30px; - display: inline-block; - width: 143px; - height: 30px; - vertical-align: text-top; -} -.is_1x .tg_head_logo { - background-image: url(../img/T_LogoM_1x.png); -} - .navbar_offline .navbar-header, @@ -258,36 +202,6 @@ input[type="number"] { line-height: 20px; } -.tg_page_head .navbar-menu .navbar-nav.navbar-right { - margin-right: 0; -} - - -.tg_page_head .navbar-inverse .navbar-nav > li > a { - padding-top: 13px; - padding-bottom: 13px; - color: #b9cfe3; - font-size: 13px; -} -.tg_page_head .navbar-inverse .navbar-nav > li > a:hover { - color: #FFF; -} -.tg_page_head .navbar-inverse .navbar-toggle { - border-color: #497495; - outline: 0; - border: 0; -} -.tg_page_head .navbar-inverse .navbar-collapse, -.tg_page_head .navbar-inverse .navbar-form { - border-color: #497495; -} - -.tg_page_head .navbar-inverse .navbar-toggle:hover, -.tg_page_head .navbar-inverse .navbar-toggle:active, -.tg_page_head .navbar-inverse .navbar-toggle:focus { - background-color: rgba(255,255,255,0.1); -} - .tg_progress { height: 12px; @@ -468,6 +382,7 @@ input[type="number"] { margin-top: 0; margin-bottom: 38px; text-align: left; + font-weight: bold; } .md_simple_form_description { color: #777; @@ -897,9 +812,6 @@ img.welcome_logo { .im_dialogs_search { position: relative; } -.im_page_split .im_dialogs_search { - margin-right: 48px; -} .im_dialogs_search_field { font-size: 12px; line-height: normal; @@ -1056,15 +968,6 @@ a.im_dialog_selected .im_dialog_message_text { .active a.im_dialog .im_dialog_message { color: #FFF; } -.im_dialog_photo { - width: 40px; - height: 40px; - line-height: 40px; - border-radius: 2px; - overflow: hidden; - margin: 0 10px 0 0; - -} .im_dialog_peer { color: #222; font-weight: bold; @@ -1190,26 +1093,6 @@ a.im_dialog_selected .im_dialog_date { position: relative; } -.im_history_typing_wrap { - line-height: 18px; - width: 100%; - height: 49px; - padding: 13px 0 18px; - overflow: hidden; - -webkit-user-select: none; -} -.im_history_typing { - font-size: 11px; - color: #999; - max-width: 526px; - margin: 0 auto; - padding: 0 77px 0 77px; -} -.im_history_typing a.im_history_typing_author { - color: #999; - font-weight: bold; -} - .im_message_unread_split { background: #f0f4f7; @@ -1235,19 +1118,19 @@ a.im_dialog_selected .im_dialog_date { .im_message_from_photo, .im_message_contact_photo, .im_message_fwd_photo { - width: 36px; - height: 36px; + width: 42px; + height: 42px; border-radius: 50%; overflow: hidden; } .im_message_from_photo .peer_initials, .im_message_contact_photo .peer_initials, .im_message_fwd_photo .peer_initials { - line-height: 36px; + line-height: 42px; } a.im_message_from_photo, a.im_message_contact_photo { - margin: 0 12px 0 0; + margin: 0 15px 0 0; } .non_osx .im_message_contact_name { font-size: 12px; @@ -1415,50 +1298,48 @@ div.im_message_video_thumb { float: left; width: 42px; height: 42px; - border-radius: 0; + border-radius: 50%; margin-right: 10px; } .im_message_file_button_icon { display: inline-block; line-height: 0; - /*#dae4ea 50%*/ - background: url(../img/icons/IconsetW.png) -15px -953px no-repeat; - background-size: 42px 1171px; + background: url(../img/icons/General.png) no-repeat -14px -509px; + background-size: 40px 678px; width: 12px; - height: 20px; - margin: 11px 15px; + height: 18px; + margin: 12px 15px; } .is_1x .im_message_file_button_icon { - background-image: url(../img/icons/IconsetW_1x.png); + background-image: url(../img/icons/General_1x.png); } .im_message_file_button_dl_doc .im_message_file_button_icon { - background-position: -13px -983px; + background-position: -12px -561px; width: 16px; height: 18px; - margin: 12px 13px; + margin: 13px 13px; } .im_message_file_button_dl_audio { background: #6490b1; - border-radius: 2px; + border-radius: 50%; } .im_message_file_button_dl_audio .im_message_file_button_icon { display: block; - width: 15px; - height: 18px; - background: url(../img/icons/IconsetW.png) -15px -897px no-repeat; - background-size: 42px 1171px; - margin: 12px 13.5px; + width: 14px; + height: 16px; + background: url(../img/icons/General.png) no-repeat -13px -611px; + background-size: 40px 678px;; + margin: 13px 16px; } .is_1x .im_message_file_button_dl_audio .im_message_file_button_icon { - background-image: url(../img/icons/IconsetW_1x.png); - background-position: -15px -899px; + background-image: url(../img/icons/General_1x.png); } .im_message_file_button_dl_audio .audio_player_btn_icon_pause, .is_1x .im_message_file_button_dl_audio .audio_player_btn_icon_pause { width: 12px; - height: 16px; - background-position: -15px -927px; - margin: 13px 15px; + height: 14px; + background-position: -14px -587px; + margin: 14px 15px; } .im_message_selected .icon-document, @@ -1566,19 +1447,11 @@ img.im_message_document_thumb { width: 200px; } .audio_player_seek_slider .tg_slider_wrap { - height: 16px; - line-height: 16px; -} -.audio_player_seek_slider .tg_slider_thumb { - background: #6490b1; - width: 4px; - height: 16px; - line-height: 16px; - margin-top: 0; - border-radius: 0; + height: 18px; + line-height: 18px; } .audio_player_seek_slider .tg_slider_track { - margin: 6px 0; + margin: 7px 0; background: rgba(218,228,234,0.50); height: 4px; border-radius: 0; @@ -1594,14 +1467,14 @@ img.im_message_document_thumb { float: left; } .audio_player_volume_slider .tg_slider_wrap { - height: 16px; - line-height: 16px; + height: 18px; + line-height: 18px; } .audio_player_volume_slider .tg_slider_thumb { display: none; background: #6490b1; width: 4px; - height: 8px; + height: 10px; line-height: 16px; margin-top: 4px; border-radius: 0; @@ -1610,7 +1483,7 @@ img.im_message_document_thumb { display: block; } .audio_player_volume_slider .tg_slider_track { - margin: 6px 0; + margin: 7px 0; background: rgba(218,228,234,0.50); height: 4px; } @@ -1713,10 +1586,6 @@ img.im_message_document_thumb { } - -.im_content_message_wrap { - margin: 8px 0px 8px 16px -} .im_message_date, .im_message_fwd_date { color: #adadad; @@ -1741,6 +1610,7 @@ a.im_message_fwd_photo { .im_message_text { word-wrap: break-word; + line-height: 150%; } span.emoji { @@ -1800,7 +1670,7 @@ span.emoji { .im_send_panel_wrap { margin: 0 auto; - padding: 10px 15px 22px 15px; + padding: 10px 15px 30px 15px; } .im_send_form_wrap { position: relative; @@ -1810,6 +1680,19 @@ span.emoji { position: absolute; bottom: 0; } +.im_attach_input, +.im_media_attach_input { + cursor: pointer; + font-size: 120px !important; + opacity: 0.01; + position: absolute; + z-index: 100; + margin: 0; + padding: 0; + + top: 0; + right: 0; +} .im_send_dropbox_wrap { background: #FFF; @@ -1830,115 +1713,6 @@ textarea.im_message_field { height: 50px; resize: none; } -.im_attach { - cursor: pointer; - display: block; - overflow: hidden; - position: relative; - padding: 0 2px; - - width: 23px; - height: 24px; - margin-top: 4px; - margin-left: 20px; -} - -.icon-paperclip { - display: inline-block; - width: 19px; - height: 23px; - vertical-align: text-top; - background: url(../img/icons/IconsetW.png) -12px -68px no-repeat; - background-size: 42px 1171px; - opacity: 0.8; -} -.is_1x .icon-paperclip { - background-image: url(../img/icons/IconsetW_1x.png); -} -.im_attach:hover .icon-paperclip { - opacity: 1; -} -.im_attach:active .icon-paperclip { - background-position: -12px -100px; - opacity: 1; -} - -.im_emoji_btn { - cursor: pointer; - padding: 0; - - width: 23px; - height: 23px; - margin-top: 4px; -} -.icon-emoji { - display: inline-block; - width: 23px; - height: 23px; - vertical-align: text-top; - background: url(../img/icons/IconsetW.png) -10px -4px no-repeat; - background-size: 42px 1171px; - opacity: 0.8; -} -.is_1x .icon-emoji { - background-image: url(../img/icons/IconsetW_1x.png); -} -.im_emoji_btn:hover .icon-emoji { - opacity: 1; -} -.im_emoji_btn:active .icon-emoji, -.im_emoji_btn.on .icon-emoji { - background-position: -10px -36px; - opacity: 1; -} -.im_attach_input, -.im_media_attach_input { - cursor: pointer; - font-size: 120px !important; - opacity: 0.01; - position: absolute; - z-index: 100; - margin: 0; - padding: 0; - - top: 0; - right: 0; -} - - -.im_media_attach { - cursor: pointer; - display: block; - overflow: hidden; - position: relative; - padding: 0; - - width: 24px; - height: 22px; - margin-top: 5px; - margin-left: 20px; -} - - -.icon-camera { - display: inline-block; - width: 25px; - height: 21px; - vertical-align: text-top; - background: url(../img/icons/IconsetW.png) -9px -132px no-repeat; - background-size: 42px 1171px; - opacity: 0.8; -} -.is_1x .icon-camera { - background-image: url(../img/icons/IconsetW_1x.png); -} -.im_media_attach:hover .icon-camera { - opacity: 1; -} -.im_media_attach:active .icon-camera { - background-position: -9px -162px; - opacity: 1; -} .icon-online { @@ -2032,7 +1806,7 @@ img.img_fullsize { font-size: 12px; margin-bottom: 10px; padding: 6px; - min-height: 36px; + min-height: 38px; height: auto; width: auto; max-height: 284px; @@ -2077,14 +1851,14 @@ img.img_fullsize { padding: 5px 2px 5px 5px; } .emoji-items-wrap1 .emoji-menu-tabs { - width: 100%; - margin-bottom: 8px; - margin-top: 3px; + width: 100%; + margin-bottom: 8px; + margin-top: 3px; } .emoji-items-wrap1 .emoji-menu-tabs td { - text-align: center; - color: white; - line-height: 0; + text-align: center; + color: white; + line-height: 0; } .emoji-menu-tabs .emoji-menu-tab { display: inline-block; @@ -2465,10 +2239,6 @@ img.chat_modal_participant_photo { /* Messages edit panel */ -.im_edit_panel_wrap { - padding: 10px 0 34px; - margin: 0 24px 0 12px; -} .im_edit_panel_border { display: block; margin: 0 0 34px 3px; @@ -2508,18 +2278,6 @@ img.chat_modal_participant_photo { color: #899daf; } -.icon-select-tick { - display: none; - width: 26px; - height: 26px; - margin: 13px 0 0 40px; - background: url(../img/icons/IconsetW.png) -9px -516px no-repeat; - background-size: 42px 1171px; -} -.is_1x .icon-select-tick { - background-image: url(../img/icons/IconsetW_1x.png); -} - /* Colorized user names @@ -2882,7 +2640,7 @@ a.peer_photo_init:focus { color: #999; cursor: pointer; display: block; - font-size: 12px; + font-size: 13px; margin: 0; padding: 0; z-index: 1; diff --git a/app/css/desktop.css b/app/css/desktop.css index dcf23d00..a5b820f8 100644 --- a/app/css/desktop.css +++ b/app/css/desktop.css @@ -1,17 +1,263 @@ -.navbar-nav > li { +.tg_head_wrap { +} +.tg_head_split { + max-width: 1010px; + margin: 0 auto; + height: 48px; + background: #517b9b; +} +.tg_head_logo_wrap { + float: left; + width: 31%; +} +.tg_head_main_wrap { float: left; + width: 69%; + white-space: nowrap; +} + +.tg_head_btn { + display: block; + padding: 16px 19px; + color: #b9cfe3; + font-size: 13px; + line-height: 16px; +} +.dropdown.open .tg_head_btn, +.tg_head_btn:hover { + color: #FFF; + text-decoration: none; + background: #3f6c8c; +} + +.tg_head_logo_dropdown .dropdown-toggle { + color: #FFF; + padding: 17px 20px 15px 22px; + display: block; + font-size: 14px; + line-height: 14px; + vertical-align: top; +} +.tg_head_logo_dropdown .dropdown-toggle:hover, +.tg_head_logo_dropdown .dropdown-toggle:focus, +.tg_head_logo_dropdown .dropdown-toggle:active { + text-decoration: none; +} +.tg_head_logo_dropdown .dropdown-toggle .tg_head_logo_text { + display: inline-block; + vertical-align: top; +} +.icon-hamburger-wrap { + display: inline-block; + width: 18px; + height: 14px; +} +.tg_head_logo_dropdown .icon-hamburger-wrap { + margin: 0 40px 0 0; +} +.icon-hamburger-wrap .icon-bar { + background: #fff; + display: block; + height: 2px; + margin-bottom: 4px; +} +.icon-hamburger-wrap .icon-bar:last-child { + margin-bottom: 0; +} + +.tg_head_logo_dropdown .dropdown-menu { + border-radius: 0; + padding: 9px 0 7px; + + margin: -1px 0 0; + float: none; + right: 0; + border: 1px solid rgba(15, 60, 96, 0.2); + -webkit-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27); + -moz-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27); + box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27); +} +.tg_head_logo_dropdown .dropdown-menu > li > a { + font-size: 12px; + line-height: 21px; + padding: 11px 19px 10px 21px; + color: #42749b; } -.tg_page_head .navbar > .container .navbar-brand { - margin-right: 0; +.tg_head_logo_dropdown .dropdown-menu > li > a:hover { + background: #f2f6fa; } -.navbar-header { +.tg_head_logo_dropdown .dropdown-menu > li > a span { + vertical-align: top; +} + +.icon-new-group { + width: 20px; + height: 14px; + margin-right: 38px; + display: inline-block; + background: url(../img/icons/General.png) no-repeat -10px -111px; + background-size: 40px 678px; + vertical-align: top; + margin-top: 3px; +} +.icon-contacts { + width: 18px; + height: 18px; + margin-right: 40px; + margin-top: 2px; + display: inline-block; + vertical-align: top; + background: url(../img/icons/General.png) no-repeat -11px -135px; + background-size: 40px 678px; +} +.icon-settings { + width: 20px; + height: 20px; + margin-right: 38px; + margin-top: 1px; + display: inline-block; + vertical-align: top; + background: url(../img/icons/General.png) no-repeat -10px -163px; + background-size: 40px 678px; +} +.icon-faq { + width: 20px; + height: 20px; + margin-right: 38px; + margin-top: 1px; + display: inline-block; + vertical-align: top; + background: url(../img/icons/General.png) no-repeat -10px -637px; + background-size: 40px 678px; +} +.icon-about { + width: 21px; + height: 21px; + margin-right: 37px; + display: inline-block; + vertical-align: top; + background: url(../img/icons/General.png) no-repeat -10px -193px; + background-size: 40px 678px; +} + + +.tg_head_connecting_text { + color: #b9cfe3; + padding: 14px 15px; + font-size: 13px; + display: block; + line-height: 20px; float: left; } -.navbar-right { +.tg_head_connecting_wrap .tg_head_btn { + float: left; +} +.tg_head_peer_dropdown { float: right; - margin: 0; +} +.tg_head_peer_dropdown .dropdown-menu { + max-width: 100%; + border-radius: 0; + padding: 9px 0; + + margin: -1px 0 0 0; + border: 1px solid rgba(15, 60, 96, 0.2); + -webkit-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27); + -moz-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27); + box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27); +} +.tg_head_peer_more_dropdown .dropdown-menu { + left: auto; + right: 0; } +.tg_head_peer_dropdown .dropdown-menu > li > a { + font-size: 12px; + line-height: 15px; + padding: 11px 18px 11px 18px; + color: #52719a; +} +.tg_head_peer_dropdown .dropdown-menu > li > a:hover { + background: #f3f6fa; +} + +.tg_head_peer_return_btn { + float: right; +} +.tg_head_peer_return_count { + color: #FFF; + margin-left: 3px; +} +.tg_head_peer_title_wrap { + overflow: hidden; +} +.tg_head_peer_title_wrap .tg_head_btn { + padding: 15px 19px 15px; + line-height: 18px; +} +.tg_head_peer_title_wrap .tg_head_btn .tg_head_peer_info { + display: block; + white-space: nowrap; + overflow: hidden; + -ms-text-overflow: ellipsis; + text-overflow: ellipsis; +} + +.tg_head_peer_title { + display: inline-block; + color: #fff; + margin-right: 3px; + -ms-text-overflow: ellipsis; + text-overflow: ellipsis; + max-width: 180px; + overflow: hidden; + vertical-align: top; +} + +.tg_head_peer_media { + padding: 14px 19px; + color: #FFF; + font-size: 13px; + line-height: 20px; + float: left; +} +.icon-filter-photos, +.icon-filter-video, +.icon-filter-documents, +.icon-filter-audio { + display: inline-block; + background: url(../img/icons/General.png) no-repeat 0 0; + background-size: 40px 678px; + margin-right: 12px; + vertical-align: top; +} +.icon-filter-photos { + width: 18px; + height: 18px; + background-position: -11px -223px; + margin-top: 1px; +} +.icon-filter-video { + width: 16px; + height: 18px; + background-position: -12px -278px; + margin-top: 1px; +} +.icon-filter-documents { + width: 18px; + height: 17px; + background-position: -11px -251px; + margin-top: 1px; +} +.icon-filter-audio { + width: 14px; + height: 19px; + background-position: -13px -306px; + margin-top: 0; +} + + + /** initial setup **/ .nano { position : relative; @@ -102,15 +348,19 @@ .im_page_wrap { background: #FFF; - max-width: 1000px; + max-width: 1010px; 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); + -webkit-box-shadow: 0px 1px 0 #dfe5ec; + -moz-box-shadow: 0px 1px 0 #dfe5ec; + box-shadow: 0px 1px 0 #dfe5ec; border-radius: 0 0 3px 3px; + + border-left: 1px solid #dfe5ec; + border-right: 1px solid #dfe5ec; + border-bottom: 1px solid #d2dbe3; overflow: hidden; } @@ -121,6 +371,9 @@ color: #9cacb9; line-height: 40px; } +.footer_empty { + height: 23px; +} .footer_brand { color: #9cacb9; font-weight: bold; @@ -240,67 +493,7 @@ a.footer_link.active:active { } -.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; @@ -315,6 +508,26 @@ a.footer_link.active:active { transition: all ease-in-out 0.2s; } +.im_history_typing_wrap { + line-height: 18px; + width: 100%; + height: 49px; + padding: 13px 0 18px; + overflow: hidden; + -webkit-user-select: none; +} +.im_history_typing { + font-size: 11px; + color: #999; + max-width: 526px; + margin: 0 auto; + padding: 0 77px 0 71px; +} +.im_history_typing a.im_history_typing_author { + color: #999; + font-weight: bold; +} + /* Contacts modal */ .contacts_modal_window .modal-dialog { max-width: 420px; @@ -346,7 +559,7 @@ a.footer_link.active:active { border-radius: 7px; position: absolute; margin-left: -26px; - margin-top: 13px; + margin-top: 16px; opacity: 0; } .im_message_unread .icon-message-status { @@ -369,7 +582,10 @@ a.footer_link.active:active { opacity: 1; } - +.im_edit_panel_wrap { + padding: 15px 0 38px; + margin: 0 24px 0 12px; +} .im_edit_flush_link, .im_edit_cancel_link { display: block; @@ -391,11 +607,19 @@ a.footer_link.active:active { } .im_submit { - padding: 6px 13px; + color: #4e92ca; font-size: 13px; - line-height: 17px; - min-width: 60px; - border-radius: 2px; + line-height: 18px; + height: 18px; + border-radius: 0; + float: right; + min-width: 0; + width: auto; + padding: 0; +} +.im_submit:hover { + color: #2c78b6; + background: inherit; } .im_message_selected .im_message_date, @@ -415,10 +639,24 @@ a.footer_link.active:active { display: none; cursor: pointer; position: absolute; - width: 112px; - height: 52px; - margin: -8px 0 0 -112px; - -webkit-user-select: text; + width: 99px; + height: 58px; + margin: -8px 0 0 -99px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.icon-select-tick { + display: none; + width: 26px; + height: 26px; + margin: 16px 0 0 40px; + background: url(../img/icons/IconsetW.png) -9px -516px no-repeat; + background-size: 42px 1171px; +} +.is_1x .icon-select-tick { + background-image: url(../img/icons/IconsetW_1x.png); } @media (min-width: 1024px) { .im_content_message_select_area { @@ -471,7 +709,15 @@ a.footer_link.active:active { vertical-align: bottom; } -@media (max-height: 600px) { +@media (max-height: 600px), (max-width: 1010px) { + .im_page_wrap { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + border-bottom: 0; + border-radius: 0; + } + .footer_wrap { display: none; } @@ -512,42 +758,45 @@ a.footer_link.active:active { } } - +.im_message_fwd_author_wrap { + margin: 1px 0 4px; + display: inline-block; +} .im_message_fwd_author { margin-right: 5px; } .im_message_fwd .im_message_fwd_author_wrap, .im_message_fwd .im_message_text, .im_message_fwd .im_message_media { - margin-left: 42px; + margin-left: 52px; } .im_send_panel_wrap { - max-width: 526px; + max-width: 554px; } .im_send_form { - max-width: 389px; - left: 62px; - right: 62px; + max-width: 382px; + left: 70px; + right: 72px; } .im_panel_peer_photo, .im_panel_own_photo { - width: 50px; - height: 50px; - line-height: 50px; - border-radius: 25px; + width: 52px; + height: 52px; + line-height: 52px; + border-radius: 24px; overflow: hidden; } div.im_panel_peer_photo, a.im_panel_peer_photo { cursor: pointer; - margin-left: 12px; + margin-left: 20px; height: 55px; } a.im_panel_own_photo { display: block; - margin-right: 12px; + margin-right: 18px; } a.im_panel_own_photo .peer_initials, div.im_panel_peer_photo .peer_initials, @@ -568,9 +817,126 @@ a.im_panel_peer_photo .peer_initials { margin-top: -12px; margin-left: 36px; } + +.im_emoji_btn { + position: absolute; + right: 3px; + top: 2px; + cursor: pointer; + padding: 0; + + width: 22px; + height: 22px; + margin-top: 1px; +} +.icon-emoji { + display: inline-block; + width: 22px; + height: 22px; + vertical-align: top; + background: url(../img/icons/General.png) no-repeat -9px -335px; + background-size: 40px 678px; + opacity: 0.8; +} +.is_1x .icon-emoji { + background-image: url(../img/icons/IconsetW_1x.png); +} +.im_emoji_btn:hover .icon-emoji { + opacity: 1; +} +.im_emoji_btn:active .icon-emoji, +.im_emoji_btn.on .icon-emoji { + background-position: -9px -367px; + opacity: 1; +} + +.im_send_field_wrap { + margin-bottom: 20px; +} .emoji-wysiwyg-editor, .im_message_field { border-radius: 0; + border: 0; + box-shadow: none; + outline: none; + box-shadow: 0 1px 0 0 #e8e8e8; + padding: 1px 30px 1px 0; + margin: 0; + min-height: 50px; + line-height: 20px; + height: auto; +} +.emoji-wysiwyg-editor:focus, +.im_message_field:focus { + box-shadow: none; + outline: none; + box-shadow: 0 2px 0 0 #77b7e4; +} + +.im_attach { + cursor: pointer; + display: block; + overflow: hidden; + position: relative; + + width: 18px; + height: 17px; + margin-right: 28px; + margin-top: 1px; +} + +.icon-paperclip { + display: inline-block; + width: 18px; + height: 17px; + vertical-align: top; + background: url(../img/icons/General.png) no-repeat -11px -455px; + background-size: 40px 678px; + opacity: 0.8; + margin: 0; +} +.is_1x .icon-paperclip { + background-image: url(../img/icons/IconsetW_1x.png); +} +.im_attach:hover .icon-paperclip { + opacity: 1; +} +.im_attach:active .icon-paperclip { + background-position: -11px -482px; + opacity: 1; +} + + +.im_media_attach { + cursor: pointer; + display: block; + overflow: hidden; + position: relative; + padding: 0; + + width: 20px; + height: 18px; +} + + +.icon-camera { + display: inline-block; + width: 20px; + height: 18px; + vertical-align: top; + background: url(../img/icons/General.png) no-repeat -10px -399px; + background-size: 40px 678px; + opacity: 0.8; +} +.is_1x .icon-camera { + background-image: url(../img/icons/IconsetW_1x.png); +} +.im_media_attach:hover .icon-camera { + opacity: 1; +} +.im_media_attach:active .icon-camera { + background-position: -10px -427px; + opacity: 1; } /* Peer modals */ @@ -873,20 +1239,29 @@ a.im_panel_peer_photo .peer_initials { } .im_message_wrap { - max-width: 526px; - padding: 0 15px; + max-width: 560px; + padding: 0 15px 0 15px; margin: 0 auto; -} - -.im_message_wrap { position: static; } +.im_content_message_wrap { + margin: 8px 10px 8px 16px +} +.im_grouped_short .im_content_message_wrap { + margin: 6px 10px 6px 16px +} @media (min-width: 901px) { .im_message_wrap { position: relative; } } + +.im_message_author { + margin: 1px 0 4px; + display: inline-block; +} + /* Groupings */ .im_message_fwd_from { margin-top: 5px; @@ -912,18 +1287,31 @@ a.im_panel_peer_photo .peer_initials { .im_grouped .im_message_body, .im_grouped_fwd .im_message_body, .im_grouped_fwd_short .im_message_body { - margin-left: 46px; + margin-left: 57px; } .im_grouped_short .im_content_message_select_area, .im_grouped .im_content_message_select_area { - height: 34px; + height: 50px; +} +.im_message_fwd .im_content_message_select_area { + margin-top: -4px; +} +.im_grouped_fwd .im_message_fwd .im_content_message_select_area, +.im_grouped_fwd_short .im_message_fwd .im_content_message_select_area { + margin-top: -8px; } + .im_history_appending .im_content_message_select_area { height: 52px; } -.im_grouped_short .icon-select-tick, +.im_message_fwd .icon-select-tick { + margin-top: 12px; +} +.im_grouped_short .icon-select-tick { + margin-top: 4px; +} .im_grouped_fwd_short .icon-select-tick { - margin-top: 5px; + margin-top: 2px; } .im_grouped_short .icon-message-status, .im_grouped_fwd_short .icon-message-status { @@ -958,35 +1346,6 @@ a.im_panel_peer_photo .peer_initials { 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; -} .im_dialogs_scrollable_wrap a.im_dialog { padding: 7px 16px; } @@ -999,9 +1358,10 @@ a.im_panel_peer_photo .peer_initials { height: 48px; line-height: 48px; border-radius: 50%; + overflow: hidden; } div.im_dialog_photo { - margin-right: 12px; + margin-right: 15px; } div.im_dialog_photo .peer_initials { line-height: 48px; @@ -1010,6 +1370,10 @@ div.im_dialog_photo .peer_initials { .im_dialog_message { margin-top: 5px; } +.im_dialog_peer { + margin-top: 3px; + margin-bottom: 3px; +} .active .im_dialog_date, .active a.im_dialog:hover .im_dialog_date, .active a.im_dialog_selected .im_dialog_date { diff --git a/app/css/mobile.css b/app/css/mobile.css index a2dbe7a1..71d428fe 100644 --- a/app/css/mobile.css +++ b/app/css/mobile.css @@ -3,6 +3,7 @@ html { } + .dropdown-menu { border-radius: 0; } @@ -14,6 +15,89 @@ html { margin: 0; } +.tg_page_head .navbar-quick-nav, +.tg_page_head .navbar-toggle { + display: none; +} +.tg_page_head .container { + display: block; + width: auto; + padding-left: 0; + padding-right: 0; +} +.tg_page_head .container .navbar-header { + margin: 0; +} +.tg_page_head .navbar-inverse { + border: 0; + + -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11); + -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11); + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11); + + margin: 0; +} +.ios_standalone .tg_page_head .navbar > .container { + margin-top: 20px; +} +.ios_standalone .modal.mobile_modal { + border-top: 20px solid #497495; +} +.tg_page_head .navbar > .container .navbar-brand { + padding: 8px 15px; + opacity: 0.9; + margin-left: 0; + margin-right: 20px; + -webkit-transition: opacity swing .9s; + display: block; + line-height: 0; + height: auto; +} +.tg_page_head .navbar > .container .navbar-brand:hover { + opacity: 1; +} +.tg_head_logo { + background: url(../img/T_LogoM.png) 0 0 no-repeat; + background-size: 143px 30px; + display: inline-block; + width: 143px; + height: 30px; + vertical-align: text-top; +} +.is_1x .tg_head_logo { + background-image: url(../img/T_LogoM_1x.png); +} + +.tg_page_head .navbar-menu .navbar-nav.navbar-right { + margin-right: 0; +} + + +.tg_page_head .navbar-inverse .navbar-nav > li > a { + padding-top: 13px; + padding-bottom: 13px; + color: #b9cfe3; + font-size: 13px; +} +.tg_page_head .navbar-inverse .navbar-nav > li > a:hover { + color: #FFF; +} +.tg_page_head .navbar-inverse .navbar-toggle { + border-color: #497495; + outline: 0; + border: 0; +} +.tg_page_head .navbar-inverse .navbar-collapse, +.tg_page_head .navbar-inverse .navbar-form { + border-color: #497495; +} + +.tg_page_head .navbar-inverse .navbar-toggle:hover, +.tg_page_head .navbar-inverse .navbar-toggle:active, +.tg_page_head .navbar-inverse .navbar-toggle:focus { + background-color: rgba(255,255,255,0.1); +} + .tg_page_head .navbar > .container .navbar-brand { padding-left: 9px; @@ -505,8 +589,7 @@ img.im_message_video_thumb, font-size: 15px; float: left; position: relative; - margin-left: 0; - margin-right: 0; + margin: 8px 0 8px; max-width: 100%; } .im_message_out.im_content_message_wrap { @@ -727,8 +810,11 @@ a.im_message_from_photo { .im_dialog_photo { width: 54px; height: 54px; - border-radius: 27px; - margin-right: 12px; + border-radius: 50%; + overflow: hidden; +} +div.im_dialog_photo { + margin: 0 12px 0 0; } .im_dialog_peer, @@ -984,6 +1070,9 @@ a.mobile_modal_action .tg_checkbox_label { } .im_attach { + cursor: pointer; + display: block; + overflow: hidden; position: absolute; right: 0; top: 0; diff --git a/app/img/icons/General.png b/app/img/icons/General.png new file mode 100644 index 00000000..0d04d5be Binary files /dev/null and b/app/img/icons/General.png differ diff --git a/app/img/icons/General_1x.png b/app/img/icons/General_1x.png new file mode 100644 index 00000000..2cc98ffe Binary files /dev/null and b/app/img/icons/General_1x.png differ diff --git a/app/index.html b/app/index.html index f78f6a7f..15bd0ada 100644 --- a/app/index.html +++ b/app/index.html @@ -13,6 +13,7 @@ + diff --git a/app/js/controllers.js b/app/js/controllers.js index 0ef52ec8..b24b14c4 100644 --- a/app/js/controllers.js +++ b/app/js/controllers.js @@ -336,7 +336,7 @@ angular.module('myApp.controllers', ['myApp.i18n']) $scope.search = {}; $scope.historyFilter = {mediaType: false}; $scope.historyPeer = {}; - $scope.historyState = {selectActions: false, typing: []}; + $scope.historyState = {selectActions: false, typing: [], missedCount: 0}; $scope.openSettings = function () { $modal.open({ @@ -344,7 +344,7 @@ angular.module('myApp.controllers', ['myApp.i18n']) controller: 'SettingsModalController', windowClass: 'settings_modal_window mobile_modal' }); - } + }; $scope.openContacts = function () { ContactsSelectService.selectContact().then(function (userID) { @@ -399,6 +399,10 @@ angular.module('myApp.controllers', ['myApp.i18n']) }) }; + $scope.openChangelog = function () { + ChangelogNotifyService.showChangelog(false); + } + $scope.showPeerInfo = function () { if ($scope.curDialog.peerID > 0) { AppUsersManager.openUser($scope.curDialog.peerID) @@ -515,6 +519,7 @@ angular.module('myApp.controllers', ['myApp.i18n']) offset++; } $scope.dialogs.unshift(wrappedDialog); + delete $scope.isEmpty.dialogs; if (!peersInDialogs[dialog.peerID]) { peersInDialogs[dialog.peerID] = true; @@ -784,7 +789,7 @@ angular.module('myApp.controllers', ['myApp.i18n']) $scope.selectedMsgs = {}; $scope.selectedCount = 0; $scope.historyState.selectActions = false; - $scope.missedCount = 0; + $scope.historyState.missedCount = 0; $scope.state = {}; $scope.toggleMessage = toggleMessage; @@ -1041,7 +1046,7 @@ angular.module('myApp.controllers', ['myApp.i18n']) }; function loadHistory (forceRecent) { - $scope.missedCount = 0; + $scope.historyState.missedCount = 0; hasMore = false; $scope.skippedHistory = hasLess = false; @@ -1293,7 +1298,7 @@ angular.module('myApp.controllers', ['myApp.i18n']) if (addedMessage.my) { returnToRecent(); } else { - $scope.missedCount++; + $scope.historyState.missedCount++; } return; } @@ -2508,7 +2513,16 @@ angular.module('myApp.controllers', ['myApp.i18n']) $scope.openChangelog = function () { ChangelogNotifyService.showChangelog(false); - } + }; + + $scope.logOut = function () { + ErrorService.confirm({type: 'LOGOUT'}).then(function () { + MtpApiManager.logOut().then(function () { + location.hash = '/login'; + AppRuntimeManager.reload(); + }); + }) + }; }) .controller('ChangelogModalController', function ($scope, $modal) { diff --git a/app/js/directives.js b/app/js/directives.js index 69a5d7ef..9ccd1111 100644 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -746,7 +746,6 @@ angular.module('myApp.directives', ['myApp.filters']) historyEl = $('.im_history', element)[0], scrollableWrap = $('.im_history_scrollable_wrap', element)[0], scrollable = $('.im_history_scrollable', element)[0], - panelWrap = $('.im_history_panel_wrap', element)[0], bottomPanelWrap = $('.im_bottom_panel_wrap', element)[0], sendFormWrap = $('.im_send_form_wrap', element)[0], headWrap = $('.tg_page_head')[0], @@ -1001,7 +1000,7 @@ angular.module('myApp.directives', ['myApp.filters']) if (!footer || !footer.offsetHeight) { footer = $('.footer_wrap')[0]; } - var historyH = $($window).height() - panelWrap.offsetHeight - bottomPanelWrap.offsetHeight - (headWrap ? headWrap.offsetHeight : 44) - (footer ? footer.offsetHeight : 0); + var historyH = $($window).height() - bottomPanelWrap.offsetHeight - (headWrap ? headWrap.offsetHeight : 44) - (footer ? footer.offsetHeight : 0); $(historyWrap).css({ height: historyH }); diff --git a/app/js/lib/ng_utils.js b/app/js/lib/ng_utils.js index 1638f74f..f29b7bb8 100644 --- a/app/js/lib/ng_utils.js +++ b/app/js/lib/ng_utils.js @@ -392,7 +392,7 @@ angular.module('izhukov.utils', []) function saveFileBase64(db, fileName, blob) { try { var reader = new FileReader(); - reader.readAsDataURL(blob); + reader.readAsDataURL(blob); } catch (e) { storageIsAvailable = false; return $q.reject(); @@ -615,7 +615,7 @@ angular.module('izhukov.utils', []) } }; - if (Config.Modes.nacl && + if (Config.Modes.nacl && navigator.mimeTypes && navigator.mimeTypes['application/x-pnacl'] !== undefined) { var listener = $('
').appendTo($('body'))[0]; diff --git a/app/js/locales/en-us.json b/app/js/locales/en-us.json index b9854744..6470180b 100644 --- a/app/js/locales/en-us.json +++ b/app/js/locales/en-us.json @@ -252,13 +252,15 @@ "error_modal_multiple_open_tabs": "Please close other Telegram app tabs.", + "head_telegram": "Telegram", "head_new_group": "New Group", "head_new_contact": "New Contact", "head_contacts": "Contacts", "head_contacts_title": "Contacts", - "im_found_title": "Global search", + "head_telegram_faq": "Telegram FAQ", "head_settings": "Settings", "head_log_out": "Log Out", + "head_peer_more": "More", "head_edit_messages": "Edit messages", "head_media_photos": "Photos", "head_media_video": "Videos", @@ -285,6 +287,7 @@ "im_contacts_title": "Contacts", "im_settings": "Settings", "im_conversations": "Conversations", + "im_found_title": "Global search", "im_messages": "Messages", "im_no_contacts": "No contacts yet", "im_get_started_long": "Get started by adding a contact to chat with", diff --git a/app/partials/desktop/head.html b/app/partials/desktop/head.html index 3030441e..b3c2e19f 100644 --- a/app/partials/desktop/head.html +++ b/app/partials/desktop/head.html @@ -1,28 +1,101 @@ -
-