Add account popover menu and remove settings account section

css/mail.css

@@ -143,6 +143,14 @@
 	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;
 }
@@ -177,7 +185,7 @@
 	display: inline-block;
 	opacity: .5;
 	padding: 20px 0 10px 25px;
-	width: 90%;
+	width: calc(100% - 50px);
 	margin: initial;
 	font-size: 100%;
 	overflow: hidden;
@@ -355,10 +363,19 @@
 	padding: 3px;
 }
 
+/* override core values to work with custom html */
+#app-navigation .app-navigation-entry-utils {
+	top: 9px;
+	right: -12px;
+}
+#app-navigation .app-navigation-entry-menu {
+	right: -10px;
+}
+
 /* editor */
 #mail-new-message-fixed {
-	z-index: 1;
-	padding-bottom: 12px;
+	width: 241px !important;
+	z-index: 111; /* navigation menu is 110 ;-) */
 	background-color: rgba(255, 255, 255, .75);
 	padding: 10px;
 	position: relative;

js/templates/account.html

@@ -2,6 +2,22 @@
 <div class="mail-account-color" style="background-color: {{accountColor email}}"></div>
 {{/if}}
 <h2 class="mail-account-email" title="{{email}}">{{email}}</h2>
+
+{{#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><button class="icon-delete svg" title="delete"></button></li>
+	</ul>
+</div>
+{{/if}}
+
+
 <ul id="mail_folders" class="mail_folders with-icon" data-account_id="{{id}}">
 </ul>
 {{#unless isUnifiedInbox}}

js/templates/folder.html

@@ -19,16 +19,17 @@
 		{{#each folders}}
 		<li data-folder_id="{{id}}"
 			class="
-	{{#if unseen}}unread{{/if}}
-	{{#if specialRole}} special-{{specialRole}}{{/if}}
-	">
+			{{#if unseen}}unread{{/if}}
+			{{#if specialRole}} special-{{specialRole}}{{/if}}
+			">
 			<a class="folder
-				{{#if specialRole}} icon-{{specialRole}} svg{{/if}}">
+			   {{#if specialRole}} icon-{{specialRole}} svg{{/if}}">
 				{{name}}
 				{{#if count}}
 				<span class="utils">{{count}}</span>
 				{{/if}}
 			</a>
-			{{/each}}
+		</li>
+		{{/each}}
 	</ul>
 </li>

js/views/account.js

@@ -13,6 +13,8 @@ define(function(require) {
 
 	var Backbone = require('backbone');
 	var Handlebars = require('handlebars');
+	var OC = require('OC');
+	var Radio = require('radio');
 	var FolderView = require('views/folder');
 	var AccountTemplate = require('text!templates/account.html');
 
@@ -30,15 +32,25 @@ define(function(require) {
 			var toggleCollapseMessage = this.collapsed ? t('mail', 'Show all folders') : t('mail', 'Collapse folders');
 			return {
 				isUnifiedInbox: this.model.get('accountId') === -1,
-				toggleCollapseMessage: toggleCollapseMessage
+				toggleCollapseMessage: toggleCollapseMessage,
+				hasMenu: this.model.get('accountId') !== -1
 			};
 		},
 		collapsed: true,
 		events: {
-			'click .account-toggle-collapse': 'toggleCollapse'
+			'click .account-toggle-collapse': 'toggleCollapse',
+			'click .app-navigation-entry-utils-menu-button button': 'toggleMenu',
+			'click @ui.deleteButton': 'onDelete'
 		},
+		ui: {
+			'menu': 'div.app-navigation-entry-menu',
+			'deleteButton': 'button[class^="icon-delete"]'
+		},
+		// 'active' is needed to show the dotdotdot menu
+		className: 'navigation-account',
 		childView: FolderView,
 		childViewContainer: '#mail_folders',
+		menuShown: false,
 		initialize: function(options) {
 			this.model = options.model;
 			this.collection = this.model.get('folders');
@@ -53,6 +65,45 @@ define(function(require) {
 		toggleCollapse: function() {
 			this.collapsed = !this.collapsed;
 			this.render();
+			this.listenTo(Radio.ui, 'document:click', function(event) {
+				var target = $(event.target);
+				if (!this.$el.is(target.closest('.navigation-account'))) {
+					// Click was not triggered by this element -> close menu
+					this.menuShown = false;
+					this.toggleMenuClass();
+				}
+			});
+		},
+		toggleMenu: function(e) {
+			e.preventDefault();
+			this.menuShown = !this.menuShown;
+			this.toggleMenuClass();
+		},
+		toggleMenuClass: function() {
+			this.ui.menu.toggleClass('open', this.menuShown);
+		},
+		onDelete: function(e) {
+			e.stopPropagation();
+
+			this.ui.deleteButton.removeClass('icon-delete').addClass('icon-loading-small');
+
+			var account = this.model;
+
+			$.ajax(OC.generateUrl('/apps/mail/accounts/{accountId}'), {
+				data: {accountId: account.get('accountId')},
+				type: 'DELETE',
+				success: function() {
+					// Delete cached message lists
+					require('cache').removeAccount(account);
+
+					// reload the complete page
+					// TODO should only reload the app nav/content
+					window.location.reload();
+				},
+				error: function() {
+					OC.Notification.show(t('mail', 'Error while deleting account.'));
+				}
+			});
 		}
 	});
 });

js/views/app.js

@@ -56,6 +56,8 @@ define(function(require) {
 			// another browser tab
 			$(document).on('show', this.onDocumentShow);
 
+			$(document).on('click', this.onDocumentClick);
+
 			// Listens to key strokes, and executes a function based
 			// on the key combinations.
 			$(document).keyup(this.onKeyUp);
@@ -98,9 +100,7 @@ define(function(require) {
 			this.navigation = new NavigationView({
 				accounts: require('state').accounts
 			});
-			this.navigation.settings.show(new SettingsView({
-				accounts: require('state').accounts
-			}));
+			this.navigation.settings.show(new SettingsView());
 
 			// setup folder view
 			this.accountsView = new NavigationAccountsView();
@@ -109,6 +109,9 @@ define(function(require) {
 
 			this.showMessageContent();
 		},
+		onDocumentClick: function(event) {
+			Radio.ui.trigger('document:click', event);
+		},
 		onDocumentShow: function(e) {
 			e.preventDefault();
 			Radio.notification.trigger('favicon:change', OC.filePath('mail', 'img', 'favicon.png'));

js/views/settings.js

@@ -15,7 +15,6 @@ define(function(require) {
 	var Marionette = require('marionette');
 	var OC = require('OC');
 	var Radio = require('radio');
-	var SettingsAccountsView = require('views/settings-accounts');
 	var SettingsTemplate = require('text!templates/settings.html');
 
 	return Marionette.LayoutView.extend({
@@ -32,14 +31,6 @@ define(function(require) {
 		events: {
 			'click #new_mail_account': 'addAccount'
 		},
-		initialize: function(options) {
-			this.accounts = options.accounts;
-		},
-		onShow: function() {
-			this.accountsList.show(new SettingsAccountsView({
-				collection: this.accounts
-			}));
-		},
 		addAccount: function(e) {
 			e.preventDefault();
 			Radio.navigation.trigger('setup');