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" > -