From b4acbc0082230e74e2db6da2c6f6bf431a7ee7a8 Mon Sep 17 00:00:00 2001 From: Igor Zhukov Date: Fri, 4 Jul 2014 15:20:22 +0400 Subject: [PATCH] New contacts modal Allow to delete multiple contacts Closes #360 Handle Notification onclick --- app/css/app.css | 84 ++++++++++++++++++++----------- app/css/app_mobile.css | 6 +++ app/js/controllers.js | 36 ++++++++++--- app/js/services.js | 18 +++++-- app/partials/contacts_modal.html | 33 ++++++++---- app/partials/im.html | 4 +- app/partials/phonebook_modal.html | 8 +-- 7 files changed, 134 insertions(+), 55 deletions(-) diff --git a/app/css/app.css b/app/css/app.css index bba9a587..4586ba8a 100644 --- a/app/css/app.css +++ b/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 */ diff --git a/app/css/app_mobile.css b/app/css/app_mobile.css index 16f42ef4..d5c0e3ec 100644 --- a/app/css/app_mobile.css +++ b/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 { diff --git a/app/js/controllers.js b/app/js/controllers.js index 5f489985..85f41c1e 100644 --- a/app/js/controllers.js +++ b/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 () { diff --git a/app/js/services.js b/app/js/services.js index 36ebd0cf..73f5e3a7 100644 --- a/app/js/services.js +++ b/app/js/services.js @@ -3332,10 +3332,17 @@ angular.module('myApp.services', []) notification.onclick = function () { notification.close(); - if (window.chrome && chrome.app && chrome.app.window) { - chrome.app.window.current().focus(); + 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(); } - 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; } diff --git a/app/partials/contacts_modal.html b/app/partials/contacts_modal.html index f33bdaac..16598c24 100644 --- a/app/partials/contacts_modal.html +++ b/app/partials/contacts_modal.html @@ -1,13 +1,24 @@
- +
-

Contacts

+
+
+ + Cancel + + + Edit + +
+

Contacts

+
+
- +
@@ -34,7 +45,7 @@
-
{{contact.user | userStatus}}
+
@@ -48,14 +59,16 @@
-
- -
- Add contact - -
+ +
\ No newline at end of file diff --git a/app/partials/im.html b/app/partials/im.html index d0d2a8fc..49ee93bb 100644 --- a/app/partials/im.html +++ b/app/partials/im.html @@ -20,7 +20,7 @@
- +
@@ -221,7 +221,7 @@
Drop photos here to send
- +
diff --git a/app/partials/phonebook_modal.html b/app/partials/phonebook_modal.html index 761d7e5e..28be93e5 100644 --- a/app/partials/phonebook_modal.html +++ b/app/partials/phonebook_modal.html @@ -1,13 +1,15 @@
- +
-

Phonebook

+
+

Phonebook

+
- +