From 16b75b1debe93be4c7d7d142aae2009c4134a605 Mon Sep 17 00:00:00 2001 From: Francis Lachapelle Date: Wed, 29 Apr 2015 11:23:21 -0400 Subject: [PATCH] Improve lists in sidenav - the ripple effect is now visible when clicking on list items; - the fab icon has been moved over the items list; - colorized the checkboxes of the calendars list. --- .../ContactsUI/UIxContactFoldersView.wox | 94 ++++++------ .../MailerUI/UIxMailFolderTemplate.wox | 19 ++- UI/Templates/MailerUI/UIxMailMainFrame.wox | 35 ++++- UI/Templates/SchedulerUI/UIxCalMainView.wox | 141 ++++++++++-------- .../js/Appointments/calendar-model.js | 6 +- UI/WebServerResources/js/Common/ui-desktop.js | 20 ++- UI/WebServerResources/js/ContactsUI.js | 11 +- .../js/Mailer/account-model.js | 20 ++- .../js/Mailer/mailbox-model.js | 8 +- UI/WebServerResources/js/MailerUI.js | 61 ++++---- .../scss/components/button/button.scss | 10 +- .../scss/components/list/list.scss | 8 + .../scss/components/sidenav/sidenav.scss | 2 +- 13 files changed, 249 insertions(+), 186 deletions(-) diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox index f2974604e..c3674082d 100644 --- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox +++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox @@ -8,8 +8,7 @@ const:userDefaultsKeys="SOGoContactsCategories" const:jsFiles="Common/user-model.js, Common/acl-model.js, Common/resource.js, Contacts/card-model.js, Contacts/addressbook-model.js" className="UIxPageFrame" - title="name" - var:popup="isPopup"> + title="name"> @@ -153,28 +152,26 @@
- +
+ ng-click="select(folder)" + ng-dblclick="edit($index, folder)" + ui-sref="app.addressbook({addressbookId: folder.id})" + ui-sref-active="sg-active"> - - +

{{folder.name}}

+ - - + ng-click="share(folder)"> + @@ -195,29 +192,27 @@
- +
+ ng-click="select(folder)" + ng-dblclick="edit($index, folder)" + ui-sref="app.addressbook({addressbookId: folder.id})" + ui-sref-active="sg-active"> - - +

{{folder.name}}

+ - - + + @@ -235,16 +231,15 @@
- + - +

{{folder.name}}
@@ -260,7 +255,7 @@
-
@@ -278,7 +273,8 @@
- +
+

Contacts

@@ -300,7 +296,7 @@
+ ng-click="toggleDetailView()">
@@ -318,11 +314,12 @@ - +
@@ -330,11 +327,6 @@
- - -
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox index 1747b922c..c6550853a 100644 --- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox +++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox @@ -1,14 +1,15 @@ - + xmlns:label="OGo:label"> +
+ -
+

Unread Messages

+ + + +
+
- - - - - diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox index 0c43aa57f..5f3068a7c 100644 --- a/UI/Templates/MailerUI/UIxMailMainFrame.wox +++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox @@ -266,10 +266,35 @@ - -

{{account.name}}

- - +
+ {{account.name}} + + + +

{{folder.name}}

+ + + + + + + + +
@@ -305,7 +330,7 @@
-
+
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox index 2fc0033cc..fb016d6df 100644 --- a/UI/Templates/SchedulerUI/UIxCalMainView.wox +++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox @@ -151,7 +151,7 @@ ng-repeat="calendar in calendars.service.$subscriptions" ng-model="calendar"> - + @@ -159,10 +159,9 @@
- +
@@ -170,14 +169,12 @@

{{calendar.name}}

- - @@ -189,17 +186,39 @@
- +
+ +

{{calendar.name}}

+ + + + +
+ +
+ + + + +
+ + + -
+
@@ -225,8 +244,8 @@
-
-
+
@@ -237,10 +256,9 @@ -
-
+
@@ -254,46 +272,51 @@
- - - - - - -
-

