From 11162b9f77f11fc06ed151846551cc9cffd1c70b Mon Sep 17 00:00:00 2001
From: Igor Zhukov <igor.beatle@gmail.com>
Date: Wed, 17 Sep 2014 22:24:12 +0400
Subject: [PATCH] Improved mobile views

---
 app/css/app.css                          | 28 ++++++--------
 app/css/desktop.css                      |  7 ++++
 app/css/mobile.css                       | 24 ++++++++++++
 app/js/controllers.js                    |  1 +
 app/js/directives.js                     |  1 -
 app/partials/mobile/contacts_modal.html  | 48 +++++++++++++-----------
 app/partials/mobile/im.html              | 10 +++--
 app/partials/mobile/login.html           |  6 +--
 app/partials/mobile/phonebook_modal.html | 12 +++---
 9 files changed, 87 insertions(+), 50 deletions(-)

diff --git a/app/css/app.css b/app/css/app.css
index 78e56e2a..5265cf30 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -65,14 +65,23 @@ input[type="number"]::-webkit-inner-spin-button {
 input[type="number"] {
   -moz-appearance:textfield;
 }
-
-.btn-primary:focus {
+.btn {
+  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;
diff --git a/app/css/desktop.css b/app/css/desktop.css
index 40b06895..4663e0ad 100644
--- a/app/css/desktop.css
+++ b/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) {
 
diff --git a/app/css/mobile.css b/app/css/mobile.css
index f82e4196..44b63cd5 100644
--- a/app/css/mobile.css
+++ b/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;
diff --git a/app/js/controllers.js b/app/js/controllers.js
index ecb63897..4e250190 100644
--- a/app/js/controllers.js
+++ b/app/js/controllers.js
@@ -2326,6 +2326,7 @@ angular.module('myApp.controllers', [])
         });
         AppUsersManager.deleteContacts(selectedUserIDs).then(function () {
           resetSelected();
+          $scope.action = '';
           updateContacts($scope.search.query);
         });
       }
diff --git a/app/js/directives.js b/app/js/directives.js
index 3f04d21c..5e194280 100644
--- a/app/js/directives.js
+++ b/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,
diff --git a/app/partials/mobile/contacts_modal.html b/app/partials/mobile/contacts_modal.html
index 257779e5..59353867 100644
--- a/app/partials/mobile/contacts_modal.html
+++ b/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">
-            <li class="navbar-quick-right" ng-if="!action || action == 'edit'" ng-switch="action">
-              <a ng-switch-when="edit" ng-click="toggleEdit(false)">
+          <ul ng-switch-when="edit" class="nav navbar-nav navbar-quick-nav">
+            <li class="navbar-quick-left">
+              <a  ng-click="toggleEdit(false)">
                 Cancel
               </a>
-              <a ng-switch-default ng-click="toggleEdit(true)">
-                Edit
+            </li>
+            <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>
\ No newline at end of file
diff --git a/app/partials/mobile/im.html b/app/partials/mobile/im.html
index 0b7c25ec..4c466fd9 100644
--- a/app/partials/mobile/im.html
+++ b/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 ng-if="phonebookAvailable" type="button" class="btn btn-primary btn-sm im_dialogs_import_phonebook" ng-click="importPhonebook()">Import phonebook</button>
+          <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">
diff --git a/app/partials/mobile/login.html b/app/partials/mobile/login.html
index 8f1a8b45..4a83c9b7 100644
--- a/app/partials/mobile/login.html
+++ b/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 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_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">
diff --git a/app/partials/mobile/phonebook_modal.html b/app/partials/mobile/phonebook_modal.html
index 18ef0623..902d1507 100644
--- a/app/partials/mobile/phonebook_modal.html
+++ b/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">
-                <span ng-switch-when="true">Deselect all</span>
-                <span ng-switch-default>Select all</span>
+              <a ng-class="{disabled: !selectedCount || progress.enabled}" ng-click="submitSelected()" ng-switch="progress.enabled">
+                <span ng-switch-when="true">Importing<span my-loading-dots></span></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">
-      <span ng-switch-when="true">Importing<span my-loading-dots></span></span>
-      <span ng-switch-default>Import contacts</span>
+    <button class="btn btn-primary" ng-click="toggleSelection()" ng-switch="selectedCount > 0">
+      <span ng-switch-when="true">Deselect all</span>
+      <span ng-switch-default>Select all</span>
     </button>
   </div>