diff options
6 files changed, 200 insertions, 175 deletions
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js index d60babf6..8f55af71 100644 --- a/src/components/settings_modal/settings_modal.js +++ b/src/components/settings_modal/settings_modal.js @@ -1,40 +1,11 @@ import Modal from 'src/components/modal/modal.vue' -import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' - -import DataImportExportTab from './tabs/data_import_export_tab.vue' -import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue' -import NotificationsTab from './tabs/notifications_tab.vue' -import FilteringTab from './tabs/filtering_tab.vue' -import SecurityTab from './tabs/security_tab/security_tab.vue' -import ProfileTab from './tabs/profile_tab.vue' -import GeneralTab from './tabs/general_tab.vue' -import VersionTab from './tabs/version_tab.vue' -import ThemeTab from './tabs/theme_tab/theme_tab.vue' const SettingsModal = { components: { Modal, - TabSwitcher, - - DataImportExportTab, - MutesAndBlocksTab, - NotificationsTab, - FilteringTab, - SecurityTab, - ProfileTab, - GeneralTab, - VersionTab, - ThemeTab - }, - data () { - return { - resettingForm: false - } + SettingsModalContent: () => import('./settings_modal_content.vue') }, computed: { - isLoggedIn () { - return !!this.$store.state.users.currentUser - }, modalActivated () { return this.$store.state.interface.settingsModalState !== 'hidden' }, @@ -42,8 +13,6 @@ const SettingsModal = { return this.$store.state.interface.settingsModalState === 'minimized' } }, - watch: { - }, methods: { closeModal () { this.$store.dispatch('closeSettingsModal') diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss index b82590a7..ece96364 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -2,11 +2,8 @@ .settings-modal { overflow: hidden; - .settings_tab-switcher { - height: 100%; - } &.peek { - .settings-modal-panel { + .modal-panel { /* Explanation: * Modal is positioned vertically centered. * 100vh - 100% = Distance between modal's top+bottom boundaries and screen @@ -18,70 +15,4 @@ transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px)); } } - - .settings-modal-panel { - transition: transform; - transition-timing-function: ease-in-out; - transition-duration: 300ms; - width: 1000px; - max-width: 90vw; - height: 90vh; - @media all and (max-width: 800px) { - max-width: 100vw; - height: 100vh; - } - } - .panel-body { - height: 100%; - overflow-y: hidden; - - .btn { - min-height: 28px; - min-width: 10em; - padding: 0 2em; - } - } - - .full-height { - height: 100%; - } - - .setting-item { - border-bottom: 2px solid var(--fg, $fallback--fg); - margin: 1em 1em 1.4em; - padding-bottom: 1.4em; - - > div { - margin-bottom: .5em; - &:last-child { - margin-bottom: 0; - } - } - - &:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 1em; - } - - select { - min-width: 10em; - } - - textarea { - width: 100%; - max-width: 100%; - height: 100px; - } - - .unavailable, - .unavailable i { - color: var(--cRed, $fallback--cRed); - color: $fallback--cRed; - } - - .number-input { - max-width: 6em; - } - } } diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue index 741c15c4..b9c0689e 100644 --- a/src/components/settings_modal/settings_modal.vue +++ b/src/components/settings_modal/settings_modal.vue @@ -5,79 +5,10 @@ :class="{ peek: modalPeeked }" :no-background="modalPeeked" > - <div class="settings-modal-panel panel"> - <div class="panel-heading"> - <span class="title"> - {{ $t('settings.settings') }} - </span> - <button class="btn" @click="peekModal"> - {{ $t('general.peek') }} - </button> - <button class="btn" @click="closeModal"> - {{ $t('general.close') }} - </button> - </div> - <div class="panel-body"> - <tab-switcher - class="settings_tab-switcher" - :sideTabBar="true" - :scrollableTabs="true" - ref="tabSwitcher" - > - <div - :label="$t('settings.general')" - > - <GeneralTab /> - </div> - <div v-if="isLoggedIn" - :label="$t('settings.profile_tab')" - > - <ProfileTab /> - </div> - <div - v-if="isLoggedIn" - :label="$t('settings.security_tab')" - > - <SecurityTab /> - </div> - <div - :label="$t('settings.filtering')" - > - <FilteringTab /> - </div> - <div - :label="$t('settings.theme')" - > - <ThemeTab /> - </div> - <div - v-if="isLoggedIn" - :label="$t('settings.notifications')" - > - <NotificationsTab /> - </div> - <div - v-if="isLoggedIn" - :label="$t('settings.data_import_export_tab')" - > - <DataImportExportTab /> - </div> - <div - v-if="isLoggedIn" - :label="$t('settings.mutes_and_blocks')" - :fullHeight="true" - class="full-height" - > - <MutesAndBlocksTab /> - </div> - <div - :label="$t('settings.version.title')" - > - <VersionTab /> - </div> - </tab-switcher> - </div> - </div> + <SettingsModalContent + v-if="modalActivated" + class="modal-panel" + /> </Modal> </template> diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js new file mode 100644 index 00000000..bd8df672 --- /dev/null +++ b/src/components/settings_modal/settings_modal_content.js @@ -0,0 +1,42 @@ +import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' + +import DataImportExportTab from './tabs/data_import_export_tab.vue' +import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue' +import NotificationsTab from './tabs/notifications_tab.vue' +import FilteringTab from './tabs/filtering_tab.vue' +import SecurityTab from './tabs/security_tab/security_tab.vue' +import ProfileTab from './tabs/profile_tab.vue' +import GeneralTab from './tabs/general_tab.vue' +import VersionTab from './tabs/version_tab.vue' +import ThemeTab from './tabs/theme_tab/theme_tab.vue' + +const SettingsModalContent = { + components: { + TabSwitcher, + + DataImportExportTab, + MutesAndBlocksTab, + NotificationsTab, + FilteringTab, + SecurityTab, + ProfileTab, + GeneralTab, + VersionTab, + ThemeTab + }, + computed: { + isLoggedIn () { + return !!this.$store.state.users.currentUser + } + }, + methods: { + closeModal () { + this.$store.dispatch('closeSettingsModal') + }, + peekModal () { + this.$store.dispatch('togglePeekSettingsModal') + } + } +} + +export default SettingsModalContent diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss new file mode 100644 index 00000000..92e167a2 --- /dev/null +++ b/src/components/settings_modal/settings_modal_content.scss @@ -0,0 +1,73 @@ +@import 'src/_variables.scss'; + +.settings-modal-panel { + overflow: hidden; + transition: transform; + transition-timing-function: ease-in-out; + transition-duration: 300ms; + width: 1000px; + max-width: 90vw; + height: 90vh; + + @media all and (max-width: 800px) { + max-width: 100vw; + height: 100vh; + } + + .settings_tab-switcher { + height: 100%; + } + .panel-body { + height: 100%; + overflow-y: hidden; + + .btn { + min-height: 28px; + min-width: 10em; + padding: 0 2em; + } + } + + .full-height { + height: 100%; + } + + .setting-item { + border-bottom: 2px solid var(--fg, $fallback--fg); + margin: 1em 1em 1.4em; + padding-bottom: 1.4em; + + > div { + margin-bottom: .5em; + &:last-child { + margin-bottom: 0; + } + } + + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 1em; + } + + select { + min-width: 10em; + } + + textarea { + width: 100%; + max-width: 100%; + height: 100px; + } + + .unavailable, + .unavailable i { + color: var(--cRed, $fallback--cRed); + color: $fallback--cRed; + } + + .number-input { + max-width: 6em; + } + } +} diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue new file mode 100644 index 00000000..1778c23b --- /dev/null +++ b/src/components/settings_modal/settings_modal_content.vue @@ -0,0 +1,79 @@ +<template> + <div class="settings-modal-panel panel"> + <div class="panel-heading"> + <span class="title"> + {{ $t('settings.settings') }} + </span> + <button class="btn" @click="peekModal"> + {{ $t('general.peek') }} + </button> + <button class="btn" @click="closeModal"> + {{ $t('general.close') }} + </button> + </div> + <div class="panel-body"> + <tab-switcher + class="settings_tab-switcher" + :sideTabBar="true" + :scrollableTabs="true" + ref="tabSwitcher" + > + <div + :label="$t('settings.general')" + > + <GeneralTab /> + </div> + <div v-if="isLoggedIn" + :label="$t('settings.profile_tab')" + > + <ProfileTab /> + </div> + <div + v-if="isLoggedIn" + :label="$t('settings.security_tab')" + > + <SecurityTab /> + </div> + <div + :label="$t('settings.filtering')" + > + <FilteringTab /> + </div> + <div + :label="$t('settings.theme')" + > + <ThemeTab /> + </div> + <div + v-if="isLoggedIn" + :label="$t('settings.notifications')" + > + <NotificationsTab /> + </div> + <div + v-if="isLoggedIn" + :label="$t('settings.data_import_export_tab')" + > + <DataImportExportTab /> + </div> + <div + v-if="isLoggedIn" + :label="$t('settings.mutes_and_blocks')" + :fullHeight="true" + class="full-height" + > + <MutesAndBlocksTab /> + </div> + <div + :label="$t('settings.version.title')" + > + <VersionTab /> + </div> + </tab-switcher> + </div> + </div> +</template> + +<script src="./settings_modal_content.js"></script> + +<style src="./settings_modal_content.scss" lang="scss"></style> |