{{event.c_title}}

-

{{event.c_location}}

-

- {{event.formatted_startdate}} - - -

-
- - - - - - - -

{{task.c_title}}

-

{{task.formatted_enddate}}

- - - - - - +
+ + + + + + +
+

{{event.c_title}}

+

{{event.c_location}}

+

+ {{event.formatted_startdate}} + + +

+
+ + + + + + + +

{{task.c_title}}

+

{{task.formatted_enddate}}

+ + + + + + + + +
+
diff --git a/UI/WebServerResources/js/Appointments/calendar-model.js b/UI/WebServerResources/js/Appointments/calendar-model.js index a17bf7e3e..2dea1b4e7 100644 --- a/UI/WebServerResources/js/Appointments/calendar-model.js +++ b/UI/WebServerResources/js/Appointments/calendar-model.js @@ -140,8 +140,10 @@ * @desc Return the calendar CSS class name based on its ID. * @returns a string representing the foreground CSS class name */ - Calendar.prototype.getClassName = function() { - return 'fg-folder' + this.id; + Calendar.prototype.getClassName = function(base) { + if (angular.isUndefined(base)) + base = 'fg'; + return base + '-folder' + this.id; }; /** diff --git a/UI/WebServerResources/js/Common/ui-desktop.js b/UI/WebServerResources/js/Common/ui-desktop.js index c56ad6274..de83fbcac 100644 --- a/UI/WebServerResources/js/Common/ui-desktop.js +++ b/UI/WebServerResources/js/Common/ui-desktop.js @@ -702,15 +702,19 @@ scope: { ngModel: '=' }, - template: - '' + ].join('') } }]) diff --git a/UI/WebServerResources/js/ContactsUI.js b/UI/WebServerResources/js/ContactsUI.js index 859fd238b..732699312 100644 --- a/UI/WebServerResources/js/ContactsUI.js +++ b/UI/WebServerResources/js/ContactsUI.js @@ -32,7 +32,7 @@ }, resolve: { stateAddressbooks: ['sgAddressBook', function(AddressBook) { - return AddressBook.$findAll(contactFolders); + return AddressBook.$findAll(window.contactFolders); }] } }) @@ -112,7 +112,7 @@ // $scope functions $scope.select = function(folder) { $scope.editMode = false; - //$rootScope.currentFolder = folder; + $state.go('app.addressbook', {addressbookId: folder.id}); }; $scope.newAddressbook = function(ev) { $scope.editMode = false; @@ -215,7 +215,12 @@ $scope.exportCards = function() { window.location.href = ApplicationBaseURL + '/' + $scope.currentFolder.id + '/exportFolder'; }; - $scope.share = function() { + $scope.share = function(folder) { + if (folder.id != $scope.currentFolder.id) { + // Counter the possibility to click on the "hidden" secondary button + $scope.select(folder); + return; + } $mdDialog.show({ templateUrl: $scope.currentFolder.id + '/UIxAclEditor', // UI/Templates/UIxAclEditor.wox controller: AddressBookACLController, diff --git a/UI/WebServerResources/js/Mailer/account-model.js b/UI/WebServerResources/js/Mailer/account-model.js index 769b428a0..2f4e86db4 100644 --- a/UI/WebServerResources/js/Mailer/account-model.js +++ b/UI/WebServerResources/js/Mailer/account-model.js @@ -83,6 +83,7 @@ else { Account.$Mailbox.$find(this).then(function(data) { _this.$mailboxes = data; + _this.$flattenMailboxes({reload: true}); deferred.resolve(_this.$mailboxes); }); } @@ -90,23 +91,30 @@ return deferred.promise; }; - Account.prototype.$flattenMailboxes = function() { + /** + * @function $flattenMailboxes + * @memberof Account.prototype + * @desc Get a flatten array of the mailboxes. + * @param {object} [options] - force a reload + * @returns an array of Mailbox instances + */ + Account.prototype.$flattenMailboxes = function(options) { var _this = this, allMailboxes = [], - _visit = function(level, mailboxes) { + _visit = function(mailboxes) { _.each(mailboxes, function(o) { - allMailboxes.push({ id: o.id, path: o.path, name: o.name, level: level }); + allMailboxes.push(o); if (o.children && o.children.length > 0) { - _visit(level+1, o.children); + _visit(o.children); } }); }; - if (this.$$flattenMailboxes) { + if (this.$$flattenMailboxes && !(options && options.reload)) { allMailboxes = this.$$flattenMailboxes; } else { - _visit(0, this.$mailboxes); + _visit(this.$mailboxes); _this.$$flattenMailboxes = allMailboxes; } diff --git a/UI/WebServerResources/js/Mailer/mailbox-model.js b/UI/WebServerResources/js/Mailer/mailbox-model.js index f9e1c8169..57d89b381 100644 --- a/UI/WebServerResources/js/Mailer/mailbox-model.js +++ b/UI/WebServerResources/js/Mailer/mailbox-model.js @@ -88,10 +88,11 @@ Mailbox.$unwrapCollection = function(account, futureMailboxData) { var collection = [], // Local recursive function - createMailboxes = function(mailbox) { + createMailboxes = function(level, mailbox) { for (var i = 0; i < mailbox.children.length; i++) { + mailbox.children[i].level = level; mailbox.children[i] = new Mailbox(account, mailbox.children[i]); - createMailboxes(mailbox.children[i]); + createMailboxes(level+1, mailbox.children[i]); } }; //collection.$futureMailboxData = futureMailboxData; @@ -100,8 +101,9 @@ return Mailbox.$timeout(function() { // Each entry is spun up as a Mailbox instance angular.forEach(data.mailboxes, function(data, index) { + data.level = 0; var mailbox = new Mailbox(account, data); - createMailboxes(mailbox); // recursively create all sub-mailboxes + createMailboxes(1, mailbox); // recursively create all sub-mailboxes collection.push(mailbox); }); return collection; diff --git a/UI/WebServerResources/js/MailerUI.js b/UI/WebServerResources/js/MailerUI.js index 35af34323..7cbbf8390 100644 --- a/UI/WebServerResources/js/MailerUI.js +++ b/UI/WebServerResources/js/MailerUI.js @@ -186,45 +186,45 @@ }); }; $scope.editFolder = function(folder) { - $rootScope.$broadcast('sgEditFolder', folder.id); + $scope.editMode = folder.path; + focus('mailboxName_' + folder.path); }; - $scope.setCurrentFolder = function(account, folder) { + $scope.revertEditing = function(folder) { + folder.$reset(); + $scope.editMode = false; + }; + $scope.selectFolder = function(account, folder) { + if ($scope.editMode == folder.path) + return; $rootScope.currentFolder = folder; + $scope.editMode = false; $state.go('mail.account.mailbox', { accountId: account.id, mailboxId: encodeUriFilter(folder.path) }); }; + $scope.saveFolder = function(folder) { + folder.$rename(); + }; $scope.exportMails = function() { window.location.href = ApplicationBaseURL + '/' + $rootScope.currentFolder.id + '/exportFolder'; }; - $scope.confirmDelete = function() { + $scope.confirmDelete = function(folder) { + if (folder.path != $scope.currentFolder.path) { + // Counter the possibility to click on the "hidden" secondary button + $scope.selectFolder(folder.$account, folder); + return; + } Dialog.confirm(l('Confirmation'), l('Do you really want to move this folder into the trash ?')) - .then(function(res) { - if (res) { - $rootScope.currentFolder.$delete() - .then(function() { - $rootScope.currentFolder = null; - }, function(data, status) { - Dialog.alert(l('An error occured while deleting the mailbox "%{0}".', - $rootScope.currentFolder.name), - l(data.error)); - }); - } - }); + .then(function() { + folder.$delete() + .then(function() { + $rootScope.currentFolder = null; + $state.go('mail'); + }, function(data, status) { + Dialog.alert(l('An error occured while deleting the mailbox "%{0}".', folder.name), + l(data.error)); + }); + }); }; - // Register listeners - $scope.$on('sgRevertFolder', function(event, folderId) { - if (folderId == $scope.currentFolder.id) { - $scope.currentFolder.$reset(); - event.stopPropagation(); - } - }); - $scope.$on('sgSaveFolder', function(event, folderId) { - if (folderId == $scope.currentFolder.id) { - $scope.currentFolder.$rename(); - event.stopPropagation(); - } - }); - if ($state.current.name == 'mail' && $scope.accounts.length > 0 && $scope.accounts[0].$mailboxes.length > 0) { // Redirect to first mailbox of first account if no mailbox is selected var account = $scope.accounts[0]; @@ -237,9 +237,6 @@ $scope.account = stateAccount; $rootScope.mailbox = stateMailbox; $rootScope.currentFolder = stateMailbox; - $timeout(function() { - $rootScope.$broadcast('sgSelectFolder', stateMailbox.id); - }); }]) .controller('MessageCtrl', ['$scope', '$rootScope', '$stateParams', '$state', 'stateAccount', 'stateMailbox', 'stateMessage', '$timeout', 'encodeUriFilter', 'sgFocus', 'sgDialog', 'sgAccount', 'sgMailbox', function($scope, $rootScope, $stateParams, $state, stateAccount, stateMailbox, stateMessage, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox) { diff --git a/UI/WebServerResources/scss/components/button/button.scss b/UI/WebServerResources/scss/components/button/button.scss index 2f1860a34..2e05ea32e 100644 --- a/UI/WebServerResources/scss/components/button/button.scss +++ b/UI/WebServerResources/scss/components/button/button.scss @@ -152,16 +152,10 @@ md-toolbar .md-toolbar-tools .iconButton:last-child, // flex might stretch or squize fab bottons min-width: $button-fab-width; min-height: $button-fab-height; - // this is a temporary fix, see comment in variables - padding: $mg; - margin-right: $mg; - // this is to positioned the button on the toolbar's edge - transform: translate3d(0, -50%, 0); &:hover { - transform: translate3d(0, -49%, 0); - [class ^= md-icon], - [class *= md-icon-] { + [class^=md-icon], + [class*=md-icon-] { transform: scale($iconButton-hover-scale); } } diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss index ad2a222fb..9e8252ba7 100644 --- a/UI/WebServerResources/scss/components/list/list.scss +++ b/UI/WebServerResources/scss/components/list/list.scss @@ -25,6 +25,7 @@ md-list { .sg-item-name { font-size: sg-size(button); + max-width: 75%; // leave some place for a secondary button text-transform: initial; overflow: hidden; text-align: left; @@ -33,6 +34,13 @@ md-list { } } +// Add some padding to the first icon in a list item +.md-list-item-inner { + > i:first-child { + padding-right: $mg; + } +} + // The right tile for a list item. // ---------------------------------------------------------------------------- .md-tile-right { diff --git a/UI/WebServerResources/scss/components/sidenav/sidenav.scss b/UI/WebServerResources/scss/components/sidenav/sidenav.scss index cb55e463e..f88a01584 100644 --- a/UI/WebServerResources/scss/components/sidenav/sidenav.scss +++ b/UI/WebServerResources/scss/components/sidenav/sidenav.scss @@ -50,7 +50,7 @@ md-sidenav { // --------------------------------------- $i: 1; @while $i < 12 { - md-item-content .sg-child-level-#{$i} { padding-left: 2em * $i; } + md-list-item .sg-child-level-#{$i} { padding-left: $mg * $i; } $i: $i + 1; }