diff options
author | GretaD <gretadoci@gmail.com> | 2020-11-26 22:07:05 +0300 |
---|---|---|
committer | GretaD <gretadoci@gmail.com> | 2020-12-10 18:17:49 +0300 |
commit | c383f006e49665c6b283ca24070872e94c5b5b24 (patch) | |
tree | 75824b0ad332d09682eac6b8be96c5c9b961ad76 | |
parent | 9077268112749958b9a0f43f0cd8f745144055de (diff) |
Change account settings into modal
Signed-off-by: GretaD <gretadoci@gmail.com>
-rw-r--r-- | appinfo/routes.php | 5 | ||||
-rw-r--r-- | lib/Controller/PageController.php | 10 | ||||
-rw-r--r-- | src/components/AccountForm.vue | 1 | ||||
-rw-r--r-- | src/components/AccountSettings.vue | 183 | ||||
-rw-r--r-- | src/components/AliasSettings.vue | 8 | ||||
-rw-r--r-- | src/components/EditorSettings.vue | 11 | ||||
-rw-r--r-- | src/components/NavigationAccount.vue | 35 | ||||
-rw-r--r-- | src/components/SignatureSettings.vue | 16 | ||||
-rw-r--r-- | src/router.js | 6 | ||||
-rw-r--r-- | src/views/AccountSettings.vue | 103 |
10 files changed, 222 insertions, 156 deletions
diff --git a/appinfo/routes.php b/appinfo/routes.php index 3093b5c73..01af30c94 100644 --- a/appinfo/routes.php +++ b/appinfo/routes.php @@ -35,11 +35,6 @@ return [ 'verb' => 'GET' ], [ - 'name' => 'page#accountSettings', - 'url' => '/accounts/{id}/settings', - 'verb' => 'GET' - ], - [ 'name' => 'page#mailbox', 'url' => '/box/{id}', 'verb' => 'GET' diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php index 4577bc983..4091519b3 100644 --- a/lib/Controller/PageController.php +++ b/lib/Controller/PageController.php @@ -174,16 +174,6 @@ class PageController extends Controller { * * @return TemplateResponse */ - public function accountSettings(int $id): TemplateResponse { - return $this->index(); - } - - /** - * @NoAdminRequired - * @NoCSRFRequired - * - * @return TemplateResponse - */ public function mailbox(int $id): TemplateResponse { return $this->index(); } diff --git a/src/components/AccountForm.vue b/src/components/AccountForm.vue index ad5f86668..a37cc7dea 100644 --- a/src/components/AccountForm.vue +++ b/src/components/AccountForm.vue @@ -358,6 +358,7 @@ export default { flex-grow: 1; text-align: center; color: var(--color-text-lighter); + margin-bottom: 10px; } ::v-deep .tabs-component-tab.is-active { diff --git a/src/components/AccountSettings.vue b/src/components/AccountSettings.vue new file mode 100644 index 000000000..066039b17 --- /dev/null +++ b/src/components/AccountSettings.vue @@ -0,0 +1,183 @@ +<!-- + - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at> + - @copyright 2020 Greta Doci <gretadoci@gmail.com> + - + - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at> + - @author 2020 Greta Doci <gretadoci@gmail.com> + - + - + - @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> + <AppSettingsDialog + :open.sync="showSettings"> + <AppSettingsSection + :title="t('mail', 'Account settings')"> + <strong>{{ displayName }}</strong> <{{ email }}> + <a + v-if="!account.provisioned" + class="button icon-rename" + :title="t('mail', 'Change name')" + @click="handleClick" /> + <AliasSettings v-if="!account.provisioned" :account="account" /> + </AppSettingsSection> + <AppSettingsSection :title="t('mail', 'Signature')"> + <p class="settings-hint"> + {{ t('mail', 'A signature is added to the text of new messages and replies.') }} + </p> + <SignatureSettings :account="account" /> + </AppSettingsSection> + <AppSettingsSection :title="t('mail', 'Writing mode')"> + <p class="settings-hint"> + {{ t('mail', 'Preferred writing mode for new messages and replies.') }} + </p> + <EditorSettings :account="account" /> + </AppSettingsSection> + + <AppSettingsSection :title="t('mail', 'Mail server')"> + <div v-if="!account.provisioned"> + <div id="mail-settings"> + <AccountForm + :key="account.accountId" + ref="accountForm" + :display-name="displayName" + :email="email" + :save="onSave" + :account="account" /> + </div> + </div> + </AppSettingsSection> + </AppSettingsDialog> +</template> + +<script> +import AccountForm from '../components/AccountForm' +import EditorSettings from '../components/EditorSettings' +import Logger from '../logger' +import SignatureSettings from '../components/SignatureSettings' +import AliasSettings from '../components/AliasSettings' +import AppSettingsDialog from '@nextcloud/vue/dist/Components/AppSettingsDialog' +import AppSettingsSection from '@nextcloud/vue/dist/Components/AppSettingsSection' +export default { + name: 'AccountSettings', + components: { + AccountForm, + AliasSettings, + EditorSettings, + SignatureSettings, + AppSettingsDialog, + AppSettingsSection, + }, + props: { + account: { + required: true, + type: Object, + }, + open: { + required: true, + type: Boolean, + }, + }, + data() { + return { + showSettings: false, + } + }, + computed: { + menu() { + return this.buildMenu() + }, + displayName() { + return this.account.name + }, + email() { + return this.account.emailAddress + }, + }, + watch: { + showSettings(value) { + if (!value) { + this.$emit('update:open', value) + } + }, + open(value) { + if (value) { + this.showSettings = true + } + }, + }, + methods: { + onSave(data) { + Logger.log('saving data', { data }) + return this.$store + .dispatch('updateAccount', { + ...data, + accountId: this.$route.params.accountId, + }) + .then((account) => account) + .catch((error) => { + Logger.error('account update failed:', { error }) + throw error + }) + }, + handleClick() { + this.$refs.accountForm.$el.scrollIntoView({ + behavior: 'smooth', + }) + + }, + }, +} +</script> + +<style lang="scss" scoped> +::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; +} +.button.icon-rename { + background-image: var(--icon-rename-000); + background-color: var(--color-main-background); + border: none; + opacity: 0.7; + &:hover, + &:focus { + opacity: 1; + } +} +.settings-hint { + margin-top: -12px; + margin-bottom: 6px; + color: var(--color-text-maxcontrast); +} +h2 { + font-weight: bold; + font-size: 20px; + margin-bottom: 12px; + margin-left: -30px; + line-height: 30px; + color: var(--color-text-light); +} +.app-settings-section { +margin-bottom: 45px; +} + +</style> diff --git a/src/components/AliasSettings.vue b/src/components/AliasSettings.vue index 6707396c5..c7fd79025 100644 --- a/src/components/AliasSettings.vue +++ b/src/components/AliasSettings.vue @@ -130,6 +130,14 @@ input { } .icon-delete { vertical-align: bottom; + background-image: var(--icon-delete-000); + background-color: var(--color-main-background); + border: none; + opacity: 0.7; + &:hover, + &:focus { + opacity: 1; + } } .icon-add { background-image: var(--icon-add-fff); diff --git a/src/components/EditorSettings.vue b/src/components/EditorSettings.vue index fc260ba24..bc7523059 100644 --- a/src/components/EditorSettings.vue +++ b/src/components/EditorSettings.vue @@ -20,11 +20,7 @@ --> <template> - <div class="section"> - <h2>{{ t('mail', 'Writing mode') }}</h2> - <p class="settings-hint"> - {{ t('mail', 'Preferred writing mode for new messages and replies.') }} - </p> + <div> <p> <input id="plaintext" v-model="mode" @@ -85,11 +81,6 @@ export default { </script> <style lang="scss" scoped> -.settings-hint { - margin-top: -12px; - margin-bottom: 6px; - color: var(--color-text-maxcontrast); -} label { padding-right: 12px; diff --git a/src/components/NavigationAccount.vue b/src/components/NavigationAccount.vue index 20d1e56a9..e543f5656 100644 --- a/src/components/NavigationAccount.vue +++ b/src/components/NavigationAccount.vue @@ -38,9 +38,12 @@ <ActionText v-if="!account.isUnified" icon="icon-info" :title="t('mail', 'Quota')"> {{ quotaText }} </ActionText> - <ActionRouter :to="settingsRoute" icon="icon-settings"> + <ActionButton icon="icon-settings" + :close-after-click="true" + @click="showAccountSettings" + @shortkey="toggleAccountSettings"> {{ t('mail', 'Account settings') }} - </ActionRouter> + </ActionButton> <ActionCheckbox :checked="account.showSubscribedOnly" :disabled="savingShowOnlySubscribed" @@ -64,13 +67,15 @@ {{ t('mail', 'Remove account') }} </ActionButton> </template> + <template #extra> + <AccountSettings :open.sync="showSettings" :account="account" /> + </template> </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,17 +86,18 @@ import { generateUrl } from '@nextcloud/router' import { calculateAccountColor } from '../util/AccountColor' import logger from '../logger' import { fetchQuota } from '../service/AccountService' +import AccountSettings from './AccountSettings' export default { name: 'NavigationAccount', components: { AppNavigationItem, AppNavigationIconBullet, - ActionRouter, ActionButton, ActionCheckbox, ActionInput, ActionText, + AccountSettings, }, props: { account: { @@ -121,20 +127,13 @@ export default { quota: undefined, editing: false, showSaving: false, + showSettings: 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', @@ -267,6 +266,18 @@ export default { this.quota = quota } }, + /** + * Toggles the account settings overview + */ + toggleAccountSettings() { + this.displayAccountSettings = !this.displayAccountSettings + }, + /** + * Shows the account settings + */ + showAccountSettings() { + this.showSettings = true + }, }, } </script> diff --git a/src/components/SignatureSettings.vue b/src/components/SignatureSettings.vue index 1d399859d..b8cbbeeca 100644 --- a/src/components/SignatureSettings.vue +++ b/src/components/SignatureSettings.vue @@ -21,10 +21,6 @@ <template> <div class="section"> - <h2>{{ t('mail', 'Signature') }}</h2> - <p class="settings-hint"> - {{ t('mail', 'A signature is added to the text of new messages and replies.') }} - </p> <TextEditor v-model="signature" :html="true" :placeholder="t('mail', 'Signature …')" @@ -103,14 +99,9 @@ export default { </script> <style lang="scss" scoped> -.settings-hint { - margin-top: -12px; - margin-bottom: 6px; - color: var(--color-text-maxcontrast); -} .ck.ck-editor__editable_inline { - width: 400px; + width: 330px; max-width: 78vw; height: 100px; border-radius: var(--border-radius) !important; @@ -139,4 +130,9 @@ export default { color: var(--color-main-text); } } +.section { + display: block; + padding: 0; + margin-bottom: 23px; +} </style> diff --git a/src/router.js b/src/router.js index 5b00f696a..313b83116 100644 --- 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') @@ -34,11 +33,6 @@ export default new Router({ component: Home, }, { - path: '/accounts/:accountId/settings', - name: 'accountSettings', - component: AccountSettings, - }, - { path: '/setup', name: 'setup', component: Setup, diff --git a/src/views/AccountSettings.vue b/src/views/AccountSettings.vue deleted file mode 100644 index 2df04e4bd..000000000 --- a/src/views/AccountSettings.vue +++ /dev/null @@ -1,103 +0,0 @@ -<template> - <Content app-name="mail"> - <Navigation /> - <AppContent> - <div class="section"> - <h2>{{ t('mail', 'Account settings') }}</h2> - <p> - <strong>{{ displayName }}</strong> <{{ email }}> - <a - v-if="!account.provisioned" - class="button icon-rename" - href="#account-form" - :title="t('mail', 'Change name')" /> - </p> - <AliasSettings v-if="!account.provisioned" :key="'alias-settings-' + account.id" :account="account" /> - </div> - <SignatureSettings :key="'signature-settings-' + account.id" :account="account" /> - <EditorSettings :key="'editor-settings-' + account.id" :account="account" /> - <AccountDefaultsSettings :key="'defaults-settings-' + account.id" :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> -</template> - -<script> -import AppContent from '@nextcloud/vue/dist/Components/AppContent' -import Content from '@nextcloud/vue/dist/Components/Content' - -import AccountDefaultsSettings from '../components/AccountDefaultsSettings' -import AccountForm from '../components/AccountForm' -import AliasSettings from '../components/AliasSettings' -import EditorSettings from '../components/EditorSettings' -import Logger from '../logger' -import Navigation from '../components/Navigation' -import SignatureSettings from '../components/SignatureSettings' - -export default { - name: 'AccountSettings', - components: { - AccountDefaultsSettings, - AccountForm, - AliasSettings, - AppContent, - Content, - EditorSettings, - Navigation, - SignatureSettings, - }, - 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 - }, - }, - methods: { - onSave(data) { - Logger.log('saving data', { data }) - return this.$store - .dispatch('updateAccount', { - ...data, - accountId: this.$route.params.accountId, - }) - .then((account) => account) - .catch((error) => { - Logger.error('account update failed:', { error }) - - throw error - }) - }, - }, -} -</script> - -<style lang="scss" scoped> -.button.icon-rename { - background-color: transparent; - border: none; - opacity: 0.3; - - &:hover, - &:focus { - opacity: 1; - } -} -</style> |