Improved mobile views

app/css/app.css

@@ -65,14 +65,23 @@ input[type="number"]::-webkit-inner-spin-button {
 input[type="number"] {
   -moz-appearance:textfield;
 }
-
+.btn {
-.btn-primary:focus {
+  border: 0;
+  padding: 7px 13px;
+}
+.btn:hover,
+.btn:active,
+.btn.active,
+.btn:focus,
+.btn:active:focus,
+.btn.active:focus,
+.open .dropdown-toggle.btn {
+  box-shadow: none;
   outline: none;
 }
 .btn-success {
   color: #ffffff;
   background-color: #6AC065;
-  border-color: #6AC065;
 }
 
 .btn-success:hover,
@@ -82,7 +91,6 @@ input[type="number"] {
 .open .dropdown-toggle.btn-success {
   color: #ffffff;
   background-color: #61b75b;
-  border-color: #61b75b;
 }
 
 .btn-success:active,
@@ -96,7 +104,6 @@ input[type="number"] {
 .btn-danger {
   color: #ffffff;
   background-color: #c05f5a;
-  border-color: #c05f5a;
 }
 .btn-danger:hover,
 .btn-danger:focus,
@@ -105,7 +112,6 @@ input[type="number"] {
 .open .dropdown-toggle.btn-danger {
   color: #ffffff;
   background-color: #ab5450;
-  border-color: #ab5450;
 }
 .btn-danger:active,
 .btn-danger.active,
@@ -118,7 +124,6 @@ input[type="number"] {
 .btn-primary {
   color: #ffffff;
   background-color: #5d8db3;
-  border-color: #5d8db3;
   border-radius: 3px;
 }
 .btn-primary:hover,
@@ -128,7 +133,6 @@ input[type="number"] {
 .open .dropdown-toggle.btn-primary {
   color: #ffffff;
   background-color: #4a80a9;
-  border-color: #4a80a9;
 }
 .btn-primary:active,
 .btn-primary.active,
@@ -139,7 +143,6 @@ input[type="number"] {
 .btn-primary[disabled],
 .btn-primary.disabled {
   background: #7999b3;
-  border-color: #7999b3;
 }
 .btn-link {
   color: #3a6d99;
@@ -156,7 +159,6 @@ input[type="number"] {
 }
 .btn-link.dropdown-toggle:active {
   outline: none;
-  box-shadow: none;
 }
 
 .tg_page_head .navbar-quick-nav,
@@ -1783,12 +1785,6 @@ span.emoji {
   left: 62px;
   right: 62px;
 }
-.im_submit {
-  padding: 5px 12px;
-  font-size: 13px;
-  line-height: 17px;
-  min-width: 60px;
-}
 
 .im_send_dropbox_wrap {
   background: #FFF;

app/css/desktop.css

@@ -241,6 +241,13 @@
   opacity: 1;
 }
 
+.im_submit {
+  padding: 6px 13px;
+  font-size: 13px;
+  line-height: 17px;
+  min-width: 60px;
+}
+
 
 @media (max-width: 900px) {
 

app/css/mobile.css

@@ -17,6 +17,7 @@ html {
 
 .tg_page_head .navbar > .container .navbar-brand {
   padding-left: 9px;
+  outline: none;
 }
 .im_history_panel_edit_link {
   margin-right: 0;
@@ -295,6 +296,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;

app/js/controllers.js

@@ -2326,6 +2326,7 @@ angular.module('myApp.controllers', [])
         });
         AppUsersManager.deleteContacts(selectedUserIDs).then(function () {
           resetSelected();
+          $scope.action = '';
           updateContacts($scope.search.query);
         });
       }

app/js/directives.js

@@ -43,7 +43,6 @@ angular.module('myApp.directives', ['myApp.filters'])
     };
 
     function link($scope, element, attrs) {
-      console.log(111);
       var selected = false,
           grouped = false,
           focused = false,

app/partials/mobile/contacts_modal.html

@@ -4,17 +4,38 @@
     <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" ng-click="toggleEdit(false)">
+              <a  ng-click="toggleEdit(false)">
                 Cancel
               </a>
-              <a ng-switch-default ng-click="toggleEdit(true)">
+            </li>
-                Edit
+            <li class="navbar-quick-right">
+              <a ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="deleteSelected()">
+                Delete <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)">Edit</a>
+              </li>
+              <li>
+                <a ng-click="importContact()">New contact</a>
+              </li>
+            </ul>
+          </div>
+
+          <ul ng-switch-default class="nav navbar-nav navbar-quick-nav">
             <li>
               <a ng-click="$dismiss()" class="navbar-quick-media-back">
                 <i class="icon icon-back"></i>
@@ -68,19 +89,4 @@
 
   </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">
-      Next
-    </button>
-    <button ng-switch-when="select" class="btn btn-primary" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit">
-      Next
-    </button>
-    <button ng-switch-when="edit" class="btn btn-danger"  ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="deleteSelected()">
-      Delete <strong ng-bind="selectedCount"></strong>
-    </button>
-    <button ng-switch-default class="btn btn-link" ng-click="importContact()">
-      New contact
-    </button>
-  </div>
-
 </div>

app/partials/mobile/im.html

@@ -21,11 +21,15 @@
 
       <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">
+        <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-sm" ng-click="importContact()">Add contact</button>
+          <button type="button" class="btn btn-primary btn-block im_dialogs_add_contact" ng-click="importContact()">
-          <button ng-if="phonebookAvailable" type="button" class="btn btn-primary btn-sm im_dialogs_import_phonebook" ng-click="importPhonebook()">Import phonebook</button>
+            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">

app/partials/mobile/login.html

@@ -1,7 +1,7 @@
 <div my-head></div>
 
 
-<div class="login_form_wrap" my-vertical-position="0.4">
+<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()">
@@ -16,8 +16,8 @@
     <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 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_country" my-focused name="phone_country" ng-model="credentials.phone_country">
-        <input type="tel" autocomplete="off" class="form-control pull-left login_phone_number" my-focus-on="country_selected" name="phone_number" ng-model="credentials.phone_number" placeholder="Enter your phone" required>
+        <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">

app/partials/mobile/phonebook_modal.html

@@ -8,9 +8,9 @@
 
           <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">Deselect all</span>
+                <span ng-switch-when="true">Importing<span my-loading-dots></span></span>
-                <span ng-switch-default>Select all</span>
+                <span ng-switch-default>Import</span>
               </a>
             </li>
             <li>
@@ -77,9 +77,9 @@
   </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">Importing<span my-loading-dots></span></span>
+      <span ng-switch-when="true">Deselect all</span>
-      <span ng-switch-default>Import contacts</span>
+      <span ng-switch-default>Select all</span>
     </button>
   </div>