From f643c4ddbf2c0ffcd34516a3cab0575165158266 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 13 Sep 2017 13:27:20 +0200 Subject: [PATCH 1/6] Initial fix for app-navigation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- css/mail.css | 72 +++------------------------------ js/templates/account.html | 47 +++++++++++---------- js/templates/folder.html | 15 +++---- js/views/accountview.js | 8 +++- js/views/folderlistview.js | 9 ++++- js/views/navigation-accounts.js | 1 + templates/index.php | 2 +- 7 files changed, 55 insertions(+), 99 deletions(-) diff --git a/css/mail.css b/css/mail.css index f5db43a9f7..3ee788ffee 100755 --- a/css/mail.css +++ b/css/mail.css @@ -140,48 +140,6 @@ } -/* START: should be done in core/apps.css */ - -#app-navigation .collapse { - display: inline-block !important; - opacity: .3; - z-index: 1; -} - -#app-navigation-accounts { - height: calc(100% - 65px); - overflow-x: hidden; -} - -#app-navigation ul ul { - display: block; -} - -#app-navigation ul ul ul { - 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; -} - -#app-navigation ul .collapsible.open:hover { - box-shadow: inset 0 0 3px #ddd; -} - -#app-navigation ul .collapsible.open ul { - display: block; -} -/* STOP: should be done in core/apps.css */ - #emptycontent, #mail-messages #emptycontent.emptycontent-search { position: static; @@ -194,15 +152,8 @@ } .mail-account-email { - display: inline-block; - opacity: .5; - padding: 20px 0 10px 25px; - width: calc(100% - 50px); - margin: initial; - font-size: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + /* for icon color */ + padding-left: 44px !important; } .mail-account-email:first-child { display: none; @@ -219,21 +170,13 @@ } .mail-account-color { - display: inline-block; + display: block; width: 14px; height: 14px; + margin: 16px; border-radius: 50%; - position: relative; - left: 15px; - top: -12px; -} -/* color dot position fix for Safari */ -@media not all and (min-resolution:.001dpcm) { @media -{ -.mail-account-color { - top: 2px; + position: absolute; } -}} .mail-message-account-color { position: absolute; @@ -389,11 +332,6 @@ padding: 3px; } -/* override core values to work with custom html */ -#app-navigation .app-navigation-entry-utils { - top: 7px; -} - /* autocomplete list */ .ui-autocomplete .ui-menu-item a.mail-recipient-autocomplete { display: flex; diff --git a/js/templates/account.html b/js/templates/account.html index 4c592cc6ed..5cf594f7e2 100644 --- a/js/templates/account.html +++ b/js/templates/account.html @@ -1,32 +1,35 @@ {{#if emailAddress}} {{/if}} - + {{#if hasMenu}} - - - +
+
    +
    • +
+
+
+ +
{{/if}} -
+ {{#unless isUnifiedInbox}} {{#if hasFolders}} diff --git a/js/templates/folder.html b/js/templates/folder.html index 2c0cd9df16..f081c7c63e 100644 --- a/js/templates/folder.html +++ b/js/templates/folder.html @@ -1,13 +1,14 @@ -{{#if folders}} - -{{/if}} {{name}} - {{#if count}} - {{count}} - {{/if}} -
\ No newline at end of file +{{#if count}} +
+
    +
  • {{count}}
    • +
+
+{{/if}} + \ No newline at end of file diff --git a/js/views/accountview.js b/js/views/accountview.js index d7bb000c0b..c53e978902 100644 --- a/js/views/accountview.js +++ b/js/views/accountview.js @@ -45,7 +45,7 @@ define(function(require) { settingsButton: '.action-settings', deleteButton: '.action-delete' }, - className: 'navigation-account', + className: 'navigation-account collapsible open', menuShown: false, collapsed: true, initialize: function(options) { @@ -100,6 +100,12 @@ define(function(require) { collection: this.model.folders, collapsed: this.collapsed })); + + this.$el = this.$el.children(); + // Unwrap the element to prevent infinitely + // nesting elements during re-render. + this.$el.unwrap(); + this.setElement(this.$el); }, showAccountSettings: function(e) { this.toggleMenu(e); diff --git a/js/views/folderlistview.js b/js/views/folderlistview.js index 71d60252f9..bed36e19ff 100644 --- a/js/views/folderlistview.js +++ b/js/views/folderlistview.js @@ -22,7 +22,7 @@ define(function(require) { ]); var FolderListView = Marionette.CollectionView.extend({ - tagName: 'ul', + tagName: 'li', childView: FolderView, collapsed: true, initialize: function(options) { @@ -34,6 +34,13 @@ define(function(require) { } var specialRole = child.get('specialRole'); return SHOW_COLLAPSED.indexOf(specialRole) !== -1; + }, + onRender: function() { + this.$el = this.$el.children(); + // Unwrap the element to prevent infinitely + // nesting elements during re-render. + this.$el.unwrap(); + this.setElement(this.$el); } }); diff --git a/js/views/navigation-accounts.js b/js/views/navigation-accounts.js index 916034c29e..97a9cc8d94 100644 --- a/js/views/navigation-accounts.js +++ b/js/views/navigation-accounts.js @@ -23,6 +23,7 @@ define(function(require) { return Marionette.CollectionView.extend({ collection: null, childView: AccountView, + tagName: 'li', /** * @returns {undefined} */ diff --git a/templates/index.php b/templates/index.php index 12ab64af2b..0e78e12367 100644 --- a/templates/index.php +++ b/templates/index.php @@ -39,7 +39,7 @@
-
+