Merged Extract mobile version

Closes #449

app/css/desktop.css

@@ -0,0 +1,834 @@
+/** initial setup **/
+.nano {
+  position : relative;
+  width    : 100%;
+  height   : 100%;
+  overflow : hidden;
+}
+.nano > .nano-content {
+  position      : absolute;
+  overflow      : scroll;
+  overflow-x    : hidden;
+  top           : 0;
+  right         : 0;
+  bottom        : 0;
+  left          : 0;
+}
+.nano > .nano-content:focus {
+  outline: thin dotted;
+}
+.nano > .nano-content::-webkit-scrollbar {
+  display: none;
+}
+.has-scrollbar > .nano-content::-webkit-scrollbar {
+  display: block;
+}
+.nano > .nano-pane {
+  background : rgba(0,0,0,.25);
+  position   : absolute;
+  width      : 10px;
+  right      : 0;
+  top        : 0;
+  bottom     : 0;
+  visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
+  opacity    : .01;
+  -webkit-transition    : .2s;
+  -moz-transition       : .2s;
+  -o-transition         : .2s;
+  transition            : .2s;
+  -moz-border-radius    : 5px;
+  -webkit-border-radius : 5px;
+  border-radius         : 5px;
+}
+.nano > .nano-pane > .nano-slider {
+  background: #444;
+  background: rgba(0,0,0,.5);
+  position              : relative;
+  margin                : 0 1px;
+  -moz-border-radius    : 3px;
+  -webkit-border-radius : 3px;
+  border-radius         : 3px;
+}
+.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {
+  visibility : visible\9; /* Target only IE7 and IE8 with this hack */
+  opacity    : 0.99;
+}
+
+.emoji-menu .nano > .nano-pane {
+  background : rgba(255,255,255,0.0);
+  right: -2px;
+}
+.emoji-menu .nano > .nano-pane > .nano-slider {
+  background: #d1d1d1;
+  margin: 0 3px 0 4px;
+}
+
+.countries_modal_col .nano > .nano-pane {
+  background : rgba(3,36,64,0.08);
+  width      : 3px;
+  right: 6px;
+  top: 0;
+  -webkit-transition    : .2s;
+  -moz-transition       : .2s;
+  -o-transition         : .2s;
+  transition            : .2s;
+  -moz-border-radius    : 0;
+  -webkit-border-radius : 0;
+  border-radius         : 0;
+}
+.countries_modal_col .nano > .nano-pane > .nano-slider {
+  background : rgba(3,46,79,0.22);
+  margin: 0;
+  -moz-border-radius    : 0;
+  -webkit-border-radius : 0;
+  border-radius         : 0;
+}
+
+
+
+.im_page_wrap {
+  background: #FFF;
+  max-width: 1000px;
+  min-width: 300px;
+  margin: 0 auto;
+
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow:    0px 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow:         0px 1px 2px rgba(0, 0, 0, 0.1);
+
+  border-radius: 0 0 3px 3px;
+  overflow: hidden;
+}
+
+
+.im_page_footer {
+  font-size: 11px;
+  text-align: center;
+  color: #9cacb9;
+  line-height: 40px;
+}
+.im_page_footer_brand {
+  color: #9cacb9;
+  font-weight: bold;
+}
+.im_page_footer_brand:hover,
+.im_page_footer_brand:active {
+  color: #8499aa;
+  text-decoration: none;
+}
+
+.im_dialogs_col {
+  margin-right: -7px;
+}
+.im_dialogs_col_wrap {
+  float: left;
+  width: 31%;
+  border-right: 2px solid #E9EBED;
+  padding-bottom: 10px;
+}
+.im_dialogs_scrollable_wrap {
+  padding: 0 19px 0 12px;
+}
+.im_dialogs_col .nano > .nano-pane {
+  background : rgba(0,0,0,0.0);
+  width      : 12px;
+  right: 0px;
+  -moz-border-radius    : 0;
+  -webkit-border-radius : 0;
+  border-radius         : 0;
+  -webkit-transition    : none;
+  -moz-transition       : none;
+  -o-transition         : none;
+  transition            : none;
+}
+.im_dialogs_col .nano > .nano-pane > .nano-slider {
+  background: #A5B1B9;
+  margin: 0 5px;
+  -moz-border-radius    : 0;
+  -webkit-border-radius : 0;
+  border-radius         : 0;
+}
+
+.im_history_col_wrap {
+  float: left;
+  width: 69%;
+}
+.im_history_col .nano > .nano-pane,
+.contacts_modal_col .nano > .nano-pane,
+.im_dialogs_modal_col .nano > .nano-pane {
+  background : rgba(3,36,64,0.08);
+  width      : 9px;
+  right: 0;
+  top: 0;
+  -moz-border-radius    : 2px;
+  -webkit-border-radius : 2px;
+  border-radius         : 2px;
+
+  -webkit-transition    : none;
+  -moz-transition       : none;
+  -o-transition         : none;
+  transition            : none;
+}
+.contacts_modal_col .nano > .nano-pane {
+  width: 6px;
+  right: 7px;
+}
+
+.im_dialogs_modal_col .nano > .nano-pane {
+  width: 6px;
+  right: 2px;
+}
+.im_dialogs_modal_col .im_dialogs_scrollable_wrap {
+  padding: 0 12px 0 12px;
+}
+.contacts_modal_col {
+  margin-right: -17px;
+}
+.contacts_scrollable_wrap {
+  padding: 0 17px 0 0;
+}
+
+.im_history_col .nano > .nano-pane {
+  top: 10px;
+  right: 8px;
+}
+.im_history_col .nano > .nano-pane > .nano-slider,
+.contacts_modal_col .nano > .nano-pane > .nano-slider,
+.im_dialogs_modal_col .nano > .nano-pane > .nano-slider {
+  background : rgba(3,46,79,0.22);
+  margin: 0;
+  -moz-border-radius    : 2px;
+  -webkit-border-radius : 2px;
+  border-radius         : 2px;
+}
+
+
+.im_history_panel_wrap {
+  margin: 0 23px 0 15px;
+  cursor: pointer;
+  position: relative;
+  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.12);
+  -moz-box-shadow:    0px 1px 0px rgba(0, 0, 0, 0.12);
+  box-shadow:         0px 1px 0px rgba(0, 0, 0, 0.12);
+
+  position: relative;
+  z-index: 2;
+  min-height: 44px;
+}
+.im_history_panel {
+  padding: 10px 4px 0;
+}
+.im_history_panel_title h4 {
+  font-size: 17px;
+  line-height: 20px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin: 8px 0 6px;
+}
+.im_history_panel_title h4 small {
+  color: #999;
+  font-size: 13px;
+  margin-left: 5px;
+}
+.im_history_panel_info_link,
+.im_history_panel_edit_link,
+.im_history_panel_return_link,
+.im_history_panel_media_dropdown .dropdown-toggle {
+  font-size: 13px;
+  font-weight: normal;
+  padding-top: 5px;
+  line-height: 1;
+}
+.im_history_panel_media_dropdown {
+  padding-top: 2px;
+}
+.im_history_panel_edit_link,
+.im_history_panel_return_link,
+.im_history_panel_media_dropdown {
+  font-size: 13px;
+  margin-right: 20px;
+}
+.im_history_panel_media_dropdown,
+.im_history_panel_return_count {
+  margin-left: 5px;
+}
+
+.im_history_panel_media_dropdown .dropdown-menu {
+  border-radius: 2px;
+  right: auto;
+  left: -15px;
+  margin-top: 11px;
+  padding: 0;
+
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175);
+}
+
+.im_history_no_dialogs_wrap {
+  margin: 122px 170px 60px;
+  text-align: center;
+}
+
+.im_history_appending {
+  -webkit-transition: all ease-in-out 0.2s;
+  -moz-transition: all ease-in-out 0.2s;
+  -ms-transition: all ease-in-out 0.2s;
+  -o-transition: all ease-in-out 0.2s;
+  transition: all ease-in-out 0.2s;
+}
+
+/* Contacts modal */
+.contacts_modal_window .modal-dialog {
+  max-width: 456px;
+}
+.contacts_modal_header {
+  padding: 6px 0 18px;
+}
+.contacts_modal_edit_wrap {
+  position: absolute;
+  margin-top: -1px;
+}
+.contacts_modal_edit_link {
+  font-size: 14px;
+  padding: 5px 7px;
+}
+.contacts_modal_title {
+  font-size: 14px;
+  margin: 0;
+  text-align: center;
+  font-weight: bold;
+}
+
+.icon-message-status {
+  background: #43A4DB;
+  border: 0;
+  display: block;
+  width: 10px;
+  height: 10px;
+  border-radius: 7px;
+  position: absolute;
+  margin-left: -26px;
+  margin-top: 13px;
+  opacity: 0;
+}
+.im_message_unread .icon-message-status {
+  opacity: 1.0;
+}
+.im_message_pending .icon-message-status {
+  opacity: 0.5;
+}
+.im_message_error_btn {
+  display: none;
+}
+.im_message_error .im_message_error_btn {
+  display: inline;
+}
+.im_message_error_btn .icon-message-status {
+  background: #da564d;
+  opacity: 0.85;
+}
+.im_message_error_btn .icon-message-status:hover {
+  opacity: 1;
+}
+
+
+.im_edit_flush_link,
+.im_edit_cancel_link {
+  display: block;
+  padding: 6px 17px;
+  border-radius: 2px;
+  overflow: hidden;
+  margin: 6px 6px;
+}
+.im_edit_cancel_link {
+  float: left;
+}
+.im_edit_flush_link {
+  float: right;
+}
+.im_edit_flush_link:hover,
+.im_edit_cancel_link:hover {
+  background: #f2f6fa;
+  text-decoration: none;
+}
+
+.im_submit {
+  padding: 6px 13px;
+  font-size: 13px;
+  line-height: 17px;
+  min-width: 60px;
+}
+
+.im_message_selected .im_message_date,
+.im_message_selected .im_message_document_size,
+.im_message_selected .im_message_audio_duration,
+.im_message_selected .im_message_audio_size,
+.im_message_selected .im_message_fwd_date,
+.im_history_selectable .im_message_outer_wrap:hover .im_message_date,
+.im_history_selectable .im_message_outer_wrap:hover .im_message_document_size,
+.im_history_selectable .im_message_outer_wrap:hover .im_message_audio_duration,
+.im_history_selectable .im_message_outer_wrap:hover .im_message_audio_size,
+.im_history_selectable .im_message_outer_wrap:hover .im_message_fwd_date {
+  color: #68839c;
+}
+
+.im_content_message_select_area {
+  display: none;
+  cursor: pointer;
+  position: absolute;
+  width: 112px;
+  height: 52px;
+  margin: -8px 0 0 -112px;
+  -webkit-user-select: text;
+}
+@media (min-width: 1024px) {
+  .im_content_message_select_area {
+    display: block;
+  }
+  .im_message_wrap {
+    position: relative;
+  }
+}
+
+.im_history_selectable .icon-select-tick,
+.im_content_message_select_area:hover .icon-select-tick {
+  display: inline-block;
+}
+.im_message_selected .icon-select-tick,
+.im_history_selectable .im_message_outer_wrap:hover .icon-select-tick,
+.im_content_message_select_area:hover .icon-select-tick {
+  background-position: -9px -481px;
+  opacity: 0.5;
+}
+.im_message_selected .icon-select-tick {
+  opacity: 1 !important;
+}
+
+/* Dialogs modal */
+.peer_select_window .modal-dialog {
+  max-width: 506px;
+}
+.peer_select_modal_wrap .modal-body {
+  padding: 0 2px 14px;
+}
+
+
+@media (max-width: 900px) {
+
+  /* Status ticks */
+  .icon-message-status,
+  .im_message_error_btn,
+  .icon-message-status-tick {
+    display: none;
+  }
+  .im_message_out .icon-message-status-tick {
+    display: inline-block;
+    width: 16px;
+    height: 10px;
+    background: url(../img/icons/Checks2_2x.png);
+    background-size: 16px 10px;
+    top: 2px;
+    position: relative;
+  }
+  .is_1x .im_message_out .icon-message-status-tick {
+    background-image: url(../img/icons/Checks2_1x.png);
+  }
+  .im_message_pending .icon-message-status-tick {
+    display: none;
+  }
+  .im_message_unread .icon-message-status-tick {
+    background: url(../img/icons/Checks1_2x.png);
+    background-size: 16px 10px;
+  }
+  .is_1x .im_message_unread .icon-message-status-tick {
+    background-image: url(../img/icons/Checks1_1x.png);
+  }
+  .im_message_date {
+    padding: 0;
+  }
+}
+
+
+.im_message_fwd .im_message_fwd_author_wrap,
+.im_message_fwd .im_message_text,
+.im_message_fwd .im_message_media {
+  margin-left: 42px;
+}
+
+.im_send_panel_wrap {
+  max-width: 526px;
+}
+.im_send_form {
+  max-width: 389px;
+  left: 62px;
+  right: 62px;
+}
+
+.im_panel_peer_photo,
+.im_panel_own_photo {
+  width: 50px;
+  height: 50px;
+  border-radius: 3px;
+  overflow: hidden;
+}
+div.im_panel_peer_photo {
+  cursor: pointer;
+  margin-left: 12px;
+  height: 55px;
+}
+div.im_panel_own_photo {
+  margin-right: 12px;
+}
+
+.im_panel_peer_online {
+  background: #6DBF69;
+  border: 1px solid #FFF;
+  display: block;
+  width: 11px;
+  height: 11px;
+  border-radius: 6px;
+  overflow: hidden;
+  position: absolute;
+  margin-top: -7px;
+  margin-left: 43px;
+}
+
+/* Peer modals */
+.user_modal_window .modal-dialog {
+  max-width: 506px;
+}
+.user_modal_photo_profile_wrap {
+  padding: 13px 12px;
+  margin-bottom: 15px;
+}
+.user_modal_image_wrap {
+  display: block;
+  width: 100px;
+  margin-right: 22px;
+  overflow: hidden;
+  border-radius: 3px;
+}
+.user_modal_image {
+  width: 100px;
+  height: 100px;
+}
+.user_modal_header {
+  font-weight: bold;
+  margin: 2px 0 7px;
+}
+.user_modal_status {
+  color: #999;
+  margin-bottom: 16px;
+}
+
+.user_modal_main_btn {
+  border: 0;
+  font-size: 12px;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin: 8px 10px 0 0;
+  float: left;
+}
+.user_modal_other_btn {
+  margin: 8px 0 0 0;
+  float: left;
+}
+.user_modal_other_btn .dropdown-toggle {
+  border: 0;
+  font-size: 12px;
+}
+.user_modal_other_btn .dropdown-menu {
+  margin-left: -3px;
+}
+
+.user_modal_settings_wrap {
+  margin-top: 25px;
+}
+.user_modal_notifications {
+  font-weight: bold;
+}
+.user_modal_clear {
+  margin-top: 20px;
+}
+
+
+.chat_modal_window .modal-dialog {
+  max-width: 506px;
+}
+
+.chat_modal_header {
+  font-weight: bold;
+  margin: 0 0 10px;
+}
+.chat_modal_members_count {
+  color: #999;
+  margin-bottom: 16px;
+}
+
+.chat_modal_actions_wrap {
+  position: relative;
+}
+
+.chat_modal_main_btn {
+  border: 0;
+  font-size: 12px;
+  padding-left: 16px;
+  padding-right: 16px;
+  float: left;
+  position: relative;
+  overflow: hidden;
+  margin-right: 10px;
+  margin-top: 8px;
+}
+.chat_modal_invite_btn {
+  border: 0;
+  font-size: 12px;
+  padding-left: 16px;
+  padding-right: 16px;
+  float: left;
+  position: relative;
+  margin-right: 10px;
+  margin-top: 8px;
+}
+.chat_modal_delete_btn {
+  border: 0;
+  font-size: 12px;
+  padding-left: 16px;
+  padding-right: 16px;
+  float: left;
+  margin-right: 10px;
+  margin-top: 8px;
+}
+.chat_modal_other_btn {
+  margin-top: 8px;
+  float: left;
+}
+.chat_modal_other_btn .dropdown-toggle {
+  border: 0;
+  font-size: 12px;
+}
+.chat_modal_other_btn .dropdown-menu {
+  margin-left: -3px;
+}
+
+.chat_modal_photo_update_link {
+  display: block;
+  padding: 5px 14px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.428571429;
+  color: #333333;
+  white-space: nowrap;
+  font-size: 13px;
+  overflow: hidden;
+  position: relative;
+}
+.chat_modal_photo_update_link:hover {
+  text-decoration: none;
+  color: #262626;
+  background-color: #f5f5f5;
+}
+
+.chat_modal_settings_wrap {
+  margin-top: 10px;
+}
+
+.settings_modal_window .modal-dialog {
+  max-width: 482px;
+}
+.settings_modal_settings {
+  padding: 4px 0;
+  margin: 0;
+}
+.settings_modal_wrap .user_modal_main_btn {
+  position: relative;
+  overflow: hidden;
+}
+.settings_profile_edit_form {
+  margin-bottom: 15px;
+}
+.settings_profile_image_wrap {
+  float: left;
+  width: 120px;
+  margin-right: 22px;
+}
+.settings_profile_first_name,
+.settings_profile_last_name {
+  width: 180px;
+  float: left;
+  margin-bottom: 0;
+}
+.settings_profile_first_name label,
+.settings_profile_last_name label {
+  margin-bottom: 3px;
+}
+.settings_profile_first_name {
+  margin-right: 22px;
+  margin-bottom: 10px;
+}
+.settings_profile_last_name {
+  margin-right: 10px;
+  margin-bottom: 15px;
+}
+.settings_profile_save {
+  padding-top: 21px;
+  float: left;
+}
+.settings_profile_save_btn {
+  width: 50px;
+}
+
+.settings_profile_edit_form {
+  margin-bottom: 0;
+}
+.settings_profile_edit_form input {
+  font-size: 12px;
+  line-height: normal;
+  background: #F2F2F2;
+  border: 1px solid #F2F2F2;
+  border-radius: 0;
+  padding: 6px 6px 6px 6px;
+  margin-bottom: 0;
+  margin: 0;
+}
+.settings_profile_edit_form input:focus,
+.settings_profile_edit_form input:active {
+  background-color: #FFF;
+}
+
+.settings_send_choose_form input {
+  margin-top: 2px;
+}
+.settings_send_choose_form {
+  margin-bottom: 20px;
+}
+
+.settings_user_phone,
+.settings_version {
+  color: #999;
+}
+.icon-volume-outer {
+  display: inline-block;
+  background: #c7c7c7;
+  border-radius: 10px;
+  overflow: hidden;
+  height: 18px;
+  padding: 5px 8px;
+  margin: 0 9px 0 0;
+  width: 32px;
+}
+.icon-volume-inner {
+  display: block;
+  background: #fff;
+  float: left;
+  width: 2px;
+  vertical-align: bottom;
+  margin: 0 1px 0;
+  height: 8px;
+}
+.icon-volume-inner1 {
+  height: 2px;
+  margin-top: 6px;
+}
+.icon-volume-inner2 {
+  height: 4px;
+  margin-top: 4px;
+}
+.icon-volume-inner3 {
+  height: 6px;
+  margin-top: 2px;
+}
+
+.icon-volume-outer1 .icon-volume-inner2,
+.icon-volume-outer1 .icon-volume-inner3,
+.icon-volume-outer1 .icon-volume-inner4,
+.icon-volume-outer2 .icon-volume-inner3,
+.icon-volume-outer2 .icon-volume-inner4,
+.icon-volume-outer3 .icon-volume-inner4 {
+  display: none;
+}
+
+
+.im_message_selected .im_message_outer_wrap,
+.im_message_focus .im_message_outer_wrap {
+  background: #f2f6fa;
+}
+.im_history_selectable .im_message_outer_wrap {
+  cursor: pointer;
+}
+.im_history_selectable .im_message_outer_wrap:hover {
+  background: #f2f6fa;
+}
+
+.im_message_wrap {
+  max-width: 526px;
+  padding: 0 15px;
+  margin: 0 auto;
+}
+
+.im_message_wrap {
+  position: static;
+}
+@media (min-width: 901px) {
+  .im_message_wrap {
+    position: relative;
+  }
+}
+
+.tooltip-inner {
+  background: rgba(0,0,0, 0.8);
+}
+.tooltip-arrow {
+  opacity: 0.8;
+}
+
+.im_dialogs_panel_dropdown {
+  margin-left: 8px;
+}
+
+.im_dialogs_panel_dropdown .dropdown-toggle {
+  background: #F2F2F2;
+  display: block;
+  border-radius: 2px;
+  overflow: hidden;
+  padding: 11px 12px;
+  width: 38px;
+  height: 34px;
+}
+.im_dialogs_panel_dropdown .dropdown-toggle .icon-bar {
+  background: #b3b3b3;
+  display: block;
+  height: 2px;
+  margin-bottom: 3px;
+}
+.im_dialogs_panel_dropdown .dropdown-toggle .icon-bar:last-child {
+  margin-bottom: 0;
+}
+
+
+
+.im_dialogs_panel_dropdown.open .dropdown-toggle {
+  background: #6690b0;
+}
+.im_dialogs_panel_dropdown.open .dropdown-toggle .icon-bar {
+  background: #fff;
+}
+
+/* Import contact modal */
+.import_contact_modal_window .modal-dialog {
+  max-width: 480px;
+}
+
+.modal-content-animated {
+  -webkit-transition: margin-top linear 0.2s;
+  transition: margin-top linear 0.2s;
+}
+
+.countries_modal_col {
+  max-height: 350px;
+}
+
+.changelog_modal_window .modal-dialog {
+  max-width: 506px;
+}

