New contacts modal

Allow to delete multiple contacts
Closes #360
Handle Notification onclick

app/css/app.css

@@ -50,6 +50,11 @@ a.disabled {
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
 }
+.form-control.no_outline:focus {
+  border: 1px solid #d9dbde;
+  box-shadow: none;
+  outline: none;
+}
 
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
@@ -145,6 +150,7 @@ input[type="number"] {
 .btn-link:hover {
   background: #f2f6fa;
 }
+.btn-link.btn-link-noarea:hover,
 .btn-link.dropdown-toggle:hover {
   background: none;
 }
@@ -433,8 +439,8 @@ input[type="number"] {
   z-index: 1051;
   top: 0;
   right: 0;
-  width: 47px;
-  height: 47px;
+  width: 54px;
+  height: 54px;
 }
 .modal-close-button i {
   display: inline-block;
@@ -442,7 +448,7 @@ input[type="number"] {
   background-size: 42px 710px;
   width: 12px;
   height: 12px;
-  margin: 17px;
+  margin: 21px;
   opacity: 0.8;
 }
 .is_1x .modal-close-button i {
@@ -2823,7 +2829,24 @@ a:hover .icon-twitter {
 
 /* Contacts modal */
 .contacts_modal_window .modal-dialog {
-  max-width: 506px;
+  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;
 }
 
 .contacts_modal_search {
@@ -2837,7 +2860,7 @@ a:hover .icon-twitter {
   background-size: 42px 710px;
   border: 1px solid #F2F2F2;
   border-radius: 3px;
-  padding: 6px 20px 6px 30px;
+  padding: 6px 15px 6px 30px;
   margin: 0;
 }
 .is_1x .contacts_modal_search_field {
@@ -2851,7 +2874,7 @@ a:hover .icon-twitter {
 .contacts_modal_search_clear {
   position: absolute;
   right: 9px;
-  margin-top: -23px;
+  margin-top: -24px;
   color: #999;
   width: 13px;
   height: 13px;
@@ -2886,17 +2909,12 @@ a:hover .icon-twitter {
   padding: 8px 9px;
   border-radius: 0;
 }
-.contacts_modal_members_list a.contacts_modal_contact:hover {
+.contacts_modal_members_list a.contacts_modal_contact:hover,
+.contacts_modal_members_list .active a.contacts_modal_contact,
+.contacts_modal_members_list .active a.contacts_modal_contact:hover {
   border-radius: 2px;
   background: #f2f6fa;
 }
-.contacts_modal_members_list .active a.contacts_modal_contact {
-  border-radius: 2px;
-  background-color: #6490b1;
-}
-.contacts_modal_members_list .active a.contacts_modal_contact:hover {
-  background-color: #6490b1;
-}
 
 
 .contacts_modal_contact_name {
@@ -2918,34 +2936,34 @@ a:hover .icon-twitter {
 .contacts_modal_contact_status {
   color: #999;
 }
-a.contacts_modal_contact:hover .contacts_modal_contact_status {
-  color: #91a6ba;
-}
-
-.contacts_modal_members_list .active .contacts_modal_contact_name,
+a.contacts_modal_contact:hover .contacts_modal_contact_status,
 .contacts_modal_members_list .active a.contacts_modal_contact .contacts_modal_contact_status {
-  color: #FFF;
+  color: #91a6ba;
 }
 
 .icon-contact-tick {
   position: absolute;
   right: 10px;
-  top: 22px;
-  width: 17px;
-  height: 15px;
-  background: url(../img/icons/IconsetW.png) -13px -366px no-repeat;
+  top: 17px;
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background: url(../img/icons/IconsetW.png) -9px -516px no-repeat;
   background-size: 42px 710px;
   opacity: 0.5;
 }
 .is_1x .icon-contact-tick {
   background-image: url(../img/icons/IconsetW_1x.png);
 }
-.contacts_modal_members_list a.contacts_modal_contact:hover .icon-contact-tick {
-  background-position: -13px -366px;
-  opacity: 1;
+.contacts_modal_members_list .contacts_modal_contact_wrap:hover .icon-contact-tick {
+  background-position: -9px -481px;
+  opacity: 0.5;
+}
+.contacts_modal_members_list .contacts_modal_contact_wrap.active {
+
 }
-.contacts_modal_members_list .active .icon-contact-tick {
-  background-position: -13px -458px !important;
+.contacts_modal_members_list .contacts_modal_contact_wrap.active .icon-contact-tick {
+  background-position: -9px -481px;
   opacity: 1;
 }
 .contacts_modal_members_list .disabled {
@@ -2955,6 +2973,14 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
   display: none;
 }
 
+.contacts_modal_panel {
+  text-align: center;
+}
+
+.group_edit_modal_window .modal-dialog {
+  max-width: 506px;
+}
+
 
 
 /* Messages edit panel */

app/css/app_mobile.css

@@ -387,6 +387,12 @@ html {
   padding-left: 0;
   padding-right: 0;
 }
+.page_modal .modal-footer {
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+}
+
 
 
 .user_modal_other_btn button {

app/js/controllers.js

@@ -261,7 +261,7 @@ angular.module('myApp.controllers', [])
             templateUrl: 'partials/chat_create_modal.html',
             controller: 'ChatCreateModalController',
             scope: scope,
-            windowClass: 'contacts_modal_window'
+            windowClass: 'group_edit_modal_window'
           });
         }
 
@@ -1803,7 +1803,7 @@ angular.module('myApp.controllers', [])
         templateUrl: 'partials/chat_edit_modal.html',
         controller: 'ChatEditModalController',
         scope: scope,
-        windowClass: 'contacts_modal_window'
+        windowClass: 'group_edit_modal_window'
       });
     }
 
@@ -2019,12 +2019,10 @@ angular.module('myApp.controllers', [])
 
     $scope.contacts = [];
     $scope.search = {};
-    $scope.slice = {limit: 20, limitDelta: 20}
-
+    $scope.slice = {limit: 20, limitDelta: 20};
 
-    $scope.selectedContacts = {};
+    resetSelected();
     $scope.disabledContacts = {};
-    $scope.selectedCount = 0;
 
     if ($scope.disabled) {
       for (var i = 0; i < $scope.disabled.length; i++) {
@@ -2041,6 +2039,11 @@ angular.module('myApp.controllers', [])
       }
     }
 
+    function resetSelected () {
+      $scope.selectedContacts = {};
+      $scope.selectedCount = 0;
+    };
+
     function updateContacts (query) {
       AppUsersManager.getContacts(query).then(function (contactsList) {
         $scope.contacts = [];
@@ -2060,6 +2063,12 @@ angular.module('myApp.controllers', [])
 
     $scope.$watch('search.query', updateContacts);
 
+    $scope.toggleEdit = function (enabled) {
+      $scope.action = enabled ? 'edit' : '';
+      $scope.multiSelect = enabled;
+      resetSelected();
+    };
+
     $scope.contactSelect = function (userID) {
       if ($scope.disabledContacts[userID]) {
         return false;
@@ -2084,7 +2093,20 @@ angular.module('myApp.controllers', [])
         });
         return $modalInstance.close(selectedUserIDs);
       }
+    };
+
+    $scope.deleteSelected = function () {
+      if ($scope.selectedCount > 0) {
+        var selectedUserIDs = [];
+        angular.forEach($scope.selectedContacts, function (t, userID) {
+          selectedUserIDs.push(userID);
+        });
+        AppUsersManager.deleteContacts(selectedUserIDs).then(function () {
+          resetSelected();
+          updateContacts($scope.search.query);
+        });
       }
+    };
 
     $scope.importContact = function () {
       AppUsersManager.openImportContact().then(function () {

app/js/services.js

@@ -3332,10 +3332,17 @@ angular.module('myApp.services', [])
 
       notification.onclick = function () {
         notification.close();
+        if (window.mozApps && document.hidden) {
+          // Get app instance and launch it to bring app to foreground
+          window.mozApps.getSelf().onsuccess = function() {
+            this.result.launch();
+          };
+        } else {
           if (window.chrome && chrome.app && chrome.app.window) {
             chrome.app.window.current().focus();
           }
           window.focus();
+        }
         notificationsClear();
         if (data.onclick) {
           data.onclick();
@@ -3484,13 +3491,16 @@ angular.module('myApp.services', [])
 
     var scope = $rootScope.$new();
     scope.multiSelect = multiSelect;
+    if (multiSelect) {
+      scope.action = 'select';
+    }
     angular.extend(scope, options);
 
     return $modal.open({
       templateUrl: 'partials/contacts_modal.html',
       controller: 'ContactsModalController',
       scope: scope,
-      windowClass: 'contacts_modal_window'
+      windowClass: 'contacts_modal_window page_modal'
     }).result;
   }
 

app/partials/contacts_modal.html

@@ -1,13 +1,24 @@
 <div class="contacts_modal_wrap" my-modal-position>
 
-  <a class="modal-close-button visible-xs" ng-click="$dismiss()"><i></i></a>
+  <a class="modal-close-button" ng-click="$dismiss()"><i></i></a>
 
   <div class="modal-body">
 
-    <h4 class="modal_simple_header visible-xs">Contacts</h4>
+    <div class="contacts_modal_header">
+      <div class="contacts_modal_edit_wrap" ng-if="action != 'select'" ng-switch="action">
+        <a ng-switch-when="edit" class="contacts_modal_edit_link" ng-click="toggleEdit(false)">
+          Cancel
+        </a>
+        <a ng-switch-default class="contacts_modal_edit_link" ng-click="toggleEdit(true)">
+          Edit
+        </a>
+      </div>
+      <h4 class="contacts_modal_title">Contacts</h4>
+    </div>
+
 
     <div class="contacts_modal_search">
-      <input class="form-control contacts_modal_search_field" my-focused type="search" placeholder="Search" ng-model="search.query"/>
+      <input class="form-control contacts_modal_search_field no_outline" my-focused type="search" placeholder="Search" ng-model="search.query"/>
       <a class="contacts_modal_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
     </div>
 
@@ -34,7 +45,7 @@
                 </div>
 
                 <div class="contacts_modal_contact_name" ng-bind-html="contact.user.rFullName"></div>
-                <div class="contacts_modal_contact_status">{{contact.user | userStatus}}</div>
+                <div class="contacts_modal_contact_status" ng-bind="contact.user | userStatus"></div>
 
               </a>
             </li>
@@ -48,14 +59,16 @@
 
   </div>
 
-  <div class="modal-footer contacts_modal_panel" 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">
+  <div class="modal-footer contacts_modal_panel" ng-switch="action">
+    <button ng-switch-when="select" class="btn btn-primary" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit">
       Next »
     </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>
+    <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/im.html

@@ -20,7 +20,7 @@
           </ul>
         </div>
         <div class="im_dialogs_search">
-          <input class="form-control im_dialogs_search_field" type="search" placeholder="Search" ng-model="search.query"/>
+          <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>
 
@@ -221,7 +221,7 @@
 
                     <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"></textarea>
+                      <textarea ng-model="draftMessage.text" placeholder="Write a message..." class="form-control im_message_field no_outline"></textarea>
                     </div>
 
                     <div class="im_media_attach pull-right">

app/partials/phonebook_modal.html

@@ -1,13 +1,15 @@
 <div class="contacts_modal_wrap" my-modal-position>
 
-  <a class="modal-close-button visible-xs" ng-click="$dismiss()"><i></i></a>
+  <a class="modal-close-button" ng-click="$dismiss()"><i></i></a>
 
   <div class="modal-body">
 
-    <h4 class="modal_simple_header visible-xs">Phonebook</h4>
+    <div class="contacts_modal_header">
+      <h4 class="contacts_modal_title">Phonebook</h4>
+    </div>
 
     <div class="contacts_modal_search">
-      <input class="form-control contacts_modal_search_field" my-focused type="search" placeholder="Search" ng-model="search.query"/>
+      <input class="form-control contacts_modal_search_field no_outline" my-focused type="search" placeholder="Search" ng-model="search.query"/>
       <a class="contacts_modal_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
     </div>