Merge pull request #1576 from nextcloud/fix/vue-design-regressions

Fix Vue design regressions in navigation

5 files changed, 247 insertions, 250 deletions

diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
new file mode 100644
index 000000000..6ba82d12e
--- /dev/null
+++ b/src/components/Navigation.vue
@@ -0,0 +1,181 @@
+<!--
+  - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+	<AppNavigation>
+		<AppNavigationNew :text="t('mail', 'New message')"
+						  buttonId="mail_new_message"
+						  buttonClass="icon-add"
+						  @click="onNewMessage"/>
+		<ul id="accounts-list">
+			<template v-for="group in menu">
+				<AppNavigationItem v-for="item in group"
+								   :key="item.key"
+								   :item="item"/>
+				<AppNavigationSpacer />
+			</template>
+		</ul>
+		<AppNavigationSettings :title="t('mail', 'Settings')">
+			<AppSettingsMenu/>
+		</AppNavigationSettings>
+	</AppNavigation>
+</template>
+
+<script>
+	import {translate as t} from 'nextcloud-server/dist/l10n'
+	import {
+		AppContent,
+		AppNavigation,
+		AppNavigationItem,
+		AppNavigationNew,
+		AppNavigationSettings,
+		AppNavigationSpacer
+	} from 'nextcloud-vue'
+
+	import {calculateAccountColor} from '../util/AccountColor'
+
+	const SHOW_COLLAPSED = Object.seal([
+		'inbox',
+		'flagged',
+		'drafts',
+		'sent'
+	]);
+
+	import AppSettingsMenu from '../components/AppSettingsMenu'
+
+	export default {
+		name: "Navigation",
+		components: {
+			AppNavigation,
+			AppNavigationItem,
+			AppNavigationNew,
+			AppNavigationSettings,
+			AppNavigationSpacer,
+			AppSettingsMenu,
+		},
+		computed: {
+			menu() {
+				return this.$store.getters.getAccounts().map(account => {
+					const items = []
+
+					const isError = account.error
+
+					if (account.isUnified !== true && account.visible !== false) {
+						items.push({
+							id: 'account' + account.id,
+							key: 'account' + account.id,
+							text: account.emailAddress,
+							bullet: isError ? undefined : calculateAccountColor(account.name), // TODO
+							icon: isError ? 'icon-error' : undefined,
+							router: {
+								name: 'accountSettings',
+								params: {
+									accountId: account.id,
+								}
+							},
+							utils: {
+								actions: [
+									{
+										icon: 'icon-settings',
+										text: t('mail', 'Edit'),
+										action: () => {
+											this.$router.push(route)
+										},
+									},
+									{
+										icon: 'icon-delete',
+										text: t('mail', 'Delete'),
+										action: () => {
+											this.$store.dispatch('deleteAccount', account)
+												.catch(console.error.bind(this))
+										}
+									}
+								]
+							}
+						})
+					}
+
+					const folderToEntry = folder => {
+						let icon = 'folder';
+						if (folder.specialRole) {
+							icon = folder.specialRole;
+						}
+
+						return {
+							id: 'account' + account.id + '_' + folder.id,
+							key: 'account' + account.id + '_' + folder.id,
+							text: folder.name,
+							icon: 'icon-' + icon,
+							router: {
+								name: 'folder',
+								params: {
+									accountId: account.id,
+									folderId: folder.id,
+								},
+								exact: false,
+							},
+							utils: {
+								counter: folder.unread,
+							},
+							collapsible: true,
+							opened: folder.opened,
+							children: folder.folders.map(folderToEntry)
+						}
+					}
+
+					this.$store.getters.getFolders(account.id)
+						.filter(folder => !account.collapsed || SHOW_COLLAPSED.indexOf(folder.specialRole) !== -1)
+						.map(folderToEntry)
+						.forEach(i => items.push(i))
+
+					if (!account.isUnified && account.folders.length > 0) {
+						items.push({
+							id: 'collapse-' + account.id,
+							key: 'collapse-' + account.id,
+							classes: ['collapse-folders'],
+							text: account.collapsed ? t('mail', 'Show all folders') : t('mail', 'Collapse folders'),
+							action: () => this.$store.commit('toggleAccountCollapsed', account.id)
+						})
+					}
+
+					return items
+				})
+			}
+		},
+		methods: {
+			onNewMessage () {
+				// FIXME: assumes that we're on the 'message' route already
+				this.$router.push({
+					name: 'message',
+					params: {
+						accountId: this.$route.params.accountId,
+						folderId: this.$route.params.folderId,
+						messageUid: 'new',
+					}
+				});
+			}
+		},
+	}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/mixins/SidebarItems.js b/src/mixins/SidebarItems.js
deleted file mode 100644
index 8c53afcc1..000000000
--- a/src/mixins/SidebarItems.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import {translate as t} from 'nextcloud-server/dist/l10n'
-
-import {calculateAccountColor} from '../util/AccountColor'
-
-const SHOW_COLLAPSED = Object.seal([
-	'inbox',
-	'flagged',
-	'drafts',
-	'sent'
-]);
-
-export default {
-	methods: {
-		buildMenu () {
-			let items = [];
-
-			let accounts = this.$store.getters.getAccounts();
-			for (let id in accounts) {
-				const account = accounts[id]
-				const isError = account.error;
-
-				if (account.isUnified !== true && account.visible !== false) {
-					const route = {
-						name: 'accountSettings',
-						params: {
-							accountId: account.id,
-						}
-					}
-					items.push({
-						id: 'account' + account.id,
-						key: 'account' + account.id,
-						text: account.emailAddress,
-						bullet: isError ? undefined : calculateAccountColor(account.emailAddress),
-						icon: isError ? 'icon-error' : undefined,
-						router: route,
-						utils: {
-							actions: [
-								{
-									icon: 'icon-settings',
-									text: t('mail', 'Edit'),
-									action: () => {
-										this.$router.push(route)
-									},
-								},
-								{
-									icon: 'icon-delete',
-									text: t('mail', 'Delete'),
-									action: () => {
-										this.$store.dispatch('deleteAccount', account)
-											.catch(console.error.bind(this))
-									}
-								}
-							]
-						}
-					})
-				}
-
-				const folderToEntry = folder => {
-					let icon = 'folder';
-					if (folder.specialRole) {
-						icon = folder.specialRole;
-					}
-
-					return {
-						id: 'account' + account.id + '_' + folder.id,
-						key: 'account' + account.id + '_' + folder.id,
-						text: folder.name,
-						icon: 'icon-' + icon,
-						router: {
-							name: 'folder',
-							params: {
-								accountId: account.id,
-								folderId: folder.id,
-							},
-							exact: false,
-						},
-						utils: {
-							counter: folder.unread,
-						},
-						collapsible: true,
-						opened: folder.opened,
-						children: folder.folders.map(folderToEntry)
-					}
-				}
-
-				this.$store.getters.getFolders(account.id)
-					.filter(folder => !account.collapsed || SHOW_COLLAPSED.indexOf(folder.specialRole) !== -1)
-					.map(folderToEntry)
-					.forEach(i => items.push(i))
-
-				if (!account.isUnified && account.folders.length > 0) {
-					items.push({
-						id: 'collapse-' + account.id,
-						key: 'collapse-' + account.id,
-						classes: ['collapse-folders'],
-						text: account.collapsed ? t('mail', 'Show all folders') : t('mail', 'Collapse folders'),
-						action: () => this.$store.commit('toggleAccountCollapsed', account.id)
-					})
-				}
-			}
-
-			return items
-		},
-		onNewMessage () {
-			// FIXME: assumes that we're on the 'message' route already
-			this.$router.push({
-				name: 'message',
-				params: {
-					accountId: this.$route.params.accountId,
-					folderId: this.$route.params.folderId,
-					messageUid: 'new',
-				}
-			});
-		}
-	}
-}
diff --git a/src/views/AccountSettings.vue b/src/views/AccountSettings.vue
index 5489cd9b2..9f5351e28 100644
--- a/src/views/AccountSettings.vue
+++ b/src/views/AccountSettings.vue
@@ -1,86 +1,67 @@
 <template>
