Browse Source

New design for desktop

Added external google fonts [temp]
master
Igor Zhukov 10 years ago
parent
commit
24534d29b7
  1. 364
      app/css/app.css
  2. 628
      app/css/desktop.css
  3. 97
      app/css/mobile.css
  4. BIN
      app/img/icons/General.png
  5. BIN
      app/img/icons/General_1x.png
  6. 1
      app/index.html
  7. 26
      app/js/controllers.js
  8. 3
      app/js/directives.js
  9. 4
      app/js/lib/ng_utils.js
  10. 5
      app/js/locales/en-us.json
  11. 111
      app/partials/desktop/head.html
  12. 93
      app/partials/desktop/im.html
  13. 4
      app/partials/desktop/settings_modal.html
  14. 2
      app/partials/mobile/head.html
  15. 2
      app/webogram.appcache
  16. 25
      gulpfile.js
  17. 33
      package.json

364
app/css/app.css

@ -2,30 +2,27 @@
html { html {
display: none; display: none;
background: #dee4e9 url(../img/bg_tile.png) 0 0 repeat; background: #e7ebf0;
overflow: visible; overflow: visible;
} }
body { body {
color: #000; color: #000;
background: none; 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; 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 { h1, h2, h3, h4, h5 {
color: #222; color: #222;
} }
.non_osx h4 { .non_osx h4 {
font-size: 17px; font-size: 17px;
} }
.noselect {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
a { a {
cursor: pointer; cursor: pointer;
} }
@ -186,59 +183,6 @@ input[type="number"] {
background: #fbe7e6; 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, .navbar_offline .navbar-header,
@ -258,36 +202,6 @@ input[type="number"] {
line-height: 20px; 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 { .tg_progress {
height: 12px; height: 12px;
@ -468,6 +382,7 @@ input[type="number"] {
margin-top: 0; margin-top: 0;
margin-bottom: 38px; margin-bottom: 38px;
text-align: left; text-align: left;
font-weight: bold;
} }
.md_simple_form_description { .md_simple_form_description {
color: #777; color: #777;
@ -897,9 +812,6 @@ img.welcome_logo {
.im_dialogs_search { .im_dialogs_search {
position: relative; position: relative;
} }
.im_page_split .im_dialogs_search {
margin-right: 48px;
}
.im_dialogs_search_field { .im_dialogs_search_field {
font-size: 12px; font-size: 12px;
line-height: normal; line-height: normal;
@ -1056,15 +968,6 @@ a.im_dialog_selected .im_dialog_message_text {
.active a.im_dialog .im_dialog_message { .active a.im_dialog .im_dialog_message {
color: #FFF; 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 { .im_dialog_peer {
color: #222; color: #222;
font-weight: bold; font-weight: bold;
@ -1190,26 +1093,6 @@ a.im_dialog_selected .im_dialog_date {
position: relative; 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 { .im_message_unread_split {
background: #f0f4f7; background: #f0f4f7;
@ -1235,19 +1118,19 @@ a.im_dialog_selected .im_dialog_date {
.im_message_from_photo, .im_message_from_photo,
.im_message_contact_photo, .im_message_contact_photo,
.im_message_fwd_photo { .im_message_fwd_photo {
width: 36px; width: 42px;
height: 36px; height: 42px;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
} }
.im_message_from_photo .peer_initials, .im_message_from_photo .peer_initials,
.im_message_contact_photo .peer_initials, .im_message_contact_photo .peer_initials,
.im_message_fwd_photo .peer_initials { .im_message_fwd_photo .peer_initials {
line-height: 36px; line-height: 42px;
} }
a.im_message_from_photo, a.im_message_from_photo,
a.im_message_contact_photo { a.im_message_contact_photo {
margin: 0 12px 0 0; margin: 0 15px 0 0;
} }
.non_osx .im_message_contact_name { .non_osx .im_message_contact_name {
font-size: 12px; font-size: 12px;
@ -1415,50 +1298,48 @@ div.im_message_video_thumb {
float: left; float: left;
width: 42px; width: 42px;
height: 42px; height: 42px;
border-radius: 0; border-radius: 50%;
margin-right: 10px; margin-right: 10px;
} }
.im_message_file_button_icon { .im_message_file_button_icon {
display: inline-block; display: inline-block;
line-height: 0; line-height: 0;
/*#dae4ea 50%*/ background: url(../img/icons/General.png) no-repeat -14px -509px;
background: url(../img/icons/IconsetW.png) -15px -953px no-repeat; background-size: 40px 678px;
background-size: 42px 1171px;
width: 12px; width: 12px;
height: 20px; height: 18px;
margin: 11px 15px; margin: 12px 15px;
} }
.is_1x .im_message_file_button_icon { .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 { .im_message_file_button_dl_doc .im_message_file_button_icon {
background-position: -13px -983px; background-position: -12px -561px;
width: 16px; width: 16px;
height: 18px; height: 18px;
margin: 12px 13px; margin: 13px 13px;
} }
.im_message_file_button_dl_audio { .im_message_file_button_dl_audio {
background: #6490b1; background: #6490b1;
border-radius: 2px; border-radius: 50%;
} }
.im_message_file_button_dl_audio .im_message_file_button_icon { .im_message_file_button_dl_audio .im_message_file_button_icon {
display: block; display: block;
width: 15px; width: 14px;
height: 18px; height: 16px;
background: url(../img/icons/IconsetW.png) -15px -897px no-repeat; background: url(../img/icons/General.png) no-repeat -13px -611px;
background-size: 42px 1171px; background-size: 40px 678px;;
margin: 12px 13.5px; margin: 13px 16px;
} }
.is_1x .im_message_file_button_dl_audio .im_message_file_button_icon { .is_1x .im_message_file_button_dl_audio .im_message_file_button_icon {
background-image: url(../img/icons/IconsetW_1x.png); background-image: url(../img/icons/General_1x.png);
background-position: -15px -899px;
} }
.im_message_file_button_dl_audio .audio_player_btn_icon_pause, .im_message_file_button_dl_audio .audio_player_btn_icon_pause,
.is_1x .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; width: 12px;
height: 16px; height: 14px;
background-position: -15px -927px; background-position: -14px -587px;
margin: 13px 15px; margin: 14px 15px;
} }
.im_message_selected .icon-document, .im_message_selected .icon-document,
@ -1566,19 +1447,11 @@ img.im_message_document_thumb {
width: 200px; width: 200px;
} }
.audio_player_seek_slider .tg_slider_wrap { .audio_player_seek_slider .tg_slider_wrap {
height: 16px; height: 18px;
line-height: 16px; line-height: 18px;
}
.audio_player_seek_slider .tg_slider_thumb {
background: #6490b1;
width: 4px;
height: 16px;
line-height: 16px;
margin-top: 0;
border-radius: 0;
} }
.audio_player_seek_slider .tg_slider_track { .audio_player_seek_slider .tg_slider_track {
margin: 6px 0; margin: 7px 0;
background: rgba(218,228,234,0.50); background: rgba(218,228,234,0.50);
height: 4px; height: 4px;
border-radius: 0; border-radius: 0;
@ -1594,14 +1467,14 @@ img.im_message_document_thumb {
float: left; float: left;
} }
.audio_player_volume_slider .tg_slider_wrap { .audio_player_volume_slider .tg_slider_wrap {
height: 16px; height: 18px;
line-height: 16px; line-height: 18px;
} }
.audio_player_volume_slider .tg_slider_thumb { .audio_player_volume_slider .tg_slider_thumb {
display: none; display: none;
background: #6490b1; background: #6490b1;
width: 4px; width: 4px;
height: 8px; height: 10px;
line-height: 16px; line-height: 16px;
margin-top: 4px; margin-top: 4px;
border-radius: 0; border-radius: 0;
@ -1610,7 +1483,7 @@ img.im_message_document_thumb {
display: block; display: block;
} }
.audio_player_volume_slider .tg_slider_track { .audio_player_volume_slider .tg_slider_track {
margin: 6px 0; margin: 7px 0;
background: rgba(218,228,234,0.50); background: rgba(218,228,234,0.50);
height: 4px; 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_date,
.im_message_fwd_date { .im_message_fwd_date {
color: #adadad; color: #adadad;
@ -1741,6 +1610,7 @@ a.im_message_fwd_photo {
.im_message_text { .im_message_text {
word-wrap: break-word; word-wrap: break-word;
line-height: 150%;
} }
span.emoji { span.emoji {
@ -1800,7 +1670,7 @@ span.emoji {
.im_send_panel_wrap { .im_send_panel_wrap {
margin: 0 auto; margin: 0 auto;
padding: 10px 15px 22px 15px; padding: 10px 15px 30px 15px;
} }
.im_send_form_wrap { .im_send_form_wrap {
position: relative; position: relative;
@ -1810,6 +1680,19 @@ span.emoji {
position: absolute; position: absolute;
bottom: 0; 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 { .im_send_dropbox_wrap {
background: #FFF; background: #FFF;
@ -1830,115 +1713,6 @@ textarea.im_message_field {
height: 50px; height: 50px;
resize: none; 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 { .icon-online {
@ -2032,7 +1806,7 @@ img.img_fullsize {
font-size: 12px; font-size: 12px;
margin-bottom: 10px; margin-bottom: 10px;
padding: 6px; padding: 6px;
min-height: 36px; min-height: 38px;
height: auto; height: auto;
width: auto; width: auto;
max-height: 284px; max-height: 284px;
@ -2077,14 +1851,14 @@ img.img_fullsize {
padding: 5px 2px 5px 5px; padding: 5px 2px 5px 5px;
} }
.emoji-items-wrap1 .emoji-menu-tabs { .emoji-items-wrap1 .emoji-menu-tabs {
width: 100%; width: 100%;
margin-bottom: 8px; margin-bottom: 8px;
margin-top: 3px; margin-top: 3px;
} }
.emoji-items-wrap1 .emoji-menu-tabs td { .emoji-items-wrap1 .emoji-menu-tabs td {
text-align: center; text-align: center;
color: white; color: white;
line-height: 0; line-height: 0;
} }
.emoji-menu-tabs .emoji-menu-tab { .emoji-menu-tabs .emoji-menu-tab {
display: inline-block; display: inline-block;
@ -2465,10 +2239,6 @@ img.chat_modal_participant_photo {
/* Messages edit panel */ /* Messages edit panel */
.im_edit_panel_wrap {
padding: 10px 0 34px;
margin: 0 24px 0 12px;
}
.im_edit_panel_border { .im_edit_panel_border {
display: block; display: block;
margin: 0 0 34px 3px; margin: 0 0 34px 3px;
@ -2508,18 +2278,6 @@ img.chat_modal_participant_photo {
color: #899daf; 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 /* Colorized user names
@ -2882,7 +2640,7 @@ a.peer_photo_init:focus {
color: #999; color: #999;
cursor: pointer; cursor: pointer;
display: block; display: block;
font-size: 12px; font-size: 13px;
margin: 0; margin: 0;
padding: 0; padding: 0;
z-index: 1; z-index: 1;

628
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; 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 { .tg_head_logo_dropdown .dropdown-menu > li > a:hover {
margin-right: 0; 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; float: left;
} }
.navbar-right { .tg_head_connecting_wrap .tg_head_btn {
float: left;
}
.tg_head_peer_dropdown {
float: right; 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 **/ /** initial setup **/
.nano { .nano {
position : relative; position : relative;
@ -102,15 +348,19 @@
.im_page_wrap { .im_page_wrap {
background: #FFF; background: #FFF;
max-width: 1000px; max-width: 1010px;
min-width: 300px; min-width: 300px;
margin: 0 auto; margin: 0 auto;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 1px 0 #dfe5ec;
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 0 #dfe5ec;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 0 #dfe5ec;
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
border-left: 1px solid #dfe5ec;
border-right: 1px solid #dfe5ec;
border-bottom: 1px solid #d2dbe3;
overflow: hidden; overflow: hidden;
} }
@ -121,6 +371,9 @@
color: #9cacb9; color: #9cacb9;
line-height: 40px; line-height: 40px;
} }
.footer_empty {
height: 23px;
}
.footer_brand { .footer_brand {
color: #9cacb9; color: #9cacb9;
font-weight: bold; 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 { .im_history_no_dialogs_wrap {
margin: 122px 170px 60px; margin: 122px 170px 60px;
@ -315,6 +508,26 @@ a.footer_link.active:active {
transition: all ease-in-out 0.2s; 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 */
.contacts_modal_window .modal-dialog { .contacts_modal_window .modal-dialog {
max-width: 420px; max-width: 420px;
@ -346,7 +559,7 @@ a.footer_link.active:active {
border-radius: 7px; border-radius: 7px;
position: absolute; position: absolute;
margin-left: -26px; margin-left: -26px;
margin-top: 13px; margin-top: 16px;
opacity: 0; opacity: 0;
} }
.im_message_unread .icon-message-status { .im_message_unread .icon-message-status {
@ -369,7 +582,10 @@ a.footer_link.active:active {
opacity: 1; opacity: 1;
} }
.im_edit_panel_wrap {
padding: 15px 0 38px;
margin: 0 24px 0 12px;
}
.im_edit_flush_link, .im_edit_flush_link,
.im_edit_cancel_link { .im_edit_cancel_link {
display: block; display: block;
@ -391,11 +607,19 @@ a.footer_link.active:active {
} }
.im_submit { .im_submit {
padding: 6px 13px; color: #4e92ca;
font-size: 13px; font-size: 13px;
line-height: 17px; line-height: 18px;
min-width: 60px; height: 18px;
border-radius: 2px; 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, .im_message_selected .im_message_date,
@ -415,10 +639,24 @@ a.footer_link.active:active {
display: none; display: none;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
width: 112px; width: 99px;
height: 52px; height: 58px;
margin: -8px 0 0 -112px; margin: -8px 0 0 -99px;
-webkit-user-select: text; -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) { @media (min-width: 1024px) {
.im_content_message_select_area { .im_content_message_select_area {
@ -471,7 +709,15 @@ a.footer_link.active:active {
vertical-align: bottom; 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 { .footer_wrap {
display: none; 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 { .im_message_fwd_author {
margin-right: 5px; margin-right: 5px;
} }
.im_message_fwd .im_message_fwd_author_wrap, .im_message_fwd .im_message_fwd_author_wrap,
.im_message_fwd .im_message_text, .im_message_fwd .im_message_text,
.im_message_fwd .im_message_media { .im_message_fwd .im_message_media {
margin-left: 42px; margin-left: 52px;
} }
.im_send_panel_wrap { .im_send_panel_wrap {
max-width: 526px; max-width: 554px;
} }
.im_send_form { .im_send_form {
max-width: 389px; max-width: 382px;
left: 62px; left: 70px;
right: 62px; right: 72px;
} }
.im_panel_peer_photo, .im_panel_peer_photo,
.im_panel_own_photo { .im_panel_own_photo {
width: 50px; width: 52px;
height: 50px; height: 52px;
line-height: 50px; line-height: 52px;
border-radius: 25px; border-radius: 24px;
overflow: hidden; overflow: hidden;
} }
div.im_panel_peer_photo, div.im_panel_peer_photo,
a.im_panel_peer_photo { a.im_panel_peer_photo {
cursor: pointer; cursor: pointer;
margin-left: 12px; margin-left: 20px;
height: 55px; height: 55px;
} }
a.im_panel_own_photo { a.im_panel_own_photo {
display: block; display: block;
margin-right: 12px; margin-right: 18px;
} }
a.im_panel_own_photo .peer_initials, a.im_panel_own_photo .peer_initials,
div.im_panel_peer_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-top: -12px;
margin-left: 36px; 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, .emoji-wysiwyg-editor,
.im_message_field { .im_message_field {
border-radius: 0; 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 */ /* Peer modals */
@ -873,20 +1239,29 @@ a.im_panel_peer_photo .peer_initials {
} }
.im_message_wrap { .im_message_wrap {
max-width: 526px; max-width: 560px;
padding: 0 15px; padding: 0 15px 0 15px;
margin: 0 auto; margin: 0 auto;
}
.im_message_wrap {
position: static; 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) { @media (min-width: 901px) {
.im_message_wrap { .im_message_wrap {
position: relative; position: relative;
} }
} }
.im_message_author {
margin: 1px 0 4px;
display: inline-block;
}
/* Groupings */ /* Groupings */
.im_message_fwd_from { .im_message_fwd_from {
margin-top: 5px; margin-top: 5px;
@ -912,18 +1287,31 @@ a.im_panel_peer_photo .peer_initials {
.im_grouped .im_message_body, .im_grouped .im_message_body,
.im_grouped_fwd .im_message_body, .im_grouped_fwd .im_message_body,
.im_grouped_fwd_short .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_short .im_content_message_select_area,
.im_grouped .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 { .im_history_appending .im_content_message_select_area {
height: 52px; 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 { .im_grouped_fwd_short .icon-select-tick {
margin-top: 5px; margin-top: 2px;
} }
.im_grouped_short .icon-message-status, .im_grouped_short .icon-message-status,
.im_grouped_fwd_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; 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 { .im_dialogs_scrollable_wrap a.im_dialog {
padding: 7px 16px; padding: 7px 16px;
} }
@ -999,9 +1358,10 @@ a.im_panel_peer_photo .peer_initials {
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
border-radius: 50%; border-radius: 50%;
overflow: hidden;
} }
div.im_dialog_photo { div.im_dialog_photo {
margin-right: 12px; margin-right: 15px;
} }
div.im_dialog_photo .peer_initials { div.im_dialog_photo .peer_initials {
line-height: 48px; line-height: 48px;
@ -1010,6 +1370,10 @@ div.im_dialog_photo .peer_initials {
.im_dialog_message { .im_dialog_message {
margin-top: 5px; margin-top: 5px;
} }
.im_dialog_peer {
margin-top: 3px;
margin-bottom: 3px;
}
.active .im_dialog_date, .active .im_dialog_date,
.active a.im_dialog:hover .im_dialog_date, .active a.im_dialog:hover .im_dialog_date,
.active a.im_dialog_selected .im_dialog_date { .active a.im_dialog_selected .im_dialog_date {

97
app/css/mobile.css

@ -3,6 +3,7 @@ html {
} }
.dropdown-menu { .dropdown-menu {
border-radius: 0; border-radius: 0;
} }
@ -14,6 +15,89 @@ html {
margin: 0; 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 { .tg_page_head .navbar > .container .navbar-brand {
padding-left: 9px; padding-left: 9px;
@ -505,8 +589,7 @@ img.im_message_video_thumb,
font-size: 15px; font-size: 15px;
float: left; float: left;
position: relative; position: relative;
margin-left: 0; margin: 8px 0 8px;
margin-right: 0;
max-width: 100%; max-width: 100%;
} }
.im_message_out.im_content_message_wrap { .im_message_out.im_content_message_wrap {
@ -727,8 +810,11 @@ a.im_message_from_photo {
.im_dialog_photo { .im_dialog_photo {
width: 54px; width: 54px;
height: 54px; height: 54px;
border-radius: 27px; border-radius: 50%;
margin-right: 12px; overflow: hidden;
}
div.im_dialog_photo {
margin: 0 12px 0 0;
} }
.im_dialog_peer, .im_dialog_peer,
@ -984,6 +1070,9 @@ a.mobile_modal_action .tg_checkbox_label {
} }
.im_attach { .im_attach {
cursor: pointer;
display: block;
overflow: hidden;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;

BIN
app/img/icons/General.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
app/img/icons/General_1x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

1
app/index.html

@ -13,6 +13,7 @@
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="css/app.css"/> <link rel="stylesheet" href="css/app.css"/>
<!-- endbuild --> <!-- endbuild -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600&amp;subset=cyrillic,latin" rel="stylesheet" type="text/css">
<link rel="icon" href="favicon.ico" type="image/x-icon" /> <link rel="icon" href="favicon.ico" type="image/x-icon" />

26
app/js/controllers.js

@ -336,7 +336,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
$scope.search = {}; $scope.search = {};
$scope.historyFilter = {mediaType: false}; $scope.historyFilter = {mediaType: false};
$scope.historyPeer = {}; $scope.historyPeer = {};
$scope.historyState = {selectActions: false, typing: []}; $scope.historyState = {selectActions: false, typing: [], missedCount: 0};
$scope.openSettings = function () { $scope.openSettings = function () {
$modal.open({ $modal.open({
@ -344,7 +344,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
controller: 'SettingsModalController', controller: 'SettingsModalController',
windowClass: 'settings_modal_window mobile_modal' windowClass: 'settings_modal_window mobile_modal'
}); });
} };
$scope.openContacts = function () { $scope.openContacts = function () {
ContactsSelectService.selectContact().then(function (userID) { ContactsSelectService.selectContact().then(function (userID) {
@ -399,6 +399,10 @@ angular.module('myApp.controllers', ['myApp.i18n'])
}) })
}; };
$scope.openChangelog = function () {
ChangelogNotifyService.showChangelog(false);
}
$scope.showPeerInfo = function () { $scope.showPeerInfo = function () {
if ($scope.curDialog.peerID > 0) { if ($scope.curDialog.peerID > 0) {
AppUsersManager.openUser($scope.curDialog.peerID) AppUsersManager.openUser($scope.curDialog.peerID)
@ -515,6 +519,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
offset++; offset++;
} }
$scope.dialogs.unshift(wrappedDialog); $scope.dialogs.unshift(wrappedDialog);
delete $scope.isEmpty.dialogs;
if (!peersInDialogs[dialog.peerID]) { if (!peersInDialogs[dialog.peerID]) {
peersInDialogs[dialog.peerID] = true; peersInDialogs[dialog.peerID] = true;
@ -784,7 +789,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
$scope.selectedMsgs = {}; $scope.selectedMsgs = {};
$scope.selectedCount = 0; $scope.selectedCount = 0;
$scope.historyState.selectActions = false; $scope.historyState.selectActions = false;
$scope.missedCount = 0; $scope.historyState.missedCount = 0;
$scope.state = {}; $scope.state = {};
$scope.toggleMessage = toggleMessage; $scope.toggleMessage = toggleMessage;
@ -1041,7 +1046,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
}; };
function loadHistory (forceRecent) { function loadHistory (forceRecent) {
$scope.missedCount = 0; $scope.historyState.missedCount = 0;
hasMore = false; hasMore = false;
$scope.skippedHistory = hasLess = false; $scope.skippedHistory = hasLess = false;
@ -1293,7 +1298,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
if (addedMessage.my) { if (addedMessage.my) {
returnToRecent(); returnToRecent();
} else { } else {
$scope.missedCount++; $scope.historyState.missedCount++;
} }
return; return;
} }
@ -2508,7 +2513,16 @@ angular.module('myApp.controllers', ['myApp.i18n'])
$scope.openChangelog = function () { $scope.openChangelog = function () {
ChangelogNotifyService.showChangelog(false); 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) { .controller('ChangelogModalController', function ($scope, $modal) {

3
app/js/directives.js

@ -746,7 +746,6 @@ angular.module('myApp.directives', ['myApp.filters'])
historyEl = $('.im_history', element)[0], historyEl = $('.im_history', element)[0],
scrollableWrap = $('.im_history_scrollable_wrap', element)[0], scrollableWrap = $('.im_history_scrollable_wrap', element)[0],
scrollable = $('.im_history_scrollable', element)[0], scrollable = $('.im_history_scrollable', element)[0],
panelWrap = $('.im_history_panel_wrap', element)[0],
bottomPanelWrap = $('.im_bottom_panel_wrap', element)[0], bottomPanelWrap = $('.im_bottom_panel_wrap', element)[0],
sendFormWrap = $('.im_send_form_wrap', element)[0], sendFormWrap = $('.im_send_form_wrap', element)[0],
headWrap = $('.tg_page_head')[0], headWrap = $('.tg_page_head')[0],
@ -1001,7 +1000,7 @@ angular.module('myApp.directives', ['myApp.filters'])
if (!footer || !footer.offsetHeight) { if (!footer || !footer.offsetHeight) {
footer = $('.footer_wrap')[0]; 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({ $(historyWrap).css({
height: historyH height: historyH
}); });

4
app/js/lib/ng_utils.js

@ -392,7 +392,7 @@ angular.module('izhukov.utils', [])
function saveFileBase64(db, fileName, blob) { function saveFileBase64(db, fileName, blob) {
try { try {
var reader = new FileReader(); var reader = new FileReader();
reader.readAsDataURL(blob); reader.readAsDataURL(blob);
} catch (e) { } catch (e) {
storageIsAvailable = false; storageIsAvailable = false;
return $q.reject(); return $q.reject();
@ -615,7 +615,7 @@ angular.module('izhukov.utils', [])
} }
}; };
if (Config.Modes.nacl && if (Config.Modes.nacl &&
navigator.mimeTypes && navigator.mimeTypes &&
navigator.mimeTypes['application/x-pnacl'] !== undefined) { navigator.mimeTypes['application/x-pnacl'] !== undefined) {
var listener = $('<div id="nacl_listener"><embed id="mtproto_crypto" width="0" height="0" src="nacl/mtproto_crypto.nmf" type="application/x-pnacl" /></div>').appendTo($('body'))[0]; var listener = $('<div id="nacl_listener"><embed id="mtproto_crypto" width="0" height="0" src="nacl/mtproto_crypto.nmf" type="application/x-pnacl" /></div>').appendTo($('body'))[0];

5
app/js/locales/en-us.json

@ -252,13 +252,15 @@
"error_modal_multiple_open_tabs": "Please close other Telegram app tabs.", "error_modal_multiple_open_tabs": "Please close other Telegram app tabs.",
"head_telegram": "Telegram",
"head_new_group": "New Group", "head_new_group": "New Group",
"head_new_contact": "New Contact", "head_new_contact": "New Contact",
"head_contacts": "Contacts", "head_contacts": "Contacts",
"head_contacts_title": "Contacts", "head_contacts_title": "Contacts",
"im_found_title": "Global search", "head_telegram_faq": "Telegram FAQ",
"head_settings": "Settings", "head_settings": "Settings",
"head_log_out": "Log Out", "head_log_out": "Log Out",
"head_peer_more": "More",
"head_edit_messages": "Edit messages", "head_edit_messages": "Edit messages",
"head_media_photos": "Photos", "head_media_photos": "Photos",
"head_media_video": "Videos", "head_media_video": "Videos",
@ -285,6 +287,7 @@
"im_contacts_title": "Contacts", "im_contacts_title": "Contacts",
"im_settings": "Settings", "im_settings": "Settings",
"im_conversations": "Conversations", "im_conversations": "Conversations",
"im_found_title": "Global search",
"im_messages": "Messages", "im_messages": "Messages",
"im_no_contacts": "No contacts yet", "im_no_contacts": "No contacts yet",
"im_get_started_long": "Get started by adding a contact to chat with", "im_get_started_long": "Get started by adding a contact to chat with",

111
app/partials/desktop/head.html

@ -1,28 +1,101 @@
<div class="tg_page_head"> <div class="tg_page_head tg_head_wrap noselect">
<div class="navbar navbar-static-top navbar-inverse" role="navigation" ng-class="{navbar_peer_not_selected: !curDialog.peer, navbar_offline: offline, navbar_history_select: historyState.selectActions}"> <div class="tg_head_split clearfix">
<div class="container">
<div class="navbar-header"> <div class="tg_head_logo_wrap">
<a class="navbar-brand" href="{{isLoggedIn ? '#/im' : '#/'}}"><span class="tg_head_logo"></span></a> <div class="tg_head_logo_dropdown dropdown" dropdown>
<a class="tg_head_btn dropdown-toggle" dropdown-toggle>
<div class="icon-hamburger-wrap">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div><span class="tg_head_logo_text" my-i18n="head_telegram"></span>
</a>
<ul class="dropdown-menu" ng-switch="isLoggedIn">
<li ng-switch-when="true"><a ng-click="openGroup()">
<i class="icon icon-new-group"></i><span my-i18n="im_new_group"></span>
</a></li>
<li ng-switch-when="true" ng-if="!isEmpty.contacts"><a ng-click="openContacts()">
<i class="icon icon-contacts"></i><span my-i18n="im_contacts"></span>
</a></li>
<li ng-switch-when="true"><a ng-click="openSettings()">
<i class="icon icon-settings"></i><span my-i18n="im_settings"></span>
</a></li>
<li><a href="https://telegram.org/faq" target="_blank">
<i class="icon icon-faq"></i><span my-i18n="head_telegram_faq"></span>
</a></li>
<li><a href="" ng-click="openChangelog()">
<i class="icon icon-about"></i><span my-i18n="head_about"></span>
</a></li>
</ul>
</div> </div>
</div>
<div class="navbar-menu" ng-switch="offline"> <div class="tg_head_main_wrap" ng-switch="offline">
<div ng-switch-when="true" class="tg_head_connecting_wrap" ng-switch="offlineConnecting">
<span ng-switch-default class="tg_head_connecting_text"><my-i18n msgid="head_waiting_for_network"></my-i18n><span my-loading-dots></span></span>
<a ng-switch-default class="tg_head_btn" ng-click="retryOnline()" my-i18n="head_retry"></a>
<span ng-switch-when="true" class="tg_head_connecting_text"><my-i18n msgid="head_connecting"></my-i18n><span my-loading-dots></span></span>
</div>
<ul ng-switch-when="true" class="nav navbar-nav navbar-offline"> <div ng-switch-default class="tg_head_main_peer_wrap">
<li ng-show="!offlineConnecting"><span class="navbar-offline-text"><my-i18n msgid="head_waiting_for_network"></my-i18n><span my-loading-dots></span></span></li>
<li ng-show="!offlineConnecting"><a href="" ng-click="retryOnline()" my-i18n="head_retry"></a></li>
<li ng-show="offlineConnecting"><span class="navbar-offline-text"><my-i18n msgid="head_connecting"></my-i18n><span my-loading-dots></span></span></li>
</ul>
<ul ng-switch-default class="nav navbar-nav navbar-right"> <div class="tg_head_peer_dropdown tg_head_peer_more_dropdown dropdown" dropdown>
<li ng-if="isLoggedIn &amp;&amp; !isEmpty.contacts"><a href="" ng-click="openContacts()" my-i18n="head_contacts"></a></li> <a class="tg_head_btn dropdown-toggle" dropdown-toggle my-i18n="head_peer_more"></a>
<li ng-if="isLoggedIn"><a href="" ng-click="openSettings()" my-i18n="head_settings"></a></li> <ul class="dropdown-menu">
<li ng-if="isLoggedIn"><a href="" ng-click="logOut()" my-i18n="head_log_out"></a></li> <li><a ng-click="toggleEdit()" my-i18n="head_edit_messages"></a></li>
<li ng-if="!isLoggedIn"><a href="https://github.com/zhukov/webogram" target="_blank" my-i18n="head_about"></a></li> <li><a ng-click="selectedFlush()" my-i18n="head_clear_all"></a></li>
</ul> </ul>
</div>
</div> <div class="tg_head_peer_dropdown tg_head_peer_media_dropdown dropdown" dropdown>
<a class="tg_head_btn dropdown-toggle" dropdown-toggle my-i18n="im_media"></a>
<ul class="dropdown-menu">
<li><a ng-click="toggleMedia('photos')" my-i18n="head_media_photos"></a></li>
<li><a ng-click="toggleMedia('video')" my-i18n="head_media_video"></a></li>
<li><a ng-click="toggleMedia('documents')" my-i18n="head_media_documents"></a></li>
<li><a ng-click="toggleMedia('audio')" my-i18n="head_media_audio"></a></li>
</ul>
</div>
<a class="tg_head_btn tg_head_peer_return_btn" ng-show="historyFilter.mediaType.length || skippedHistory" ng-click="returnToRecent()" ng-switch="skippedHistory">
<span ng-switch-when="true" my-i18n="im_show_recent_messages"></span>
<span ng-switch-default my-i18n="im_show_all_messages"></span>
<strong class="tg_head_peer_return_count" ng-show="historyState.missedCount > 0" ng-bind="'+' + historyState.missedCount"></strong>
</a>
<div class="tg_head_peer_title_wrap" ng-switch="historyFilter.mediaType">
<div class="tg_head_peer_media" ng-switch-when="photos">
<i class="icon icon-filter-photos"></i><span my-i18n="im_media_photos"></span>
</div>
<div class="tg_head_peer_media" ng-switch-when="video">
<i class="icon icon-filter-video"></i><span my-i18n="im_media_video"></span>
</div>
<div class="tg_head_peer_media" ng-switch-when="documents">
<i class="icon icon-filter-documents"></i><span my-i18n="im_media_documents"></span>
</div>
<div class="tg_head_peer_media" ng-switch-when="audio">
<i class="icon icon-filter-audio"></i><span my-i18n="im_media_audio"></span>
</div>
<a class="tg_head_btn" ng-switch-default ng-switch="historyPeer.id > 0" ng-click="showPeerInfo()">
<div class="tg_head_peer_info" ng-switch-when="true">
<span class="tg_head_peer_title" ng-bind-html="historyPeer.data.rFullName"></span>
<span class="tg_head_peer_status" my-user-status="historyPeer.id"></span>
</div>
<div class="tg_head_peer_info" ng-switch-default>
<span class="tg_head_peer_title" ng-bind-html="historyPeer.data.rTitle"></span>
<span class="tg_head_peer_status">
<ng-pluralize count="historyPeer.data.participants_count"
when="im_pluralize_participants">
</ng-pluralize>
</span>
</div>
</a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

93
app/partials/desktop/im.html

@ -6,19 +6,6 @@
<div class="im_dialogs_col_wrap" ng-controller="AppImDialogsController" my-dialogs has-tabs="{{search.query.length > 0}}"> <div class="im_dialogs_col_wrap" ng-controller="AppImDialogsController" my-dialogs has-tabs="{{search.query.length > 0}}">
<div class="im_dialogs_panel"> <div class="im_dialogs_panel">
<div class="dropdown im_dialogs_panel_dropdown pull-right" dropdown>
<a class="dropdown-toggle" dropdown-toggle>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<ul class="dropdown-menu">
<li><a ng-click="openGroup()" my-i18n="im_new_group"></a></li>
<li><a ng-click="importContact()" my-i18n="im_new_contact"></a></li>
<li ng-if="!isEmpty.contacts"><a ng-click="openContacts()" my-i18n="im_contacts"></a></li>
<li><a ng-click="openSettings()" my-i18n="im_settings"></a></li>
</ul>
</div>
<div class="im_dialogs_search"> <div class="im_dialogs_search">
<input class="form-control im_dialogs_search_field no_outline" type="search" placeholder="{{'modal_search' | i18n}}" ng-model="search.query"/> <input class="form-control im_dialogs_search_field no_outline" type="search" placeholder="{{'modal_search' | i18n}}" ng-model="search.query"/>
<a class="im_dialogs_search_clear" ng-click="searchClear()" ng-show="search.query.length"> <a class="im_dialogs_search_clear" ng-click="searchClear()" ng-show="search.query.length">
@ -117,57 +104,6 @@
<div ng-show="state.loaded"> <div ng-show="state.loaded">
<div my-history class="im_history_col"> <div my-history class="im_history_col">
<div class="im_history_panel_wrap">
<div class="im_history_panel clearfix" ng-controller="AppImPanelController">
<div class="im_history_panel_title">
<a class="im_history_panel_info_link pull-right" ng-click="showPeerInfo()" my-i18n="im_info"></a>
<a class="im_history_panel_edit_link pull-right" ng-click="toggleEdit()" my-i18n="im_edit"></a>
<div class="dropdown im_history_panel_media_dropdown pull-right" dropdown>
<a class="dropdown-toggle" dropdown-toggle><my-i18n msgid="im_media"></my-i18n><i class="icon icon-caret"></i></a>
<ul class="dropdown-menu">
<li><a ng-click="toggleMedia('photos')" my-i18n="im_media_photos"></a></li>
<li><a ng-click="toggleMedia('video')" my-i18n="im_media_video"></a></li>
<li><a ng-click="toggleMedia('documents')" my-i18n="im_media_documents"></a></li>
<li><a ng-click="toggleMedia('audio')" my-i18n="im_media_audio"></a></li>
</ul>
</div>
<a ng-show="historyFilter.mediaType.length || skippedHistory" class="im_history_panel_return_link pull-right" ng-click="returnToRecent()" ng-switch="skippedHistory">
<span ng-switch-when="true" my-i18n="im_show_recent_messages"></span>
<span ng-switch-default my-i18n="im_show_all_messages"></span>
<strong class="im_history_panel_return_count" ng-show="missedCount > 0" ng-bind="'+' + missedCount"></strong>
</a>
<div ng-switch="historyFilter.mediaType">
<h4 ng-switch-when="photos" my-i18n="im_media_photos"></h4>
<h4 ng-switch-when="video" my-i18n="im_media_video"></h4>
<h4 ng-switch-when="documents" my-i18n="im_media_documents"></h4>
<h4 ng-switch-when="audio" my-i18n="im_media_audio"></h4>
<h4 ng-switch-default ng-switch="historyPeer.id > 0" ng-click="showPeerInfo()">
<div ng-switch-when="true">
<span ng-bind-html="historyPeer.data.rFullName"></span>
<small class="im_peer_online" my-user-status="historyPeer.id"></small>
</div>
<div ng-switch-default>
<span ng-bind-html="historyPeer.data.rTitle"></span>
<small class="im_chat_users">
<ng-pluralize count="historyPeer.data.participants_count"
when="im_pluralize_participants">
</ng-pluralize>
</small>
</div>
</h4>
</div>
</div>
</div>
</div>
<div class="im_history_wrap nano"> <div class="im_history_wrap nano">
<div class="im_history_scrollable_wrap nano-content"> <div class="im_history_scrollable_wrap nano-content">
@ -238,27 +174,26 @@
<form my-send-form draft-message="draftMessage" class="im_send_form" ng-class="{im_send_form_empty: !draftMessage.text.length}"> <form my-send-form draft-message="draftMessage" class="im_send_form" ng-class="{im_send_form_empty: !draftMessage.text.length}">
<div class="im_send_field_wrap"> <div class="im_send_field_wrap">
<div class="im_emoji_btn pull-right" title="{{'im_emoji_btn_title' | i18n}}">
<i class="icon icon-emoji"></i>
</div>
<div class="im_send_dropbox_wrap" my-i18n="im_photos_drop_text"></div> <div class="im_send_dropbox_wrap" my-i18n="im_photos_drop_text"></div>
<textarea ng-model="draftMessage.text" placeholder="{{'im_message_field_placeholder' | i18n}}" class="form-control im_message_field no_outline"></textarea> <textarea ng-model="draftMessage.text" placeholder="{{'im_message_field_placeholder' | i18n}}" class="form-control im_message_field no_outline"></textarea>
</div> </div>
<div class="im_media_attach pull-right"> <div class="clearfix">
<input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/*, video/*, audio/*" title="{{'im_media_attach_title' | i18n}}"/> <div class="im_attach pull-left">
<i class="icon icon-camera"></i> <input type="file" class="im_attach_input" size="28" multiple="true" title="{{'im_attach_file_title' | i18n}}" />
</div> <i class="icon icon-paperclip"></i>
</div>
<div class="im_attach pull-right"> <div class="im_media_attach pull-left">
<input type="file" class="im_attach_input" size="28" multiple="true" title="{{'im_attach_file_title' | i18n}}" /> <input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/*, video/*, audio/*" title="{{'im_media_attach_title' | i18n}}"/>
<i class="icon icon-paperclip"></i> <i class="icon icon-camera"></i>
</div> </div>
<div class="im_emoji_btn pull-right" title="{{'im_emoji_btn_title' | i18n}}"> <button type="submit" class="btn btn-md im_submit" my-i18n="im_submit_message"></button>
<i class="icon icon-emoji"></i>
</div> </div>
<button type="submit" class="btn btn-success im_submit">
<span class="im_submit_text" my-i18n="im_submit_message"></span>
</button>
</form> </form>
</div> </div>
@ -277,4 +212,4 @@
</div> </div>
<div my-footer></div> <div class="footer_wrap footer_empty"></div>

4
app/partials/desktop/settings_modal.html

@ -33,7 +33,7 @@
</div> </div>
<div class="md_modal_body"> <div class="md_modal_body">
<div class="md_modal_iconed_section_wrap md_modal_iconed_section_number"> <div class="md_modal_iconed_section_wrap md_modal_iconed_section_number">
<i class="md_modal_section_icon md_modal_section_icon_phone"></i> <i class="md_modal_section_icon md_modal_section_icon_phone"></i>
@ -108,7 +108,7 @@
</div> </div>
<div class="md_modal_section_link_wrap"> <div class="md_modal_section_link_wrap">
<a class="md_modal_section_link" ng-click="openChangelog()" my-i18n="settings_modal_about"></a> <a class="md_modal_section_link" ng-click="logOut()" my-i18n="head_log_out"></a>
</div> </div>
</div> </div>

2
app/partials/mobile/head.html

@ -32,7 +32,7 @@
<li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('audio')" my-i18n="head_media_audio"></a></li> <li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('audio')" my-i18n="head_media_audio"></a></li>
</ul> </ul>
<ul ng-if="!isLoggedIn" class="dropdown-menu"> <ul ng-if="!isLoggedIn" class="dropdown-menu">
<li><a href="https://github.com/zhukov/webogram" target="_blank" my-i18n="head_about"></a></li> <li><a href="https://telegram.org" target="_blank" my-i18n="head_about"></a></li>
</ul> </ul>
</div> </div>

2
app/webogram.appcache

@ -1,6 +1,6 @@
CACHE MANIFEST CACHE MANIFEST
# 43 # 44
NETWORK: NETWORK:
* *

25
gulpfile.js

@ -4,6 +4,9 @@ var pj = require('./package.json');
var $ = require('gulp-load-plugins')(); var $ = require('gulp-load-plugins')();
var concat = require('gulp-concat'); var concat = require('gulp-concat');
var path = require('path'); var path = require('path');
var http = require('http');
var livereload = require('gulp-livereload');
var st = require('st');
// The generated file is being created at src // The generated file is being created at src
// so it can be fetched by usemin. // so it can be fetched by usemin.
@ -203,6 +206,28 @@ gulp.task('package-dev', function() {
); );
}); });
gulp.task('watchcss', function() {
gulp.src('app/css/*.css')
.pipe(livereload());
});
gulp.task('watchhtml', function() {
gulp.src('app/partials/**/*.html')
.pipe(livereload());
});
gulp.task('watch', ['server'], function() {
livereload.listen({ basePath: 'app' });
gulp.watch('app/css/*.css', ['watchcss']);
gulp.watch('app/partials/**/*.html', ['watchhtml']);
});
gulp.task('server', function(done) {
http.createServer(
st({ path: __dirname, index: 'index.html', cache: false })
).listen(8000, done);
});
gulp.task('clean', function() { gulp.task('clean', function() {
return gulp.src(['dist/*', 'app/js/templates.js', '!dist/.git']).pipe($.clean()); return gulp.src(['dist/*', 'app/js/templates.js', '!dist/.git']).pipe($.clean());

33
package.json

@ -30,25 +30,36 @@
"bugs": { "bugs": {
"url": "https://github.com/zhukov/webogram/issues" "url": "https://github.com/zhukov/webogram/issues"
}, },
"locales": ["en-us", "es-es", "de-de", "it-it", "ru-ru", "nl-nl", "pt-br"], "locales": [
"en-us",
"es-es",
"de-de",
"it-it",
"ru-ru",
"nl-nl",
"pt-br"
],
"homepage": "http://zhukov.github.io/webogram", "homepage": "http://zhukov.github.io/webogram",
"devDependencies": { "devDependencies": {
"event-stream": "^3.1.0",
"gulp": "~3.5.5", "gulp": "~3.5.5",
"gulp-angular-templatecache": "^1.1.0", "gulp-angular-templatecache": "^1.1.0",
"gulp-clean": "^0.2.4",
"gulp-concat": "^2.1.7",
"gulp-grep-stream": "0.0.2",
"gulp-imagemin": "^0.1.5",
"gulp-livereload": "^3.0.2",
"gulp-load-plugins": "^0.4.0", "gulp-load-plugins": "^0.4.0",
"gulp-usemin": "^0.3.8", "gulp-manifest": "0.0.3",
"gulp-uglify": "^1.0.2",
"gulp-rev": "^1.1.0",
"gulp-minify-css": "^0.3.0", "gulp-minify-css": "^0.3.0",
"gulp-minify-html": "^0.1.1", "gulp-minify-html": "^0.1.1",
"gulp-imagemin": "^0.1.5", "gulp-ng-annotate": "~0.3.3",
"gulp-clean": "^0.2.4",
"gulp-replace": "^0.2.0", "gulp-replace": "^0.2.0",
"gulp-concat": "^2.1.7", "gulp-rev": "^1.1.0",
"gulp-grep-stream": "0.0.2", "gulp-uglify": "^1.0.2",
"event-stream": "^3.1.0", "gulp-usemin": "^0.3.8",
"gulp-zip": "^0.1.2", "gulp-zip": "^0.1.2",
"gulp-manifest": "0.0.3", "http": "0.0.0",
"gulp-ng-annotate": "~0.3.3" "st": "^0.5.2"
} }
} }

Loading…
Cancel
Save