split modal's content into another component, add lazy loading

This commit is contained in:
Henry Jameson 2020-05-25 03:14:41 +03:00
parent a872c53472
commit 1e606d2f26
6 changed files with 200 additions and 175 deletions

View file

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