app/css/mobile.css

@@ -1,5 +1,3 @@
-@media (max-width: 479px) {
-
 html {
   background: #FFF;
 }
@@ -19,6 +17,7 @@ html {
 
 .tg_page_head .navbar > .container .navbar-brand {
   padding-left: 9px;
+  outline: none;
 }
 .im_history_panel_edit_link {
   margin-right: 0;
@@ -40,7 +39,7 @@ html {
 }
 
 .tg_page_head .navbar-inverse .navbar-toggle:hover,
-.tg_page_head .navbar-inverse .navbar-toggle:active,
+/*.tg_page_head .navbar-inverse .navbar-toggle:active,*/
 .tg_page_head .navbar-inverse .navbar-toggle:focus,
 .tg_page_head .navbar-inverse .open  .navbar-toggle {
   background-color: rgba(0,0,0,0.1);
@@ -160,8 +159,8 @@ html {
   font-size: 13px;
   height: 46px;
 }
-.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:hover,
+.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:hover/*,
-.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:active {
+.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:active*/ {
   background-color: rgba(0,0,0,0.1);
 }
 .navbar-quick-nav .icon-back {
@@ -233,7 +232,6 @@ html {
   margin-right: 0;
 }
 .navbar_offline .navbar-quick-nav li > a > .navbar-quick-back-title,
-.navbar_offline .im_head_attach,
 .navbar_offline .navbar-search-wrap,
 .navbar_offline .navbar-history-edit {
   display: none;
@@ -283,6 +281,12 @@ html {
   text-align: center;
 }
 
+.mobile_scrollable_wrap {
+  overflow: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
 
 .login_form_wrap {
   border-radius: 0;
@@ -291,6 +295,29 @@ html {
   -webkit-box-shadow: none;
   margin: 30px auto 20px;
 }
+.login_form_wrap .btn-primary {
+  padding: 12px 13px;
+}
+.login_phone_country,
+.login_phone_number {
+  height: 42px;
+}
+
+.im_dialogs_empty_header {
+  font-size: 19px;
+  margin-bottom: 10px;
+}
+.im_dialogs_empty_lead {
+  font-size: 14px;
+  line-height: 160%;
+}
+.im_dialogs_add_contact,
+.im_dialogs_import_phonebook {
+  padding: 12px 13px;
+}
+.im_dialogs_add_contact + .im_dialogs_import_phonebook {
+  margin-top: 10px;
+}
 
 .im_page_wrap {
   background: none;
@@ -298,15 +325,6 @@ html {
   border: 0;
   overflow: hidden;
 }
-
-.im_page_footer {
-  display: none;
-}
-
-.im_panel_own_photo,
-.im_panel_peer_photo {
-  display: none;
-}
 .im_history_selectable .im_message_outer_wrap:hover,
 .im_message_selected {
   background: #e1e9f0;
@@ -425,10 +443,6 @@ html {
   width: auto;
   float: none;
 }
-.im_message_audio_actions,
-.im_message_document_actions {
-  display: none;
-}
 .im_message_audio_player_wrap {
   height: 38px;
   line-height: 38px;
@@ -486,9 +500,6 @@ img.im_message_video_thumb,
   -ms-filter: none;
   filter: none;
 }
-.im_message_video .im_message_document_info {
-  display: none;
-}
 
 .im_message_document_thumb_wrap {
   position: absolute;
@@ -508,12 +519,18 @@ img.im_message_video_thumb,
 .im_send_panel_wrap {
   padding: 10px 0 12px;
 }
-.icon-select-tick {
+
-  margin: 10px 0 0 -24px
+.im_history_scrollable_wrap.im_history_to_bottom {
+  overflow: hidden;
+  position: relative;
 }
 .im_history {
   position: static;
 }
+
+.icon-select-tick {
+  margin: 10px 0 0 -24px
+}
 .im_message_wrap {
   padding: 0 8px;
 }
@@ -578,6 +595,7 @@ img.im_message_video_thumb,
 }
 .im_message_date {
   font-size: 12px;
+  padding-left: 4px;
 }
 .im_message_out .im_message_meta {
   right: auto;
@@ -701,20 +719,10 @@ a.im_message_from_photo {
 }
 
 
-.form-control {
+.im_dialogs_search_field,
+.contacts_modal_search_field {
   font-size: 1.2em;
 }
-.im_history_typing_wrap {
-  display: none;
-}
-.im_history_panel_info_link {
-  display: none;
-}
-
-.im_edit_flush_link,
-.im_edit_cancel_link {
-  display: none;
-}
 .im_edit_delete_btn,
 .im_edit_forward_btn {
   background: none !important;
@@ -734,27 +742,10 @@ a.im_message_from_photo {
 .im_edit_forward_btn strong {
   font-weight: normal;
 }
-
-.im_edit_panel_border {
-  display: none;
-}
 .im_edit_panel_wrap {
   padding: 5px 0;
   margin: 0;
 }
-.im_history_col .nano > .nano-pane {
-  top: 3px;
-  right: 3px;
-  width: 6px;
-}
-.im_history_col .nano > .nano-pane > .nano-slider,
-.contacts_modal_col .nano > .nano-pane > .nano-slider,
-.im_dialogs_modal_col .nano > .nano-pane > .nano-slider {
-  background : rgba(3,46,79,0.22);
-  border-radius: 3px;
-  margin: 0;
-}
-
 
 
 .im_dialogs_col_wrap {
@@ -776,18 +767,6 @@ a.im_message_from_photo {
 .im_page_peer_not_selected .im_dialogs_col_wrap {
   display: block;
 }
-.im_dialogs_col {
-  margin-right: 0;
-}
-.im_page_peer_not_selected .im_dialogs_col_wrap .nano-pane {
-  width: 6px;
-  right: 3px;
-}
-.im_page_peer_not_selected .im_dialogs_col_wrap .nano-pane > .nano-slider {
-  background : rgba(3,46,79,0.22);
-  border-radius: 3px;
-  margin: 0;
-}
 
 .im_dialogs_panel {
   display: none;
@@ -797,20 +776,13 @@ a.im_message_from_photo {
 .im_dialogs_panel_search.im_dialogs_panel {
   display: block;
 }
-.im_dialogs_panel_dropdown {
-  display: none;
-}
 .im_page_split .im_dialogs_search {
   margin-right: 0;
 }
-.im_dialogs_modal_col .im_dialogs_scrollable_wrap,
-.im_dialogs_scrollable_wrap {
-  padding: 0;
-}
 
 .im_dialogs_scrollable_wrap a.im_dialog {
-  border-bottom: 1px solid #d4d4d4;
+  border-bottom: 1px solid #eee;
-  border-top: 1px solid #d4d4d4;
+  border-top: 1px solid #eee;
   margin-top: -1px;
   border-radius: 0 !important;
   padding-right: 11px;
@@ -863,7 +835,9 @@ a.im_dialog:hover .im_dialog_message_text,
 a.im_dialog_selected .im_dialog_message_text {
   color: #8f8f8f;
 }
-
+.im_message_fwd_title {
+  display: none;
+}
 .im_grouped_fwd_start .im_message_fwd_title {
   display: block;
   color: #8a8a8a;
@@ -902,12 +876,6 @@ a.im_message_fwd_author {
   margin-left: 50px;
 }
 
-.im_grouped_fwd_short .im_message_fwd.im_message_out .im_message_fwd_author_wrap,
-.im_grouped_fwd_short .im_message_fwd.im_message_out .im_message_text,
-.im_grouped_fwd_short .im_message_fwd.im_message_out .im_message_media {
-  /*margin-left: 0;*/
-}
-
 
 
 .im_dialogs_scrollable_wrap a.im_dialog:hover,
@@ -916,32 +884,32 @@ a.im_message_fwd_author {
 .im_dialogs_scrollable_wrap .active a.im_dialog:hover,
 .im_dialogs_scrollable_wrap .active a.im_dialog_selected {
   border-radius: 0;
-  background-color: #f0f0f0;
+  background-color: #f4f4f4;
 }
 
-
+.modal.mobile_modal {
-.modal.page_modal {
   background: #FFF;
+  padding: 0;
 }
-.page_modal .modal-content {
+.mobile_modal .modal-content {
   border-radius: 0;
   box-shadow: none;
 }
-.page_modal .modal-dialog {
+.mobile_modal .modal-dialog {
   margin: 0;
 }
-.page_modal .modal-content .modal-body {
+.mobile_modal .modal-content .modal-body {
   padding-left: 0;
   padding-right: 0;
 }
-.page_modal .modal-footer {
+.mobile_modal .modal-footer {
   padding-left: 0;
   padding-right: 0;
   padding-bottom: 9px;
 }
 
 .mobile_modal_body,
-.page_modal .modal-content .mobile_modal_body {
+.mobile_modal .modal-content .mobile_modal_body {
   padding: 9px;
 }
 
@@ -1092,9 +1060,6 @@ a.mobile_modal_action .tg_checkbox_label {
 .is_1x .im_submit {
   background-image: url(../img/icons/IconsetW_1x.png);
 }
-.im_submit_text {
-  display: none;
-}
 
 .im_attach {
   position: absolute;
@@ -1124,7 +1089,6 @@ a.mobile_modal_action .tg_checkbox_label {
   opacity: 1;
 }
 
-.im_media_attach,
 .im_attach,
 .im_send_form_empty .im_submit {
   display: none;
@@ -1194,65 +1158,27 @@ a.mobile_modal_action .tg_checkbox_label {
 
 .emoji-menu {
   margin-left: -20px;
-  margin-top: -267px;
+  margin-top: -202px;
   width: 262px;
 }
+.emoji-menu .emoji-items-wrap {
+  height: 106px;
+}
 .emoji-menu .emoji-items a {
   padding: 5px;
 }
 
-.im_head_attach {
-  display: block;
-  float: right;
-  cursor: pointer;
-  overflow: hidden;
-  position: relative;
-  margin: 5px 0 5px 5px;
-  height: 34px;
-  border-radius: 4px;
-  padding: 3px 7px;
-  border: 1px solid #497495;
-}
-.navbar_peer_not_selected .im_head_attach {
-  display: none;
-}
-.im_head_attach:active {
-  background-color: rgba(255,255,255,0.1);
-}
-
-.im_head_attach .icon-paperclip {
-  display: inline-block;
-  width: 21px;
-  height: 22px;
-  vertical-align: text-top;
-  opacity: 0.8;
-  background: url(../img/icons/MobileIcons_2x.png) 0 -30px no-repeat;
-  background-size: 21px 52px;
-}
-.is_1x .im_head_attach .icon-paperclip {
-  background-image: url(../img/icons/MobileIcons_1x.png);
-}
-.im_head_attach:active .icon-paperclip {
-  opacity: 1;
-}
 
 .contacts_modal_search {
   padding: 3px 0 12px;
 }
 .contacts_modal_col {
-  margin-right: -12px;
+  margin: 0 -9px;
-}
-.contacts_scrollable_wrap {
-  padding-right: 12px;
-}
-.contacts_modal_col .nano > .nano-pane {
-  width: 6px;
-  right: 5px;
 }
 .contacts_modal_members_list a.contacts_modal_contact {
-  padding: 8px 0;
+  padding: 8px 9px;
   border-radius: 0;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid #eee;
 }
 .contacts_modal_members_list li.contacts_modal_contact_wrap {
   margin: 0;
@@ -1279,7 +1205,6 @@ a.mobile_modal_action .tg_checkbox_label {
 }
 .countries_modal_col {
   margin: 0 -9px;
-  max-height: none;
 }
 .countries_modal_members_list {
   padding: 0 12px 0 12px;
@@ -1287,6 +1212,3 @@ a.mobile_modal_action .tg_checkbox_label {
 .countries_scrollable_wrap a.countries_modal_country {
   padding: 8px 8px;
 }
-
-
-}

app/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" ng-app="myApp" manifest="webogram.appcache" ng-csp="">
+<html lang="en" manifest="webogram.appcache" ng-csp="">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
@@ -8,9 +8,7 @@
   <!-- build:css css/app.css -->
   <link rel="stylesheet" href="vendor/angular/angular-csp.css"/>
   <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
-  <link rel="stylesheet" href="vendor/jquery.nanoscroller/nanoscroller.css"/>
   <link rel="stylesheet" href="css/app.css"/>
-  <link rel="stylesheet" href="css/app_mobile.css"/>
   <!-- endbuild -->
 
   <link rel="icon" href="favicon.ico" type="image/x-icon" />
@@ -77,6 +75,7 @@
   PRODUCTION_ONLY_END-->
 
   <script type="text/javascript" src="js/directives.js"></script>
+  <script type="text/javascript" src="js/directives_mobile.js"></script>
   <!-- endbuild -->
 
 </body>

app/js/app.js

@@ -53,21 +53,9 @@ config(['$locationProvider', '$routeProvider', '$compileProvider', 'StorageProvi
     StorageProvider.setPrefix('t_');
   }
 
-  $routeProvider.when('/', {templateUrl: 'partials/welcome.html', controller: 'AppWelcomeController'});
+  $routeProvider.when('/', {templateUrl: templateUrl('welcome'), controller: 'AppWelcomeController'});
-  $routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: 'AppLoginController'});
+  $routeProvider.when('/login', {templateUrl: templateUrl('login'), controller: 'AppLoginController'});
-  $routeProvider.when('/im', {templateUrl: 'partials/im.html', controller: 'AppIMController', reloadOnSearch: false});
+  $routeProvider.when('/im', {templateUrl: templateUrl('im'), controller: 'AppIMController', reloadOnSearch: false});
   $routeProvider.otherwise({redirectTo: '/'});
 
 }]);
-
-
-(function () {
-  var classes = [
-    Config.Navigator.osX ? 'osx' : 'non_osx',
-    Config.Navigator.retina ? 'is_2x' : 'is_1x'
-  ];
-  if (Config.Modes.ios_standalone) {
-    classes.push('ios_standalone');
-  }
-  $(document.body).addClass(classes.join(' '));
-})();

app/js/controllers.js

@@ -43,18 +43,10 @@ angular.module('myApp.controllers', ['myApp.i18n'])
     $scope.callPending = {};
 
     $scope.chooseCountry = function () {
-      var tUrl = 'partials/country_select_modal.html',
-          className = 'countries_modal_window page_modal';
-
-      if (Config.Navigator.mobile) {
-        tUrl = 'partials/mobile/country_select_modal.html';
-        className += ' mobile_modal';
-      }
-
       var modal = $modal.open({
-        templateUrl: tUrl,
+        templateUrl: templateUrl('country_select_modal'),
         controller: 'CountrySelectModalController',
-        windowClass: className
+        windowClass: 'countries_modal_window mobile_modal'
       });
 
       modal.result.then(selectCountry);
@@ -335,18 +327,10 @@ angular.module('myApp.controllers', ['myApp.i18n'])
     $scope.historyState = {selectActions: false, typing: []};
 
     $scope.openSettings = function () {
-      var tUrl = 'partials/settings_modal.html',
-          className = 'settings_modal_window page_modal';
-
-      if (Config.Navigator.mobile) {
-        tUrl = 'partials/mobile/settings_modal.html';
-        className += ' mobile_modal';
-      }
-
       $modal.open({
-        templateUrl: tUrl,
+        templateUrl: templateUrl('settings_modal'),
         controller: 'SettingsModalController',
-        windowClass: className
+        windowClass: 'settings_modal_window mobile_modal'
       });
     }
 
@@ -366,10 +350,10 @@ angular.module('myApp.controllers', ['myApp.i18n'])
           scope.userIDs = userIDs;
 
           $modal.open({
-            templateUrl: 'partials/chat_create_modal.html',
+            templateUrl: templateUrl('chat_create_modal'),
             controller: 'ChatCreateModalController',
             scope: scope,
-            windowClass: 'group_edit_modal_window'
+            windowClass: 'group_edit_modal_window mobile_modal'
           });
         }
 
@@ -379,7 +363,9 @@ angular.module('myApp.controllers', ['myApp.i18n'])
     $scope.importContact = function () {
       AppUsersManager.openImportContact().then(function (foundContact) {
         if (foundContact) {
-          $scope.$broadcast('contact_imported');
+          $rootScope.$broadcast('history_focus', {
+            peerString: AppUsersManager.getUserString(foundContact)
+          });
         }
       });
     };
@@ -502,6 +488,14 @@ angular.module('myApp.controllers', ['myApp.i18n'])
         offset++;
       }
       $scope.dialogs.unshift(wrappedDialog);
+
+      if (!peersInDialogs[dialog.peerID]) {
+        peersInDialogs[dialog.peerID] = true;
+        if (contactsShown) {
+          showMoreContacts();
+        }
+      }
+
     });
 
     $scope.$on('dialog_flush', function (e, dialog) {
@@ -524,12 +518,6 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       }
     });
 
-    $scope.$on('contact_imported', function () {
-      if (contactsShown) {
-        loadDialogs();
-      }
-    })
-
     var prevMessages = false;
     $scope.$watchCollection('search', function () {
       if ($scope.search.messages != prevMessages) {
@@ -554,20 +542,22 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       }
     });
 
-    if (Config.Navigator.mobile) {
+    if (Config.Mobile) {
       $scope.$watch('curDialog.peer', function () {
         $scope.$broadcast('ui_dialogs_update')
       });
     }
 
     $scope.importPhonebook = function () {
-      PhonebookContactsService.openPhonebookImport().result.then(function (foundContacts) {
+      PhonebookContactsService.openPhonebookImport();
-        if (contactsShown && foundContacts.length) {
-          loadDialogs();
-        }
-      })
     };
 
+    $scope.$on('contacts_update', function () {
+      if (contactsShown) {
+        showMoreContacts();
+      }
+    });
+
     $scope.searchClear = function () {
       $scope.search.query = '';
       $scope.search.messages = false;
@@ -636,14 +626,6 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       });
     };
 
-    $scope.importPhonebook = function () {
-      PhonebookContactsService.openPhonebookImport().result.then(function (foundContacts) {
-        if (contactsShown && foundContacts.length) {
-          loadDialogs();
-        }
-      })
-    };
-
     function loadDialogs (force) {
       offset = 0;
       maxID = 0;
@@ -675,6 +657,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
           AppMessagesManager.getDialogs('', maxID, 100);
           if (!dialogsResult.dialogs.length) {
             $scope.isEmpty.dialogs = true;
+            showMoreDialogs();
           }
         } else {
           showMoreDialogs();
@@ -683,12 +666,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       });
     }
 
-    function showMoreDialogs () {
+    function showMoreContacts () {
-      if (contactsShown && (!hasMore || !offset)) {
-        return;
-      }
-
-      if (!hasMore && !$scope.search.messages && ($scope.search.query || !$scope.dialogs.length)) {
       contactsShown = true;
 
       var curJump = ++jump;
@@ -713,6 +691,15 @@ angular.module('myApp.controllers', ['myApp.i18n'])
         }
       });
       $scope.$broadcast('ui_dialogs_append');
+    }
+
+    function showMoreDialogs () {
+      if (contactsShown && (!hasMore || !offset)) {
+        return;
+      }
+
+      if (!hasMore && !$scope.search.messages && ($scope.search.query || !$scope.dialogs.length)) {
+        showMoreContacts();
         return;
       }
 
@@ -970,7 +957,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       var curJump = jump,
           curMoreJump = moreJump,
           inputMediaFilter = $scope.historyFilter.mediaType && {_: inputMediaFilters[$scope.historyFilter.mediaType]},
-          limit = Config.Navigator.mobile ? 20 : 0,
+          limit = Config.Mobile ? 20 : 0,
           getMessagesPromise = inputMediaFilter
         ? AppMessagesManager.getSearch($scope.curDialog.inputPeer, '', inputMediaFilter, maxID, limit)
         : AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID, limit);
@@ -1021,9 +1008,6 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       else if (forceRecent) {
         limit = 10;
       }
-      else if (Config.Navigator.mobile) {
-        limit = 20;
-      }
 
       moreActive = false;
       morePending = false;
@@ -1067,6 +1051,9 @@ angular.module('myApp.controllers', ['myApp.i18n'])
           if ($scope.skippedHistory) {
             delete message.unread;
           }
+          if (historyResult.unreadOffset) {
+            message.unreadAfter = true;
+          }
           peerHistory.messages.push(message);
         });
         peerHistory.messages.reverse();
@@ -1477,7 +1464,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       AppPhotosManager.downloadPhoto($scope.photoID);
     };
 
-    if (!$scope.messageID || Config.Navigator.mobile) {
+    if (!$scope.messageID || Config.Mobile) {
       $scope.nav.next = function () {
         $modalInstance.close();
       }
@@ -1499,7 +1486,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
     };
 
 
-    if (Config.Navigator.mobile) {
+    if (Config.Mobile) {
       $scope.canForward = true;
       $scope.canDelete = true;
       return;
@@ -1822,9 +1809,9 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       };
 
       $modal.open({
-        templateUrl: edit ? 'partials/edit_contact_modal.html' : 'partials/import_contact_modal.html',
+        templateUrl: templateUrl(edit ? 'edit_contact_modal' : 'import_contact_modal'),
         controller: 'ImportContactModalController',
-        windowClass: 'import_contact_modal_window page_modal',
+        windowClass: 'import_contact_modal_window mobile_modal',
         scope: scope
       }).result.then(function (foundUserID) {
         if ($scope.userID == foundUserID) {
@@ -2015,10 +2002,10 @@ angular.module('myApp.controllers', ['myApp.i18n'])
       scope.chatID = $scope.chatID;
 
       $modal.open({
-        templateUrl: 'partials/chat_edit_modal.html',
+        templateUrl: templateUrl('chat_edit_modal'),
         controller: 'ChatEditModalController',
         scope: scope,
-        windowClass: 'group_edit_modal_window'
+        windowClass: 'group_edit_modal_window mobile_modal'
       });
     }
 
@@ -2109,9 +2096,9 @@ angular.module('myApp.controllers', ['myApp.i18n'])
 
     $scope.editProfile = function () {
       $modal.open({
-        templateUrl: 'partials/profile_edit_modal.html',
+        templateUrl: templateUrl('profile_edit_modal'),
         controller: 'ProfileEditModalController',
-        windowClass: 'profile_edit_modal_window page_modal'
+        windowClass: 'profile_edit_modal_window mobile_modal'
       });
     };
 
@@ -2298,6 +2285,9 @@ angular.module('myApp.controllers', ['myApp.i18n'])
     };
 
     $scope.$watch('search.query', updateContacts);
+    $scope.$on('contacts_update', function () {
+      updateContacts($scope.search && $scope.search.query || '');
+    });
 
     $scope.toggleEdit = function (enabled) {
       $scope.action = enabled ? 'edit' : '';
@@ -2338,16 +2328,13 @@ angular.module('myApp.controllers', ['myApp.i18n'])
           selectedUserIDs.push(userID);
         });
         AppUsersManager.deleteContacts(selectedUserIDs).then(function () {
-          resetSelected();
+          $scope.toggleEdit(false);
-          updateContacts($scope.search.query);
         });
       }
     };
 
     $scope.importContact = function () {
-      AppUsersManager.openImportContact().then(function () {
+      AppUsersManager.openImportContact();
-        updateContacts($scope.search && $scope.search.query || '');
-      });
     };
 
   })

app/js/directives.js

@@ -15,14 +15,14 @@ angular.module('myApp.directives', ['myApp.filters'])
   .directive('myHead', function() {
     return {
       restrict: 'AE',
-      templateUrl: 'partials/head.html'
+      templateUrl: templateUrl('head')
     };
   })
 
   .directive('myDialog', function() {
     return {
       restrict: 'AE',
-      templateUrl: 'partials/dialog.html'
+      templateUrl: templateUrl('dialog')
     };
   })
 
@@ -38,8 +38,8 @@ angular.module('myApp.directives', ['myApp.filters'])
         pendingClass = 'im_message_pending';
 
     return {
-      link: link,
+      templateUrl: templateUrl('message'),
-      templateUrl: 'partials/message.html'
+      link: link
     };
 
     function link($scope, element, attrs) {
@@ -101,10 +101,13 @@ angular.module('myApp.directives', ['myApp.filters'])
         }
       });
 
-      if ($scope.historyMessage.unread) {
       var deregisterUnreadAfter;
-        if (!$scope.historyMessage.out) {
+      if (!$scope.historyMessage.out &&
+          ($scope.historyMessage.unread || $scope.historyMessage.unreadAfter)) {
         var applyUnreadAfter = function () {
+          if ($scope.peerHistory.peerID != $scope.historyPeer.id) {
+            return;
+          }
           if (unreadAfter != ($scope.historyUnreadAfter == $scope.historyMessage.id)) {
             unreadAfter = !unreadAfter;
             if (unreadAfter) {
@@ -124,6 +127,7 @@ angular.module('myApp.directives', ['myApp.filters'])
         applyUnreadAfter();
         deregisterUnreadAfter = $scope.$on('messages_unread_after', applyUnreadAfter);
       }
+      if ($scope.historyMessage.unread) {
         element.addClass(unreadClass);
         var deregisterUnread = $scope.$on('messages_read', function () {
           if (!$scope.historyMessage.unread) {
@@ -158,42 +162,42 @@ angular.module('myApp.directives', ['myApp.filters'])
 
   .directive('myServiceMessage', function() {
     return {
-      templateUrl: 'partials/message_service.html'
+      templateUrl: templateUrl('message_service')
     };
   })
   .directive('myMessagePhoto', function() {
     return {
-      templateUrl: 'partials/message_attach_photo.html'
+      templateUrl: templateUrl('message_attach_photo')
     };
   })
   .directive('myMessageVideo', function() {
     return {
-      templateUrl: 'partials/message_attach_video.html'
+      templateUrl: templateUrl('message_attach_video')
     };
   })
   .directive('myMessageDocument', function() {
     return {
-      templateUrl: 'partials/message_attach_document.html'
+      templateUrl: templateUrl('message_attach_document')
     };
   })
   .directive('myMessageAudio', function() {
     return {
-      templateUrl: 'partials/message_attach_audio.html'
+      templateUrl: templateUrl('message_attach_audio')
     };
   })
   .directive('myMessageMap', function() {
     return {
-      templateUrl: 'partials/message_attach_map.html'
+      templateUrl: templateUrl('message_attach_map')
     };
   })
   .directive('myMessageContact', function() {
     return {
-      templateUrl: 'partials/message_attach_contact.html'
+      templateUrl: templateUrl('message_attach_contact')
     };
   })
   .directive('myMessagePending', function() {
     return {
-      templateUrl: 'partials/message_attach_pending.html'
+      templateUrl: templateUrl('message_attach_pending')
     };
   })
 
@@ -365,7 +369,7 @@ angular.module('myApp.directives', ['myApp.filters'])
           dialogsColWrap = $('.im_dialogs_col_wrap')[0],
           scrollableWrap = $('.im_dialogs_scrollable_wrap', element)[0],
           headWrap = $('.tg_page_head')[0],
-          panelWrapSelector = Config.Navigator.mobile && attrs.modal
+          panelWrapSelector = Config.Mobile && attrs.modal
                               ? '.mobile_modal_body .im_dialogs_panel'
                               : '.im_dialogs_panel',
           panelWrap = $(panelWrapSelector)[0],
@@ -435,7 +439,7 @@ angular.module('myApp.directives', ['myApp.filters'])
           $(element).css({
             height: $($window).height() -
                     (panelWrap ? panelWrap.offsetHeight : 58) -
-                    (Config.Navigator.mobile ? 46 : 200)
+                    (Config.Mobile ? 46 : 200)
           });
           updateScroller();
           return;
@@ -491,7 +495,7 @@ angular.module('myApp.directives', ['myApp.filters'])
           height: $($window).height() -
                   (panelWrap && panelWrap.offsetHeight || 0) -
                   (searchWrap && searchWrap.offsetHeight || 0) -
-                  (Config.Navigator.mobile ? 64 : 200)
+                  (Config.Mobile ? 64 : 200)
         });
         $(contactsWrap).nanoScroller();
       }
@@ -525,7 +529,7 @@ angular.module('myApp.directives', ['myApp.filters'])
           height: $($window).height()
                     - (panelWrap && panelWrap.offsetHeight || 0)
                     - (searchWrap && searchWrap.offsetHeight || 0)
-                    - (Config.Navigator.mobile ? 46 + 18 : 200)
+                    - (Config.Mobile ? 46 + 18 : 200)
         });
         $(countriesWrap).nanoScroller();
       }
@@ -828,7 +832,7 @@ angular.module('myApp.directives', ['myApp.filters'])
         var marginTop = scrollableWrap.offsetHeight
                         - historyMessagesEl.offsetHeight
                         - 20
-                        - (Config.Navigator.mobile ? 0 : 49);
+                        - (Config.Mobile ? 0 : 49);
 
         if (historyMessagesEl.offsetHeight > 0 && marginTop > 0) {
           $(historyMessagesEl).css({marginTop: marginTop});
@@ -892,7 +896,7 @@ angular.module('myApp.directives', ['myApp.filters'])
             var self = this;
             $scope.$apply(function () {
               $scope.draftMessage.files = Array.prototype.slice.call(self.files);
-              $scope.draftMessage.isMedia = $(self).hasClass('im_media_attach_input') || Config.Navigator.mobile;
+              $scope.draftMessage.isMedia = $(self).hasClass('im_media_attach_input') || Config.Mobile;
               setTimeout(function () {
                 try {
                   self.value = '';
@@ -1203,7 +1207,7 @@ angular.module('myApp.directives', ['myApp.filters'])
     return {
       link: link,
       transclude: true,
-      templateUrl: 'partials/full_photo.html',
+      templateUrl: templateUrl('full_photo'),
       scope: {
         fullPhoto: '=',
         thumbLocation: '='
@@ -1286,7 +1290,7 @@ angular.module('myApp.directives', ['myApp.filters'])
     return {
       link: link,
       transclude: true,
-      templateUrl: 'partials/full_video.html',
+      templateUrl: templateUrl('full_video'),
       scope: {
         video: '='
       }
@@ -1353,7 +1357,7 @@ angular.module('myApp.directives', ['myApp.filters'])
 
     return {
       link: link,
-      templateUrl: 'partials/full_gif.html',
+      templateUrl: templateUrl('full_gif'),
       scope: {
         document: '='
       }
@@ -1550,7 +1554,7 @@ angular.module('myApp.directives', ['myApp.filters'])
 
     function link($scope, element, attrs) {
       attrs.$observe('myModalWidth', function (newW) {
-        $(element[0].parentNode.parentNode).css({width: parseInt(newW) + (Config.Navigator.mobile ? 0 : 36)});
+        $(element[0].parentNode.parentNode).css({width: parseInt(newW) + (Config.Mobile ? 0 : 36)});
       });
     };
 
@@ -1653,8 +1657,8 @@ angular.module('myApp.directives', ['myApp.filters'])
     function link($scope, element, attrs) {
 
       var updateMargin = function () {
-        if (Config.Navigator.mobile &&
+        if (Config.Mobile &&
-            $(element[0].parentNode.parentNode.parentNode).hasClass('page_modal')) {
+            $(element[0].parentNode.parentNode.parentNode).hasClass('mobile_modal')) {
           return;
         }
         var height = element[0].parentNode.offsetHeight,

app/js/directives_mobile.js

@@ -0,0 +1,433 @@
+/*!
+ * Webogram v0.3.0 - messaging web application for MTProto
+ * https://github.com/zhukov/webogram
+ * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
+ * https://github.com/zhukov/webogram/blob/master/LICENSE
+ */
+
+'use strict';
+
+/* Directives */
+
+
+angular.module('myApp.directives')
+
+	.directive('myDialogsListMobile', function($window, $timeout) {
+
+    return {
+      link: link
+    };
+
+
+    function link ($scope, element, attrs) {
+      var dialogsColWrap = $('.im_dialogs_col_wrap')[0],
+          scrollableWrap = element[0],
+          headWrap = $('.tg_page_head')[0],
+          panelWrapSelector = attrs.modal
+                              ? '.mobile_modal_body .im_dialogs_panel'
+                              : '.im_dialogs_panel',
+          panelWrap = $(panelWrapSelector)[0],
+          hasTabs = false,
+          moreNotified = false;
+
+      $scope.$on('ui_dialogs_tabs', function (e, newHasTabs) {
+        hasTabs = newHasTabs;
+        updateSizes();
+      });
+      $scope.$on('ui_dialogs_search', updateSizes);
+      $scope.$on('ui_dialogs_update', updateSizes);
+
+
+      $scope.$on('ui_dialogs_append', function () {
+        onContentLoaded(function () {
+          moreNotified = false;
+
+          $timeout(function () {
+            $(scrollableWrap).trigger('scroll');
+          });
+        });
+      });
+
+      $scope.$on('ui_dialogs_change', function () {
+        onContentLoaded(function () {
+          moreNotified = false;
+
+          $timeout(function () {
+            $(scrollableWrap).trigger('scroll');
+          });
+        });
+      });
+
+      $(scrollableWrap).on('scroll', function (e) {
+        if (!element.is(':visible')) return;
+        if (!moreNotified && scrollableWrap.scrollTop >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight - 300) {
+          $scope.$emit('dialogs_need_more');
+          moreNotified = true;
+        }
+      });
+
+
+      function updateSizes () {
+        if (!panelWrap || !panelWrap.offsetHeight) {
+          panelWrap = $(panelWrapSelector)[0];
+        }
+
+        if (attrs.modal) {
+          $(element).css({
+            height: $($window).height() -
+                    (panelWrap ? panelWrap.offsetHeight : 58) - 46
+          });
+          return;
+        }
+
+        if (!headWrap || !headWrap.offsetHeight) {
+          headWrap = $('.tg_page_head')[0];
+        }
+
+        if (!dialogsColWrap || !dialogsColWrap.offsetHeight) {
+          dialogsColWrap = $('.im_dialogs_col_wrap')[0];
+        }
+        $(element).css({
+          height: $($window).height() -
+                  (headWrap ? headWrap.offsetHeight : 46) -
+                  (panelWrap ? panelWrap.offsetHeight : 58) -
+                  parseInt($(dialogsColWrap).css('paddingBottom') || 0)
+        });
+      }
+
+      $($window).on('resize', updateSizes);
+
+      updateSizes();
+      setTimeout(updateSizes, 1000);
+    };
+
+  })
+
+  .directive('myHistoryMobile', function ($window, $timeout, $rootScope, $transition) {
+
+    return {
+      link: link
+    };
+
+    function link ($scope, element, attrs) {
+      var historyWrap = $('.im_history_wrap', element)[0],
+          historyMessagesEl = $('.im_history_messages', element)[0],
+          scrollableWrap = $('.im_history_scrollable_wrap', element)[0],
+          scrollable = $('.im_history_scrollable', element)[0],
+          bottomPanelWrap = $('.im_bottom_panel_wrap', element)[0],
+          sendFormWrap = $('.im_send_form_wrap', element)[0],
+          headWrap = $('.tg_page_head')[0],
+          sendForm = $('.im_send_form', element)[0],
+          moreNotified = false,
+          lessNotified = false;
+
+      onContentLoaded(function () {
+        scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
+      });
+
+      $scope.$on('ui_history_append_new', function (e, options) {
+        if (!atBottom && !options.my) {
+          return;
+        }
+        
+        var pr = parseInt($(scrollableWrap).css('paddingRight'))
+        $(scrollableWrap).addClass('im_history_to_bottom');
+        $(scrollable).css({bottom: 0, marginLeft: -Math.ceil(pr / 2)});
+
+        onContentLoaded(function () {
+          $(scrollableWrap).removeClass('im_history_to_bottom');
+          $(scrollable).css({bottom: '', marginLeft: ''});
+          scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
+          updateBottomizer();
+        });
+      });
+
+      function changeScroll () {
+        var unreadSplit, focusMessage;
+
+        // console.trace('change scroll');
+        if (focusMessage = $('.im_message_focus:visible', scrollableWrap)[0]) {
+          var ch = scrollableWrap.clientHeight,
+              st = scrollableWrap.scrollTop,
+              ot = focusMessage.offsetTop,
+              h = focusMessage.clientHeight;
+          if (!st || st + ch < ot || st > ot + h) {
+            scrollableWrap.scrollTop = Math.max(0, ot - Math.floor(ch / 2) + 26);
+          }
+          atBottom = false;
+        } else if (unreadSplit = $('.im_message_unread_split:visible', scrollableWrap)[0]) {
+          // console.log('change scroll unread', unreadSplit.offsetTop);
+          scrollableWrap.scrollTop = Math.max(0, unreadSplit.offsetTop - 52);
+          atBottom = false;
+        } else {
+          // console.log('change scroll bottom');
+          scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
+          atBottom = true;
+        }
+        $timeout(function () {
+          $(scrollableWrap).trigger('scroll');
+          scrollTopInitial = scrollableWrap.scrollTop;
+        });
+      };
+
+      $scope.$on('ui_history_change', function () {
+        var pr = parseInt($(scrollableWrap).css('paddingRight'))
+        $(scrollableWrap).addClass('im_history_to_bottom');
+        $(scrollable).css({bottom: 0, marginLeft: -Math.ceil(pr / 2)});
+        onContentLoaded(function () {
+          $(scrollableWrap).removeClass('im_history_to_bottom');
+          $(scrollable).css({bottom: '', marginLeft: ''});
+          updateSizes(true);
+          moreNotified = false;
+          lessNotified = false;
+          changeScroll();
+        });
+      });
+
+      $scope.$on('ui_history_change_scroll', function () {
+        onContentLoaded(changeScroll)
+      });
+
+      $scope.$on('ui_history_focus', function () {
+        if (!atBottom) {
+          scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
+          atBottom = true;
+        }
+      });
+
+      $scope.$on('ui_history_prepend', function () {
+        var sh = scrollableWrap.scrollHeight,
+            st = scrollableWrap.scrollTop,
+            pr = parseInt($(scrollableWrap).css('paddingRight')),
+            ch = scrollableWrap.clientHeight;
+
+        $(scrollable).css({marginBottom: -(sh - st - ch - 4), marginLeft: -Math.ceil(pr / 2)});
+        $(scrollableWrap).addClass('im_history_to_bottom');
+
+
+        var upd = function () {
+            $(scrollableWrap).removeClass('im_history_to_bottom');
+            $(scrollable).css({marginBottom: '', marginLeft: ''});
+            if (scrollTopInitial >= 0) {
+              changeScroll();
+            } else {
+              scrollableWrap.scrollTop = st + scrollableWrap.scrollHeight - sh;
+            }
+
+            updateBottomizer();
+            moreNotified = false;
+
+            $timeout(function () {
+              if (scrollableWrap.scrollHeight != sh) {
+                $(scrollableWrap).trigger('scroll');
+              }
+            });
+
+            clearTimeout(timer);
+            unreg();
+          },
+          timer = setTimeout(upd, 0),
+          unreg = $scope.$on('$viewContentLoaded', upd);
+      });
+
+      $scope.$on('ui_history_append', function () {
+        var sh = scrollableWrap.scrollHeight;
+        onContentLoaded(function () {
+          atBottom = false;
+          updateBottomizer();
+          lessNotified = false;
+
+          if (scrollTopInitial >= 0) {
+            changeScroll();
+          }
+
+          $timeout(function () {
+            if (scrollableWrap.scrollHeight != sh) {
+              $(scrollableWrap).trigger('scroll');
+            }
+          });
+        });
+      });
+
+      $scope.$on('ui_panel_update', function () {
+        onContentLoaded(function () {
+          updateSizes();
+          $scope.$broadcast('ui_message_send');
+
+          $timeout(function () {
+            $(scrollableWrap).trigger('scroll');
+          });
+        });
+      });
+
+      $scope.$on('ui_selection_clear', function () {
+        if (window.getSelection) {
+          if (window.getSelection().empty) {  // Chrome
+            window.getSelection().empty();
+          } else if (window.getSelection().removeAllRanges) {  // Firefox
+            window.getSelection().removeAllRanges();
+          }
+        } else if (document.selection) {  // IE?
+          document.selection.empty();
+        }
+      });
+
+      $scope.$on('ui_editor_resize', updateSizes);
+      $scope.$on('ui_height', function () {
+        onContentLoaded(updateSizes);
+      });
+
+      var atBottom = true,
+          scrollTopInitial = -1;
+      $(scrollableWrap).on('scroll', function (e) {
+        if (!element.is(':visible') ||
+            $(scrollableWrap).hasClass('im_history_to_bottom')) {
+          return;
+        }
+        var st = scrollableWrap.scrollTop;
+        atBottom = st >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight;
+        if (scrollTopInitial >= 0 && scrollTopInitial != st) {
+          scrollTopInitial = -1;
+        }
+
+        if (!moreNotified && st <= 300) {
+          moreNotified = true;
+          $scope.$emit('history_need_more');
+        }
+        else if (!lessNotified && st >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight - 300) {
+          lessNotified = true;
+          $scope.$emit('history_need_less');
+        }
+      });
+
+      function updateSizes (heightOnly) {
+        if (!element.is(':visible') && !$(element[0].parentNode.parentNode).is(':visible')) {
+          return;
+        }
+        if ($(sendFormWrap).is(':visible')) {
+          $(sendFormWrap).css({
+            height: $(sendForm).height()
+          });
+        }
+
+        if (!headWrap || !headWrap.offsetHeight) {
+          headWrap = $('.tg_page_head')[0];
+        }
+        var historyH = $($window).height() - bottomPanelWrap.offsetHeight - (headWrap ? headWrap.offsetHeight : 46);
+        $(historyWrap).css({
+          height: historyH
+        });
+
+        updateBottomizer();
+
+
+        if (heightOnly === true) return;
+        if (atBottom) {
+          onContentLoaded(function () {
+            scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
+          });
+        }
+      }
+
+      function updateBottomizer () {
+        return;
+        $(historyMessagesEl).css({marginTop: 0});
+        var marginTop = scrollableWrap.offsetHeight
+                        - historyMessagesEl.offsetHeight
+                        - 20;
+
+        if (historyMessagesEl.offsetHeight > 0 && marginTop > 0) {
+          $(historyMessagesEl).css({marginTop: marginTop});
+        }
+      }
+
+      $($window).on('resize', updateSizes);
+
+      updateSizes();
+      onContentLoaded(updateSizes);
+    }
+
+  })
+
+  .directive('myContactsListMobile', function($window, $timeout) {
+
+    return {
+      link: link
+    };
+
+    function link ($scope, element, attrs) {
+      var searchWrap = $('.contacts_modal_search')[0],
+          panelWrap = $('.contacts_modal_panel')[0];
+
+      function updateSizes () {
+        $(element).css({
+          height: $($window).height() -
+                  (panelWrap && panelWrap.offsetHeight || 0) -
+                  (searchWrap && searchWrap.offsetHeight || 0) -
+                  64
+        });
+      }
+
+      $($window).on('resize', updateSizes);
+      $scope.$on('contacts_change', function () {
+        onContentLoaded(updateSizes)
+      });
+      onContentLoaded(updateSizes);
+    };
+
+  })
+
+  .directive('myCountriesListMobile', function($window, $timeout) {
+
+    return {
+      link: link
+    };
+
+    function link ($scope, element, attrs) {
+      var searchWrap = $('.countries_modal_search')[0],
+          panelWrap = $('.countries_modal_panel')[0];
+
+      function updateSizes () {
+        $(element).css({
+          height: $($window).height()
+                    - (panelWrap && panelWrap.offsetHeight || 0)
+                    - (searchWrap && searchWrap.offsetHeight || 0)
+                    - (46 + 18)
+        });
+      }
+
+      $($window).on('resize', updateSizes);
+      onContentLoaded(updateSizes);
+    };
+
+  })
+
+  .directive('myInfiniteScrollerMobile', function () {
+
+    return {
+      link: link,
+      scope: true
+    };
+
+    function link($scope, element, attrs) {
+
+      var scrollableWrap = element[0],
+          moreNotified = false;
+
+      $(scrollableWrap).on('scroll', function (e) {
+        if (!element.is(':visible')) return;
+        if (!moreNotified &&
+            scrollableWrap.scrollTop >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight - 300) {
+          moreNotified = true;
+          $scope.$apply(function () {
+            $scope.slice.limit += ($scope.slice.limitDelta || 20);
+          });
+
+          onContentLoaded(function () {
+            moreNotified = false;
+          });
+        }
+      });
+
+    };
+  })

app/js/filters.js

@@ -81,7 +81,7 @@ angular.module('myApp.filters', ['myApp.i18n'])
   .filter('time', ['$filter', '_', function($filter, _) {
     var cachedDates = {},
         dateFilter = $filter('date'),
-        format = Config.Navigator.mobile ? 'HH:mm' : 'HH:mm:ss';
+        format = Config.Mobile ? 'HH:mm' : 'HH:mm:ss';
 
     return function (timestamp) {
       if (!cachedDates.hasOwnProperty(_.locale())) {

app/js/init.js

@@ -1,4 +1,4 @@
-;(function () {
+;(function initAutoUpgrade () {
 
   // Prevent click-jacking
   try {
@@ -61,3 +61,29 @@
   scheduleUpdate(3000);
   window.addEventListener('load', attach);
 })();
+
+(function initApplication () {
+  var classes = [
+    Config.Navigator.osX ? 'osx' : 'non_osx',
+    Config.Navigator.retina ? 'is_2x' : 'is_1x'
+  ];
+  if (Config.Modes.ios_standalone) {
+    classes.push('ios_standalone');
+  }
+  $(document.body).addClass(classes.join(' '));
+
+  ConfigStorage.get('current_layout', function (layout) {
+    switch (layout) {
+      case 'mobile': Config.Mobile = true; break;
+      case 'desktop': Config.Mobile = false; break;
+      default: Config.Mobile = Config.Navigator.mobile; break;
+    }
+
+    $('head').append(
+      '<link rel="stylesheet" href="css/' + (Config.Mobile ? 'mobile.css' : 'desktop.css') + '" />'
+    );
+    $(document).ready(function() {
+      angular.bootstrap(document, ['myApp']);
+    });
+  });
+})();

app/js/lib/ng_utils.js

@@ -9,127 +9,26 @@ angular.module('izhukov.utils', [])
 
 .provider('Storage', function () {
 
-  var keyPrefix = '';
-  var cache = {};
-  var useCs = !!(window.chrome && chrome.storage && chrome.storage.local);
-  var useLs = !useCs && !!window.localStorage;
-
   this.setPrefix = function (newPrefix) {
-    keyPrefix = newPrefix
+    ConfigStorage.prefix(newPrefix);
   };
 
   this.$get = ['$q', function ($q) {
-    function getValue() {
+    var methods = {};
-      var keys = Array.prototype.slice.call(arguments),
+    angular.forEach(['get', 'set', 'remove'], function (methodName) {
-          result = [],
+      methods[methodName] = function () {
-          single = keys.length == 1,
+        var deferred = $q.defer(),
-          allFound = true;
+            args = Array.prototype.slice.call(arguments);
-
-      for (var i = 0; i < keys.length; i++) {
-        keys[i] = keyPrefix + keys[i];
-      }
-
-      angular.forEach(keys, function (key) {
-        if (cache[key] !== undefined) {
-          result.push(cache[key]);
-        }
-        else if (useLs) {
-          var value = localStorage.getItem(key);
-          value = (value === undefined || value === null) ? false : JSON.parse(value);
-          result.push(cache[key] = value);
-        }
-        else if (!useCs) {
-          result.push(cache[key] = false);
-        }
-        else {
-          allFound = false;
-        }
-      });
-
-      if (allFound) {
-        return $q.when(single ? result[0] : result);
-      }
-
-      var deferred = $q.defer();
-
-      chrome.storage.local.get(keys, function (resultObj) {
-        result = [];
-        angular.forEach(keys, function (key) {
-          var value = resultObj[key];
-          value = value === undefined || value === null ? false : JSON.parse(value);
-          result.push(cache[key] = value);
-        });
-
-        deferred.resolve(single ? result[0] : result);
-      });
-
-      return deferred.promise;
-    };
-
-    function setValue(obj) {
-      var keyValues = {};
-      angular.forEach(obj, function (value, key) {
-        keyValues[keyPrefix + key] = JSON.stringify(value);
-        cache[keyPrefix + key] = value;
-      });
-
-      if (useLs) {
-        angular.forEach(keyValues, function (value, key) {
-          localStorage.setItem(key, value);
-        });
-        return $q.when();
-      }
-
-      if (!useCs) {
-        return $q.when();
-      }
-
-      var deferred = $q.defer();
 
-      chrome.storage.local.set(keyValues, function () {
+        args.push(function (result) {
-        deferred.resolve();
+          deferred.resolve(result);
         });
+        ConfigStorage[methodName].apply(ConfigStorage, args);
 
         return deferred.promise;
       };
-
-    function removeValue () {
-      var keys = Array.prototype.slice.call(arguments);
-
-      for (var i = 0; i < keys.length; i++) {
-        keys[i] = keyPrefix + keys[i];
-      }
-
-      angular.forEach(keys, function(key){
-        delete cache[key];
-      });
-
-      if (useLs) {
-        angular.forEach(keys, function(key){
-          localStorage.removeItem(key);
-        });
-
-        return $q.when();
-      }
-
-      if (!useCs) {
-        return $q.when();
-      }
-
-      var deferred = $q.defer();
-
-      chrome.storage.local.remove(keys, function () {
-        deferred.resolve();
     });
-
+    return methods;
-      return deferred.promise;
-    };
-
-    return {
-      get: getValue,
-      set: setValue,
-      remove: removeValue
-    };
   }];
 
 })
@@ -284,7 +183,7 @@ angular.module('izhukov.utils', [])
   }
 
   function downloadFile (url, mimeType, fileName) {
-    // if (Config.Navigator.mobile) {
+    // if (Config.Mobile) {
     //   window.open(url, '_blank');
     //   return;
     // }

app/js/lib/utils.js

@@ -135,3 +135,7 @@ if (!Function.prototype.bind) {
   };
 }
 
+function templateUrl (tplName) {
+  return 'partials/' + (Config.Mobile ? 'mobile' : 'desktop') + '/' + tplName + '.html';
+}
+

app/js/services.js

@@ -188,19 +188,11 @@ angular.module('myApp.services', ['myApp.i18n'])
     var scope = $rootScope.$new();
     scope.userID = userID;
 
-    var tUrl = 'partials/user_modal.html',
-        className = 'user_modal_window page_modal';
-
-    if (Config.Navigator.mobile) {
-      tUrl = 'partials/mobile/user_modal.html';
-      className += ' mobile_modal';
-    }
-
     var modalInstance = $modal.open({
-      templateUrl: tUrl,
+      templateUrl: templateUrl('user_modal'),
       controller: 'UserModalController',
       scope: scope,
-      windowClass: className
+      windowClass: 'user_modal_window mobile_modal'
     });
   };
   $rootScope.openUser = openUser;
@@ -223,7 +215,7 @@ angular.module('myApp.services', ['myApp.i18n'])
         onContactUpdated(foundUserID = importedContact.user_id, true);
       });
 
-      return foundUserID ? 1 : 0;
+      return foundUserID || false;
     });
   };
 
@@ -275,7 +267,7 @@ angular.module('myApp.services', ['myApp.i18n'])
 
   function onContactUpdated (userID, isContact) {
     if (angular.isArray(contactsList)) {
-      var curPos = curIsContact = contactsList.indexOf(userID),
+      var curPos = curIsContact = contactsList.indexOf(parseInt(userID)),
           curIsContact = curPos != -1;
 
       if (isContact != curIsContact) {
@@ -285,15 +277,16 @@ angular.module('myApp.services', ['myApp.i18n'])
         } else {
           contactsList.splice(curPos, 1);
         }
+        $rootScope.$broadcast('contacts_update', userID);
       }
     }
   }
 
   function openImportContact () {
     return $modal.open({
-      templateUrl: 'partials/import_contact_modal.html',
+      templateUrl: templateUrl('import_contact_modal'),
       controller: 'ImportContactModalController',
-      windowClass: 'import_contact_modal_window'
+      windowClass: 'import_contact_modal_window mobile_modal'
     }).result.then(function (foundUserID) {
       if (!foundUserID) {
         return $q.reject();
@@ -368,7 +361,7 @@ angular.module('myApp.services', ['myApp.i18n'])
   };
 
   function isAvailable () {
-    if (Config.Navigator.mobile && Config.Navigator.ffos && Config.Modes.packed) {
+    if (Config.Mobile && Config.Navigator.ffos && Config.Modes.packed) {
       try {
         return navigator.mozContacts && navigator.mozContacts.getAll;
       } catch (e) {
@@ -381,9 +374,9 @@ angular.module('myApp.services', ['myApp.i18n'])
 
   function openPhonebookImport () {
     return $modal.open({
-      templateUrl: 'partials/mobile/phonebook_modal.html',
+      templateUrl: templateUrl('phonebook_modal'),
       controller: 'PhonebookModalController',
-      windowClass: 'phonebook_modal_window page_modal mobile_modal'
+      windowClass: 'phonebook_modal_window mobile_modal'
     });
   }
 
@@ -526,19 +519,11 @@ angular.module('myApp.services', ['myApp.i18n'])
     var scope = $rootScope.$new();
     scope.chatID = chatID;
 
-    var tUrl = 'partials/chat_modal.html',
-        className = 'chat_modal_window page_modal';
-
-    if (Config.Navigator.mobile) {
-      tUrl = 'partials/mobile/chat_modal.html';
-      className += ' mobile_modal';
-    }
-
     var modalInstance = $modal.open({
-      templateUrl: tUrl,
+      templateUrl: templateUrl('chat_modal'),
       controller: 'ChatModalController',
       scope: scope,
-      windowClass: className
+      windowClass: 'chat_modal_window mobile_modal'
     });
   }
 
@@ -934,6 +919,9 @@ angular.module('myApp.services', ['myApp.i18n'])
           unreadOffset = unreadCount;
         }
       }
+      else if (Config.Mobile) {
+        limit = 20;
+      }
     }
     else if (maxID > 0) {
       offsetNotFound = true;
@@ -2107,8 +2095,9 @@ angular.module('myApp.services', ['myApp.i18n'])
         $rootScope.$broadcast('dialogs_update', dialog);
 
 
-        if (($rootScope.idle.isIDLE || Config.Mobile && $rootScope.selectedPeerID != peerID) &&
+        if ((Config.Mobile && $rootScope.selectedPeerID != peerID || $rootScope.idle.isIDLE) &&
-            !message.out && message.unread) {
+            !message.out &&
+            message.unread) {
           NotificationsManager.getPeerMuted(peerID).then(function (muted) {
             if (!message.unread || muted) {
               return;
@@ -2379,7 +2368,7 @@ angular.module('myApp.services', ['myApp.i18n'])
 
   function wrapForFull (photoID) {
     var photo = wrapForHistory(photoID),
-        fullWidth = $(window).width() - (Config.Navigator.mobile ? 20 : 36),
+        fullWidth = $(window).width() - (Config.Mobile ? 20 : 36),
         fullHeight = $($window).height() - 150,
         fullPhotoSize = choosePhotoSize(photo, fullWidth, fullHeight),
         full = {
@@ -2405,7 +2394,7 @@ angular.module('myApp.services', ['myApp.i18n'])
         }
       }
 
-      if (!Config.Navigator.mobile && full.width >= fullPhotoSize.w && full.height >= fullPhotoSize.h) {
+      if (!Config.Mobile && full.width >= fullPhotoSize.w && full.height >= fullPhotoSize.h) {
         full.width = fullPhotoSize.w;
         full.height = fullPhotoSize.h;
       }
@@ -2437,7 +2426,7 @@ angular.module('myApp.services', ['myApp.i18n'])
     }
 
     var modalInstance = $modal.open({
-      templateUrl: 'partials/photo_modal.html',
+      templateUrl: templateUrl('photo_modal'),
       controller: scope.userID ? 'UserpicModalController' : 'PhotoModalController',
       scope: scope,
       windowClass: 'photo_modal_window'
@@ -2591,7 +2580,7 @@ angular.module('myApp.services', ['myApp.i18n'])
     scope.messageID = messageID;
 
     var modalInstance = $modal.open({
-      templateUrl: 'partials/video_modal.html',
+      templateUrl: templateUrl('video_modal'),
       controller: 'VideoModalController',
       scope: scope,
       windowClass: 'video_modal_window'
@@ -3790,7 +3779,7 @@ angular.module('myApp.services', ['myApp.i18n'])
 
     shownBoxes++;
     var modal = $modal.open({
-      templateUrl: 'partials/error_modal.html',
+      templateUrl: templateUrl('error_modal'),
       scope: scope,
       windowClass: options.windowClass || 'error_modal_window'
     });
@@ -3815,7 +3804,7 @@ angular.module('myApp.services', ['myApp.i18n'])
     angular.extend(scope, params);
 
     var modal = $modal.open({
-      templateUrl: 'partials/confirm_modal.html',
+      templateUrl: templateUrl('confirm_modal'),
       scope: scope,
       windowClass: options.windowClass || 'confirm_modal_window'
     });
@@ -3851,19 +3840,11 @@ angular.module('myApp.services', ['myApp.i18n'])
       angular.extend(scope, options);
     }
 
-    var tUrl = 'partials/peer_select.html',
-        className = 'peer_select_window page_modal';
-
-    if (Config.Navigator.mobile) {
-      tUrl = 'partials/mobile/peer_select.html';
-      className += ' mobile_modal';
-    }
-
     return $modal.open({
-      templateUrl: tUrl,
+      templateUrl: templateUrl('peer_select'),
       controller: 'PeerSelectController',
       scope: scope,
-      windowClass: className
+      windowClass: 'peer_select_window mobile_modal'
     }).result;
   }
 
@@ -3886,19 +3867,11 @@ angular.module('myApp.services', ['myApp.i18n'])
       scope.action = 'select';
     }
 
-    var tUrl = 'partials/contacts_modal.html',
-        className = 'contacts_modal_window page_modal';
-
-    if (Config.Navigator.mobile) {
-      tUrl = 'partials/mobile/contacts_modal.html';
-      className += ' mobile_modal';
-    }
-
     return $modal.open({
-      templateUrl: tUrl,
+      templateUrl: templateUrl('contacts_modal'),
       controller: 'ContactsModalController',
       scope: scope,
-      windowClass: className
+      windowClass: 'contacts_modal_window mobile_modal'
     }).result;
   }
 
@@ -3966,9 +3939,9 @@ angular.module('myApp.services', ['myApp.i18n'])
     };
 
     $modal.open({
-      templateUrl: 'partials/changelog_modal.html',
+      templateUrl: templateUrl('changelog_modal'),
       scope: $scope,
-      windowClass: 'changelog_modal_window page_modal'
+      windowClass: 'changelog_modal_window mobile_modal'
     });
   }
 

app/partials/desktop/head.html

@@ -0,0 +1,28 @@
+<div class="tg_page_head">
+  <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="container">
+
+      <div class="navbar-header">
+        <a class="navbar-brand" href="{{isLoggedIn ? '#/im' : '#/'}}"><span class="tg_head_logo"></span></a>
+      </div>
+
+      <div class="navbar-menu" ng-switch="offline">
+
+        <ul ng-switch-when="true" class="nav navbar-nav navbar-offline">
+          <li ng-show="!offlineConnecting"><span class="navbar-offline-text">Waiting for network<span my-loading-dots></span></span></li>
+          <li ng-show="!offlineConnecting" class="hidden-xs"><a href="" ng-click="retryOnline()">Retry</a></li>
+          <li ng-show="offlineConnecting"><span class="navbar-offline-text">Connecting<span my-loading-dots></span></span></li>
+        </ul>
+
+        <ul ng-switch-default class="nav navbar-nav navbar-right">
+          <li ng-if="isLoggedIn &amp;&amp; !isEmpty.contacts"><a href="" ng-click="openContacts()">Contacts</a></li>
+          <li ng-if="isLoggedIn"><a href="" ng-click="openSettings()">Settings</a></li>
+          <li ng-if="isLoggedIn"><a href="" ng-click="logOut()">Log Out</a></li>
+          <li ng-if="!isLoggedIn"><a href="https://github.com/zhukov/webogram" target="_blank">About</a></li>
+        </ul>
+
+      </div>
+
+    </div>
+  </div>
+</div>

app/partials/desktop/im.html

@@ -15,7 +15,7 @@
           <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><a ng-click="openContacts()" my-i18n="im_contacts"></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>
@@ -83,14 +83,6 @@
     </div>
 
     <div class="im_history_col_wrap" ng-controller="AppImHistoryController">
-      <div ng-show="state.notSelected" ng-switch="isEmpty.contacts &amp;&amp; isEmpty.dialogs">
-        <div ng-switch-when="true" class="im_history_no_dialogs_wrap">
-          <h3 class="im_dialogs_empty_header" my-i18n="im_get_started"></h3>
-          <p class="im_dialogs_empty_lead" my-i18n="im_welcome_text"></p>
-          <button type="button" class="btn btn-primary btn-sm" ng-click="openSettings()" my-i18n="im_open_settings"></button>
-        </div>
-        <div ng-switch-default class="im_history_not_selected" my-vertical-position="0.35" padding="true" my-i18n="im_select_a_chat"></div>
-      </div>
       <div ng-show="!state.notSelected &amp;&amp; !state.loaded" class="im_history_not_selected" my-vertical-position="0.35" padding="true">
         <my-i18n msgid="im_loading_history"></my-i18n><span my-loading-dots></span>
       </div>

app/partials/desktop/login.html

@@ -52,7 +52,7 @@
 
     <div class="form-group" ng-class="{'has-error': error.field == 'phone_code'}">
       <label class="control-label" for="phone_code" ng-if="error.field == 'phone_code'" my-i18n="login_incorrect_sms_code"></label>
-      <input type="number" my-focused class="form-control" name="phone_code" ng-model="credentials.phone_code" placeholder="{{'login_number_input_placeholder' | i18n}}" autocomplete="off" required>
+      <input type="number" my-focused class="form-control login_phone_code" name="phone_code" ng-model="credentials.phone_code" placeholder="{{'login_number_input_placeholder' | i18n}}" autocomplete="off" required>
     </div>
 
     <button class="btn btn-primary btn-block" type="submit" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled" ng-switch="progress.enabled">

app/partials/desktop/message.html

@@ -42,7 +42,6 @@
         <a class="im_message_author" my-user-link="historyMessage.from_id" short="!historyMessage.to_id.chat_id" color="historyMessage.to_id.chat_id > 0"></a>
 
         <div ng-if="::historyMessage._ == 'messageForwarded' || false" class="im_message_fwd_from">
-          <div class="im_message_fwd_title" ng-if="::historyMessage.grouped == 'im_grouped_fwd_start'" my-i18n="message_forwarded_message"></div>
           <a class="im_message_fwd_photo pull-left" my-user-photolink="historyMessage.fwd_from_id" img-class="im_message_fwd_photo"></a>
           <div class="im_message_fwd_author_wrap">
             <a class="im_message_fwd_author" my-user-link="historyMessage.fwd_from_id" short="true"></a><span class="im_message_fwd_date" ng-bind="historyMessage.fwd_date | dateOrTime"></span>

app/partials/mobile/changelog_modal.html

@@ -0,0 +1,199 @@
+<div class="changelog_modal_wrap">
+
+  <a class="modal-close-button" ng-click="$close()"><i></i></a>
+
+  <div class="modal-body">
+
+    <div class="changelog_card_wrap" ng-switch="lastVersion === false">
+      <div ng-switch-when="true">
+        <div class="changelog_card"></div>
+        <h2 class="changelog_header">Recent updates in <strong>Telegram Web</strong></h2>
+      </div>
+      <div ng-switch-default>
+        <div class="changelog_card"></div>
+        <h2 class="changelog_header"><strong>Telegram Web</strong> has been updated!</h2>
+      </div>
+    </div>
+
+    <div class="changelog_versions_wrap">
+
+      <div class="modal_section changelog_version_wrap">
+        <h3 class="modal_section_header changelog_version_title">
+          <span class="pull-right">current version</span>
+          Version 0.3.0
+        </h3>
+        <div class="modal_section_body changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Added online statuses automatic update</li>
+            <li>Fixed scrollbar invalid width bug</li>
+            <li>[Desktop] Added phone country detection</li>
+            <li>[FirefoxOS] Improved PUSH-notifications for &lt;= 1.1</li>
+            <li>[FirefoxOS] Fixed emoji in notifications</li>
+            <li>[FirefoxOS] Fixed attachment bug for &lt;= 1.1</li>
+            <li>[FirefoxOS] Added phonebook permissions handling</li>
+            <li>[FirefoxOS] Added ability to share Gallery photos in Telegram</li>
+            <li>Supported international hashtags in messages</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="modal_section changelog_version_wrap">
+        <h3 class="modal_section_header changelog_version_title">
+          Version 0.2.9
+        </h3>
+        <div class="modal_section_body changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Updated mobile layout</li>
+            <li>Bugfixes</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="modal_section changelog_version_wrap">
+        <h3 class="modal_section_header changelog_version_title">
+          Version 0.2.5
+        </h3>
+        <div class="modal_section_body changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Updated mobile layout</li>
+            <li>Improved performance</li>
+            <li>Improved messages grouping</li>
+            <li>[FirefoxOS] Fixed notifications for &lt;= 1.1</li>
+            <li>[FirefoxOS] Fixed phonebook import</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="modal_section changelog_version_wrap">
+        <h3 class="modal_section_header changelog_version_title">
+          Version 0.2.1
+        </h3>
+        <div class="modal_section_body changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Improved key generation performance on slow devices</li>
+            <li>Added network sleep for mobile devices</li>
+            <li>[FirefoxOS] Added support of PUSH notifications</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="modal_section changelog_version_wrap">
+        <h3 class="modal_section_header changelog_version_title">
+          Version 0.2
+        </h3>
+        <div class="modal_section_body changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Updated contacts list, added edit mode</li>
+            <li>First Firefox OS release. See <a href="https://marketplace.firefox.com/app/telegram" target="_blank">Firefox Marketplace</a></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="modal_section changelog_version_wrap" ng-show="canShowVersion('0.1.9')">
+        <h3 class="modal_section_header changelog_version_title">
+          Version 0.1.9
+        </h3>
+        <div class="modal_section_body changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Improvements of performance</li>
+            <li>Bugfixes</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="modal_section changelog_version_wrap" ng-show="canShowVersion('0.1.8')">
+        <h3 class="modal_section_header changelog_version_title">
+          Version 0.1.8
+        </h3>
+        <div class="modal_section_body changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Improved mobile layout</li>
+            <li>Bugfixes</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="modal_section changelog_version_wrap" ng-show="canShowVersion('0.1.7')">
+        <h3 class="modal_section_header changelog_version_title">
+          Version 0.1.7
+        </h3>
+        <div class="modal_section_body changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Improved mobile layout</li>
+            <li>Added file cache for Firefox and Android</li>
+            <li>New design for forwarded messages</li>
+            <li>Hash-tags support</li>
+            <li>Messaging bugfixes</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="modal_section changelog_version_wrap" ng-show="canShowVersion('0.1.6')">
+        <h3 class="modal_section_header changelog_version_title">
+          Version 0.1.6
+        </h3>
+        <div class="modal_section_body changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Added search of messages</li>
+            <li>Improved performance of chats with lots of unread messages</li>
+            <li>Bugfixes</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="modal_section changelog_version_wrap" ng-show="canShowVersion('0.1.5')">
+        <h3 class="modal_section_header changelog_version_title">
+          Version 0.1.5
+        </h3>
+        <div class="modal_section_body changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Added registration</li>
+            <li>Improved experience for newly registered users</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="modal_section changelog_version_wrap" ng-show="canShowVersion('0.1.4')">
+        <h3 class="modal_section_header changelog_version_title">
+          Version 0.1.4
+        </h3>
+        <div class="modal_section_body changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Browse userpic history (click on the photo in user info)</li>
+            <li>New <a href="https://github.com/zhukov/webogram" target="_blank" title="Source code on GitHub">GitHub</a>, <a href="https://twitter.com/telegram_web" target="_blank" title="Follow us on Twitter!">Twitter</a> buttons in Settings</li>
+            <li>Updated keyboard shortcuts:</li>
+            <ul>
+              <li><strong>Alt+Home</strong> - switch to first (most recent) conversation</li>
+              <li>Removed <strong>Alt+1, 2, 3..</strong> shortcuts due to conflicts in different browsers</li>
+            </ul>
+          </ul>
+        </div>
+      </div>
+
+      <div class="modal_section changelog_version_wrap" ng-show="canShowVersion('0.1.3')">
+        <h3 class="modal_section_header changelog_version_title">
+          Version 0.1.3
+        </h3>
+        <div class="modal_section_body changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Added version history to welcome screen</li>
+            <li>Added keyboard shortcuts:</li>
+            <ul>
+              <li><strong>Tab</strong> - set focus to message field</li>
+              <li><strong>Esc</strong> or <strong>Shift+Tab</strong> - set focus to search field</li>
+              <li><strong>Up/Down</strong> (while in search field) - move between conversations</li>
+              <li><strong>Enter</strong> (while in search field) - open selected or first conversation</li>
+              <li><strong>Alt+Up/Down</strong> - move to previous/next conversation</li>
+            </ul>
+            <li>Improved grouping for messages</li>
+            <li>Fixed video modal positioning bug</li>
+            <li>Fixed focusing issues on mobile</li>
+          </ul>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
+</div>

app/partials/mobile/chat_create_modal.html

@@ -0,0 +1,43 @@
+<div class="contacts_modal_wrap">
+
+  <div class="tg_page_head tg_modal_head">
+    <div class="navbar navbar-static-top navbar-inverse">
+      <div class="container">
+
+        <div class="navbar-header">
+
+          <ul class="nav navbar-nav navbar-quick-nav">
+            <li class="navbar-quick-right">
+              <a ng-class="{disabled: group.creating}" ng-click="createGroup()" ng-bind="group.creating ? 'Creating...' : 'OK'" ng-disabled="group.creating"></a>
+            </li>
+            <li>
+              <a ng-click="$dismiss()" class="navbar-quick-media-back">
+                <i class="icon icon-back"></i>
+                <div class="navbar-quick-back-title">
+                  <h4>
+                    Create Group
+                  </h4>
+                </div>
+              </a>
+            </li>
+          </ul>
+
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-body">
+
+    <form class="modal_simple_form" ng-submit="createGroup()" my-vertical-position="0.25">
+
+      <div class="form-group">
+        <input class="form-control input-lg" my-focused type="text" placeholder="Group name" ng-model="group.name"/>
+      </div>
+
+    </form>
+
+  </div>
+
+</div>

app/partials/mobile/chat_edit_modal.html

@@ -0,0 +1,43 @@
+<div class="contacts_modal_wrap">
+
+  <div class="tg_page_head tg_modal_head">
+    <div class="navbar navbar-static-top navbar-inverse">
+      <div class="container">
+
+        <div class="navbar-header">
+
+          <ul class="nav navbar-nav navbar-quick-nav">
+            <li class="navbar-quick-right">
+              <a ng-class="{disabled: group.updating}" ng-click="updateGroup()" ng-bind="group.updating ? 'Saving...' : 'Save'" ng-disabled="group.updating"></a>
+            </li>
+            <li>
+              <a ng-click="$dismiss()" class="navbar-quick-media-back">
+                <i class="icon icon-back"></i>
+                <div class="navbar-quick-back-title">
+                  <h4>
+                    Edit Group
+                  </h4>
+                </div>
+              </a>
+            </li>
+          </ul>
+
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-body">
+
+    <form class="modal_simple_form" ng-submit="updateGroup()" my-vertical-position="0.25">
+
+      <div class="form-group">
+        <input class="form-control input-lg" my-focused type="text" placeholder="Group name" ng-model="group.name"/>
+      </div>
+
+    </form>
+
+  </div>
+
+</div>

app/partials/mobile/confirm_modal.html

@@ -0,0 +1,65 @@
+<div class="confirm_modal_wrap" my-modal-position>
+
+  <a class="modal-close-button" ng-click="$dismiss()"><i></i></a>
+
+  <div class="modal-body">
+
+    <div class="confirm_modal_description" ng-switch="type">
+      <span ng-switch-when="LOGOUT">Are you sure you want to log out?</span>
+      <span ng-switch-when="WEBOGRAM_UPDATED_RELOAD">A new version of Webogram has been downloaded. Launch it?</span>
+      <span ng-switch-when="HISTORY_FLUSH">Are you sure? This can not be undone!</span>
+      <span ng-switch-when="TERMINATE_SESSIONS">Are you sure you want to log out all devices except for the current one?</span>
+      <span ng-switch-when="HTTPS_MIXED_FAIL">
+        Your browser <a href="http://mzl.la/13jCUSU" target="_blank">does not support</a> mixed content which is neccessary for MTProto support on https. <a href="https://github.com/zhukov/webogram/issues/237" target="_blank">Learn more &raquo;</a><br/><br/>
+        Would you like use http-version instead?
+      </span>
+
+      <span ng-switch-when="FILES_CLIPBOARD_PASTE">
+        <ng-pluralize count="files.length"
+                     when="{'one': 'Are you sure to send file from clipboard?', 'other': 'Are you sure to send {} files from clipboard?'}">
+        </ng-pluralize>
+      </span>
+      <span ng-switch-when="FILE_CLIPBOARD_PASTE">Are you sure to send file(s) from clipboard?</span>
+      <span ng-switch-when="MESSAGE_DELETE">Are you sure you want to delete the message?</span>
+      <span ng-switch-when="CONTACTS_IMPORT_PERFORM">Telegram will now sync your contacts in order to find your friends.</span>
+      <div ng-switch-when="LOGIN_PHONE_CORRECT">
+        Is this phone number correct?
+        <div class="confirm_phone_number"> <span ng-bind="country_code"></span> <span ng-bind="phone_number"></span> </div>
+      </div>
+      <span ng-switch-when="FORWARD_PEER">Forward to <strong ng-switch="peer_id > 0">
+        <span ng-switch-when="true" ng-bind-html="peer_data.rFullName"></span>
+        <span ng-switch-default ng-bind-html="peer_data.rTitle"></span>
+      </strong>?</span>
+      <span ng-switch-when="SHARE_CONTACT_PEER">Send to <strong ng-switch="peer_id > 0">
+        <span ng-switch-when="true" ng-bind-html="peer_data.rFullName"></span>
+        <span ng-switch-default ng-bind-html="peer_data.rTitle"></span>
+      </strong>?</span>
+      <span ng-switch-when="EXT_SHARE_PEER">Share with <strong ng-switch="peer_id > 0">
+        <span ng-switch-when="true" ng-bind-html="peer_data.rFullName"></span>
+        <span ng-switch-default ng-bind-html="peer_data.rTitle"></span>
+      </strong>?</span>
+      <span ng-switch-default ng-bind="message || 'Are you sure?'"></span>
+    </div>
+
+  </div>
+
+  <div class="modal-footer">
+    <a class="btn btn-link" ng-click="$dismiss()" ng-switch="type">
+      <span ng-switch-default>Cancel</span>
+    </a>
+    <button type="button" class="btn btn-primary" ng-switch="type" ng-click="$close()" my-focused>
+      <span ng-switch-when="LOGOUT">Log Out</span>
+      <span ng-switch-when="HISTORY_FLUSH">Delete Chat</span>
+      <span ng-switch-when="FILES_CLIPBOARD_PASTE">Send</span>
+      <span ng-switch-when="FILE_CLIPBOARD_PASTE">Send</span>
+      <span ng-switch-when="MESSAGE_DELETE">Delete</span>
+      <span ng-switch-when="FORWARD_PEER">Forward message</span>
+      <span ng-switch-when="PHOTO_SHARE_PEER">Forward photo</span>
+      <span ng-switch-when="VIDEO_SHARE_PEER">Forward video</span>
+      <span ng-switch-when="SHARE_CONTACT_PEER">Send contact</span>
+      <span ng-switch-when="EXT_SHARE_PEER">Share file</span>
+      <span ng-switch-default>OK</span>
+    </button>
+  </div>
+
+</div>

app/partials/mobile/contacts_modal.html

@@ -4,12 +4,39 @@
     <div class="navbar navbar-static-top navbar-inverse">
       <div class="container">
 
-        <div class="navbar-header">
+        <div class="navbar-header" ng-switch="action">
 
-          <ul class="nav navbar-nav navbar-quick-nav">
+          <ul ng-switch-when="edit" class="nav navbar-nav navbar-quick-nav">
-            <li class="navbar-quick-right" ng-if="!action || action == 'edit'" ng-switch="action">
+            <li class="navbar-quick-left">
-              <a ng-switch-when="edit" class="contacts_modal_edit_link" ng-click="toggleEdit(false)" my-i18n="contacts_modal_edit_cancel"></a>
+              <a ng-click="toggleEdit(false)" my-i18n="contacts_modal_edit_cancel"></a>
-              <a ng-switch-default class="contacts_modal_edit_link" ng-click="toggleEdit(true)" my-i18n="contacts_modal_edit_list"></a>
+            </li>
+            <li class="navbar-quick-right">
+              <a ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="deleteSelected()">
+                <my-i18n msgid="contacts_modal_edit_delete"></my-i18n>
+                <strong ng-bind="selectedCount"></strong>
+              </a>
+            </li>
+          </ul>
+
+          <div ng-switch-default class="navbar-toggle-wrap dropdown" ng-show="!action">
+            <a class="dropdown-toggle navbar-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="toggleEdit(true)" my-i18n="contacts_modal_edit_list"></a>
+              </li>
+              <li>
+                <a ng-click="importContact()" my-i18n="contacts_modal_new_contact"></a>
+              </li>
+            </ul>
+          </div>
+
+          <ul ng-switch-default class="nav navbar-nav navbar-quick-nav">
+            <li ng-if="action == 'select' || action == 'new_group'" class="navbar-quick-right">
+              <a ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" my-i18n="modal_next"></a>
             </li>
             <li>
               <a ng-click="$dismiss()" class="navbar-quick-media-back">
@@ -44,11 +71,7 @@
     </div>
 
 
-    <div my-contacts-list class="contacts_modal_col">
+    <div class="contacts_modal_col contacts_wrap contacts_scrollable_wrap mobile_scrollable_wrap" my-contacts-list-mobile my-infinite-scroller-mobile>
-
-      <div class="contacts_wrap nano" my-infinite-scroller>
-        <div class="contacts_scrollable_wrap nano-content">
-
       <ul class="contacts_modal_members_list nav nav-pills nav-stacked">
 
         <li class="contacts_modal_contact_wrap clearfix" ng-repeat="contact in contacts | orderBy:'user.sortName' | limitTo: slice.limit track by contact.userID" ng-class="{active: selectedContacts[contact.userID], disabled: disabledContacts[contact.userID]}">
@@ -64,22 +87,8 @@
         </li>
 
       </ul>
-
-        </div>
     </div>
 
   </div>
 
 </div>
-
-  <div class="modal-footer contacts_modal_panel" ng-switch="action">
-    <button ng-switch-when="new_group" class="btn btn-primary" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit" my-i18n="modal_next"></button>
-    <button ng-switch-when="select" class="btn btn-primary" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit" my-i18n="modal_next"></button>
-    <button ng-switch-when="edit" class="btn btn-danger"  ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="deleteSelected()" my-i18n>
-      <my-i18n msgid="contacts_modal_edit_delete"></my-i18n>
-      <strong ng-bind="selectedCount"></strong>
-    </button>
-    <button ng-switch-default class="btn btn-link" ng-click="importContact()" my-i18n="contacts_modal_new_contact"></button>
-  </div>
-
-</div>

app/partials/mobile/country_select_modal.html

@@ -30,11 +30,7 @@
       <a class="countries_modal_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
     </div>
 
-    <div class="countries_modal_col" my-countries-list>
+    <div class="countries_modal_col countries_wrap countries_scrollable_wrap mobile_scrollable_wrap" my-countries-list-mobile my-infinite-scroller-mobile>
-
-      <div class="countries_wrap nano" my-infinite-scroller>
-        <div class="countries_scrollable_wrap nano-content">
-
       <ul class="countries_modal_members_list nav nav-pills nav-stacked">
 
         <li class="countries_modal_country_wrap clearfix" ng-repeat="country in countries | limitTo : slice.limit track by $index">
@@ -45,10 +41,6 @@
         </li>
 
       </ul>
-
-        </div>
-      </div>
-
     </div>
 
   </div>

app/partials/mobile/dialog.html

@@ -0,0 +1,89 @@
+<a class="im_dialog" ng-click="dialogSelect(dialogMessage.peerString, search.messages &amp;&amp; dialogMessage.id)">
+
+  <div class="im_dialog_meta pull-right text-right">
+    <div class="im_dialog_date" ng-bind="dialogMessage.dateText"></div>
+    <span
+      class="im_dialog_badge badge"
+      ng-show="dialogMessage.unreadCount > 0 &amp;&amp; !dialogMessage.out"
+      ng-bind="dialogMessage.unreadCount"
+    ></span>
+    <i
+      class="im_dialog_unread"
+      ng-show="dialogMessage.out &amp;&amp; dialogMessage.unread"
+    ></i>
+  </div>
+
+  <div class="im_dialog_photo pull-left">
+    <img
+      class="im_dialog_photo"
+      my-load-thumb
+      watch="true"
+      thumb="dialogMessage.peerPhoto"
+    />
+  </div>
+
+  <div class="im_dialog_message_wrap">
+
+    <div class="im_dialog_peer" ng-switch="dialogMessage.peerID > 0">
+      <span class="im_dialog_user" ng-switch-when="true" ng-bind-html="dialogMessage.peerData.rFullName"></span>
+      <span class="im_dialog_chat" ng-switch-default>
+        <span ng-bind-html="dialogMessage.peerData.rTitle"></span>
+      </span>
+    </div>
+
+    <div ng-switch="dialogMessage.deleted">
+      <div ng-switch-when="true" class="im_dialog_message">
+        <span class="im_dialog_message_text">deleted message</span>
+      </div>
+      <div ng-switch-default class="im_dialog_message">
+        <span class="im_dialog_chat_from_wrap">
+          <span
+            class="im_dialog_chat_from"
+            ng-if="!dialogMessage.out &amp;&amp; dialogMessage.chatID"
+            ng-bind-html="dialogMessage.fromUser.rFirstName"
+          ></span><span
+            class="im_dialog_chat_from"
+            ng-if="dialogMessage.out"
+          >You</span>{{((dialogMessage.out || dialogMessage.peerID &lt; 0) &amp;&amp; (dialogMessage.message.length || dialogMessage.media &amp;&amp; dialogMessage.media._ != 'messageMediaEmpty')) ? ':' : ''}}
+        </span>
+
+        <span class="im_dialog_message_media" ng-if="dialogMessage.media &amp;&amp; dialogMessage.media._ != 'messageMediaEmpty'" ng-switch="dialogMessage.media._">
+          <span ng-switch-when="messageMediaPhoto">Photo</span>
+          <span ng-switch-when="messageMediaVideo">Video</span>
+          <span ng-switch-when="messageMediaDocument">Document</span>
+          <span ng-switch-when="messageMediaAudio">Audio</span>
+          <span ng-switch-when="messageMediaGeo">Location</span>
+          <span ng-switch-when="messageMediaContact">Contact</span>
+        </span>
+
+        <span class="im_dialog_message_service" ng-if="dialogMessage._ == 'messageService'" ng-switch="dialogMessage.action._">
+          <span ng-switch-when="messageActionChatCreate">created the group</span>
+          <span ng-switch-when="messageActionChatEditTitle">changed group name</span>
+          <span ng-switch-when="messageActionChatEditPhoto">changed group photo</span>
+          <span ng-switch-when="messageActionChatDeletePhoto">removed group photo</span>
+
+          <span ng-switch-when="messageActionChatAddUser" ng-switch="dialogMessage.from_id == dialogMessage.action.user_id">
+            <span ng-switch-when="true">
+              returned to group
+            </span>
+            <span ng-switch-default>
+              invited <span ng-bind-html="dialogMessage.action.user.rFullName"></span>
+            </span>
+          </span>
+
+          <span ng-switch-when="messageActionChatDeleteUser" ng-switch="dialogMessage.from_id == dialogMessage.action.user_id">
+            <span ng-switch-when="true">
+              left group
+            </span>
+            <span ng-switch-default>
+              kicked <span ng-bind-html="dialogMessage.action.user.rFullName"></span>
+            </span>
+          </span>
+        </span>
+
+        <span class="im_dialog_message_text" ng-if="dialogMessage.message.length" ng-bind-html="dialogMessage.richMessage"></span>
+      </div>
+    </div>
+
+  </div>
+</a>

app/partials/mobile/edit_contact_modal.html

@@ -0,0 +1,49 @@
+<div class="import_modal_wrap">
+
+  <div class="tg_page_head tg_modal_head">
+    <div class="navbar navbar-static-top navbar-inverse">
+      <div class="container">
+
+        <div class="navbar-header">
+
+          <ul class="nav navbar-nav navbar-quick-nav">
+            <li class="navbar-quick-right">
+              <a ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'Saving...' : 'Save'" ng-disabled="progress.enabled"></a>
+            </li>
+            <li>
+              <a ng-click="$dismiss()" class="navbar-quick-media-back">
+                <i class="icon icon-back"></i>
+                <div class="navbar-quick-back-title">
+                  <h4>
+                    Edit contact
+                  </h4>
+                </div>
+              </a>
+            </li>
+          </ul>
+
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-body">
+
+    <form class="modal_simple_form" ng-submit="doImport()" my-vertical-position="0.3">
+
+      <div class="form-group">
+        <span class="form-control uneditable_input input-lg disabled" disabled my-focused type="text" ng-bind="importContact.phone | phoneNumber"></span>
+      </div>
+      <div class="form-group">
+        <input class="form-control input-lg" type="text" placeholder="First name" ng-model="importContact.first_name"/>
+      </div>
+      <div class="form-group">
+        <input class="form-control input-lg" type="text" placeholder="Last name" ng-model="importContact.last_name"/>
+      </div>
+
+    </form>
+
+  </div>
+
+</div>

app/partials/mobile/error_modal.html

@@ -0,0 +1,87 @@
+<div class="error_modal_wrap" my-modal-position>
+
+  <a class="modal-close-button" ng-click="$close()"><i></i></a>
+
+  <div class="modal-body">
+
+    <h4 ng-if="error" class="modal_simple_header" ng-switch="error.type">
+      <span ng-switch-when="ACCOUNT_REQUIRED">No account</span>
+      <span ng-switch-default ng-switch="error.code">
+        <span ng-switch-when="400">Error</span>
+        <span ng-switch-when="401">Unauthorized</span>
+        <span ng-switch-when="403">Access denied</span>
+        <span ng-switch-when="404">Not found</span>
+        <span ng-switch-when="406">Network error</span>
+        <span ng-switch-when="420">Too fast</span>
+        <span ng-switch-default>Server error</span>
+      </span>
+    </h4>
+    <h4 ng-if="!error" class="modal_simple_header" ng-bind="title || 'Alert'"></h4>
+
+    <div ng-if="error" class="error_modal_description" ng-switch="error.type">
+      <span ng-switch-when="NETWORK_BAD_REQUEST">
+        Please check your internet connection.
+      </span>
+      <span ng-switch-when="NETWORK_BAD_RESPONSE">
+        Please check your internet connection.
+      </span>
+      <span ng-switch-when="FIRSTNAME_INVALID">
+        The first name you entered is invalid.
+      </span>
+      <span ng-switch-when="LASTNAME_INVALID">
+        The last name you entered is invalid.
+      </span>
+      <span ng-switch-when="PHONE_NUMBER_INVALID">
+        The phone number you entered is invalid.
+      </span>
+      <span ng-switch-when="USERS_TOO_MUCH">
+        You have selected too much users.
+      </span>
+      <span ng-switch-when="PHOTO_INVALID_DIMENSIONS">
+        The photo dimensions are invalid, please select another file.
+      </span>
+      <span ng-switch-when="VIDEO_EXT_INVALID">
+        The video file extension is invalid or unsupported, please select another file.
+      </span>
+      <span ng-switch-when="PHOTO_CROP_SIZE_SMALL">
+        The photo you provided is too small.
+      </span>
+      <span ng-switch-when="ACCOUNT_REQUIRED">
+        Sorry, there is no <strong>Telegram</strong> account for {{phone | phoneNumber}}<br/><br/>
+        Please <strong>sign up</strong> using our mobile apps for <a href="https://telegram.org/" target="_blank">iOS</a> or <a href="https://telegram.org/" target="_blank">Android</a>.
+      </span>
+      <span ng-switch-when="USER_NOT_USING_TELEGRAM">
+        Sorry, there is no <strong>Telegram</strong> account with the phone number you provided.
+      </span>
+      <span ng-switch-when="USERS_NOT_USING_TELEGRAM">
+        Sorry, there are no <strong>Telegram</strong> accounts with the phone numbers you provided.
+      </span>
+      <span ng-switch-when="PHONEBOOK_GET_CONTACTS_FAILED">
+        Telegram needs access to phonebook to import contacts.
+      </span>
+
+      <div ng-switch-default ng-switch="error.code">
+        <span ng-switch-when="400">One of the params is missing or invalid.</span>
+        <span ng-switch-when="401">This action requires authorization access. Please <a href="#/login">log in</a>.</span>
+        <span ng-switch-when="403">You are not allowed for this action.</span>
+        <span ng-switch-when="404">The page was not found.</span>
+        <span ng-switch-when="420">You are performing too many actions. Please try again later.</span>
+        <span ng-switch-default>Internal server error occured. Please try again later.</span>
+      </div>
+
+    </div>
+
+    <div ng-if="error" class="error_modal_details" ng-switch="error.detailsShown">
+      <textarea ng-switch-when="true" rows="3" onclick="this.select()">Method: {{error.input || 'N/A'}}
+Result: {{error.originalError ? error.originalError : (error.stack ? (error.name || '') + ' ' + (error.description || error.message) : error)}}
+Stack: {{error.stack}}</textarea>
+      <div ng-switch-default>
+        <a href="" ng-click="error.detailsShown = true">Technical details here</a>
+      </div>
+    </div>
+
+    <div ng-if="!error" class="error_modal_description" ng-bind="description"></div>
+
+  </div>
+
+</div>

app/partials/mobile/full_gif.html

@@ -0,0 +1,25 @@
+<a class="img_gif_with_progress_wrap" ng-click="toggle()">
+
+  <div class="img_gif_image_wrap" ng-switch="document.url &amp;&amp; isActive">
+
+    <img ng-switch-when="true" class="img_gif_image" ng-src="{{document.url}}" />
+    <img ng-switch-default class="img_gif_thumb" my-load-thumb thumb="document.thumb" />
+
+  </div>
+
+  <div ng-show="!isActive" ng-switch="document.progress.enabled">
+
+    <div ng-switch-when="true" class="img_gif_progress_wrap">
+      <div class="img_gif_progress progress tg_progress">
+        <div class="progress-bar progress-bar-success" ng-style="{width: document.progress.percent + '%'}"></div>
+      </div>
+    </div>
+
+    <div ng-switch-default class="img_gif_info_wrap">
+      <div class="img_gif_label pull-left">GIF</div>
+      <div ng-if="!document.url" class="img_gif_size pull-right" ng-bind="::document.size | formatSize"></div>
+    </div>
+
+  </div>
+
+</a>

app/partials/mobile/full_photo.html

@@ -0,0 +1,19 @@
+<div class="img_fullsize_with_progress_wrap">
+  <div class="img_fullsize_progress_overlay" ng-show="progress.enabled">
+    <div class="img_fullsize_progress_wrap">
+      <div class="img_fullsize_progress progress tg_progress" ng-show="progress.percent > 0">
+        <div class="progress-bar progress-bar-success" ng-style="{width: progress.percent + '%'}">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="photo_full_wrap">
+    <a class="photo_modal_image">
+      <img class="photo_modal_image"/>
+    </a>
+  </div>
+  <div class="photo_modal_error_wrap" ng-if="error">
+    <div class="photo_modal_error" ng-if="error.html" ng-bind-html="error.html"></div>
+    <div class="photo_modal_error" ng-if="error.text" ng-bind="error.text"></div>
+  </div>
+</div>

app/partials/mobile/full_video.html

@@ -0,0 +1,26 @@
+<div class="img_fullsize_with_progress_wrap" ng-style="{width: video.full.width + 'px', height: video.full.height + 'px'}">
+  <div class="img_fullsize_progress_overlay" ng-show="progress.enabled">
+    <div class="img_fullsize_progress_wrap" ng-style="{width: video.full.width + 'px', height: video.full.height + 'px'}">
+      <div class="img_fullsize_progress progress tg_progress">
+        <div class="progress-bar progress-bar-success" style="width: {{progress.percent}}%"></div>
+      </div>
+    </div>
+  </div>
+  <div class="img_fullsize_wrap" ng-if="!player.src">
+    <img
+      class="img_fullsize"
+      my-load-thumb
+      thumb="video.fullThumb"
+    />
+  </div>
+  <div class="video_full_player" ng-if="player.src">
+    <embed ng-src="{{player.src}}" width="{{video.full.width}}" height="{{video.full.height}}" autoplay="true" CONTROLLER="TRUE" SHOWCONTROLS="TRUE" controller="true" loop="false" pluginspace="http://www.apple.com/quicktime/" ng-if="player.quicktime"/>
+    <video width="{{video.full.width}}" height="{{video.full.height}}" controls autoplay  ng-if="!player.quicktime">
+      <source ng-src="{{player.src}}" type="video/mp4">
+    </video>
+  </div>
+  <div class="video_full_error_wrap" ng-if="error">
+    <div class="video_full_error" ng-if="error.html" ng-bind-html="error.html"></div>
+    <div class="video_full_error" ng-if="error.text" ng-bind="error.text"></div>
+  </div>
+</div>

app/partials/mobile/head.html

@@ -19,7 +19,7 @@
         <ul ng-if="!curDialog.peer &amp;&amp; isLoggedIn" class="dropdown-menu">
           <li><a ng-click="openGroup()" my-i18n="head_new_group"></a></li>
           <li><a ng-click="importContact()" my-i18n="head_new_contact"></a></li>
-          <li><a ng-click="openContacts()" my-i18n="head_contacts"></a></li>
+          <li ng-if="!isEmpty.contacts"><a ng-click="openContacts()" my-i18n="head_contacts"></a></li>
           <li><a ng-click="openSettings()" my-i18n="head_settings"></a></li>
           <li><a ng-click="logOut()" my-i18n="head_log_out"></a></li>
         </ul>
@@ -98,7 +98,7 @@
                         <span ng-switch-default class="status_online" my-i18n-format="head_many_typing"></span>
                         <my-i18n-param name="name1"><span my-user-link="historyState.typing[0]" short="true"></span></my-i18n-param>
                         <my-i18n-param name="name2"><span my-user-link="historyState.typing[1]" short="true"></span></my-i18n-param>
-                        <my-i18n-param name="names">{{historyState.typing.length - 1}}</my-i18n-param>
+                        <my-i18n-param name="names" ng-bind="historyState.typing.length - 1"></my-i18n-param>
                         <my-i18n-param name="dots"><span my-loading-dots></span></my-i18n-param>
                       </my-i18n>
                     </small>
@@ -110,21 +110,13 @@
         </div>
       </div>
 
-      <div class="navbar-menu" ng-switch="offline">
+      <div class="navbar-menu" ng-if="offline">
 
-        <ul ng-switch-when="true" class="nav navbar-nav navbar-offline">
+        <ul class="nav navbar-nav navbar-offline">
           <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" class="hidden-xs"><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">
-          <li ng-if="isLoggedIn &amp;&amp; !isEmpty.contacts"><a href="" ng-click="openContacts()" my-i18n="head_contacts"></a></li>
-          <li ng-if="isLoggedIn"><a href="" ng-click="openSettings()" my-i18n="head_settings"></a></li>
-          <li ng-if="isLoggedIn"><a href="" ng-click="logOut()" my-i18n="head_log_out"></a></li>
-          <li ng-if="!isLoggedIn"><a href="https://github.com/zhukov/webogram" target="_blank" my-i18n="head_about"></a></li>
-        </ul>
-
       </div>
 
     </div>

app/partials/mobile/im.html

@@ -0,0 +1,153 @@
+<div my-head></div>
+
+<div class="im_page_wrap" ng-class="{im_page_peer_not_selected: !curDialog.peer}">
+
+  <div class="im_page_split clearfix">
+
+    <div ng-controller="AppImDialogsController" my-dialogs has-tabs="{{search.query.length > 0}}" class="im_dialogs_col_wrap">
+      <div class="im_dialogs_panel">
+        <div class="im_dialogs_search">
+          <input class="form-control im_dialogs_search_field no_outline" type="search" placeholder="Search" ng-model="search.query"/>
+          <a class="im_dialogs_search_clear" ng-click="searchClear()" ng-show="search.query.length"></a>
+        </div>
+
+        <div class="im_dialogs_tabs_wrap">
+          <div class="im_dialogs_tabs clearfix">
+            <a href="" class="im_dialogs_tab" ng-class="{active: !search.messages}" ng-click="search.messages = false">Conversations</a>
+            <a href="" class="im_dialogs_tab" ng-class="{active: search.messages}" ng-click="search.messages = true">Messages</a>
+          </div>
+        </div>
+      </div>
+
+      <div my-dialogs-list-mobile class="im_dialogs_col im_dialogs_scrollable_wrap mobile_scrollable_wrap">
+
+        <div class="im_dialogs_empty_wrap" ng-if="isEmpty.contacts" my-vertical-position="0.4">
+          <h3 class="im_dialogs_empty_header">No contacts yet</h3>
+          <p class="im_dialogs_empty_lead">Get started by adding a contact to chat with</p>
+          <button type="button" class="btn btn-primary btn-block im_dialogs_add_contact" ng-click="importContact()">
+            Add contact
+          </button>
+          <button ng-if="phonebookAvailable" type="button" class="btn btn-primary btn-block im_dialogs_import_phonebook" ng-click="importPhonebook()">
+            Import phonebook
+          </button>
+        </div>
+
+        <div ng-switch="search.messages">
+          <ul ng-switch-when="true" class="nav nav-pills nav-stacked">
+            <li class="im_dialog_wrap" my-dialog dialog-message="dialogMessage" ng-repeat="dialogMessage in dialogs track by dialogMessage.id" ng-class="{active: curDialog.peerID == dialogMessage.peerID &amp;&amp; curDialog.messageID == dialogMessage.id}"></li>
+          </ul>
+          <ul ng-switch-default class="nav nav-pills nav-stacked">
+            <li class="im_dialog_wrap" my-dialog dialog-message="dialogMessage" ng-repeat="dialogMessage in dialogs track by dialogMessage.peerID" ng-class="{active: curDialog.peerID == dialogMessage.peerID}"></li>
+          </ul>
+        </div>
+
+        <div class="im_dialogs_contacts_wrap" ng-show="!search.messages &amp;&amp; contacts.length > 0">
+          <h5>Contacts</h5>
+          <ul class="nav nav-pills nav-stacked">
+            <li class="im_dialog_wrap" ng-repeat="contact in contacts | orderBy:'user.sortName' track by contact.userID" ng-class="{active: curDialog.peerID == contact.userID}">
+              <a class="im_dialog" ng-click="dialogSelect(contact.peerString)">
+                <div class="im_dialog_photo pull-left">
+                  <img
+                    class="im_dialog_photo"
+                    my-load-thumb
+                    thumb="contact.userPhoto"
+                  />
+                </div>
+                <div class="im_dialog_message_wrap">
+                  <div class="im_dialog_peer">
+                    <span class="im_dialog_user" ng-bind-html="contact.user.rFullName"></span>
+                  </div>
+                  <div class="im_dialog_message">
+                    <span class="im_dialog_message_text" my-user-status="::contact.userID"></span>
+                  </div>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="im_history_col_wrap" ng-controller="AppImHistoryController">
+      <div ng-show="!state.notSelected &amp;&amp; !state.loaded" class="im_history_not_selected" my-vertical-position="0.35" padding="true">
+        Loading history<span my-loading-dots></span>
+      </div>
+
+      <div ng-show="state.loaded">
+        <div my-history-mobile class="im_history_col">
+
+          <div class="im_history_wrap im_history_scrollable_wrap mobile_scrollable_wrap">
+
+            <div class="im_history_scrollable">
+                <div class="im_history" ng-class="{im_history_selectable: historyState.selectActions}">
+                  <div ng-if="state.empty"  class="im_history_empty" ng-switch="state.mayBeHasMore" my-vertical-position="0.25" padding="true">
+                    <span ng-switch-when="true">Loading history<span my-loading-dots></span></span>
+                    <span ng-switch-default>No messages here yet...</span>
+                  </div>
+
+                  <div class="im_history_messages" ng-class="{im_history_messages_group: historyPeer.id < 0}">
+                    <div class="im_history_messages_peer" ng-show="peerHistory.peerID == historyPeer.id" ng-repeat="peerHistory in peerHistories">
+                      <div class="im_history_message_wrap" my-message ng-repeat="historyMessage in peerHistory.messages"></div>
+                    </div>
+                  </div>
+
+                </div>
+
+            </div>
+
+          </div>
+
+          <div class="im_bottom_panel_wrap">
+
+            <div class="im_edit_panel_wrap clearfix" ng-show="historyState.selectActions">
+              <div class="im_edit_selected_actions">
+                <a class="btn btn-primary im_edit_forward_btn" ng-click="selectedForward()" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount">
+                  Forward <strong class="im_selected_count" ng-show="selectedCount > 0" ng-bind="selectedCount"></strong>
+                </a><a class="btn btn-danger im_edit_delete_btn" ng-click="selectedDelete()" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount">
+                  Delete <strong class="im_selected_count" ng-show="selectedCount > 0" ng-bind="selectedCount"></strong>
+                </a>
+              </div>
+            </div>
+
+            <div class="im_send_panel_wrap" ng-hide="historyState.selectActions">
+
+              <div class="im_send_form_wrap1">
+
+                <div class="im_send_form_wrap clearfix" ng-controller="AppImSendController">
+                  <form my-send-form draft-message="draftMessage" class="im_send_form" ng-class="{im_send_form_empty: !draftMessage.text.length}" ng-submit="sendMessage($event)">
+
+                    <div class="im_send_field_wrap">
+                      <div class="im_send_dropbox_wrap"> Drop photos here to send </div>
+                      <textarea ng-model="draftMessage.text" placeholder="Write a message..." class="form-control im_message_field no_outline"></textarea>
+                    </div>
+
+                    <div class="im_attach pull-right">
+                      <input type="file" class="im_attach_input" size="28" multiple="true" title="Send file" />
+                      <i class="icon icon-paperclip"></i>
+                    </div>
+
+                    <div class="im_emoji_btn pull-right" title="Insert emoticon">
+                      <i class="icon icon-emoji"></i>
+                    </div>
+
+                    <button type="submit" class="btn btn-success im_submit"></button>
+                  </form>
+                </div>
+
+              </div>
+
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
+
+</div>
+
+<div id="notify_sound"></div>

app/partials/mobile/import_contact_modal.html

@@ -0,0 +1,53 @@
+<div class="import_modal_wrap">
+
+  <div class="tg_page_head tg_modal_head">
+    <div class="navbar navbar-static-top navbar-inverse">
+      <div class="container">
+
+        <div class="navbar-header">
+
+          <ul class="nav navbar-nav navbar-quick-nav">
+            <li class="navbar-quick-right">
+              <a ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'Importing...' : 'Save'" ng-disabled="progress.enabled"></a>
+            </li>
+            <li>
+              <a ng-click="$dismiss()" class="navbar-quick-media-back">
+                <i class="icon icon-back"></i>
+                <div class="navbar-quick-back-title">
+                  <h4>
+                    Add new contact
+                  </h4>
+                </div>
+              </a>
+            </li>
+          </ul>
+
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-body">
+
+    <form class="modal_simple_form" ng-submit="doImport()" my-vertical-position="0.3">
+
+      <div class="form-group">
+        <input class="form-control input-lg" my-focused type="text" placeholder="Phone number" ng-model="importContact.phone"/>
+      </div>
+      <div class="form-group">
+        <input class="form-control input-lg" type="text" placeholder="First name" ng-model="importContact.first_name"/>
+      </div>
+      <div class="form-group">
+        <input class="form-control input-lg" type="text" placeholder="Last name" ng-model="importContact.last_name"/>
+      </div>
+
+    </form>
+
+  </div>
+
+  <div class="modal-footer" ng-if="phonebookAvailable">
+    <a class="btn btn-link" ng-click="importPhonebook()">Phonebook</a>
+  </div>
+
+</div>

app/partials/mobile/login.html

@@ -0,0 +1,84 @@
+<div my-head></div>
+
+
+<div class="login_form_wrap" my-vertical-position="0.3">
+  <div class="error" ng-if="error.message" ng-bind="error.message"></div>
+
+  <form name="mySendCodeForm" ng-if="!credentials.phone_code_hash" ng-submit="sendCode()">
+    <h3 class="login_form_head">Sign in</h3>
+    <p class="login_form_lead">Please choose your country and enter your full phone number.</p>
+
+    <div class="login_country_selector" ng-click="chooseCountry()">
+      <span ng-bind="credentials.phone_country_name"></span>
+      <i class="icon icon-caret pull-right"></i>
+    </div>
+
+    <div class="form-group" ng-class="{'has-error': error.field == 'phone'}">
+      <label class="control-label" ng-if="error.field == 'phone'">Incorrect phone number</label>
+      <div class="clearfix">
+        <input type="tel" autocomplete="off" class="form-control input-lg pull-left login_phone_country" my-focused name="phone_country" ng-model="credentials.phone_country">
+        <input type="tel" autocomplete="off" class="form-control input-lg pull-left login_phone_number" my-focus-on="country_selected" name="phone_number" ng-model="credentials.phone_number" placeholder="Enter your phone" required>
+      </div>
+    </div>
+    <button class="btn btn-primary btn-block" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled" type="submit" ng-switch="progress.enabled">
+      <span ng-switch-when="true">Generating keys<span my-loading-dots></span></span>
+      <span ng-switch-default>Next</span>
+    </button>
+    <div class="login_form_messaging" ng-show="progress.enabled">Keys are only generated once. This can take a few minutes on slower devices, please be patient.</div>
+  </form>
+
+  <form name="myLoginForm" ng-if="credentials.phone_code_hash &amp;&amp; !credentials.phone_code_valid" ng-submit="logIn()">
+    <h3 class="login_form_head"><span ng-bind="credentials.phone_country"></span> <span ng-bind="credentials.phone_number"></span></h3>
+    <div class="login_edit_phone"><a ng-click="editPhone()">Edit phone number</a></div>
+    <div ng-switch="credentials.viaApp">
+      <div ng-switch-when="true">
+        <p class="login_form_lead">
+          Please enter the code you've just received in your other <strong>Telegram</strong> app
+        </p>
+        <p class="login_form_lead">
+          <a ng-click="sendSms()">Haven't received the code?</a>
+        </p>
+      </div>
+      <div ng-switch-default>
+        <p class="login_form_lead">We have sent you a code via SMS.<br/>Please enter it below.</p>
+
+        <p class="login_form_lead">
+          <span ng-show="callPending.remaining > 0">Telegram will call you in {{callPending.remaining | duration}}</span>
+          <span ng-show="!callPending.remaining &amp;&amp; !callPending.success">Telegram is calling you</span>
+          <span ng-show="!callPending.remaining &amp;&amp; callPending.success">Telegram dialed your number</span>
+        </p>
+      </div>
+    </div>
+
+    <div class="form-group" ng-class="{'has-error': error.field == 'phone_code'}">
+      <label class="control-label" for="phone_code" ng-if="error.field == 'phone_code'">Incorrect SMS code</label>
+      <input type="number" my-focused class="form-control login_phone_code" name="phone_code" ng-model="credentials.phone_code" placeholder="Enter your code" autocomplete="off" required>
+    </div>
+
+    <button class="btn btn-primary btn-block" type="submit" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled" ng-switch="progress.enabled">
+      <span ng-switch-when="true">Checking code<span my-loading-dots></span></span>
+      <span ng-switch-default>Next</span>
+    </button>
+  </form>
+
+  <form name="myFullNameForm" ng-if="credentials.phone_code_valid &amp;&amp; credentials.phone_unoccupied" ng-submit="logIn(true)">
+    <h3 class="login_form_head">Your info</h3>
+    <p class="login_form_lead">Please enter your full name to set up a Telegram account.</p>
+
+    <div class="form-group login_first_name_wrap" ng-class="{'has-error': error.field == 'first_name'}">
+      <label class="control-label" for="first_name" ng-if="error.field == 'first_name'">Incorrect first name</label>
+      <input my-focused class="form-control" name="first_name" ng-model="credentials.first_name" placeholder="First name" autocomplete="off" required>
+    </div>
+
+    <div class="form-group" ng-class="{'has-error': error.field == 'last_name'}">
+      <label class="control-label" for="last_name" ng-if="error.field == 'last_name'">Incorrect last name</label>
+      <input class="form-control" name="last_name" ng-model="credentials.last_name" placeholder="Last name" autocomplete="off">
+    </div>
+
+    <button class="btn btn-primary btn-block" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled" type="submit" ng-switch="progress.enabled">
+      <span ng-switch-when="true">Signing up<span my-loading-dots></span></span>
+      <span ng-switch-default>Sign up</span>
+    </button>
+  </form>
+
+</div>

app/partials/mobile/message.html

@@ -0,0 +1,63 @@
+<div class="im_message_outer_wrap" ng-click="toggleMessage(historyMessage.id, $event)">
+
+
+  <div class="im_message_wrap clearfix">
+
+    <div class="im_service_message_wrap" ng-if="::historyMessage._ == 'messageService'">
+      <div class="im_service_message">
+        <a class="im_message_author" my-user-link="historyMessage.from_id" short="!historyMessage.to_id.chat_id" color="historyMessage.to_id.chat_id > 0"></a>
+        <span class="im_message_service" my-service-message></span>
+      </div>
+
+      <a ng-if="::historyMessage.action._ == 'messageActionChatEditPhoto'" class="im_service_message_photo_thumb" href="" ng-click="openPhoto(historyMessage.action.photo.id)">
+        <img
+          class="im_service_message_photo_thumb"
+          my-load-thumb
+          thumb="historyMessage.action.photo.thumb"
+        />
+      </a>
+
+    </div>
+
+    <div ng-if="::historyMessage._ != 'messageService'" class="im_content_message_wrap" ng-class="::[historyMessage.out ? 'im_message_out' : 'im_message_in', historyMessage._ == 'messageForwarded' ? 'im_message_fwd' : '']">
+      <i ng-if="::historyMessage.unread || historyMessage.pending || false" class="icon-message-status" ng-class="{'icon-message-status-unread': historyMessage.unread, 'icon-message-status-pending': historyMessage.pending}" ng-show="!historyMessage.error"></i>
+
+      <a class="im_message_from_photo pull-left" my-user-photolink="historyMessage.from_id" img-class="im_message_from_photo"></a>
+
+      <div class="im_message_meta pull-right text-right">
+        <i class="icon-message-status-tick"></i>
+        <span class="im_message_date" ng-bind="::historyMessage.date | time"></span>
+      </div>
+
+      <div class="im_message_body" ng-class="::{im_message_body_media: historyMessage._ == 'message' &amp;&amp; historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty'}">
+
+        <a class="im_message_author" my-user-link="historyMessage.from_id" short="!historyMessage.to_id.chat_id" color="historyMessage.to_id.chat_id > 0"></a>
+
+        <div ng-if="::historyMessage._ == 'messageForwarded' || false" class="im_message_fwd_from">
+          <div class="im_message_fwd_title" ng-if="::historyMessage.grouped == 'im_grouped_fwd_start'">Forwarded message</div>
+          <a class="im_message_fwd_photo pull-left" my-user-photolink="historyMessage.fwd_from_id" img-class="im_message_fwd_photo"></a>
+          <div class="im_message_fwd_author_wrap">
+            <a class="im_message_fwd_author" my-user-link="historyMessage.fwd_from_id" short="true"></a><span class="im_message_fwd_date" ng-bind="historyMessage.fwd_date | dateOrTime"></span>
+          </div>
+        </div>
+
+        <div ng-if="::historyMessage.media &amp;&amp; historyMessage.media._ != 'messageMediaEmpty' || false" class="im_message_media" ng-switch="historyMessage.media._">
+
+          <div ng-switch-when="messageMediaPhoto"     my-message-photo></div>
+          <div ng-switch-when="messageMediaVideo"     my-message-video></div>
+          <div ng-switch-when="messageMediaDocument"  my-message-document></div>
+          <div ng-switch-when="messageMediaAudio"     my-message-audio></div>
+          <div ng-switch-when="messageMediaGeo"       my-message-map></div>
+          <div ng-switch-when="messageMediaContact"   my-message-contact></div>
+          <div ng-switch-when="messageMediaPending"   my-message-pending></div>
+
+        </div>
+
+        <div class="im_message_text" ng-if="::historyMessage.message.length || false" ng-bind-html="::historyMessage.richMessage"></div>
+      </div>
+
+    </div>
+  </div>
+
+</div>
+

app/partials/mobile/message_attach_audio.html

@@ -0,0 +1,30 @@
+<div class="im_message_document im_message_audio" ng-class="{im_message_audio_done: historyMessage.media.audio.url, im_message_audio_progress: historyMessage.media.audio.progress.enabled}">
+  <a href="" ng-click="openAudio(historyMessage.media.audio.id)" ng-if="!historyMessage.media.audio.progress.enabled &amp;&amp; !historyMessage.media.audio.url">
+    <i class="icon icon-audio"></i>
+  </a>
+  <i class="icon icon-audio" ng-if="historyMessage.media.audio.progress.enabled || historyMessage.media.audio.url"></i>
+
+  <div class="im_message_audio_info">
+    <div class="im_message_audio_name_wrap" ng-if="!historyMessage.media.audio.url">
+      <span class="im_message_audio_name">
+        Voice message
+      </span>
+      <span class="im_message_audio_duration" ng-if="!historyMessage.media.audio.progress.enabled" ng-bind="::historyMessage.media.audio.duration | duration"></span>
+      <span class="im_message_audio_size" ng-if="historyMessage.media.audio.progress.enabled" ng-bind="historyMessage.media.audio.progress | formatSizeProgress"></span>
+    </div>
+    <div class="clearfix cancelable_progress_wrap" ng-if="historyMessage.media.audio.progress.enabled">
+      <a class="im_message_media_progress_cancel pull-right" ng-click="historyMessage.media.audio.progress.cancel()">Cancel</a>
+      <div class="im_message_download_progress_wrap">
+        <div class="progress tg_down_progress">
+          <div class="progress-bar progress-bar-success" ng-style="{width: historyMessage.media.audio.progress.percent + '%'}"></div>
+        </div>
+      </div>
+    </div>
+    <div class="im_message_audio_player_wrap" ng-if="historyMessage.media.audio.url">
+      <audio my-audio-autoplay audio="historyMessage.media.audio" controls="controls">
+        <source ng-src="{{::historyMessage.media.audio.url}}" type="audio/ogg" />
+        <embed ng-src="{{::historyMessage.media.audio.url}}" hidden="true" autostart="true" loop="false" />
+      </audio>
+    </div>
+  </div>
+</div>

app/partials/mobile/message_attach_contact.html

@@ -0,0 +1,8 @@
+<div>
+  <a class="im_message_contact_photo pull-left" my-user-photolink="historyMessage.media.user_id" img-class="im_message_contact_photo"></a>
+  <div class="im_message_contact_name" ng-switch="historyMessage.media.user_id > 0">
+    <a ng-switch-when="true" my-user-link="historyMessage.media.user_id"></a>
+    <span ng-switch-default ng-bind-html="::historyMessage.media.rFullName"></span>
+  </div>
+  <div class="im_message_contact_phone" ng-bind="::historyMessage.media.phone_number | phoneNumber"></div>
+</div>

app/partials/mobile/message_attach_document.html

@@ -0,0 +1,35 @@
+<div ng-switch="::historyMessage.media.document.isSpecial">
+
+  <div ng-switch-when="gif" my-load-gif document="historyMessage.media.document"></div>
+
+  <div ng-switch-default class="im_message_document" ng-class="{im_message_document_thumbed: !!historyMessage.media.document.thumb, im_message_document_progress: historyMessage.media.document.progress.enabled}">
+
+    <a href="" ng-click="downloadDoc(historyMessage.media.document.id, historyMessage.media.document.withPreview)" ng-class="{im_message_document_link_disabled: historyMessage.media.document.progress.enabled}">
+      <i class="icon icon-document" ng-if="::!historyMessage.media.document.thumb"></i>
+      <div class="im_message_document_thumb_wrap" ng-if="::historyMessage.media.document.thumb">
+        <img
+          class="im_message_document_thumb"
+          my-load-thumb
+          thumb="historyMessage.media.document.thumb"
+        />
+      </div>
+    </a>
+
+    <div class="im_message_document_info">
+      <div class="im_message_document_name_wrap">
+        <span class="im_message_document_name" ng-bind="::historyMessage.media.document.file_name"></span>
+        <span class="im_message_document_size" ng-if="!historyMessage.media.document.progress.enabled" ng-bind="::historyMessage.media.document.size | formatSize"></span>
+        <span class="im_message_document_size" ng-if="historyMessage.media.document.progress.enabled" ng-bind="historyMessage.media.document.progress | formatSizeProgress"></span>
+      </div>
+      <div class="clearfix cancelable_progress_wrap" ng-if="historyMessage.media.document.progress.enabled">
+        <a class="im_message_media_progress_cancel pull-right" ng-click="historyMessage.media.document.progress.cancel()">Cancel</a>
+        <div class="im_message_download_progress_wrap">
+          <div class="progress tg_down_progress">
+            <div class="progress-bar progress-bar-success" ng-style="{width: historyMessage.media.document.progress.percent + '%'}"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

app/partials/mobile/message_attach_map.html

@@ -0,0 +1,3 @@
+<a my-map-point point="historyMessage.media.geo" class="im_message_geopoint">
+  <i class="icon icon-geo-point"></i>
+</a>

app/partials/mobile/message_attach_pending.html

@@ -0,0 +1,17 @@
+<div class="im_message_document im_message_upload_file" ng-class="::'im_message_upload_' + historyMessage.media.type">
+  <i class="icon" ng-class="::'icon-' + historyMessage.media.type"></i>
+  <div class="im_message_document_info">
+    <div class="im_message_document_name_wrap">
+      <span class="im_message_document_name" ng-bind="::historyMessage.media.file_name"></span>
+      <span class="im_message_document_size" ng-if="historyMessage.media.progress" ng-bind="historyMessage.media.progress | formatSizeProgress"></span>
+    </div>
+    <div class="clearfix cancelable_progress_wrap">
+      <a class="im_message_media_progress_cancel pull-right" ng-click="historyMessage.media.progress.cancel()">Cancel</a>
+      <div class="im_message_download_progress_wrap">
+        <div class="progress tg_down_progress">
+          <div class="progress-bar progress-bar-success" role="progressbar" ng-style="{width: historyMessage.media.progress.percent + '%'}"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/partials/mobile/message_attach_photo.html

@@ -0,0 +1,7 @@
+<a class="im_message_photo_thumb" href="" ng-click="openPhoto(historyMessage.media.photo.id, historyMessage.id)" ng-style="::{width: historyMessage.media.photo.thumb.width + 'px'}" ng-mouseover="preloadPhoto(historyMessage.media.photo.id)">
+  <img
+    class="im_message_photo_thumb"
+    my-load-thumb
+    thumb="historyMessage.media.photo.thumb"
+  />
+</a>

app/partials/mobile/message_attach_video.html

@@ -0,0 +1,11 @@
+<div class="im_message_video im_message_document_thumbed">
+  <a class="im_message_video_thumb" href="" ng-click="openVideo(historyMessage.media.video.id, historyMessage.id)" ng-style="::{width: historyMessage.media.video.thumb.width + 'px'}">
+    <span class="im_message_video_duration" ng-bind="::historyMessage.media.video.duration | duration"></span>
+    <i class="icon icon-videoplay"></i>
+    <img
+      class="im_message_video_thumb"
+      my-load-thumb
+      thumb="historyMessage.media.video.thumb"
+    />
+  </a>
+</div>

app/partials/mobile/message_service.html

@@ -0,0 +1,32 @@
+<span ng-switch="::historyMessage.action._">
+  <span ng-switch-when="messageActionChatCreate">
+    created the group &laquo;<strong ng-bind-html="::historyMessage.action.rTitle"></strong>&raquo;
+  </span>
+  <span ng-switch-when="messageActionChatEditTitle">
+    changed group name to  &laquo;<strong ng-bind-html="::historyMessage.action.rTitle"></strong>&raquo;
+  </span>
+  <span ng-switch-when="messageActionChatEditPhoto">
+    changed group photo
+  </span>
+  <span ng-switch-when="messageActionChatDeletePhoto">
+    removed group photo
+  </span>
+  <span ng-switch-when="messageActionChatAddUser" ng-switch="::historyMessage.from_id != historyMessage.action.user_id">
+    <span ng-switch-when="true">
+      invited <a my-user-link="historyMessage.action.user_id" color="true"></a>
+    </span>
+    <span ng-switch-default>
+      returned to group
+    </span>
+  </span>
+  <span ng-switch-when="messageActionChatDeleteUser" ng-switch="::historyMessage.from_id != historyMessage.action.user_id">
+    <span ng-switch-when="true">
+      kicked <a my-user-link="historyMessage.action.user_id" color="true"></a>
+    </span>
+    <span ng-switch-default>
+      left group
+    </span>
+  </span>
+
+  <span ng-switch-default ng-bind="'Unsupported action ' + historyMessage.action._"></span>
+</span>

app/partials/mobile/peer_select.html

@@ -36,9 +36,7 @@
           <a class="im_dialogs_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
         </div>
       </div>
-      <div my-dialogs-list modal="true" class="im_dialogs_modal_col">
+      <div my-dialogs-list-mobile modal="true" class="im_dialogs_modal_col im_dialogs_scrollable_wrap mobile_scrollable_wrap">
-        <div class="im_dialogs_wrap nano">
-          <div class="im_dialogs_scrollable_wrap nano-content">
         <ul class="nav nav-pills nav-stacked">
           <li class="im_dialog_wrap" my-dialog dialog-message="dialogMessage" ng-repeat="dialogMessage in dialogs track by dialogMessage.peerID"></li>
         </ul>
@@ -68,8 +66,6 @@
         </div>
       </div>
     </div>
-      </div>
-    </div>
 
   </div>
 

app/partials/mobile/phonebook_modal.html

@@ -8,9 +8,12 @@
 
           <ul class="nav navbar-nav navbar-quick-nav">
             <li class="navbar-quick-right">
-              <a ng-click="toggleSelection()" ng-switch="selectedCount > 0">
+              <a ng-class="{disabled: !selectedCount || progress.enabled}" ng-click="submitSelected()" ng-switch="progress.enabled">
-                <span ng-switch-when="true" my-i18n="phonebook_modal_deselect_all"></span>
+                <span ng-switch-when="true">
-                <span ng-switch-default my-i18n="phonebook_modal_select_all"></span>
+                  <my-i18n msgid="phonebook_modal_submit_active"></my-i18n>
+                  <span my-loading-dots></span>
+                </span>
+                <span ng-switch-default my-i18n="phonebook_modal_submit"></span>
               </a>
             </li>
             <li>
@@ -37,10 +40,8 @@
     </div>
 
 
-    <div my-contacts-list class="contacts_modal_col">
+    <div class="contacts_modal_col contacts_wrap contacts_scrollable_wrap mobile_scrollable_wrap" my-contacts-list-mobile my-infinite-scroller-mobile>
-
+      <div ng-switch="contactsEmpty">
-      <div class="contacts_wrap nano" my-infinite-scroller>
-        <div class="contacts_scrollable_wrap nano-content" ng-switch="contactsEmpty">
 
         <div ng-switch-when="true" class="contacts_modal_contacts_empty" my-vertical-position="0.2" padding="true" my-i18n="phonebook_modal_empty"></div>
 
@@ -76,15 +77,10 @@
 
   </div>
 
-  </div>
-
   <div class="modal-footer contacts_modal_panel" ng-show="multiSelect">
-    <button class="btn btn-primary" ng-class="{disabled: !selectedCount || progress.enabled}" ng-disabled="!selectedCount || progress.enabled" ng-click="submitSelected()" type="submit" ng-switch="progress.enabled">
+    <button class="btn btn-primary" ng-click="toggleSelection()" ng-switch="selectedCount > 0">
-      <span ng-switch-when="true">
+      <span ng-switch-when="true" my-i18n="phonebook_modal_deselect_all"></span>
-        <my-i18n msgid="phonebook_modal_submit_active"></my-i18n>
+      <span ng-switch-default my-i18n="phonebook_modal_select_all"></span>
-        <span my-loading-dots></span>
-      </span>
-      <span ng-switch-default my-i18n="phonebook_modal_submit"></span>
     </button>
   </div>
 

app/partials/mobile/photo_modal.html

@@ -0,0 +1,22 @@
+<div my-modal-width="{{photo.full.modalWidth}}" class="media_modal_wrap photo_modal_wrap" my-modal-position animation="no" my-modal-nav next="nav.next()" prev="nav.prev()">
+
+  <div class="modal-body">
+
+    <div class="photo_modal_image_wrap" my-load-full-photo full-photo="photo.full" thumb-location="photo.thumb.location" ng-click="nav.next()"> </div>
+
+    <div class="media_meta_wrap clearfix">
+      <div class="media_modal_actions pull-right">
+        <a href="" class="media_modal_action_link" ng-click="download()">Download</a>
+        <a href="" class="media_modal_action_link" ng-if="canForward" ng-click="forward()">Forward</a>
+        <a href="" class="media_modal_action_link" ng-if="canDelete" ng-click="delete()">Delete</a>
+      </div>
+
+      <p class="media_modal_info">
+        <span class="media_modal_author" ng-bind-html="::photo.fromUser.rFullName"></span>, <span ng-bind="photo.date | dateOrTime"></span>
+      </p>
+    </div>
+
+
+  </div>
+
+</div>

app/partials/mobile/profile_edit_modal.html

@@ -0,0 +1,46 @@
+<div class="profile_edit_modal_wrap">
+
+  <div class="tg_page_head tg_modal_head">
+    <div class="navbar navbar-static-top navbar-inverse">
+      <div class="container">
+
+        <div class="navbar-header">
+
+          <ul class="nav navbar-nav navbar-quick-nav">
+            <li class="navbar-quick-right">
+              <a ng-class="{disabled: profile.updating}" ng-click="updateProfile()" ng-bind="profile.updating ? 'Saving...' : 'Save'" ng-disabled="profile.updating"></a>
+            </li>
+            <li>
+              <a ng-click="$dismiss()" class="navbar-quick-media-back">
+                <i class="icon icon-back"></i>
+                <div class="navbar-quick-back-title">
+                  <h4>
+                    Edit Profile
+                  </h4>
+                </div>
+              </a>
+            </li>
+          </ul>
+
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-body">
+
+    <form class="modal_simple_form" ng-submit="updateProfile()" my-vertical-position="0.3">
+
+      <div class="form-group" ng-class="{'has-error': error.field == 'first_name'}">
+        <input class="form-control input-lg" my-focused type="text" placeholder="First name" ng-model="profile.first_name"  name="first_name"/>
+      </div>
+      <div class="form-group" ng-class="{'has-error': error.field == 'last_name'}">
+        <input class="form-control input-lg" type="text" placeholder="Last name" ng-model="profile.last_name"/>
+      </div>
+
+    </form>
+
+  </div>
+
+</div>

app/partials/mobile/video_modal.html

@@ -0,0 +1,21 @@
+<div class="media_modal_wrap video_modal_wrap" my-modal-position>
+
+  <div class="modal-body">
+
+    <div class="video_modal_image_wrap" my-load-video video="video"></div>
+
+    <div class="media_meta_wrap clearfix">
+      <div class="media_modal_actions pull-right">
+        <a href="" class="media_modal_action_link" ng-click="download()">Download</a>
+        <a ng-if="messageID" href="" class="media_modal_action_link" ng-click="forward()">Forward</a>
+        <a ng-if="messageID" href="" class="media_modal_action_link" ng-click="delete()">Delete</a>
+      </div>
+
+      <p class="media_modal_info">
+        <span class="media_modal_author" ng-bind-html="video.fromUser.rFullName"></span>, <span ng-bind="video.date | dateOrTime"></span>
+      </p>
+    </div>
+
+  </div>
+
+</div>

app/partials/mobile/welcome.html

@@ -0,0 +1,56 @@
+<div my-head></div>
+
+<div ng-if="showWelcome">
+
+  <div class="welcome_form">
+    <div class="welcome_logo"></div>
+
+    <h3 class="welcome_header"><strong>Telegram</strong> Web</h3>
+
+    <div class="welcome_text">
+      <p>This is an unofficial web-client for the <strong>Telegram Messenger</strong>.</p>
+      <p>It's still an <strong>alpha-version</strong> and may not be 200% reliable</p>
+    </div>
+    <div class="welcome_btn_wrap">
+      <a href="#/login" class="btn btn-primary btn-block">Start Messaging</a>
+    </div>
+  </div>
+
+  <div class="welcome_footer" my-custom-background="#f8f8f8">
+    <div class="welcome_cards_wrap clearfix">
+
+      <div class="container-fluid">
+        <div class="row">
+          <div class="col-md-4 col-sm-4">
+            <div class="welcome_footer_card_wrap row">
+              <div class="welcome_footer_card welcome_footer_card_messaging"></div>
+              <h4>Fast messaging</h4>
+              <div class="welcome_footer_card_lead">Send messages with rich emoji support right from your desktop or laptop computer</div>
+            </div>
+          </div>
+
+          <div class="col-md-4 col-sm-4">
+            <div class="welcome_footer_card_wrap">
+              <div class="welcome_footer_card welcome_footer_card_filesharing"></div>
+              <h4>Easy file sharing</h4>
+              <div class="welcome_footer_card_lead">Share files of any type using drag-and-drop or the attachment icon</div>
+            </div>
+          </div>
+
+          <div class="col-md-4 col-sm-4">
+            <div class="welcome_footer_card_wrap">
+              <div class="welcome_footer_card welcome_footer_card_powerful"></div>
+              <h4>Powerful tools</h4>
+              <div class="welcome_footer_card_lead">Browse shared media and files by type <br/> and set custom notifications</div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+
+
+</div>

app/vendor/jquery.emojiarea/jquery.emojiarea.js

@@ -172,15 +172,10 @@
 		 This function was added by Igor Zhukov to save recent used emojis.
 		 */
 	util.emojiInserted = function (emojiKey, menu) {
-		try {
+		ConfigStorage.get('emojis_recent', function (curEmojis) {
-			var curEmojisStr = localStorage.getItem('emojis_recent');
+			curEmojis = curEmojis || [];
-		} catch (e) {
-			return false;
-		}
-
-		var curEmojis = curEmojisStr && curEmojisStr.split(',') || [],
-				pos = curEmojis.indexOf(emojiKey);
 
+			var pos = curEmojis.indexOf(emojiKey);
 			if (!pos) {
 				return false;
 			}
@@ -192,11 +187,12 @@
 				curEmojis = curEmojis.slice(42);
 			}
 
-		localStorage.setItem('emojis_recent', curEmojis.join(','));
+			ConfigStorage.set({emojis_recent: curEmojis});
 
 			if (menu) {
 				menu.updateRecentTab(curEmojis);
 			}
+		})
 	};
 	/*! MODIFICATION END */
 
@@ -246,7 +242,7 @@
 		var column = emoji[2];
 		var name = emoji[3];
 		var filename = $.emojiarea.spritesheetPath;
-		var iconSize = menu && Config.Navigator.mobile ? 26 : $.emojiarea.iconSize
+		var iconSize = menu && Config.Mobile ? 26 : $.emojiarea.iconSize
 		var xoffset = -(iconSize * column);
 		var yoffset = -(iconSize * row);
 		var scaledWidth = ($.emojiarea.spritesheetDimens[category][1] * iconSize);
@@ -488,15 +484,16 @@
 		'<td><a class="emoji-menu-tab icon-car"></a></td>' +
 		'<td><a class="emoji-menu-tab icon-grid"></a></td>' +
 		'</tr></table>').appendTo(this.$itemsTailWrap);
-		this.$itemsWrap = $('<div class="emoji-items-wrap nano"></div>').appendTo(this.$itemsTailWrap);
+		this.$itemsWrap = $('<div class="emoji-items-wrap nano mobile_scrollable_wrap"></div>').appendTo(this.$itemsTailWrap);
 		this.$items = $('<div class="emoji-items nano-content">').appendTo(this.$itemsWrap);
-		$('<div class="emoji-menu-tail">').appendTo(this.$menu);
 		/*! MODIFICATION END */
 
 		$body.append(this.$menu);
 
-		/*! MODIFICATION: Following line is added by Igor Zhukov, in order to add scrollbars to EmojiMenu  */
+		/*! MODIFICATION: Following 3 lines were added by Igor Zhukov, in order to add scrollbars to EmojiMenu  */
+		if (!Config.Mobile) {
 			this.$itemsWrap.nanoScroller({preventPageScrolling: true, tabIndex: -1});
+		}
 
 		$body.on('keydown', function(e) {
 			if (e.keyCode === KEY_ESC || e.keyCode === KEY_TAB) {
@@ -562,8 +559,10 @@
 
 		/* MODIFICATION: Following line was modified by Andre Staltz, in order to select a default category. */
 		this.selectCategory(0);
-		/* MODIFICATION: Following line was added by Igor Zhukov, in order to update emoji tab visibility */
+		/* MODIFICATION: Following 3 lines was added by Igor Zhukov, in order to update emoji tab visibility */
-		this.updateRecentTab();
+		ConfigStorage.get('emojis_recent', function (curEmojis) {
+			self.updateRecentTab(curEmojis);
+		});
 	};
 
 	/*! MODIFICATION START
@@ -585,7 +584,9 @@
 		});
 		this.currentCategory = category;
 		this.load(category);
+		if (!Config.Mobile) {
 	    this.$itemsWrap.nanoScroller({ scroll: 'top' });
+		}
 	};
 	/*! MODIFICATION END */
 
@@ -601,10 +602,21 @@
 		var html = [];
 		var options = $.emojiarea.icons;
 		var path = $.emojiarea.path;
+		var self = this;
 		if (path.length && path.charAt(path.length - 1) !== '/') {
 			path += '/';
 		}
 		
+		/*! MODIFICATION: Following function was added by Igor Zhukov, in order to add scrollbars to EmojiMenu */
+		var updateItems = function () {
+			self.$items.html(html.join(''));
+
+			if (!Config.Mobile) {
+				setTimeout(function () {
+					self.$itemsWrap.nanoScroller();
+				}, 100);
+			}
+		}
 
 		if (category > 0) {
 			for (var key in options) {
@@ -613,41 +625,25 @@
 					html.push('<a href="javascript:void(0)" title="' + util.htmlEntities(key) + '">' + EmojiArea.createIcon(options[key], true) + '<span class="label">' + util.htmlEntities(key) + '</span></a>');
 				}
 			}
+			updateItems();
 		} else {
-			try {
+			ConfigStorage.get('emojis_recent', function (curEmojis) {
-				var curEmojis = (localStorage.getItem('emojis_recent') || '').split(','),
+				var key, i;
-						key, i;
 				for (i = 0; i < curEmojis.length; i++) {
 					key = curEmojis[i]
 					if (options[key]) {
 						html.push('<a href="javascript:void(0)" title="' + util.htmlEntities(key) + '">' + EmojiArea.createIcon(options[key], true) + '<span class="label">' + util.htmlEntities(key) + '</span></a>');
 					}
 				}
-			} catch (e) {}
+				updateItems();
+			});
 		}
-
-		this.$items.html(html.join(''));
-
-		/*! MODIFICATION: Following 4 lines were added by Igor Zhukov, in order to add scrollbars to EmojiMenu */
-		var self = this;
-		setTimeout(function () {
-			self.$itemsWrap.nanoScroller();
-		}, 100);
 	};
 
 	/*! MODIFICATION START
 			 This function was added by Igor Zhukov to update recent emojis tab state.
 			 */
 	EmojiMenu.prototype.updateRecentTab = function(curEmojis) {
-		if (curEmojis === undefined) {
-			try {
-				var curEmojisStr = localStorage.getItem('emojis_recent');
-				curEmojis = curEmojisStr && curEmojisStr.split(',') || [];
-			} catch (e) {
-				curEmojis = [];
-			}
-		}
-
 		if (this.hasRecent != (curEmojis.length > 1)) {
 			var tabEl = this.$categoryTabs.find('.emoji-menu-tab').eq(0);
 			if (this.hasRecent) {

app/webogram.appcache

@@ -1,6 +1,6 @@
 CACHE MANIFEST
 
-# 30
+# 33
 
 NETWORK:
 *