New modals, style improvements

app/app.manifest

@@ -1,6 +1,6 @@
 CACHE MANIFEST
 
-# 2
+# 4
 
 NETWORK:
 *

app/css/app.css

@@ -119,8 +119,9 @@ input[type="number"]::-webkit-inner-spin-button {
 
 .btn-primary {
   color: #ffffff;
-  background-color: #598db5;
+  background-color: #5d8db3;
-  border-color: #598db5;
+  border-color: #5d8db3;
+  border-radius: 3px;
 }
 .btn-primary:hover,
 .btn-primary:focus,
@@ -128,16 +129,20 @@ input[type="number"]::-webkit-inner-spin-button {
 .btn-primary.active,
 .open .dropdown-toggle.btn-primary {
   color: #ffffff;
-  background-color: #4f84ac;
+  background-color: #4a80a9;
-  border-color: #4f84ac;
+  border-color: #4a80a9;
 }
 .btn-primary:active,
 .btn-primary.active,
 .open .dropdown-toggle.btn-primary {
-  background: #4c799c;
+  background: #41769e;
   background-image: none;
 }
 
+.btn-link {
+  color: #3a6d99;
+}
+
 .tg_page_head .navbar {
   min-height: 44px;
 }
@@ -384,6 +389,189 @@ input[type="number"]::-webkit-inner-spin-button {
   margin-right: 15px;
 }
 
+.modal-close-button {
+  position: absolute;
+  z-index: 1051;
+  top: 0;
+  right: 0;
+  width: 47px;
+  height: 47px;
+}
+.modal-close-button i {
+  display: inline-block;
+  background: url(../img/icons/IconsetW.png) -15px -320px no-repeat;
+  background-size: 42px 680px;
+  width: 12px;
+  height: 12px;
+  margin: 17px;
+  opacity: 0.8;
+}
+.is_1x .icon-back {
+  background-image: url(../img/icons/IconsetW_1x.png);
+}
+.modal-close-button:hover i {
+  opacity: 1;
+}
+
+.modal-body {
+  padding: 14px 14px;
+}
+
+.modal_simple_form {
+  max-width: 230px;
+  margin: 0 auto;
+  padding: 70px 0 50px;
+}
+.modal_simple_form h4 {
+  font-size: 16px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+.modal_simple_form .form-group {
+  margin-bottom: 13px;
+}
+
+.modal_section_header {
+  font-size: 12px;
+  line-height: 14px;
+  color: #999;
+  background: #f5f5f5;
+  padding: 7px 14px;
+  margin: 0;
+}
+.modal_section_body {
+  padding: 14px 14px;
+}
+.modal_section_body p {
+  margin: 5px 0;
+}
+.modal_section:last-child .modal_section_body {
+  padding-bottom: 8px;
+}
+
+.modal-footer {
+  padding: 0 14px 13px;
+  margin: 0;
+  border-top: 0;
+}
+
+a.tg_checkbox {
+  color: #000;
+  display: block;
+  line-height: 18px;
+  margin: 8px 0;
+}
+a.tg_checkbox:hover {
+  text-decoration: none;
+}
+.tg_checkbox span.icon-checkbox-outer {
+  display: inline-block;
+  background: #c7c7c7;
+  width: 33px;
+  height: 18px;
+  line-height: 18px;
+  vertical-align: middle;
+  padding: 4px;
+  border-radius: 10px;
+  overflow: hidden;
+  margin: 0 9px 0 0;
+
+  -webkit-transition: background ease-in-out 0.1s;
+  transition: background ease-in-out 0.1s;
+}
+.tg_checkbox.tg_checkbox_on span.icon-checkbox-outer {
+  background-color: #5c8db3;
+}
+.tg_checkbox i.icon-checkbox-inner {
+  display: inline-block;
+  background: #fff;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  float: left;
+  margin-left: 0;
+
+  -webkit-transition: margin-left ease 0.1s;
+  transition: margin-left ease 0.1s;
+}
+.tg_checkbox.tg_checkbox_on i.icon-checkbox-inner {
+  margin-left: 15px;
+}
+.tg_checkbox_label {
+  display: inline-block;
+  line-height: 18px;
+  vertical-align: middle;
+}
+/*a.tg_checkbox:hover span.icon-checkbox-outer {
+  -webkit-filter: brightness(95%);
+}*/
+a.tg_checkbox:hover span.icon-checkbox-outer {
+  background: #bdbdbd;
+}
+a.tg_checkbox_on:hover span.icon-checkbox-outer {
+  background: #5785aa;
+}
+a.tg_checkbox:hover i.icon-checkbox-inner {
+  background: #f2f2f2;
+}
+
+a.tg_radio {
+  color: #000;
+  display: block;
+  line-height: 18px;
+  margin: 5px 0;
+}
+a.tg_radio:hover {
+  text-decoration: none;
+}
+.tg_radio i.icon-radio {
+  display: inline-block;
+  background: #FFF;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  vertical-align: middle;
+  border-radius: 10px;
+  border: 1px solid #cccccc;
+  overflow: hidden;
+  margin: 0 9px 0 14px;
+
+  -webkit-transition: border-color ease-in-out 0.1s;
+  transition: border-color ease-in-out 0.1s;
+}
+.tg_radio.tg_radio_on i.icon-radio {
+  border: 6px solid #5c8db3;
+}
+.tg_radio_label {
+  display: inline-block;
+  line-height: 20px;
+  vertical-align: middle;
+}
+/*a.tg_radio:hover i.icon-radio {
+  -webkit-filter: brightness(95%);
+}*/
+a.tg_radio:hover i.icon-radio {
+  background: #f2f2f2;
+  border-color: #ccc;
+}
+a.tg_radio_on:hover i.icon-radio {
+  border-color: #5785aa;
+}
+
+
+
+
+.tg_form_group {
+  padding: 8px 0;
+}
+.tg_form_group:first-child {
+  padding-top: 0;
+}
+.tg_form_group:last-child {
+  padding-bottom: 0;
+}
+
 
 
 .img_fullsize_with_progress_wrap {
@@ -754,6 +942,19 @@ a.im_dialog:hover .im_dialog_date {
   border-radius         : 2px;
 }
 
+.contacts_modal_col .nano > .pane {
+  width: 6px;
+  right: 7px;
+}
+
+.im_dialogs_modal_col .nano > .pane {
+  width: 6px;
+  right: 2px;
+}
+.im_dialogs_modal_col .im_dialogs_scrollable_wrap {
+  padding: 0 12px 0 12px;
+}
+
 .im_history_col .nano > .pane {
   top: 10px;
   right: 8px;
@@ -1552,6 +1753,7 @@ textarea.im_message_field {
   margin: 0;
   padding: 0;
 
+  top: 0;
   right: 0;
 }
 
@@ -1658,83 +1860,41 @@ img.img_fullsize {
 }
 
 
-.user_modal_wrap .modal-body {
+
-  padding: 23px 25px 30px;
+.user_modal_photo_profile_wrap {
-}
+  padding: 13px 12px;
-.settings_profile_photo_wrap {
-  width: 120px;
-  margin-right: 22px;
   margin-bottom: 15px;
 }
-.settings_profile_photo {
-  position: relative;
-  overflow: hidden;
-}
-.settings_profile_photo_change_wrap {
-  background: rgba(0,0,0,0.6);
-  padding: 2px 5px;
-  position: absolute;
-  opacity: 0;
-  bottom: -30px;
-
-  -webkit-transition: all ease-in-out 0.2s;
-  transition: all ease-in-out 0.2s;
-  width: 120px;
-}
-.settings_profile_photo:hover .settings_profile_photo_change_wrap {
-  bottom: 0;
-  opacity: 1;
-}
-
-.settings_profile_photo_update_link,
-.settings_profile_photo_delete_link,
-.settings_profile_photo_loading {
-  display: block;
-  color: rgba(255,255,255,0.8);
-  text-align: center;
-  padding: 2px 0;
-}
-.settings_profile_photo_update_link:hover,
-.settings_profile_photo_delete_link:hover {
-  color: #FFF;
-  text-decoration: none;
-}
-.settings_profile_photo_update_link {
-  position: relative;
-  overflow: hidden;
-}
-
-
 .user_modal_image_wrap {
-  width: 120px;
+  width: 100px;
   margin-right: 22px;
+  display: block;
+  overflow: hidden;
+  border-radius: 3px;
 }
 .user_modal_image {
-  width: 120px;
+  width: 100px;
-  height: 120px;
+  height: 100px;
 }
 .user_modal_header {
   font-weight: bold;
-  margin: 0 0 5px;
+  margin: 0 0 10px;
 }
 .user_modal_status {
   color: #999;
+  margin-bottom: 24px;
 }
 
 .user_modal_actions_wrap {
   margin-top: 8px;
 }
-.user_modal_send_btn {
+.user_modal_main_btn {
   border: 0;
-  background: #4E9CD8;
   font-size: 12px;
   padding-left: 16px;
   padding-right: 16px;
   float: left;
 }
-.user_modal_send_btn:hover {
-  background: #539BD1;
-}
 .user_modal_other_btn {
   margin-left: 10px;
   float: left;
@@ -1743,6 +1903,9 @@ img.img_fullsize {
   border: 0;
   font-size: 12px;
 }
+.user_modal_other_btn .dropdown-menu {
+  margin-left: -3px;
+}
 
 .user_modal_settings_wrap {
   margin-top: 25px;
@@ -1758,70 +1921,36 @@ img.img_fullsize {
 .chat_modal_window .modal-dialog {
   max-width: 506px;
 }
-.chat_modal_wrap .modal-body {
-  padding: 23px 25px 15px;
-}
-.chat_modal_photo_wrap {
-  width: 120px;
-  margin-right: 22px;
-}
-.chat_modal_photo {
-  position: relative;
-  overflow: hidden;
-}
-.chat_modal_photo_change_wrap {
-  background: rgba(0,0,0,0.6);
-  padding: 2px 5px;
-  position: absolute;
-  opacity: 0;
-  bottom: -30px;
 
-  -webkit-transition: all ease-in-out 0.2s;
-  transition: all ease-in-out 0.2s;
-  width: 120px;
-}
-.chat_modal_photo:hover .chat_modal_photo_change_wrap {
-  bottom: 0;
-  opacity: 1;
-}
-
-.chat_modal_photo_update_link,
-.chat_modal_photo_delete_link,
-.chat_modal_photo_loading {
-  display: block;
-  color: rgba(255,255,255,0.8);
-  text-align: center;
-  padding: 2px 0;
-}
-.chat_modal_photo_update_link:hover,
-.chat_modal_photo_delete_link:hover {
-  color: #FFF;
-  text-decoration: none;
-}
-.chat_modal_photo_update_link {
-  position: relative;
-  overflow: hidden;
-}
 .chat_modal_header {
-  margin: 0 0 5px;
+  font-weight: bold;
+  margin: 0 0 10px;
 }
 .chat_modal_members_count {
   color: #999;
+  margin-bottom: 24px;
 }
 
 .chat_modal_actions_wrap {
   margin-top: 8px;
 }
-.chat_modal_send_btn {
+.chat_modal_main_btn {
   border: 0;
-  background: #4E9CD8;
   font-size: 12px;
   padding-left: 16px;
   padding-right: 16px;
   float: left;
+  position: relative;
+  overflow: hidden;
 }
-.chat_modal_send_btn:hover {
+.chat_modal_invite_btn {
-  background: #539BD1;
+  border: 0;
+  font-size: 12px;
+  padding-left: 16px;
+  padding-right: 16px;
+  float: left;
+  position: relative;
+  margin-right: 10px;
 }
 .chat_modal_delete_btn {
   border: 0;
@@ -1838,23 +1967,39 @@ img.img_fullsize {
   border: 0;
   font-size: 12px;
 }
+.chat_modal_other_btn .dropdown-menu {
+  margin-left: -3px;
+}
+
+.chat_modal_photo_update_link {
+  display: block;
+  padding: 5px 14px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.428571429;
+  color: #333333;
+  white-space: nowrap;
+  font-size: 13px;
+  overflow: hidden;
+  position: relative;
+}
+.chat_modal_photo_update_link:hover {
+  text-decoration: none;
+  color: #262626;
+  background-color: #f5f5f5;
+}
 
 .chat_modal_settings_wrap {
   margin-top: 10px;
 }
-.chat_modal_notifications {
-  margin-top: 25px;
-  font-weight: bold;
-}
-
-.chat_modal_members_header {
-  margin: 20px 0 6px;
-}
 
 .chat_modal_participant_wrap {
-  padding: 8px 7px;
+  padding: 8px 0;
   border-top: 1px solid #F0F0F0;
 }
+.chat_modal_participant_wrap:first-child {
+  border-top: 0;
+}
 .chat_modal_participant_kick {
   padding: 11px 0;
   display: block;
@@ -1871,12 +2016,17 @@ img.img_fullsize {
 .chat_modal_participant_status {
   color: #999;
 }
-.chat_modal_participant_photo {
+a.chat_modal_participant_photo {
   width: 40px;
   height: 40px;
   margin-right: 10px;
+  border-radius: 2px;
   overflow: hidden;
 }
+img.chat_modal_participant_photo {
+  width: 40px;
+  height: 40px;
+}
 .chat_modal_members_forbidden {
   color: #999;
 }
@@ -2086,6 +2236,18 @@ img.img_fullsize {
 }
 
 
+.confirm_modal_window .modal-dialog {
+  max-width: 400px;
+}
+.confirm_modal_description {
+  text-align: center;
+  padding: 20px 20px;
+  font-size: 14px;
+  line-height: 160%;
+  margin-top: 40px;
+}
+
+
 
 .photo_modal_error {
   color: #999;
@@ -2119,8 +2281,22 @@ img.img_fullsize {
 
 
 .settings_modal_window .modal-dialog {
-  max-width: 502px;
+  max-width: 482px;
 }
+
+.settings_modal_wrap .im_attach_input {
+  z-index: 1200;
+}
+.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;
 }
@@ -2190,9 +2366,6 @@ img.img_fullsize {
 .contacts_modal_window .modal-dialog {
   max-width: 506px;
 }
-.contacts_modal_wrap .modal-body {
-  padding: 23px 25px 15px;
-}
 
 .contacts_modal_search {
   padding: 0 0 14px;
@@ -2325,15 +2498,6 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
 }
 
 
-.contacts_modal_panel {
-  padding-top: 10px;
-}
-
-.contacts_modal_actions {
-  padding-top: 10px;
-}
-
-
 
 /* Messages edit panel */
 .im_edit_panel_wrap {
@@ -2647,7 +2811,7 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
   max-width: 506px;
 }
 .peer_select_modal_wrap .modal-body {
-  padding: 10px 10px 15px;
+  padding: 0 2px 14px;
 }
 
 
@@ -2729,10 +2893,7 @@ ce671b orange
 
 /* Import contact modal */
 .import_contact_modal_window .modal-dialog {
-  max-width: 380px;
+  max-width: 480px;
-}
-.import_modal_field_wrap {
-  margin-bottom: 10px;
 }
 
 .modal-content-animated {

app/index.html

@@ -22,9 +22,24 @@
 
   <script type="text/javascript">
   (function () {
+
+    window.safeConfirm = function (params, callback) {
+      if (typeof params === 'string') {
+        params = {message: params};
+      }
+      var result = false
+      try {
+        result = confirm(params.message);
+      } catch (e) {
+        result = true;
+      }
+      setTimeout(function () {callback(result)}, 10);
+    };
+
     if (!window.applicationCache || !window.addEventListener) {
       return;
     }
+
     var appCache = window.applicationCache,
         declined = false,
         updateTimeout = false,
@@ -41,10 +56,14 @@
         attach = function () {
           appCache.addEventListener('updateready', function(e) {
             if (appCache.status == appCache.UPDATEREADY) {
-              if (!declined && confirm('A new version of Webogram is available. Load it?')) {
+              if (!declined) {
-                window.location.reload();
+                safeConfirm({type: 'WEBOGRAM_UPDATED_RELOAD', message: 'A new version of Webogram is available. Load it?'}, function (result) {
-              } else {
+                  if (result) {
-                declined = true;
+                    window.location.reload();
+                  } else {
+                    declined = true;
+                  }
+                });
                 scheduleUpdate();
               }
             }

app/js/controllers.js

@@ -11,7 +11,7 @@
 
 angular.module('myApp.controllers', [])
 
-  .controller('AppWelcomeController', function($scope, $location, MtpApiManager) {
+  .controller('AppWelcomeController', function($scope, $location, MtpApiManager, ErrorService) {
     MtpApiManager.getUserID().then(function (id) {
       if (id) {
         $location.url('/im');
@@ -158,7 +158,7 @@ angular.module('myApp.controllers', [])
     };
   })
 
-  .controller('AppIMController', function ($scope, $location, $routeParams, $modal, $rootScope, $modalStack, MtpApiManager, AppUsersManager, ContactsSelectService) {
+  .controller('AppIMController', function ($scope, $location, $routeParams, $modal, $rootScope, $modalStack, MtpApiManager, AppUsersManager, ContactsSelectService, ErrorService) {
 
     $scope.$on('$routeUpdate', updateCurDialog);
 
@@ -177,7 +177,6 @@ angular.module('myApp.controllers', [])
       $modal.open({
         templateUrl: 'partials/settings_modal.html',
         controller: 'SettingsModalController',
-        scope: $rootScope.$new(),
         windowClass: 'settings_modal_window'
       });
     }
@@ -212,6 +211,15 @@ angular.module('myApp.controllers', [])
       $rootScope.$broadcast('history_focus', {peerString: peerString});
     };
 
+    $scope.logOut = function () {
+      ErrorService.confirm({type: 'LOGOUT'}).then(function () {
+        MtpApiManager.logOut().then(function () {
+          location.hash = '/login';
+          location.reload();
+        });
+      })
+    }
+
     updateCurDialog();
 
     function updateCurDialog() {
@@ -363,7 +371,7 @@ angular.module('myApp.controllers', [])
 
   })
 
-  .controller('AppImHistoryController', function ($scope, $location, $timeout, $rootScope, MtpApiManager, AppUsersManager, AppChatsManager, AppMessagesManager, AppPeersManager, ApiUpdatesManager, PeersSelectService, IdleManager, StatusManager) {
+  .controller('AppImHistoryController', function ($scope, $location, $timeout, $rootScope, MtpApiManager, AppUsersManager, AppChatsManager, AppMessagesManager, AppPeersManager, ApiUpdatesManager, PeersSelectService, IdleManager, StatusManager, ErrorService) {
 
     $scope.$watch('curDialog.peer', applyDialogSelect);
 
@@ -462,8 +470,9 @@ angular.module('myApp.controllers', [])
         if (prevMessage &&
             curMessage.from_id == prevMessage.from_id &&
             curMessage.date < prevMessage.date + 30 &&
+            !prevMessage.fwd_from_id &&
             !curMessage.fwd_from_id &&
-            curMessage.message && curMessage.message.length < 30) {
+            curMessage.message && curMessage.message.length < 60) {
 
           curMessage.grouped = true;
         } else if (prevMessage || !i) {
@@ -589,12 +598,11 @@ angular.module('myApp.controllers', [])
     }
 
     function selectedFlush () {
-      if (safeConfirm('Are you sure? This can not be undone!') !== true) {
+      ErrorService.confirm({type: 'HISTORY_FLUSH'}).then(function () {
-        return false;
+        AppMessagesManager.flushHistory($scope.curDialog.inputPeer).then(function () {
-      }
+          selectedCancel();
-      AppMessagesManager.flushHistory($scope.curDialog.inputPeer).then(function () {
+        });
-        selectedCancel();
+      })
-      });
     };
 
     function selectedDelete () {
@@ -864,7 +872,7 @@ angular.module('myApp.controllers', [])
     $scope.video = AppVideoManager.wrapForFull($scope.videoID);
   })
 
-  .controller('UserModalController', function ($scope, $location, $rootScope, $modal, AppUsersManager, NotificationsManager, AppMessagesManager, AppPeersManager, PeersSelectService) {
+  .controller('UserModalController', function ($scope, $location, $rootScope, $modal, AppUsersManager, NotificationsManager, AppMessagesManager, AppPeersManager, PeersSelectService, ErrorService) {
 
     var peerString = AppUsersManager.getUserString($scope.userID);
 
@@ -897,11 +905,10 @@ angular.module('myApp.controllers', [])
     };
 
     $scope.flushHistory = function () {
-      if (safeConfirm('Are you sure? This can not be undone!') !== true) {
+      ErrorService.confirm({type: 'HISTORY_FLUSH'}).then(function () {
-        return false;
+        AppMessagesManager.flushHistory(AppPeersManager.getInputPeerByID($scope.userID)).then(function () {
-      }
+          $scope.goToHistory();
-      AppMessagesManager.flushHistory(AppPeersManager.getInputPeerByID($scope.userID)).then(function () {
+        });
-        $scope.goToHistory();
       });
     };
 
@@ -1059,13 +1066,11 @@ angular.module('myApp.controllers', [])
 
 
     $scope.flushHistory = function () {
-      if (safeConfirm('Are you sure? This can not be undone!') !== true) {
+      ErrorService.confirm({type: 'HISTORY_FLUSH'}).then(function () {
-        return;
+        AppMessagesManager.flushHistory(AppPeersManager.getInputPeerByID(-$scope.chatID)).then(function () {
-      }
+          $rootScope.$broadcast('history_focus', {peerString: $scope.chatFull.peerString});
-      AppMessagesManager.flushHistory(AppPeersManager.getInputPeerByID(-$scope.chatID)).then(function () {
+        });
-        $rootScope.$broadcast('history_focus', {peerString: $scope.chatFull.peerString});
       });
-
     };
 
 
@@ -1120,24 +1125,19 @@ angular.module('myApp.controllers', [])
 
   })
 
-  .controller('SettingsModalController', function ($rootScope, $scope, $timeout, AppUsersManager, AppChatsManager, MtpApiManager, AppConfigManager, NotificationsManager, MtpApiFileManager, ApiUpdatesManager) {
+  .controller('SettingsModalController', function ($rootScope, $scope, $timeout, $modal, AppUsersManager, AppChatsManager, MtpApiManager, AppConfigManager, NotificationsManager, MtpApiFileManager, ApiUpdatesManager, ErrorService) {
 
     $scope.profile = {};
+    $scope.photo = {};
 
     MtpApiManager.getUserID().then(function (id) {
-      var user = AppUsersManager.getUser(id);
+      $scope.profile = AppUsersManager.getUser(id);
-      $scope.profile.first_name = user.first_name;
+      $scope.photo = AppUsersManager.getUserPhoto(id, 'User');
-      $scope.profile.last_name = user.last_name;
-      $scope.profile.photo = AppUsersManager.getUserPhoto(id, 'User');
-
-      $scope.phone = user.phone;
     });
 
     $scope.notify = {};
     $scope.send = {};
 
-    $scope.photo = {};
-
     $scope.$watch('photo.file', onPhotoSelected);
 
     function onPhotoSelected (photo) {
@@ -1161,11 +1161,11 @@ angular.module('myApp.controllers', [])
               photo: AppUsersManager.getUser(id).photo,
               previous: true
             });
-            $scope.profile.photo = AppUsersManager.getUserPhoto(id, 'User');
+            $scope.photo = AppUsersManager.getUserPhoto(id, 'User');
           });
         });
       })['finally'](function () {
-        $scope.photo.updating = false;
+        delete $scope.updating;
       });
     };
 
@@ -1183,10 +1183,24 @@ angular.module('myApp.controllers', [])
             photo: updateResult,
             previous: true
           });
-          $scope.profile.photo = AppUsersManager.getUserPhoto(id, 'User');
+          $scope.photo = AppUsersManager.getUserPhoto(id, 'User');
         });
       })['finally'](function () {
-        $scope.photo.updating = false;
+        delete $scope.photo.updating;
+      });
+    };
+
+    $scope.editProfile = function () {
+      $modal.open({
+        templateUrl: 'partials/profile_edit_modal.html',
+        controller: 'ProfileEditModalController',
+        windowClass: 'profile_edit_modal_window'
+      });
+    };
+
+    $scope.terminateSessions = function () {
+      ErrorService.confirm({type: 'TERMINATE_SESSIONS'}).then(function () {
+        MtpApiManager.invokeApi('auth.resetAuthorizations', {});
       });
     };
 
@@ -1230,18 +1244,27 @@ angular.module('myApp.controllers', [])
         $rootScope.$broadcast('settings_changed');
       });
     });
+  })
 
+  .controller('ProfileEditModalController', function ($rootScope, $scope, $timeout, $modal, $modalInstance, AppUsersManager, AppChatsManager, MtpApiManager, AppConfigManager, NotificationsManager, MtpApiFileManager, ApiUpdatesManager) {
 
+    $scope.profile = {};
     $scope.error = {};
-    $scope.save = function (profileForm) {
+
+    MtpApiManager.getUserID().then(function (id) {
+      $scope.profile = AppUsersManager.getUser(id);
+    });
+
+    $scope.updateProfile = function () {
+      $scope.profile.updating = true;
+
       MtpApiManager.invokeApi('account.updateProfile', {
         first_name: $scope.profile.first_name || '',
         last_name: $scope.profile.last_name || ''
       }).then(function (user) {
         $scope.error = {};
-        // console.log($scope.profileForm);
-        profileForm.$setPristine();
         AppUsersManager.saveApiUser(user);
+        $modalInstance.close();
       }, function (error) {
         switch (error.type) {
           case 'FIRSTNAME_INVALID':
@@ -1256,16 +1279,11 @@ angular.module('myApp.controllers', [])
 
           case 'NAME_NOT_MODIFIED':
             error.handled = true;
-            $scope.error = {};
+            $modalInstance.close();
             break;
         }
-      });
+      })['finally'](function () {
-    }
+        delete $scope.profile.updating;
-
-    $scope.logOut = function () {
-      MtpApiManager.logOut().then(function () {
-        location.hash = '/login';
-        location.reload();
       });
     }
   })
@@ -1365,6 +1383,7 @@ angular.module('myApp.controllers', [])
       if (!$scope.group.name) {
         return;
       }
+      $scope.group.creating = true;
       var inputUsers = [];
       angular.forEach($scope.userIDs, function(userID) {
         inputUsers.push({_: 'inputUserContact', user_id: userID});
@@ -1386,13 +1405,11 @@ angular.module('myApp.controllers', [])
 
         var peerString = AppChatsManager.getChatString(createdResult.message.to_id.chat_id);
         $rootScope.$broadcast('history_focus', {peerString: peerString});
+      })['finally'](function () {
+        delete $scope.group.creating;
       });
     };
 
-    $scope.back = function () {
-      $modalInstance.dismiss();
-    };
-
   })
 
   .controller('ChatEditModalController', function ($scope, $modalInstance, $rootScope, MtpApiManager, AppUsersManager, AppChatsManager, ApiUpdatesManager) {
@@ -1408,6 +1425,8 @@ angular.module('myApp.controllers', [])
         return $modalInstance.close();
       }
 
+      $scope.group.updating = true;
+
       return MtpApiManager.invokeApi('messages.editChatTitle', {
         chat_id: $scope.chatID,
         title: $scope.group.name
@@ -1425,6 +1444,8 @@ angular.module('myApp.controllers', [])
 
         var peerString = AppChatsManager.getChatString($scope.chatID);
         $rootScope.$broadcast('history_focus', {peerString: peerString});
+      })['finally'](function () {
+        delete $scope.group.updating;
       });
     };
   })

app/js/lib/mtproto.js

@@ -1759,7 +1759,7 @@ factory('MtpNetworkerFactory', function (MtpDcConfigurator, MtpMessageIdGenerato
     var serializer = new TLSerialization(options);
 
     if (!this.connectionInited) {
-      serializer.storeInt(0xdda60d3c, 'invokeWithLayer12');
+      serializer.storeInt(0x2b9b08fa, 'invokeWithLayer14');
       serializer.storeInt(0x69796de9, 'initConnection');
       serializer.storeInt(2496, 'api_id');
       serializer.storeString(navigator.userAgent || 'Unknown UserAgent', 'device_model');

app/js/services.js

@@ -1153,7 +1153,7 @@ angular.module('myApp.services', [])
     if (!options.isMedia) {
       attachType = 'document';
       fileName = 'document.' + file.type.split('/')[1];
-    } else if (['image/jpeg', 'image/gif', 'image/png', 'image/bmp'].indexOf(file.type) >= 0) {
+    } else if (['image/jpeg', 'image/png', 'image/bmp'].indexOf(file.type) >= 0) {
       attachType = 'photo';
       fileName = 'photo.' + file.type.split('/')[1];
     } else if (file.type.substr(0, 6) == 'video/') {
@@ -3071,7 +3071,7 @@ angular.module('myApp.services', [])
 })
 
 
-.service('ErrorService', function ($rootScope, $modal) {
+.service('ErrorService', function ($rootScope, $modal, $window) {
 
   var shownBoxes = 0;
 
@@ -3106,9 +3106,35 @@ angular.module('myApp.services', [])
     });
   };
 
+  function confirm (params, options) {
+    options = options || {};
+    var scope = $rootScope.$new();
+    angular.extend(scope, params);
+
+    var modal = $modal.open({
+      templateUrl: 'partials/confirm_modal.html',
+      scope: scope,
+      windowClass: options.windowClass || 'confirm_modal_window'
+    });
+
+    return modal.result;
+  };
+
+  $window.safeConfirm = function (params, callback) {
+    if (typeof params === 'string') {
+      params = {message: params};
+    }
+    confirm(params).then(function (result) {
+      callback(result || true)
+    }, function () {
+      callback(false)
+    });
+  };
+
   return {
     show: show,
-    alert: alert
+    alert: alert,
+    confirm: confirm
   }
 })
 

app/js/util.js

@@ -77,11 +77,3 @@ function safeReplaceObject (wasObject, newObject) {
   }
 }
 
-function safeConfirm (message) {
-  try {
-    return confirm(message);
-  } catch (e) {
-    // Sorry, temp solution until UI boxes are done
-    return true;
-  }
-}

app/partials/chat_create_modal.html

@@ -1,30 +1,24 @@
 <div class="contacts_modal_wrap" my-modal-position>
 
-  <div class="modal-header">
+  <a class="modal-close-button" ng-click="$dismiss()"><i></i></a>
-    <a class="modal-close-link" ng-click="$close()">Close</a>
-    <h4 class="modal-title">Create Group</h4>
-  </div>
 
   <div class="modal-body">
 
-    <form ng-submit="createGroup()">
+    <form class="modal_simple_form" ng-submit="createGroup()">
 
-      <div class="contacts_modal_group_title">
+      <h4>Create Group</h4>
-        <input class="form-control" my-focused type="text" placeholder="Group name" ng-model="group.name"/>
-      </div>
-
-      <div class="contacts_modal_panel clearfix">
-
-        <div class="contacts_modal_actions pull-right">
-          <button class="btn btn-default" ng-click="$dismiss()"> Cancel </button>
-
-          <button class="btn btn-success" type="submit"> Create </button>
-        </div>
 
+      <div class="form-group">
+        <input class="form-control input-sm" my-focused type="text" placeholder="Group name" ng-model="group.name"/>
       </div>
 
     </form>
 
   </div>
 
+  <div class="modal-footer">
+    <a class="btn btn-link" ng-click="$dismiss()">Cancel</a>
+    <button class="btn btn-primary" ng-class="{disabled: group.creating}" ng-click="createGroup()" ng-bind="group.creating ? 'Creating...' : 'Create Group'" ng-disabled="group.creating"></button>
+  </div>
+
 </div>

app/partials/chat_edit_modal.html

@@ -1,30 +1,24 @@
 <div class="contacts_modal_wrap" my-modal-position>
 
-  <div class="modal-header">
+  <a class="modal-close-button" ng-click="$dismiss()"><i></i></a>
-    <a class="modal-close-link" ng-click="$close()">Close</a>
-    <h4 class="modal-title">Edit Group Title</h4>
-  </div>
 
   <div class="modal-body">
 
-    <form ng-submit="updateGroup()">
+    <form class="modal_simple_form" ng-submit="updateGroup()">
 
-      <div class="contacts_modal_group_title">
+      <h4>Edit Group</h4>
-        <input class="form-control" my-focused type="text" placeholder="Group name" ng-model="group.name"/>
-      </div>
-
-      <div class="contacts_modal_panel clearfix">
-
-        <div class="contacts_modal_actions pull-right">
-          <button class="btn btn-default" ng-click="$dismiss()"> Cancel </button>
-
-          <button class="btn btn-success" type="submit"> Save </button>
-        </div>
 
+      <div class="form-group">
+        <input class="form-control input-sm" my-focused type="text" placeholder="Group name" ng-model="group.name"/>
       </div>
 
     </form>
 
   </div>
 
+  <div class="modal-footer">
+    <a class="btn btn-link" ng-click="$dismiss()">Cancel</a>
+    <button class="btn btn-primary" ng-class="{disabled: group.updating}" ng-click="updateGroup()" ng-bind="group.updating ? 'Saving...' : 'Save'" ng-disabled="group.updating"></button>
+  </div>
+
 </div>

app/partials/chat_modal.html

@@ -1,103 +1,110 @@
 <div class="chat_modal_wrap" my-modal-position>
 
-  <div class="modal-header">
+  <a class="modal-close-button" ng-click="$close()"><i></i></a>
-    <a class="modal-close-link" ng-click="$close()">Close</a>
-    <h4 class="modal-title">Group Info</h4>
-  </div>
 
   <div class="modal-body">
 
-    <div class="chat_modal_photo_wrap pull-left">
+    <div class="user_modal_photo_profile_wrap">
 
-      <div class="chat_modal_photo">
+      <div class="user_modal_image_wrap pull-left">
         <img
           class="user_modal_image"
           my-load-thumb
           thumb="chatFull.thumb"
         />
-        <div class="chat_modal_photo_change_wrap" ng-if="chatFull.chat._ != 'chatForbidden' &amp;&amp; !chatFull.chat.left">
+      </div>
-          <div ng-if="photo.updating" class="chat_modal_photo_loading">Updating<span my-loading-dots></span></div>
+
-          <div ng-if="!photo.updating">
+      <div class="chat_modal_info_wrap clearfix">
-            <div class="chat_modal_photo_update_link">
+        <h4 class="chat_modal_header" ng-bind-html="chatFull.chat.rTitle"></h4>
+        <p class="chat_modal_members_count" ng-if="chatFull.chat.participants_count > 0">
+          <ng-pluralize count="chatFull.chat.participants_count"
+                           when="{'0': 'No members', 'one': '1 member', 'other': '{} members'}">
+          </ng-pluralize>
+        </p>
+
+        <div class="chat_modal_settings_wrap">
+
+          <div class="chat_modal_actions_wrap clearfix">
+
+            <button ng-if="!chatFull.chat.left &amp;&amp; chatFull.participants.participants.length" class="btn btn-primary chat_modal_invite_btn" ng-click="inviteToGroup()">Add member</button>
+            <button ng-if="chatFull.chat._ != 'chatForbidden' &amp;&amp; chatFull.chat.left" class="btn btn-primary chat_modal_main_btn" ng-click="returnToGroup()">Return to group</button>
+            <button ng-if="chatFull.chat._ == 'chatForbidden'" class="btn btn-danger chat_modal_delete_btn" ng-click="flushHistory()">Delete chat</button>
+
+            <span ng-if="chatFull.chat._ != 'chatForbidden' &amp;&amp; !chatFull.chat.left &amp;&amp; !photo.updating" class="btn btn-primary chat_modal_main_btn" >
               <input my-file-upload  type="file" multiple="false" class="im_attach_input" size="120" multiple="false" accept="image/x-png, image/png, image/gif, image/jpeg" />
               Update photo
+            </span>
+            <span ng-if="photo.updating" class="btn btn-primary chat_modal_main_btn disabled" disabled>
+              Updating<span my-loading-dots></span>
+            </span>
+
+
+            <div class="dropdown chat_modal_other_btn" ng-if="chatFull.chat._ != 'chatForbidden' &amp;&amp; !chatFull.chat.left">
+              <button class="btn btn-link dropdown-toggle">More<i class="icon icon-caret"></i></button>
+              <ul class="dropdown-menu">
+                <li ng-if="chatFull.thumb.location">
+                  <a ng-click="deletePhoto()">Delete photo</a>
+                </li>
+                <li>
+                  <a ng-click="editTitle()">Edit group</a>
+                </li>
+                <li>
+                  <a ng-click="leaveGroup()">Leave group</a>
+                </li>
+                <li>
+                  <a ng-click="flushHistory()">Delete chat</a>
+                </li>
+              </ul>
             </div>
-            <a ng-if="chatFull.thumb.location" href="" ng-click="deletePhoto()" class="chat_modal_photo_delete_link">Delete photo</a>
+
           </div>
         </div>
-      </div>
 
+      </div>
     </div>
 
+    <div class="modal_section">
+      <h3 class="modal_section_header">Settings</h3>
+      <div class="modal_section_body">
 
-    <div class="chat_modal_info_wrap clearfix">
+        <div class="tg_form_group">
-      <h4 class="chat_modal_header" ng-bind-html="chatFull.chat.rTitle"></h4>
+          <a class="tg_checkbox" ng-click="settings.notifications = !settings.notifications" ng-class="settings.notifications ? 'tg_checkbox_on' : ''">
-      <p class="chat_modal_members_count" ng-if="chatFull.chat.participants_count > 0">
+            <span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
-        <ng-pluralize count="chatFull.chat.participants_count"
+            <span class="tg_checkbox_label">Notifications</span>
-                         when="{'0': 'No members', 'one': '1 member', 'other': '{} members'}">
-        </ng-pluralize>
-      </p>
-
-      <div class="chat_modal_settings_wrap">
-
-        <div class="chat_modal_actions_wrap clearfix">
-
-          <button ng-if="!chatFull.chat.left &amp;&amp; chatFull.participants.participants.length" class="btn btn-primary chat_modal_send_btn" ng-click="inviteToGroup()">Add member</button>
-          <button ng-if="chatFull.chat._ != 'chatForbidden' &amp;&amp; chatFull.chat.left" class="btn btn-primary chat_modal_send_btn" ng-click="returnToGroup()">Return to group</button>
-          <button ng-if="chatFull.chat._ == 'chatForbidden'" class="btn btn-danger chat_modal_delete_btn" ng-click="flushHistory()">Delete chat</button>
-
-          <div class="dropdown chat_modal_other_btn" ng-if="chatFull.chat._ != 'chatForbidden' &amp;&amp; !chatFull.chat.left">
-            <button class="btn btn-link dropdown-toggle">More<i class="icon icon-caret"></i></button>
-            <ul class="dropdown-menu">
-              <li>
-                <a ng-click="editTitle()">Edit group</a>
-              </li>
-              <li>
-                <a ng-click="leaveGroup()">Leave group</a>
-              </li>
-              <li>
-                <a ng-click="flushHistory()">Delete chat</a>
-              </li>
-            </ul>
-          </div>
-
-        </div>
-
-        <div class="chat_modal_notifications">
-          Notifications:
-          <a ng-click="settings.notifications = !settings.notifications">
-            {{settings.notifications ? 'ON' : 'OFF'}}
           </a>
         </div>
-
       </div>
     </div>
 
-    <h5 class="chat_modal_members_header">
+    <div class="modal_section">
-      Members
+      <h3 class="modal_section_header">Members</h3>
-    </h5>
+      <div class="modal_section_body">
-    <div class="chat_modal_members_list">
+
+        <div class="chat_modal_members_list">
+
+          <div class="chat_modal_participant_wrap clearfix" ng-repeat="participant in chatFull.participants.participants | orderBy:'-user.sortStatus'">
+            <a ng-if="participant.canKick" ng-click="kickFromGroup(participant.user_id)"  class="chat_modal_participant_kick pull-right">Kick</a>
+            <a ng-click="openUser(participant.user_id)" class="chat_modal_participant_photo pull-left">
+              <img
+                class="chat_modal_participant_photo"
+                my-load-thumb
+                thumb="participant.userPhoto"
+              />
+              <i class="icon status_online" ng-show="participant.user.status._ == 'userStatusOnline'"></i>
+            </a>
+            <div class="chat_modal_participant_name">
+              <a ng-click="openUser(participant.user.id)" ng-bind-html="participant.user.rFullName"></a>
+            </div>
+            <div class="chat_modal_participant_status">{{participant.user | userStatus}}</div>
+          </div>
 
-      <div class="chat_modal_participant_wrap clearfix" ng-repeat="participant in chatFull.participants.participants | orderBy:'-user.sortStatus'">
-        <a ng-if="participant.canKick" ng-click="kickFromGroup(participant.user_id)"  class="chat_modal_participant_kick pull-right">Kick</a>
-        <a ng-click="openUser(participant.user_id)" class="chat_modal_participant_photo pull-left">
-          <img
-            class="chat_modal_participant_photo"
-            my-load-thumb
-            thumb="participant.userPhoto"
-          />
-          <i class="icon status_online" ng-show="participant.user.status._ == 'userStatusOnline'"></i>
-        </a>
-        <div class="chat_modal_participant_name">
-          <a ng-click="openUser(participant.user.id)" ng-bind-html="participant.user.rFullName"></a>
         </div>
-        <div class="chat_modal_participant_status">{{participant.user | userStatus}}</div>
+
+        <div class="chat_modal_members_forbidden" ng-if="chatFull.chat._ == 'chatForbidden' || chatFull.chat.left">
+          Group members list is unavailable.
+        </div>
+
       </div>
-
-    </div>
-
-    <div class="chat_modal_members_forbidden" ng-if="chatFull.chat._ == 'chatForbidden' || chatFull.chat.left">
-      Group members list is unavailable.
     </div>
 
   </div>

app/partials/confirm_modal.html

@@ -0,0 +1,28 @@
+<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 is available. Load 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-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()">
+      <span ng-switch-when="LOGOUT">Log Out</span>
+      <span ng-switch-when="HISTORY_FLUSH">Delete Chat</span>
+      <span ng-switch-default>OK</span>
+    </button>
+  </div>
+
+</div>

app/partials/contacts_modal.html

@@ -1,11 +1,5 @@
 <div class="contacts_modal_wrap" my-modal-position>
 
-  <div class="modal-header">
-    <a class="modal-close-link" ng-click="$dismiss()">Close</a>
-    <a ng-if="!multiSelect" class="pull-right modal-head-link" ng-click="importContact()">Add new contact</a>
-    <h4 class="modal-title">Contacts</h4>
-  </div>
-
   <div class="modal-body">
 
     <div class="contacts_modal_search">
@@ -48,15 +42,16 @@
 
     </div>
 
+  </div>
 
-    <div ng-if="multiSelect" class="contacts_modal_panel">
+  <div class="modal-footer" ng-switch="multiSelect">
-
+    <button ng-switch-when="true" class="btn btn-success btn-block" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit">
-      <button class="btn btn-success btn-block" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit">
+      Next »
-        Next »
+    </button>
-      </button>
+    <div ng-switch-default>
-
+      <a class="btn btn-link pull-left" ng-click="importContact()">Add contact</a>
+      <button type="button" class="btn btn-primary" ng-click="$dismiss()">Done</button>
     </div>
-
   </div>
 
 </div>

app/partials/edit_contact_modal.html

@@ -1,40 +1,30 @@
 <div class="import_modal_wrap" my-modal-position>
 
-  <div class="modal-header">
+  <a class="modal-close-button" ng-click="$dismiss()"><i></i></a>
-    <a class="modal-close-link" ng-click="$close()">Close</a>
-    <h4 class="modal-title">Edit contact</h4>
-  </div>
 
   <div class="modal-body">
 
-    <form ng-submit="doImport()">
+    <form class="modal_simple_form" ng-submit="doImport()">
 
-      <div class="form-group import_modal_field_wrap">
+      <h4>Edit contact</h4>
-        <span class="form-control uneditable-input disabled" disabled>{{importContact.phone | phoneNumber}}</span>
+
+      <div class="form-group">
+        <span class="form-control uneditable-input disabled" disabled ng-bind="importContact.phone | phoneNumber"></span>
       </div>
-      <div class="form-group import_modal_field_wrap">
+      <div class="form-group">
-        <input class="form-control" type="text" my-focused placeholder="First name" ng-model="importContact.first_name"/>
+        <input class="form-control input-sm" my-focused type="text" placeholder="First name" ng-model="importContact.first_name"/>
       </div>
-      <div class="form-group import_modal_field_wrap">
+      <div class="form-group">
-        <input class="form-control" type="text" placeholder="Last name" ng-model="importContact.last_name"/>
+        <input class="form-control input-sm" type="text" placeholder="Last name" ng-model="importContact.last_name"/>
-      </div>
-
-      <div class="import_modal_panel clearfix">
-
-        <div class="import_modal_actions pull-right">
-          <a class="btn btn-default" ng-click="$dismiss()"> Cancel </a>
-
-          <button class="btn btn-success" type="submit" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled">
-            {{progress.enabled ? 'Saving...' : 'Save'}}
-          </button>
-
-
-        </div>
-
       </div>
 
     </form>
 
   </div>
 
+  <div class="modal-footer">
+    <a class="btn btn-link" ng-click="$dismiss()">Cancel</a>
+    <button class="btn btn-primary" ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'Saving...' : 'Save'" ng-disabled="progress.enabled"></button>
+  </div>
+
 </div>

app/partials/error_modal.html

@@ -1,7 +1,8 @@
 <div class="error_modal_wrap" my-modal-position>
 
+  <a class="modal-close-button" ng-click="$close()"><i></i></a>
+
   <div class="modal-header">
-    <a class="modal-close-link" ng-click="$close()">Close</a>
     <h4 ng-if="error" class="modal-title" ng-switch="error.type">
       <span ng-switch-when="ACCOUNT_REQUIRED">No account</span>
       <span ng-switch-default ng-switch="error.code">

app/partials/head.html

@@ -24,7 +24,7 @@
         <ul ng-if="!offline" class="nav navbar-nav navbar-right">
           <li ng-if="isLoggedIn"><a href="" ng-click="openContacts()">Contacts</a></li>
           <li ng-if="isLoggedIn"><a href="" ng-click="openSettings()">Settings</a></li>
-          <li><a  href="https://github.com/zhukov/webogram" target="_blank">About</a></li>
+          <li ng-if="isLoggedIn"><a href="" ng-click="logOut()">Log Out</a></li>
         </ul>
 
       </div>

app/partials/import_contact_modal.html

@@ -1,38 +1,30 @@
 <div class="import_modal_wrap" my-modal-position>
 
-  <div class="modal-header">
+  <a class="modal-close-button" ng-click="$dismiss()"><i></i></a>
-    <a class="modal-close-link" ng-click="$close()">Close</a>
-    <h4 class="modal-title">Add new contact</h4>
-  </div>
 
   <div class="modal-body">
 
-    <form ng-submit="doImport()">
+    <form class="modal_simple_form" ng-submit="doImport()">
 
-      <div class="form-group import_modal_field_wrap">
+      <h4>Add new contact</h4>
-        <input class="form-control" my-focused type="text" placeholder="Phone number" ng-model="importContact.phone"/>
+
+      <div class="form-group">
+        <input class="form-control input-sm" my-focused type="text" placeholder="Phone number" ng-model="importContact.phone"/>
       </div>
-      <div class="form-group import_modal_field_wrap">
+      <div class="form-group">
-        <input class="form-control" type="text" placeholder="First name" ng-model="importContact.first_name"/>
+        <input class="form-control input-sm" type="text" placeholder="First name" ng-model="importContact.first_name"/>
       </div>
-      <div class="form-group import_modal_field_wrap">
+      <div class="form-group">
-        <input class="form-control" type="text" placeholder="Last name" ng-model="importContact.last_name"/>
+        <input class="form-control input-sm" type="text" placeholder="Last name" ng-model="importContact.last_name"/>
-      </div>
-
-      <div class="import_modal_panel clearfix">
-
-        <div class="import_modal_actions pull-right">
-          <a class="btn btn-default" ng-click="$dismiss()"> Cancel </a>
-
-          <button class="btn btn-success" type="submit" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled">
-            {{progress.enabled ? 'Importing...' : 'Save'}}
-          </button>
-        </div>
-
       </div>
 
     </form>
 
   </div>
 
+  <div class="modal-footer">
+    <a class="btn btn-link" ng-click="$dismiss()">Cancel</a>
+    <button class="btn btn-primary" ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'Importing...' : 'Save'" ng-disabled="progress.enabled"></button>
+  </div>
+
 </div>

app/partials/peer_select.html

@@ -1,16 +1,11 @@
-<div class="peer_select_modal_wrap">
+<div class="peer_select_modal_wrap" my-modal-position>
-
-  <div class="modal-header">
-    <a class="modal-close-link" ng-click="$close()">Close</a>
-    <h4 class="modal-title">Select conversation</h4>
-  </div>
 
   <div class="modal-body">
 
     <div class="im_dialogs_modal_col_wrap" ng-controller="AppImDialogsController">
       <div class="im_dialogs_panel">
         <div class="im_dialogs_search">
-          <input class="form-control im_dialogs_search_field" type="search" placeholder="Search" ng-model="search.query"/>
+          <input my-focused class="form-control im_dialogs_search_field" type="search" placeholder="Search" ng-model="search.query"/>
           <a class="im_dialogs_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
         </div>
       </div>

app/partials/profile_edit_modal.html

@@ -0,0 +1,27 @@
+<div class="profile_edit_modal_wrap" my-modal-position>
+
+  <a class="modal-close-button" ng-click="$dismiss()"><i></i></a>
+
+  <div class="modal-body">
+
+    <form class="modal_simple_form" ng-submit="updateProfile()">
+
+      <h4>Edit Profile</h4>
+
+      <div class="form-group import_modal_field_wrap" ng-class="{'has-error': error.field == 'first_name'}">
+        <input class="form-control input-sm" my-focused type="text" placeholder="First name" ng-model="profile.first_name"  name="first_name"/>
+      </div>
+      <div class="form-group import_modal_field_wrap" ng-class="{'has-error': error.field == 'last_name'}">
+        <input class="form-control input-sm" type="text" placeholder="Last name" ng-model="profile.last_name"/>
+      </div>
+
+    </form>
+
+  </div>
+
+  <div class="modal-footer">
+    <a class="btn btn-link" ng-click="$dismiss()">Cancel</a>
+    <button class="btn btn-primary" ng-class="{disabled: profile.updating}" ng-click="updateProfile()" ng-bind="profile.updating ? 'Saving...' : 'Save'" ng-disabled="profile.updating"></button>
+  </div>
+
+</div>

app/partials/settings_modal.html

@@ -1,101 +1,100 @@
-<div class="settings_modal_wrap" my-modal-position>
+<div class="settings_modal_wrap modal_content_wrap" my-modal-position>
 
-  <div class="modal-header">
+  <a class="modal-close-button" ng-click="$close()"><i></i></a>
-    <a class="modal-close-link" ng-click="$close()">Close</a>
-    <h4 class="modal-title">Settings</h4>
-  </div>
 
   <div class="modal-body">
 
-    <div class="clearfix">
+    <div class="user_modal_photo_profile_wrap">
 
-      <div class="settings_profile_photo_wrap pull-left">
+      <div class="user_modal_image_wrap pull-left">
+        <img
+          class="user_modal_image"
+          my-load-thumb
+          thumb="photo"
+        />
+      </div>
 
-        <div class="settings_profile_photo">
+      <div class="user_modal_info_wrap clearfix">
-          <img
+        <h4 class="user_modal_header" ng-bind-html="profile.rFullName"></h4>
-            class="user_modal_image"
+        <p class="user_modal_status" ng-bind="profile | userStatus"></p>
-            my-load-thumb
+
-            thumb="profile.photo"
+        <div class="user_modal_actions_wrap clearfix">
-          />
+          <span class="btn btn-primary user_modal_main_btn" ng-if="!photo.updating">
-          <div class="settings_profile_photo_change_wrap">
+            <input my-file-upload  type="file" multiple="false" class="im_attach_input" size="120" multiple="false" accept="image/x-png, image/png, image/gif, image/jpeg" />
-            <div ng-if="photo.updating" class="settings_profile_photo_loading">Updating<span my-loading-dots></span></div>
+            Set profile photo
-            <div ng-if="!photo.updating">
+          </span>
-              <div class="settings_profile_photo_update_link">
+          <span class="btn btn-primary user_modal_main_btn disabled" disabled ng-if="photo.updating">
-                <input my-file-upload  type="file" multiple="false" class="im_attach_input" size="120" multiple="false" accept="image/x-png, image/png, image/gif, image/jpeg" />
+            Updating<span my-loading-dots></span>
-                Update photo
+          </span>
-              </div>
+
-              <a ng-if="profile.photo.location" href="" ng-click="deletePhoto()" class="settings_profile_photo_delete_link">Delete photo</a>
+          <div class="dropdown user_modal_other_btn">
-            </div>
+            <button class="btn btn-link dropdown-toggle">More<i class="icon icon-caret"></i></button>
+            <ul class="dropdown-menu">
+              <li ng-if="photo.location">
+                <a ng-click="deletePhoto()">Delete profile photo</a>
+              </li>
+              <li>
+                <a ng-click="editProfile()">Edit profile</a>
+              </li>
+              <li>
+                <a ng-click="terminateSessions()">Terminate all sessions</a>
+              </li>
+            </ul>
           </div>
-        </div>
 
+        </div>
       </div>
 
-      <form my-settings-form name="profileForm" class="settings_profile_edit_form">
-
-        <div class="form-group settings_profile_first_name" ng-class="{'has-error': error.field == 'first_name'}">
-          <label class="control-label" for="first_name">
-            <span ng-if="error.field == 'first_name'">Invalid First Name</span>
-            <span ng-if="error.field != 'first_name'">First Name</span>
-          </label>
-          <input type="text" class="form-control" name="first_name" ng-model="profile.first_name" required />
-        </div>
-
-        <div class="form-group settings_profile_last_name" ng-class="{'has-error': error.field == 'last_name'}">
-          <label class="control-label" for="last_name">
-            <span ng-if="error.field == 'last_name'">Invalid Last Name</span>
-            <span ng-if="error.field != 'last_name'">Last Name</span>
-          </label>
-          <input type="text" class="form-control" name="last_name" ng-model="profile.last_name" />
-        </div>
-
-        <div class="settings_profile_save">
-          <button class="btn btn-link settings_profile_save_btn" ng-click="save(profileForm)" ng-disabled="profileForm.$invalid || (!profileForm.last_name.$dirty &amp;&amp; !profileForm.first_name.$dirty)">Save</button>
-        </div>
-
-      </form>
-
     </div>
 
-    <form class="settings_send_choose_form">
+    <div class="modal_section" ng-if="profile.phone">
-      <div class="radio">
+      <h3 class="modal_section_header">Phone</h3>
-        <label>
+      <div class="modal_section_body">
-          <input type="radio" value="1" ng-model="send.enter">
+        <p><span ng-bind="profile.phone | phoneNumber"></span></p>
-          <strong>Enter</strong> - send message, <strong>Shift + Enter</strong> - new line
-        </label>
       </div>
-      <div class="radio">
-        <label>
-          <input type="radio" value="" ng-model="send.enter">
-          <strong>Ctrl + Enter</strong> - send message, <strong>Enter</strong> - new line
-        </label>
-      </div>
-    </form>
-
-    <p>
-      <strong>Sound: </strong>
-      <a ng-click="notify.sound = !notify.sound">{{notify.sound ? 'ON' : 'OFF'}}</a>
-    </p>
-
-    <p>
-      <strong>Desktop Notifications: </strong>
-      <a ng-click="notify.desktop = !notify.desktop">{{notify.desktop ? 'ON' : 'OFF'}}</a>
-    </p>
-
-    <p>
-      <strong>User: </strong>
-      <span class="settings_user_phone">{{phone | phoneNumber}}</span>
-    </p>
-
-    <p>
-      <strong>Version: </strong>
-      <span class="settings_version">alpha 0.0.21</span>
-    </p>
-
-    <hr/>
-
-    <div class="settings_logout_wrap">
-      <a href="" ng-click="logOut()">Log out</a>
     </div>
+
+    <div class="modal_section">
+      <h3 class="modal_section_header">Settings</h3>
+      <div class="modal_section_body">
+
+        <div class="tg_form_group">
+          <a class="tg_checkbox" ng-click="notify.desktop = !notify.desktop" ng-class="notify.desktop ? 'tg_checkbox_on' : ''">
+            <span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
+            <span class="tg_checkbox_label">Desktop notifications</span>
+          </a>
+
+          <a class="tg_checkbox" ng-click="notify.sound = !notify.sound" ng-class="notify.sound ? 'tg_checkbox_on' : ''">
+            <span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
+            <span class="tg_checkbox_label">Sound</span>
+          </a>
+        </div>
+
+        <div class="tg_form_group">
+          <a class="tg_radio" ng-click="send.enter = 1" ng-class="send.enter == 1 ? 'tg_radio_on' : ''">
+            <i class="icon icon-radio"></i>
+            <span>
+              <strong>Enter</strong> - send message, <strong>Shift + Enter</strong> - new line
+            </span>
+          </a>
+
+          <a class="tg_radio" ng-click="send.enter = 0" ng-class="send.enter == 0 ? 'tg_radio_on' : ''">
+            <i class="icon icon-radio"></i>
+            <span>
+              <strong>Ctrl + Enter</strong> - send message, <strong>Enter</strong> - new line
+            </span>
+          </a>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="modal_section">
+      <h3 class="modal_section_header">About</h3>
+      <div class="modal_section_body">
+        <p><strong>Webogram</strong> v0.0.21, <a href="https://github.com/zhukov/webogram" target="_blank">GitHub</a></p>
+      </div>
+    </div>
+
   </div>
 </div>

app/partials/user_modal.html

@@ -1,60 +1,69 @@
 <div class="user_modal_wrap" my-modal-position>
 
-  <div class="modal-header">
+  <a class="modal-close-button" ng-click="$close()"><i></i></a>
-    <a class="modal-close-link" ng-click="$close()">Close</a>
-    <h4 class="modal-title">Info</h4>
-  </div>
-
 
   <div class="modal-body">
 
-    <div class="user_modal_image_wrap pull-left">
+    <div class="user_modal_photo_profile_wrap">
-      <img
+
-        class="user_modal_image"
+      <div class="user_modal_image_wrap pull-left">
-        my-load-thumb
+        <img
-        thumb="userPhoto"
+          class="user_modal_image"
-      />
+          my-load-thumb
+          thumb="userPhoto"
+        />
+      </div>
+
+      <div class="user_modal_info_wrap clearfix">
+        <h4 class="user_modal_header" ng-bind="user | userName"></h4>
+        <p class="user_modal_status" ng-if="user.status" ng-bind="user | userStatus"></p>
+
+        <div class="user_modal_actions_wrap clearfix">
+          <button class="btn btn-primary user_modal_main_btn" ng-click="goToHistory()">Send message</button>
+
+          <div class="dropdown user_modal_other_btn">
+            <button class="btn btn-link dropdown-toggle">More<i class="icon icon-caret"></i></button>
+            <ul class="dropdown-menu">
+              <li ng-if="user._ == 'userContact'">
+                <a ng-click="importContact(true)">Edit contact</a>
+              </li>
+              <li ng-if="user._ == 'userContact'">
+                <a ng-click="deleteContact()">Delete contact</a>
+              </li>
+              <li ng-if="user.phone.length > 0 &amp;&amp; user._ != 'userContact'">
+                <a ng-click="importContact()">Add to contacts</a>
+              </li>
+              <li ng-if="user.phone.length > 0">
+                <a ng-click="shareContact()">Share contact</a>
+              </li>
+              <li>
+                <a ng-click="flushHistory()">Delete chat</a>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+
     </div>
 
-    <div class="user_modal_info_wrap clearfix">
+    <div class="modal_section" ng-if="user.phone">
-      <h4 class="user_modal_header">{{user | userName}}</h4>
+      <h3 class="modal_section_header">Phone</h3>
-      <p class="user_modal_status" ng-if="user.status">{{user | userStatus}}</p>
+      <div class="modal_section_body">
-
+        <p><span ng-bind="user.phone | phoneNumber"></span></p>
-      <p class="user_modal_phone" ng-if="user.phone">{{user.phone | phoneNumber}}</p>
-
-      <div class="user_modal_actions_wrap clearfix">
-        <button class="btn btn-primary user_modal_send_btn" ng-click="goToHistory()">Send message</button>
-
-        <div class="dropdown user_modal_other_btn">
-          <button class="btn btn-link dropdown-toggle">More<i class="icon icon-caret"></i></button>
-          <ul class="dropdown-menu">
-            <li ng-if="user._ == 'userContact'">
-              <a ng-click="importContact(true)">Edit contact</a>
-            </li>
-            <li ng-if="user._ == 'userContact'">
-              <a ng-click="deleteContact()">Delete contact</a>
-            </li>
-            <li ng-if="user.phone.length > 0 &amp;&amp; user._ != 'userContact'">
-              <a ng-click="importContact()">Add to contacts</a>
-            </li>
-            <li ng-if="user.phone.length > 0">
-              <a ng-click="shareContact()">Share contact</a>
-            </li>
-            <li>
-              <a ng-click="flushHistory()">Delete chat</a>
-            </li>
-          </ul>
-        </div>
-
       </div>
     </div>
 
-    <div class="user_modal_settings_wrap">
+    <div class="modal_section">
-      <div class="user_modal_notifications">
+      <h3 class="modal_section_header">Settings</h3>
-        Notifications:
+      <div class="modal_section_body">
-        <a ng-click="settings.notifications = !settings.notifications">
+
-          {{settings.notifications ? 'ON' : 'OFF'}}
+        <div class="tg_form_group">
-        </a>
+          <a class="tg_checkbox" ng-click="settings.notifications = !settings.notifications" ng-class="settings.notifications ? 'tg_checkbox_on' : ''">
+            <span class="icon icon-checkbox-outer"><i class="icon-checkbox-inner"></i></span>
+            <span class="tg_checkbox_label">Notifications</span>
+          </a>
+        </div>
       </div>
     </div>