AkkomaGang/admin-fe
6
2
Fork 9
Code Issues 5 Pull requests 2 Projects Releases Wiki Activity

Add select menu for mobile UI

Browse source
This commit is contained in:
Angelina Filippova 2020-02-06 19:53:30 +03:00
parent d4be7d2643
commit cbc60e64a1
1 changed files with 100 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
src/views/settings/index.vue
View file

@ -1,72 +1,101 @@
<template>
<div class="settings-container">
<h1>{{ $t('settings.settings') }}</h1>
<el-tabs v-model="activeTab" :tab-position="tabPosition">
<el-tab-pane :label="$t('settings.activityPub')" :disabled="configDisabled" lazy>
<h1 class="settings-header">{{ $t('settings.settings') }}</h1>
<el-tabs v-if="isDesktop" v-model="activeTab" tab-position="left">
<el-tab-pane :label="$t('settings.activityPub')" :disabled="configDisabled" name="activityPub" lazy>
<activity-pub/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.auth')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.auth')" :disabled="configDisabled" name="auth" lazy>
<authentication/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.autoLinker')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.autoLinker')" :disabled="configDisabled" name="autoLinker" lazy>
<auto-linker/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.esshd')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.esshd')" :disabled="configDisabled" name="esshd" lazy>
<esshd/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.captcha')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.captcha')" :disabled="configDisabled" name="captcha" lazy>
<captcha/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.frontend')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.frontend')" :disabled="configDisabled" name="frontend" lazy>
<frontend/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.gopher')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.gopher')" :disabled="configDisabled" name="gopher" lazy>
<gopher/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.http')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.http')" :disabled="configDisabled" name="http" lazy>
<http/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.instance')" :disabled="configDisabled" name="instance">
<instance/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.jobQueue')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.jobQueue')" :disabled="configDisabled" name="jobQueue" lazy>
<job-queue/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.logger')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.logger')" :disabled="configDisabled" name="logger" lazy>
<logger/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.mailer')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.mailer')" :disabled="configDisabled" name="mailer" lazy>
<mailer/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.mediaProxy')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.mediaProxy')" :disabled="configDisabled" name="mediaProxy" lazy>
<media-proxy/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.metadata')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.metadata')" :disabled="configDisabled" name="metadata" lazy>
<metadata/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.mrf')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.mrf')" :disabled="configDisabled" name="mrf" lazy>
<mrf/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.rateLimiters')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.rateLimiters')" :disabled="configDisabled" name="rateLimiters" lazy>
<rate-limiters/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.relays')" lazy name="relays">
<relays/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.webPush')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.webPush')" :disabled="configDisabled" name="webPush" lazy>
<web-push/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.upload')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.upload')" :disabled="configDisabled" name="upload" lazy>
<upload/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.other')" :disabled="configDisabled" lazy>
<el-tab-pane :label="$t('settings.other')" :disabled="configDisabled" name="other" lazy>
<other/>
</el-tab-pane>
</el-tabs>
<el-select v-if="isMobile" v-model="activeTab" class="settings-menu" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="configDisabled"/>
</el-select>
<activity-pub v-if="activeTab === 'activityPub'"/>
<authentication v-if="activeTab === 'auth'"/>
<auto-linker v-if="activeTab === 'autoLinker'"/>
<esshd v-if="activeTab === 'esshd'"/>
<captcha v-if="activeTab === 'captcha'"/>
<frontend v-if="activeTab === 'frontend'"/>
<gopher v-if="activeTab === 'gopher'"/>
<http v-if="activeTab === 'http'"/>
<instance v-if="activeTab === 'instance'"/>
<job-queue v-if="activeTab === 'jobQueue'"/>
<logger v-if="activeTab === 'logger'"/>
<mailer v-if="activeTab === 'mailer'"/>
<media-proxy v-if="activeTab === 'mediaProxy'"/>
<metadata v-if="activeTab === 'metadata'"/>
<mrf v-if="activeTab === 'mrf'"/>
<rate-limiters v-if="activeTab === 'rateLimiters'"/>
<relays v-if="activeTab === 'relays'"/>
<web-push v-if="activeTab === 'webPush'"/>
<upload v-if="activeTab === 'upload'"/>
<other v-if="activeTab === 'other'"/>
</div>
</template>
<script>
import i18n from '@/lang'
import {
ActivityPub,
Authentication,
@ -113,6 +142,32 @@ export default {
Upload,
WebPush
},
data() {
return {
options: [
{ value: 'activityPub', label: i18n.t('settings.activityPub') },
{ value: 'auth', label: i18n.t('settings.auth') },
{ value: 'autoLinker', label: i18n.t('settings.autoLinker') },
{ value: 'esshd', label: i18n.t('settings.esshd') },
{ value: 'captcha', label: i18n.t('settings.captcha') },
{ value: 'frontend', label: i18n.t('settings.frontend') },
{ value: 'gopher', label: i18n.t('settings.gopher') },
{ value: 'http', label: i18n.t('settings.http') },
{ value: 'instance', label: i18n.t('settings.instance') },
{ value: 'jobQueue', label: i18n.t('settings.jobQueue') },
{ value: 'logger', label: i18n.t('settings.logger') },
{ value: 'mailer', label: i18n.t('settings.mailer') },
{ value: 'mediaProxy', label: i18n.t('settings.mediaProxy') },
{ value: 'metadata', label: i18n.t('settings.metadata') },
{ value: 'mrf', label: i18n.t('settings.mrf') },
{ value: 'rateLimiters', label: i18n.t('settings.rateLimiters') },
{ value: 'relays', label: i18n.t('settings.relays') },
{ value: 'webPush', label: i18n.t('settings.webPush') },
{ value: 'upload', label: i18n.t('settings.upload') },
{ value: 'other', label: i18n.t('settings.other') }
]
}
},
computed: {
activeTab: {
get() {
@ -125,6 +180,9 @@ export default {
configDisabled() {
return this.$store.state.settings.configDisabled
},
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
isMobile() {
return this.$store.state.app.device === 'mobile'
},
@ -139,18 +197,29 @@ export default {
</script>
<style rel='stylesheet/scss' lang='scss' scoped>
.settings-container {
.el-tabs {
margin-top: 20px
}
}
.settings-header {
margin: 22px 0 0 15px;
}
@media only screen and (min-width: 1824px) {
.settings-container {
.el-tabs {
margin-top: 20px
}
h1 {
margin: 22px 0 0 15px;
}
max-width: 1824px;
margin: auto;
}
@media only screen and (min-width: 1824px) {
.settings-container {
max-width: 1824px;
margin: auto;
}
}
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.settings-header {
margin: 7px 10px 15px 10px;
}
.settings-menu {
margin: 0 0 15px 10px;
width: 45%;
}
}
</style>