-  <AppContent app-name="mail">
-    <template slot="navigation">
-      <AppNavigationNew
-        :text="t('mail', 'New message')"
-        buttonId="mail_new_message"
-        buttonClass="icon-add"
-        @click="onNewMessage"
-      />
-      <ul id="accounts-list">
-        <AppNavigationItem v-for="item in menu" :key="item.key" :item="item"/>
-      </ul>
-      <AppNavigationSettings :title="t('mail', 'Settings')">
-        <AppSettingsMenu/>
-      </AppNavigationSettings>
-    </template>
-    <template slot="content">
-      <div class="section" id="account-info">
-        <h2>{{ t ('mail', 'Account Settings') }} - {{ email }}</h2>
-      </div>
-      <div class="section">
-        <div id="mail-settings">
-          <AccountForm :displayName="displayName" :email="email" :save="onSave" :account="account"/>
-        </div>
-      </div>
-    </template>
-  </AppContent>
+	<AppContent app-name="mail">
+		<Navigation slot="navigation"/>
+		<template slot="content">
+			<div class="section" id="account-info">
+				<h2>{{ t ('mail', 'Account Settings') }} - {{ email }}</h2>
+			</div>
+			<div class="section">
+				<div id="mail-settings">
+					<AccountForm :displayName="displayName"
+								 :email="email"
+								 :save="onSave"
+								 :account="account"/>
+				</div>
+			</div>
+		</template>
+	</AppContent>
 </template>
 
 <script>
