diff --git a/css/mail.css b/css/mail.css index 898615f6..d2b40e33 100755 --- a/css/mail.css +++ b/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; diff --git a/js/templates/account.html b/js/templates/account.html index 925af201..548ea085 100644 --- a/js/templates/account.html +++ b/js/templates/account.html @@ -2,6 +2,22 @@
{{/if}}

{{email}}

+ +{{#if hasMenu}} +
+ +
+ +
+ +
+{{/if}} + + {{#unless isUnifiedInbox}} diff --git a/js/templates/folder.html b/js/templates/folder.html index 9b3c9a14..c54bac2b 100644 --- a/js/templates/folder.html +++ b/js/templates/folder.html @@ -19,16 +19,17 @@ {{#each folders}}
  • + {{#if unseen}}unread{{/if}} + {{#if specialRole}} special-{{specialRole}}{{/if}} + "> + {{#if specialRole}} icon-{{specialRole}} svg{{/if}}"> {{name}} {{#if count}} {{count}} {{/if}} - {{/each}} +
    • + {{/each}} \ No newline at end of file diff --git a/js/templates/settings-account.html b/js/templates/settings-account.html deleted file mode 100644 index f61a8b53..00000000 --- a/js/templates/settings-account.html +++ /dev/null @@ -1,5 +0,0 @@ -{{ emailAddress }} - - - \ No newline at end of file diff --git a/js/views/account.js b/js/views/account.js index a2d5e527..f1ae3257 100644 --- a/js/views/account.js +++ b/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.')); + } + }); } }); }); diff --git a/js/views/app.js b/js/views/app.js index cba1ee98..00935e2d 100644 --- a/js/views/app.js +++ b/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')); diff --git a/js/views/settings-account.js b/js/views/settings-account.js deleted file mode 100644 index 32f4057d..00000000 --- a/js/views/settings-account.js +++ /dev/null @@ -1,52 +0,0 @@ -/** - * ownCloud - Mail - * - * This file is licensed under the Affero General Public License version 3 or - * later. See the COPYING file. - * - * @author Christoph Wurst - * @copyright Christoph Wurst 2015 - */ - -define(function(require) { - 'use strict'; - - var Handlebars = require('handlebars'); - var Marionette = require('marionette'); - var $ = require('jquery'); - var OC = require('OC'); - var SettingsAccountTemplate = require('text!templates/settings-account.html'); - - return Marionette.ItemView.extend({ - tagName: 'li', - id: function() { - return 'mail-account-' + this.model.get('accountId'); - }, - template: Handlebars.compile(SettingsAccountTemplate), - events: { - 'click .delete.action': 'onDelete' - }, - onDelete: function(e) { - e.stopPropagation(); - this.$el.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.')); - } - }); - } - }); -}); diff --git a/js/views/settings-accounts.js b/js/views/settings-accounts.js deleted file mode 100644 index d8a23395..00000000 --- a/js/views/settings-accounts.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * ownCloud - Mail - * - * This file is licensed under the Affero General Public License version 3 or - * later. See the COPYING file. - * - * @author Christoph Wurst - * @copyright Christoph Wurst 2015 - */ - -define(function(require) { - 'use strict'; - - var Marionette = require('marionette'); - var AccountView = require('views/settings-account'); - - return Marionette.CollectionView.extend({ - tagName: 'ul', - className: 'mailaccount-list', - childView: AccountView, - filter: function(account) { - // Don't show unified inbox - return account.get('accountId') !== -1; - } - }); -}); diff --git a/js/views/settings.js b/js/views/settings.js index aebbb013..4eb417ce 100644 --- a/js/views/settings.js +++ b/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');