Merge pull request #1081 from nextcloud/enhancement/new-message-component-view

Add a new view and component for the "new message" composer

js/components/FolderContent.vue

@@ -2,19 +2,17 @@
 	<div id="app-content">
 		<div id="app-content-wrapper">
 			<MessageList/>
-			<Message/>
+			<slot/>
 		</div>
 	</div>
 </template>
 
 <script>
-	import Message from "./Message";
 	import MessageList from "./MessageList";
 
 	export default {
 		name: "FolderContent",
 		components: {
-			Message,
 			MessageList
 		}
 	}

js/components/NewMessageDetail.vue

+<template>
+	<div class="app-content-details">
+		<Composer :draft="saveDraft"
+				  :send="sendMessage"/>
+	</div>
+</template>
+
+<script>
+	import Composer from "./Composer";
+
+	export default {
+		name: "NewMessageDetail",
+		components: {
+			Composer
+		},
+		methods: {
+			saveDraft () {
+				console.info('saving new draft');
+				return Promise.resolve();
+			},
+			sendMessage () {
+				console.info('sending message');
+				console.info('sending message');
+				return Promise.resolve();
+			}
+		}
+	}
+</script>

js/mixins/SidebarItems.js

+import chain from "ramda/es/chain";
+
+export default {
+	methods: {
+		buildMenu (accounts) {
+			const items = chain(account => {
+				let items = []
+
+				if (account.visible !== false) {
+					items.push({
+						id: 'account' + account.id,
+						key: 'account' + account.id,
+						text: account.name,
+						bullet: account.bullet // TODO
+					})
+				}
+
+				return items.concat(account.folders.map(folder => {
+					let icon = 'folder';
+					if (folder.specialUse) {
+						icon = folder.specialUse;
+					}
+
+					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,
+							}
+						},
+						utils: {
+							counter: folder.unread,
+						}
+					}
+				}))
+			}, accounts);
+
+			return {
+				id: 'accounts-list',
+				new: {
+					'id': 'mail_new_message',
+					text: t('mail', 'New message'),
+					icon: 'icon-add',
+					action: () => {
+						this.$router.push('/new');
+					}
+				},
+				items: items,
+				utils: {
+					counter: 0
+				}
+			}
+		}
+	}
+}

js/router.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 import Home from './views/Home'
+import NewMessage from './views/NewMessage';
 import Setup from './views/Setup';
 
 Vue.use(Router)
@@ -15,6 +16,11 @@ export default new Router({
 			name: 'home',
 			component: Home
 		},
+		{
+			path: '/new',
+			name: 'newMessage',
+			component: NewMessage
+		},
 		{
 			path: '/accounts/:accountId/folders/:folderId',
 			name: 'folder',
@@ -26,4 +32,4 @@ export default new Router({
 			component: Setup
 		}
 	]
-})
+});

js/views/Home.vue

 <template>
 	<div id="content" class="mail">
 		<app-navigation :menu="menu">
-			<AppSettingsMenu slot="settings-content" />
+			<AppSettingsMenu slot="settings-content"/>
 		</app-navigation>
-		<FolderContent />
+		<FolderContent>
+			<Message/>
+		</FolderContent>
 	</div>
 </template>
 
 <script>
-	import chain from "ramda/es/chain";
-
 	import AppNavigation from "../components/core/appNavigation";
 	import AppSettingsMenu from "../components/AppSettingsMenu";
-	import FolderContent from "../components/FolderContent"
+	import FolderContent from "../components/FolderContent";
+	import Message from "../components/Message";
+
+	import SidebarItems from "../mixins/SidebarItems";
 
 	export default {
 		name: 'home',
+		extends: SidebarItems,
 		components: {
+			AppNavigation,
 			AppSettingsMenu,
 			FolderContent,
-			AppNavigation
+			Message,
 		},
 		computed: {
 			menu () {
-				const items = chain(account => {
-					let items = []
-
-					if (account.visible !== false) {
-						items.push({
-							id: 'account' + account.id,
-							key: 'account' + account.id,
-							text: account.name,
-							bullet: account.bullet // TODO
-						})
-					}
-
-					return items.concat(account.folders.map(folder => {
-						let icon = 'folder';
-						if (folder.specialUse) {
-							icon = folder.specialUse;
-						}
-
-						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,
-								}
-							},
-							utils: {
-								counter: folder.unread,
-							}
-						}
-					}))
-				}, this.$store.state.accounts);
-
-				return {
-					id: 'accounts-list',
-					new: {
-						'id': 'mail_new_message',
-						text: t('mail', 'New message'),
-						icon: 'icon-add',
-						action: this.newMessage
-					},
-					items: items,
-					utils: {
-						counter: 0
-					}
-				}
-			}
-		},
-		methods: {
-			newMessage () {
-				console.info('New message clicked');
+				return this.buildMenu(this.$store.state.accounts);
 			}
 		}
-	}
+	};
 </script>

js/views/NewMessage.vue

+<template>
+	<div id="content" class="mail">
+		<app-navigation :menu="menu">
+			<AppSettingsMenu slot="settings-content"/>
+		</app-navigation>
+		<FolderContent>
+			<NewMessageDetail/>
+		</FolderContent>
+	</div>
+</template>
+
+<script>
+	import AppNavigation from "../components/core/appNavigation";
+	import AppSettingsMenu from "../components/AppSettingsMenu";
+	import FolderContent from "../components/FolderContent";
+
+	import SidebarItems from "../mixins/SidebarItems";
+	import NewMessageDetail from "../components/NewMessageDetail";
+
+	export default {
+		name: 'home',
+		extends: SidebarItems,
+		components: {
+			NewMessageDetail,
+			AppNavigation,
+			AppSettingsMenu,
+			FolderContent,
+		},
+		computed: {
+			menu () {
+				return this.buildMenu(this.$store.state.accounts);
+			}
+		}
+	};
+</script>