New contacts modal
Allow to delete multiple contacts Closes #360 Handle Notification onclick
This commit is contained in:
Igor Zhukov
parent
6792bf7eea
commit
b4acbc0082
@ -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 .active .icon-contact-tick {
|
||||
background-position: -13px -458px !important;
|
||||
.contacts_modal_members_list .contacts_modal_contact_wrap.active {
|
||||
|
||||
}
|
||||
.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 */
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 () {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user