Merge pull request #1058 from nextcloud/feature/vue-settings-menu

Add Vue settings menu component

js/components/AppSettingsMenu.vue

+<template>
+	<div>
+		<router-link to="/setup"
+					 id="new-mail-account"
+					 class="button new-button">{{ t('mail', 'Add mail account') }}</router-link>
+		<p>
+			<input class="checkbox"
+				   id="gravatar-enabled"
+				   type="checkbox">
+			<label for="gravatar-enabled">{{ t('mail', 'Use Gravatar and favicon avatars') }}</label>
+		</p>
+		<p class="app-settings-hint">
+			<a id="keyboard-shortcuts"
+			   href="">{{ t('mail','Keyboard shortcuts')}}</a>
+		</p>
+
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "AppSettingsMenu"
+	}
+</script>

js/components/core/appNavigation.vue

@@ -31,15 +31,17 @@
 			<navigation-item v-for="item in menu.items" :item="item"
 							 :key="item.key"/>
 		</ul>
-		<div id="app-settings" v-if="!!$slots['settings-content']">
+		<div v-click-outside="closeMenu" v-if="!!$slots['settings-content']" id="app-settings"
+			:class="{open: opened}">
 			<div id="app-settings-header">
 				<button class="settings-button"
-						data-apps-slide-toggle="#app-settings-content"
-				>{{t('settings', 'Settings')}}
-				</button>
+					data-apps-slide-toggle="#app-settings-content"
+						v-click-outside="closeMenu"
+					@click="toggleMenu"
+				>{{ t('mail', 'Settings') }}</button>
 			</div>
 			<div id="app-settings-content">
-				<slot name="settings-content"></slot>
+				<slot name="settings-content" />
 			</div>
 		</div>
 	</div>
@@ -47,12 +49,30 @@
 
 <script>
 	import navigationItem from './navigationItem';
+	import ClickOutside from 'vue-click-outside';
 
 	export default {
 		name: 'appNavigation',
 		props: ['menu'],
 		components: {
-			navigationItem
+			navigationItem,
+			ClickOutside
+		},
+		directives: {
+			ClickOutside
+		},
+		data() {
+			return {
+				opened: false
+			}
+		},
+		methods: {
+			toggleMenu () {
+				this.opened = !this.opened
+			},
+			closeMenu () {
+				this.opened = false
+			}
 		}
 	};
 </script>

js/views/Home.vue

 <template>
 	<div id="content" class="mail">
-		<app-navigation :menu="menu"/>
+		<app-navigation :menu="menu">
+			<AppSettingsMenu slot="settings-content" />
+		</app-navigation>
 		<FolderContent />
 	</div>
 </template>
@@ -9,13 +11,15 @@
 	import chain from "ramda/es/chain";
 
 	import AppNavigation from "../components/core/appNavigation";
-	import FolderContent from "../components/FolderContent";
+	import AppSettingsMenu from "../components/AppSettingsMenu";
+	import FolderContent from "../components/FolderContent"
 
 	export default {
 		name: 'home',
 		components: {
-			AppNavigation,
+			AppSettingsMenu,
 			FolderContent,
+			AppNavigation
 		},
 		computed: {
 			menu () {
@@ -32,6 +36,8 @@
 					}
 
 					return items.concat(account.folders.map(folder => {
+						console.info('while', items, folder.id, folder.specialUse);
+
 						var icon = 'folder';
 						if (folder.specialUse) {
 							icon = folder.specialUse;