split modal's content into another component, add lazy loading
This commit is contained in:
Henry Jameson
parent
a872c53472
commit
1e606d2f26
@ -1,40 +1,11 @@
|
|||||||
import Modal from 'src/components/modal/modal.vue'
|
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 = {
|
const SettingsModal = {
|
||||||
components: {
|
components: {
|
||||||
Modal,
|
Modal,
|
||||||
TabSwitcher,
|
SettingsModalContent: () => import('./settings_modal_content.vue')
|
||||||
|
|
||||||
DataImportExportTab,
|
|
||||||
MutesAndBlocksTab,
|
|
||||||
NotificationsTab,
|
|
||||||
FilteringTab,
|
|
||||||
SecurityTab,
|
|
||||||
ProfileTab,
|
|
||||||
GeneralTab,
|
|
||||||
VersionTab,
|
|
||||||
ThemeTab
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
resettingForm: false
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
isLoggedIn () {
|
|
||||||
return !!this.$store.state.users.currentUser
|
|
||||||
},
|
|
||||||
modalActivated () {
|
modalActivated () {
|
||||||
return this.$store.state.interface.settingsModalState !== 'hidden'
|
return this.$store.state.interface.settingsModalState !== 'hidden'
|
||||||
},
|
},
|
||||||
@ -42,8 +13,6 @@ const SettingsModal = {
|
|||||||
return this.$store.state.interface.settingsModalState === 'minimized'
|
return this.$store.state.interface.settingsModalState === 'minimized'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
closeModal () {
|
closeModal () {
|
||||||
this.$store.dispatch('closeSettingsModal')
|
this.$store.dispatch('closeSettingsModal')
|
||||||
|
|||||||
@ -2,11 +2,8 @@
|
|||||||
.settings-modal {
|
.settings-modal {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.settings_tab-switcher {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
&.peek {
|
&.peek {
|
||||||
.settings-modal-panel {
|
.modal-panel {
|
||||||
/* Explanation:
|
/* Explanation:
|
||||||
* Modal is positioned vertically centered.
|
* Modal is positioned vertically centered.
|
||||||
* 100vh - 100% = Distance between modal's top+bottom boundaries and screen
|
* 100vh - 100% = Distance between modal's top+bottom boundaries and screen
|
||||||
@ -18,70 +15,4 @@
|
|||||||
transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,79 +5,10 @@
|
|||||||
:class="{ peek: modalPeeked }"
|
:class="{ peek: modalPeeked }"
|
||||||
:no-background="modalPeeked"
|
:no-background="modalPeeked"
|
||||||
>
|
>
|
||||||
<div class="settings-modal-panel panel">
|
<SettingsModalContent
|
||||||
<div class="panel-heading">
|
v-if="modalActivated"
|
||||||
<span class="title">
|
class="modal-panel"
|
||||||
{{ $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>
|
|
||||||
</Modal>
|
</Modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
42
src/components/settings_modal/settings_modal_content.js
Normal file
42
src/components/settings_modal/settings_modal_content.js
Normal file
@ -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
|
||||||
73
src/components/settings_modal/settings_modal_content.scss
Normal file
73
src/components/settings_modal/settings_modal_content.scss
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
79
src/components/settings_modal/settings_modal_content.vue
Normal file
79
src/components/settings_modal/settings_modal_content.vue
Normal file
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user