Change account settings to modal

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

Hide file tree

Showing 2 changed files with 53 additions and 38 deletions.
diff --git a/src/components/NavigationAccount.vue b/src/components/NavigationAccount.vue
@@ -41,6 +41,7 @@
 			<ActionRouter :to="settingsRoute" icon="icon-settings">
 				{{ t('mail', 'Account settings') }}
 			</ActionRouter>
+			<AccountSettings v-if="displayAccountSettings" @close="closeAccountSettings" />
 			<ActionCheckbox
 				:checked="account.showSubscribedOnly"
 				:disabled="savingShowOnlySubscribed"
@@ -70,7 +71,6 @@
 <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,6 +122,7 @@ export default {
 			quota: undefined,
 			editing: false,
 			showSaving: false,
+			displayAccountSettings: false,
 		}
 	},
 	computed: {
@@ -269,6 +271,18 @@ export default {
 				this.quota = quota
 			}
 		},
+		/**
+		 * Hide the keyboard shortcuts overview
+		 */
+		closeAccountSettings() {
+			this.displayAccountSettings = false
+		},
+		/**
+		 * Toggles the keyboard shortcuts overview
+		 */
+		toggleAccountSettings() {
+			this.displayAccountSettings = !this.displayAccountSettings
+		},
 	},
 }
 </script>
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>