-import {
-	AppContent,
-	AppNavigationItem,
-	AppNavigationNew,
-	AppNavigationSettings,
-} from 'nextcloud-vue'
-import AppSettingsMenu from '../components/AppSettingsMenu'
-import AccountForm from '../components/AccountForm'
+	import {AppContent} from 'nextcloud-vue'
 
-import SidebarItems from '../mixins/SidebarItems'
+	import AccountForm from '../components/AccountForm'
+	import Navigation from '../components/Navigation'
 
-export default {
-	name: 'AccountSettings',
-	components: {
-		AccountForm,
-		AppContent,
-		AppNavigationItem,
-		AppNavigationNew,
-		AppNavigationSettings,
-		AppSettingsMenu,
-	},
-	extends: SidebarItems,
-	computed: {
-		menu() {
-			return this.buildMenu()
+	export default {
+		name: 'AccountSettings',
+		components: {
+			AccountForm,
+			AppContent,
+			Navigation,
 		},
-		account() {
-			return this.$store.getters.getAccount(this.$route.params.accountId)
+		extends: SidebarItems,
+		computed: {
+			menu () {
+				return this.buildMenu()
+			},
+			account () {
+				return this.$store.getters.getAccount(this.$route.params.accountId)
+			},
+			displayName () {
+				return this.$store.getters.getAccount(this.$route.params.accountId)
+					.name
+			},
+			email () {
+				return this.$store.getters.getAccount(this.$route.params.accountId)
+					.emailAddress
+			},
 		},
-		displayName() {
-			return this.$store.getters.getAccount(this.$route.params.accountId)
-				.name
-		},
-		email() {
-			return this.$store.getters.getAccount(this.$route.params.accountId)
-				.emailAddress
-		},
-	},
-	methods: {
-		onSave(data) {
-			console.log('data to save:', data)
-			return this.$store
-				.dispatch('updateAccount', {
-					...data,
-					accountId: this.$route.params.accountId,
-				})
-				.then(account => account)
-				.catch(err => {
-					console.error('account update failed:', err)
+		methods: {
+			onSave (data) {
+				console.log('data to save:', data)
+				return this.$store
+					.dispatch('updateAccount', {
+						...data,
+						accountId: this.$route.params.accountId,
+					})
+					.then(account => account)
+					.catch(err => {
+						console.error('account update failed:', err)
 
-					throw err
-				})
+						throw err
+					})
+			},
 		},
-	},
-}
+	}
 </script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 7b3730855..3f1645463 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,20 +2,7 @@
 	<AppContent app-name="mail"
 				v-shortkey.once="['c']"
 				@shortkey.native="onNewMessage">
-		<template slot="navigation">
-			<AppNavigationNew :text="t('mail', 'New message')"
-							  buttonId="mail_new_message"
-							  buttonClass="icon-add"
-							  @click="onNewMessage"/>
-			<ul id="accounts-list">
-				<AppNavigationItem v-for="item in menu"
-								   :key="item.key"
-								   :item="item"/>
-			</ul>
-			<AppNavigationSettings :title="t('mail', 'Settings')">
-				<AppSettingsMenu/>
-			</AppNavigationSettings>
-		</template>
+		<Navigation slot="navigation" />
 		<template slot="content">
 			<FolderContent :account="activeAccount"
 						   :folder="activeFolder" />
@@ -24,27 +11,17 @@
 </template>
 
 <script>
-	import {
-		AppContent,
-		AppNavigationItem,
-		AppNavigationNew,
-		AppNavigationSettings
-	} from 'nextcloud-vue'
-	import AppSettingsMenu from '../components/AppSettingsMenu'
-	import FolderContent from '../components/FolderContent'
+	import {AppContent} from 'nextcloud-vue'
 
-	import SidebarItems from '../mixins/SidebarItems'
+	import Navigation from '../components/Navigation'
+	import FolderContent from '../components/FolderContent'
 
 	export default {
 		name: 'Home',
-		extends: SidebarItems,
 		components: {
 			AppContent,
-			AppNavigationItem,
-			AppNavigationNew,
-			AppNavigationSettings,
-			AppSettingsMenu,
 			FolderContent,
+			Navigation,
 		},
 		computed: {
 			activeAccount () {
diff --git a/src/views/KeyboardShortcuts.vue b/src/views/KeyboardShortcuts.vue
index ee6c7d3bd..4b696d827 100644
--- a/src/views/KeyboardShortcuts.vue
+++ b/src/views/KeyboardShortcuts.vue
@@ -1,19 +1,6 @@
 <template>
 	<AppContent app-name="mail">
-		<template slot="navigation">
-			<AppNavigationNew :text="t('mail', 'New message')"
-							  buttonId="mail_new_message"
-							  buttonClass="icon-add"
-							  @click="onNewMessage"/>
-			<ul id="accounts-list">
-				<AppNavigationItem v-for="item in menu"
-								   :key="item.key"
-								   :item="item"/>
-			</ul>
-			<AppNavigationSettings :title="t('mail', 'Settings')">
-				<AppSettingsMenu />
-			</AppNavigationSettings>
-		</template>
+		<Navigation slot="navigation" />
 		<template slot="content">
 			<div class="app-content-details">
 				<h2>{{ t('mail', 'Keyboard shortcuts') }}</h2>
@@ -66,31 +53,18 @@
 </template>
 
 <script>
-	import {
-		AppContent,
-		AppNavigationItem,
-		AppNavigationNew,
-		AppNavigationSettings
-	} from 'nextcloud-vue'
+	import {AppContent} from 'nextcloud-vue'
 
 	import AppSettingsMenu from '../components/AppSettingsMenu'
-	import SidebarItems from '../mixins/SidebarItems'
+	import Navigation from '../components/Navigation'
 
 	export default {
 		name: 'KeyboardShortcuts',
-		extends: SidebarItems,
 		components: {
 			AppContent,
-			AppNavigationItem,
-			AppNavigationNew,
-			AppNavigationSettings,
 			AppSettingsMenu,
-		},
-		computed: {
-			menu () {
-				return this.buildMenu()
-			}
-		},
+			Navigation,
+		}
 	}
 </script>