Clean up navigation views

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

js/templates/account.html

@@ -1,34 +1,41 @@
-{{#if emailAddress}}
-<div class="mail-account-color" style="background-color: {{accountColor emailAddress}}"></div>
-{{/if}}
-<h2 class="mail-account-email" title="{{emailAddress}}">{{emailAddress}}</h2>
-
-{{#if hasMenu}}
-<ul class="app-navigation-entry-utils">
-	<li class="app-navigation-entry-utils-menu-button svg"><button></button></li>
-</ul>
+{{#unless isUnifiedInbox}}
+<li class="{{#if hasMenu}} with-menu {{/if}}">
+	{{#if emailAddress}}
+	<div class="mail-account-color" style="background-color: {{accountColor emailAddress}}"></div>
+	{{/if}}
+	<a>{{emailAddress}}</a>
 
-<ul class="app-navigation-entry-menu popovermenu bubble menu">
-	<li>
-		<a href="#" class="menuitem action action-settings permanent" data-action="Settings">
-			<span class="icon icon-rename"></span>
-			<span>{{ t 'Settings' }}</span>
-		</a>
-	</li>
-	{{#if isDeletable}}
-    <li>
-        <a href="#" class="menuitem action action-delete permanent" data-action="Delete">
-			<span class="icon icon-delete"></span>
-			<span>{{ t 'Delete account' }}</span>
-		</a>
-    </li>
+	{{#if hasMenu}}
+	<div class="app-navigation-entry-utils">
+		<ul>
+			<li class="app-navigation-entry-utils-menu-button svg"><button></button></li>
+		</ul>
+	</div>
+	<div class="app-navigation-entry-menu">
+		<ul>
+			<li>
+				<a href="#" class="menuitem action action-settings permanent">
+					<span class="icon icon-rename"></span>
+					<span>{{ t 'Settings' }}</span>
+				</a>
+			</li>
+			{{#if isDeletable}}
+			<li>
+				<a href="#" class="menuitem action action-delete permanent">
+					<span class="icon icon-delete"></span>
+					<span>{{ t 'Delete account' }}</span>
+				</a>
+			</li>
+			{{/if}}
+		</ul>
+	</div>
 	{{/if}}
-</ul>
-{{/if}}
+</li>
+{{/unless}}
 
-<div class="folders with-icon"></div>
+<div class="folders"></div>
 {{#unless isUnifiedInbox}}
 {{#if hasFolders}}
-<span class="account-toggle-collapse">{{toggleCollapseMessage}}</span>
+<li class="account-toggle-collapse">{{toggleCollapseMessage}}</li>
 {{/if}}
 {{/unless}}

js/templates/folder.html

@@ -6,8 +6,10 @@
 	{{#if noSelect}} no-select {{/if}}"
    href="{{#if noSelect}}#{{else}}{{url}}{{/if}}">
 	{{name}}
-	{{#if count}}
-	<span class="utils">{{count}}</span>
-	{{/if}}
 </a>
+<div class="app-navigation-entry-utils">
+	<ul>
+		<li class="app-navigation-entry-utils-counter">{{count}}</li>
+	</ul>
+</div>
 <div class="folders"></div>

js/views/accountview.js

@@ -18,51 +18,88 @@ 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 {
 				isUnifiedInbox: this.model.get('accountId') === -1,
 				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',
 			'click @ui.deleteButton': 'onDelete',
 			'click @ui.settingsButton': 'showAccountSettings',
 			'click @ui.email': 'onClick'
 		},
+
 		regions: {
-			folders: '.folders'
+			folders: {
+				el: '.folders',
+				replaceElement: true
+			}
 		},
+
 		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 +115,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 +128,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 +147,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'));
 
 		}
+
 	});
 });

js/views/folderlistview.js

@@ -22,12 +22,17 @@ define(function(require) {
 	]);
 
 	var FolderListView = Marionette.CollectionView.extend({
-		tagName: 'ul',
+
 		childView: FolderView,
+
+		className: 'folders',
+
 		collapsed: true,
+
 		initialize: function(options) {
 			this.collapsed = options.collapsed;
 		},
+
 		filter: function(child) {
 			if (!this.collapsed) {
 				return true;

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');
 			}

js/views/navigation-accounts.js

@@ -5,7 +5,7 @@
  * later. See the COPYING file.
  *
  * @author Christoph Wurst <christoph@winzerhof-wurst.at>
- * @copyright Christoph Wurst 2015
+ * @copyright Christoph Wurst
  */
 
 define(function(require) {
@@ -21,15 +21,27 @@ define(function(require) {
 	 * @class NavigationAccountsView
 	 */
 	return Marionette.CollectionView.extend({
+
+		tagName: 'ul',
+
+		id: 'app-navigation-accounts',
+
+		className: 'with-icon',
+
+		/** @type {AccountCollection} */
 		collection: null,
+
+		/** @type {AccountView} */
 		childView: AccountView,
+
 		/**
 		 * @returns {undefined}
 		 */
 		initialize: function() {
 			this.listenTo(Radio.ui, 'folder:changed', this.onFolderChanged);
 			this.listenTo(Radio.folder, 'setactive', this.setFolderActive);
 		},
+
 		/**
 		 * @param {Account} account
 		 * @param {Folder} folder
@@ -53,6 +65,7 @@ define(function(require) {
 				folder.set('active', true);
 			}
 		},
+
 		/**
 		 * @returns {undefined}
 		 */

js/views/navigation.js

@@ -17,33 +17,43 @@ define(function(require) {
 	var NewMessageView = require('views/newmessage');
 
 	return Marionette.View.extend({
+
 		el: '#app-navigation',
+
 		regions: {
 			newMessage: '#mail-new-message-fixed',
-			accounts: '#app-navigation-accounts',
+			accounts: {
+				el: '#app-navigation-accounts',
+				replaceElement: true
+			},
 			settings: '#app-settings-content'
 		},
+
 		initialize: function() {
 			this.bindUIElements();
 
 			this.listenTo(Radio.ui, 'navigation:show', this.show);
 			this.listenTo(Radio.ui, 'navigation:hide', this.hide);
 			this.listenTo(Radio.ui, 'navigation:newmessage:show', this.onShowNewMessage);
 		},
+
 		render: function() {
 			// This view doesn't need rendering
 		},
+
 		show: function() {
 			this.$el.show();
 			$('#app-navigation-toggle').css('background-image', '');
 		},
+
 		hide: function() {
 			// TODO: move if or rename function
 			if (require('state').accounts.length === 0) {
 				this.$el.hide();
 				$('#app-navigation-toggle').css('background-image', 'none');
 			}
 		},
+
 		onShowNewMessage: function() {
 			this.showChildView('newMessage', new NewMessageView({
 				accounts: this.options.accounts

package.json

@@ -54,7 +54,7 @@
     "autosize": "^4.0.0",
     "backbone": "^1.3.3",
     "backbone.babysitter": "^0.1.12",
-    "backbone.marionette": "^3.0.0",
+    "backbone.marionette": "^3.4.0",
     "backbone.radio": "^2.0.0",
     "backbone.wreqr": "^1.3.7",
     "davclient.js": "0.1.0",