Change account settings to modal

Signed-off-by: GretaD <gretadoci@gmail.com>
nextcloud · Sep 9, 2020 · a0e9cbe · a0e9cbe
1 parent 7dd7177
commit a0e9cbe
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 64 deletions.
diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php
@@ -166,16 +166,6 @@ public function setup(): TemplateResponse {
 		return $this->index();
 	}
 
-	/**
-	 * @NoAdminRequired
-	 * @NoCSRFRequired
-	 *
-	 * @return TemplateResponse
-	 */
-	public function accountSettings(int $id): TemplateResponse {
-		return $this->index();
-	}
-
 	/**
 	 * @NoAdminRequired
 	 * @NoCSRFRequired

diff --git a/src/components/NavigationAccount.vue b/src/components/NavigationAccount.vue
@@ -38,9 +38,9 @@
 			<ActionText v-if="!account.isUnified" icon="icon-info" :title="t('mail', 'Quota')">
 				{{ quotaText }}
 			</ActionText>
-			<ActionRouter :to="settingsRoute" icon="icon-settings">
+			<ActionButton icon="icon-settings" @click="showAccountSettings" @shortkey="toggleAccountSettings">
 				{{ t('mail', 'Account settings') }}
-			</ActionRouter>
+			</ActionButton>
 			<ActionCheckbox
 				:checked="account.showSubscribedOnly"
 				:disabled="savingShowOnlySubscribed"
@@ -64,13 +64,13 @@
 				{{ t('mail', 'Remove account') }}
 			</ActionButton>
 		</template>
+		<AccountSettings v-if="displayAccountSettings" @close="closeAccountSettings" />
 	</AppNavigationItem>
 </template>
 
 <script>
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import AppNavigationIconBullet from '@nextcloud/vue/dist/Components/AppNavigationIconBullet'
-import ActionRouter from '@nextcloud/vue/dist/Components/ActionRouter'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
 import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
@@ -81,13 +81,14 @@ import { generateUrl } from '@nextcloud/router'
 import { calculateAccountColor } from '../util/AccountColor'
 import logger from '../logger'
 import { fetchQuota } from '../service/AccountService'
+import AccountSettings from '../views/AccountSettings'
 
 export default {
 	name: 'NavigationAccount',
 	components: {
+		AccountSettings,
 		AppNavigationItem,
 		AppNavigationIconBullet,
-		ActionRouter,
 		ActionButton,
 		ActionCheckbox,
 		ActionInput,
@@ -121,20 +122,13 @@ export default {
 			quota: undefined,
 			editing: false,
 			showSaving: false,
+			displayAccountSettings: false,
 		}
 	},
 	computed: {
 		visible() {
 			return this.account.isUnified !== true && this.account.visible !== false
 		},
-		settingsRoute() {
-			return {
-				name: 'accountSettings',
-				params: {
-					accountId: this.account.id,
-				},
-			}
-		},
 		firstMailboxRoute() {
 			return {
 				name: 'mailbox',
@@ -269,6 +263,25 @@ export default {
 				this.quota = quota
 			}
 		},
+		/**
+		 * Hide the account settings overview
+		 */
+		closeAccountSettings() {
+			this.displayAccountSettings = false
+		},
+		/**
+		 * Toggles the account settings overview
+		 */
+		toggleAccountSettings() {
+			this.displayAccountSettings = !this.displayAccountSettings
+		},
+		/**
+		 * Shows the account settings
+		 */
+		showAccountSettings() {
+			this.displayAccountSettings = true
+
+		},
 	},
 }
 </script>
diff --git a/src/router.js b/src/router.js
@@ -2,7 +2,6 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import { generateUrl } from '@nextcloud/router'
 
-const AccountSettings = () => import('./views/AccountSettings')
 const Home = () => import('./views/Home')
 const Setup = () => import('./views/Setup')
 
@@ -33,11 +32,6 @@ export default new Router({
 			name: 'message',
 			component: Home,
 		},
-		{
-			path: '/accounts/:accountId/settings',
-			name: 'accountSettings',
-			component: AccountSettings,
-		},
 		{
 			path: '/setup',
 			name: 'setup',

diff --git a/src/views/AccountSettings.vue b/src/views/AccountSettings.vue
@@ -1,57 +1,50 @@
 <template>
-	<Content app-name="mail">
-		<Navigation />
-		<AppContent>
-			<div class="section">
-				<h2>{{ t('mail', 'Account settings') }}</h2>
-				<p>
-					<strong>{{ displayName }}</strong> &lt;{{ email }}&gt;
-					<a
-						v-if="!account.provisioned"
-						class="button icon-rename"
-						href="#account-form"
-						:title="t('mail', 'Change name')" />
-				</p>
-				<AliasSettings v-if="!account.provisioned" :account="account" />
+	<Modal
+		size="full"
+		:title="t('mail', 'Account settings')"
+		@close="$emit('close')">
+		<h2>{{ t('mail', 'Account settings') }}</h2>
+		<p>
+			<strong>{{ displayName }}</strong> &lt;{{ email }}&gt;
+			<a
+				v-if="!account.provisioned"
+				class="button icon-rename"
+				href="#account-form"
+				:title="t('mail', 'Change name')" />
+		</p>
+		<AliasSettings v-if="!account.provisioned" :account="account" />
+		<SignatureSettings :account="account" />
+		<EditorSettings :account="account" />
+		<div v-if="!account.provisioned" class="section">
+			<h2>{{ t('mail', 'Mail server') }}</h2>
+			<div id="mail-settings">
+				<AccountForm
+					:key="account.accountId"
+					:display-name="displayName"
+					:email="email"
+					:save="onSave"
+					:account="account" />
 			</div>
-			<SignatureSettings :account="account" />
-			<EditorSettings :account="account" />
-			<div v-if="!account.provisioned" class="section">
-				<h2>{{ t('mail', 'Mail server') }}</h2>
-				<div id="mail-settings">
-					<AccountForm
-						:key="account.accountId"
-						:display-name="displayName"
-						:email="email"
-						:save="onSave"
-						:account="account" />
-				</div>
-			</div>
-		</AppContent>
-	</Content>
+		</div>
+	</Modal>
 </template>
 
 <script>
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import Content from '@nextcloud/vue/dist/Components/Content'
-
 import AccountForm from '../components/AccountForm'
 import EditorSettings from '../components/EditorSettings'
 import Logger from '../logger'
-import Navigation from '../components/Navigation'
 import SignatureSettings from '../components/SignatureSettings'
 import AliasSettings from '../components/AliasSettings'
+import Modal from '@nextcloud/vue/dist/Components/Modal'
 
 export default {
 	name: 'AccountSettings',
 	components: {
 		AccountForm,
 		AliasSettings,
-		AppContent,
-		Content,
 		EditorSettings,
-		Navigation,
 		SignatureSettings,
+		Modal,
 	},
 	computed: {
 		menu() {
@@ -97,4 +90,12 @@ export default {
 		opacity: 1;
 	}
 }
+::v-deep .modal-container {
+	display: block;
+	overflow: scroll;
+	transition: transform 300ms ease;
+	border-radius: var(--border-radius-large);
+	box-shadow: 0 0 40px rgba(0,0,0,0.2);
+	padding: 30px 70px 20px;
+}
 </style>