From 1ff6bb64fd8e3b4d45ef22b9ea1462208fc34545 Mon Sep 17 00:00:00 2001 From: Christoph Wurst Date: Tue, 10 Oct 2017 11:25:01 +0200 Subject: [PATCH 1/3] Refactor navigation according to styling guidelines Signed-off-by: Christoph Wurst --- css/mail.css | 23 ++------------- js/templates/account.html | 49 ++++++++++++++++++++++++++----- js/templates/folder.html | 8 ++++-- js/views/accountview.js | 51 ++++++++++++++++++++++++++++++++- js/views/folderlistview.js | 5 +++- js/views/folderview.js | 4 ++- js/views/navigation-accounts.js | 9 +++++- templates/index.php | 3 +- 8 files changed, 116 insertions(+), 36 deletions(-) diff --git a/css/mail.css b/css/mail.css index afa90f6c51..138725537a 100755 --- a/css/mail.css +++ b/css/mail.css @@ -115,11 +115,6 @@ display: none; } -#app-navigation .special-inbox, -#app-navigation .special-all { - display: block; -} - /* do not overlap collapse icon with special use icon */ #app-navigation .special-inbox .collapse, @@ -148,11 +143,6 @@ z-index: 1; } -#app-navigation-accounts { - height: calc(100% - 65px); - overflow-x: hidden; -} - #app-navigation ul ul { display: block; } @@ -161,14 +151,6 @@ display: none; } -#app-navigation .navigation-account { - position: relative; -} -#app-navigation .navigation-account .app-navigation-entry-utils-menu-button { - /* show the account menu toggle (three dots) by default */ - display: inline-block; -} - #app-navigation ul ul li > a { padding-left: 32px; } @@ -219,13 +201,12 @@ } .mail-account-color { - display: inline-block; + position: absolute; width: 14px; height: 14px; border-radius: 50%; - position: relative; left: 15px; - top: -12px; + top: 15px; } /* color dot position fix for Safari */ @media not all and (min-resolution:.001dpcm) { @media diff --git a/js/templates/account.html b/js/templates/account.html index 4c592cc6ed..0f33297075 100644 --- a/js/templates/account.html +++ b/js/templates/account.html @@ -1,4 +1,39 @@ -{{#if emailAddress}} +{{#unless isUnifiedInbox}} +
  • + {{#if emailAddress}} + + {{/if}} + {{emailAddress}} + + {{#if hasMenu}} +
    +
      +
      • +
    +
    +
    + +
    + {{/if}} +
    • +{{/unless}} + + -
    +
    {{#unless isUnifiedInbox}} {{#if hasFolders}} - + {{/if}} {{/unless}} diff --git a/js/templates/folder.html b/js/templates/folder.html index 2c0cd9df16..27a537e19e 100644 --- a/js/templates/folder.html +++ b/js/templates/folder.html @@ -6,8 +6,10 @@ {{#if noSelect}} no-select {{/if}}" href="{{#if noSelect}}#{{else}}{{url}}{{/if}}"> {{name}} - {{#if count}} - {{count}} - {{/if}} +
    +
      +
    • {{count}}
      • +
    +
    \ No newline at end of file diff --git a/js/views/accountview.js b/js/views/accountview.js index d7bb000c0b..d250d41f38 100644 --- a/js/views/accountview.js +++ b/js/views/accountview.js @@ -18,7 +18,9 @@ define(function(require) { var AccountTemplate = require('templates/account.html'); return Marionette.View.extend({ + template: AccountTemplate, + templateContext: function() { var toggleCollapseMessage = this.collapsed ? t('mail', 'Show all folders') : t('mail', 'Collapse folders'); return { @@ -26,9 +28,10 @@ define(function(require) { toggleCollapseMessage: toggleCollapseMessage, hasMenu: this.model.get('accountId') !== -1, hasFolders: this.model.folders.length > 0, - isDeletable: this.model.get('accountId') !== -2, + isDeletable: this.model.get('accountId') !== -2 }; }, + events: { 'click .account-toggle-collapse': 'toggleCollapse', 'click .app-navigation-entry-utils-menu-button button': 'toggleMenu', @@ -36,33 +39,64 @@ define(function(require) { 'click @ui.settingsButton': 'showAccountSettings', 'click @ui.email': 'onClick' }, + regions: { folders: '.folders' }, + ui: { email: '.mail-account-email', menu: '.app-navigation-entry-menu', settingsButton: '.action-settings', deleteButton: '.action-delete' }, + + /** @type {string} */ className: 'navigation-account', + + /** @type {bool} */ menuShown: false, + + /** @type {bool} */ collapsed: true, + + /** + * @param {array} options + * @returns {undefined} + */ initialize: function(options) { this.model = options.model; }, + + /** + * @returns {undefined} + */ toggleCollapse: function() { this.collapsed = !this.collapsed; this.render(); }, + + /** + * @param {Event} e + * @returns {undefined} + */ toggleMenu: function(e) { e.preventDefault(); this.menuShown = !this.menuShown; this.toggleMenuClass(); }, + + /** + * @returns {undefined} + */ toggleMenuClass: function() { this.getUI('menu').toggleClass('open', this.menuShown); }, + + /** + * @param {Event} e + * @returns {undefined} + */ onDelete: function(e) { e.stopPropagation(); @@ -78,6 +112,11 @@ define(function(require) { OC.Notification.show(t('mail', 'Error while deleting account.')); }); }, + + /** + * @param {Event} e + * @returns {undefined} + */ onClick: function(e) { e.preventDefault(); if (this.model.folders.length > 0) { @@ -86,6 +125,10 @@ define(function(require) { Radio.navigation.trigger('folder', accountId, folderId); } }, + + /** + * @returns {undefined} + */ onRender: function() { this.listenTo(Radio.ui, 'document:click', function(event) { var target = $(event.target); @@ -101,10 +144,16 @@ define(function(require) { collapsed: this.collapsed })); }, + + /** + * @param {Event} e + * @returns {undefined} + */ showAccountSettings: function(e) { this.toggleMenu(e); Radio.navigation.trigger('accountsettings', this.model.get('accountId')); } + }); }); diff --git a/js/views/folderlistview.js b/js/views/folderlistview.js index 71d60252f9..bc166c8772 100644 --- a/js/views/folderlistview.js +++ b/js/views/folderlistview.js @@ -22,12 +22,15 @@ define(function(require) { ]); var FolderListView = Marionette.CollectionView.extend({ - tagName: 'ul', + childView: FolderView, + collapsed: true, + initialize: function(options) { this.collapsed = options.collapsed; }, + filter: function(child) { if (!this.collapsed) { return true; diff --git a/js/views/folderview.js b/js/views/folderview.js index 3704b54f21..d3929d31fd 100644 --- a/js/views/folderview.js +++ b/js/views/folderview.js @@ -22,7 +22,9 @@ define(function(require) { tagName: 'li', updateElClasses: function() { - var classes = []; + var classes = [ + 'with-counter' + ]; if (this.model.get('unseen')) { classes.push('unseen'); } diff --git a/js/views/navigation-accounts.js b/js/views/navigation-accounts.js index 916034c29e..011ed7da36 100644 --- a/js/views/navigation-accounts.js +++ b/js/views/navigation-accounts.js @@ -5,7 +5,7 @@ * later. See the COPYING file. * * @author Christoph Wurst - * @copyright Christoph Wurst 2015 + * @copyright Christoph Wurst */ define(function(require) { @@ -21,8 +21,13 @@ define(function(require) { * @class NavigationAccountsView */ return Marionette.CollectionView.extend({ + + /** @type {AccountCollection} */ collection: null, + + /** @type {AccountView} */ childView: AccountView, + /** * @returns {undefined} */ @@ -30,6 +35,7 @@ define(function(require) { this.listenTo(Radio.ui, 'folder:changed', this.onFolderChanged); this.listenTo(Radio.folder, 'setactive', this.setFolderActive); }, + /** * @param {Account} account * @param {Folder} folder @@ -53,6 +59,7 @@ define(function(require) { folder.set('active', true); } }, + /** * @returns {undefined} */ diff --git a/templates/index.php b/templates/index.php index 12ab64af2b..b886148e2b 100644 --- a/templates/index.php +++ b/templates/index.php @@ -39,7 +39,8 @@
    -
    +