r4sas
/
webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

New contacts modal 

Allow to delete multiple contacts
Closes #360
Handle Notification onclick
master
Igor Zhukov 11 years ago
parent
6792bf7eea
commit
b4acbc0082
7 changed files with 134 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 84
      app/css/app.css
  2. 6
      app/css/app_mobile.css
  3. 34
      app/js/controllers.js
  4. 12
      app/js/services.js
  5. 33
      app/partials/contacts_modal.html
  6. 4
      app/partials/im.html
  7. 8
      app/partials/phonebook_modal.html

84
app/css/app.css
Unescape View File

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

6
app/css/app_mobile.css
Unescape View File

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

34
app/js/controllers.js
Unescape View File

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

12
app/js/services.js
Unescape View File

@ -3332,10 +3332,17 @@ angular.module('myApp.services', [])
notification.onclick = function () { notification.onclick = function () {
notification.close(); 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) { if (window.chrome && chrome.app && chrome.app.window) {
chrome.app.window.current().focus(); chrome.app.window.current().focus();
} }
window.focus(); window.focus();
}
notificationsClear(); notificationsClear();
if (data.onclick) { if (data.onclick) {
data.onclick(); data.onclick();
@ -3484,13 +3491,16 @@ angular.module('myApp.services', [])
var scope = $rootScope.$new(); var scope = $rootScope.$new();
scope.multiSelect = multiSelect; scope.multiSelect = multiSelect;
if (multiSelect) {
scope.action = 'select';
}
angular.extend(scope, options); angular.extend(scope, options);
return $modal.open({ return $modal.open({
templateUrl: 'partials/contacts_modal.html', templateUrl: 'partials/contacts_modal.html',
controller: 'ContactsModalController', controller: 'ContactsModalController',
scope: scope, scope: scope,
windowClass: 'contacts_modal_window' windowClass: 'contacts_modal_window page_modal'
}).result; }).result;
} }

33
app/partials/contacts_modal.html
Unescape View File

@ -1,13 +1,24 @@
<div class="contacts_modal_wrap" my-modal-position> <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"> <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"> <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> <a class="contacts_modal_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
</div> </div>
@ -34,7 +45,7 @@
</div> </div>
<div class="contacts_modal_contact_name" ng-bind-html="contact.user.rFullName"></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> </a>
</li> </li>
@ -48,14 +59,16 @@
</div> </div>
<div class="modal-footer contacts_modal_panel" ng-switch="multiSelect"> <div class="modal-footer contacts_modal_panel" ng-switch="action">
<button ng-switch-when="true" class="btn btn-success btn-block" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit"> <button ng-switch-when="select" class="btn btn-primary" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="submitSelected()" type="submit">
Next » Next »
</button> </button>
<div ng-switch-default> <button ng-switch-when="edit" class="btn btn-danger" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount" ng-click="deleteSelected()">
<a class="btn btn-link pull-left" ng-click="importContact()">Add contact</a> Delete <strong ng-bind="selectedCount"></strong>
<button type="button" class="btn btn-primary" ng-click="$dismiss()">Done</button> </button>
</div> <button ng-switch-default class="btn btn-link" ng-click="importContact()">
New contact
</button>
</div> </div>
</div> </div>

4
app/partials/im.html
Unescape View File

@ -20,7 +20,7 @@
</ul> </ul>
</div> </div>
<div class="im_dialogs_search"> <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> <a class="im_dialogs_search_clear" ng-click="searchClear()" ng-show="search.query.length"></a>
</div> </div>
@ -221,7 +221,7 @@
<div class="im_send_field_wrap"> <div class="im_send_field_wrap">
<div class="im_send_dropbox_wrap"> Drop photos here to send </div> <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>
<div class="im_media_attach pull-right"> <div class="im_media_attach pull-right">

8
app/partials/phonebook_modal.html
Unescape View File

@ -1,13 +1,15 @@
<div class="contacts_modal_wrap" my-modal-position> <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"> <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"> <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> <a class="contacts_modal_search_clear" ng-click="search.query = ''" ng-show="search.query.length"></a>
</div> </div>

Write Preview
Loading…
Cancel
Save