qbism/qb-admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Packages Projects Releases Wiki Activity

Change styles for settting inputs for mobile ui

Browse source
This commit is contained in:
Angelina Filippova 2020-02-06 21:01:54 +03:00
parent cbc60e64a1
commit 3a8132da7a
23 changed files with 160 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/views/emojiPacks/index.vue
View file

@ -72,7 +72,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '240px'
return this.isMobile ? '120px' : '240px'
},
localPacks() {
return this.$store.state.emojiPacks.localPacks

2
src/views/settings/components/ActivityPub.vue
View file

@ -36,7 +36,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.$store.state.settings.loading

2
src/views/settings/components/Authentication.vue
View file

@ -44,7 +44,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
ldap() {
return this.settings.description.find(setting => setting.key === ':ldap')

2
src/views/settings/components/AutoLinker.vue
View file

@ -32,7 +32,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/Captcha.vue
View file

@ -42,7 +42,7 @@ export default {
return _.get(this.settings.settings, [':pleroma', 'Pleroma.Captcha.Kocaptcha']) || {}
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/Esshd.vue
View file

@ -32,7 +32,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/Frontend.vue
View file

@ -74,7 +74,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/Gopher.vue
View file

@ -32,7 +32,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/Http.vue
View file

@ -66,7 +66,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

178
src/views/settings/components/Inputs.vue
View file

@ -1,88 +1,92 @@
<template>
<el-form-item :label-width="customLabelWidth" :class="labelClass">
<span slot="label">
{{ setting.label }}
<el-tooltip v-if="canBeDeleted" :content="$t('settings.removeFromDB')" placement="bottom-end">
<el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting"/>
</el-tooltip>
</span>
<el-input
v-if="setting.type === 'string' || (setting.type.includes('string') && setting.type.includes('atom'))"
:value="inputValue"
:placeholder="setting.suggestions ? setting.suggestions[0] : null"
@input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
<el-switch
v-if="setting.type === 'boolean'"
:value="inputValue"
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
<el-input-number
v-if="setting.type === 'integer'"
:value="inputValue === null ? 0 : inputValue"
:placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
:min="0"
size="large"
class="top-margin"
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
<el-select
v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes(false))"
:value="inputValue"
clearable
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
<el-option
v-for="(option, index) in setting.suggestions"
:value="option"
:key="index"/>
</el-select>
<el-select
v-if="renderMultipleSelect(setting.type)"
:value="setting.key === ':rewrite_policy' ? rewritePolicyValue : inputValue"
multiple
filterable
allow-create
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
<el-option v-for="(option, index) in setting.suggestions" :key="index" :value="option"/>
</el-select>
<el-input
v-if="setting.key === ':ip'"
:value="inputValue"
placeholder="xxx.xxx.xxx.xx"
@input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
<el-input
v-if="setting.type === 'atom'"
:value="inputValue"
:placeholder="setting.suggestions[0] ? setting.suggestions[0].substr(1) : ''"
@input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
<template slot="prepend">:</template>
</el-input>
<div v-if="setting.type === 'keyword'">
<div v-for="subSetting in setting.children" :key="subSetting.key">
<inputs
:setting-group="settingGroup"
:setting-parent="[...settingParent, subSetting]"
:setting="subSetting"
:data="data[setting.key]"
:custom-label-width="'140px'"
:label-class="'center-label'"
:input-class="'keyword-inner-input'"
:nested="true"/>
<div class="input-container">
<el-form-item :label-width="customLabelWidth" :class="labelClass">
<span slot="label">
{{ setting.label }}
<el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
<el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting"/>
</el-tooltip>
</span>
<el-input
v-if="setting.type === 'string' || (setting.type.includes('string') && setting.type.includes('atom'))"
:value="inputValue"
:placeholder="setting.suggestions ? setting.suggestions[0] : null"
@input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
<el-switch
v-if="setting.type === 'boolean'"
:value="inputValue"
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
<el-input-number
v-if="setting.type === 'integer'"
:value="inputValue === null ? 0 : inputValue"
:placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
:min="0"
size="large"
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
<el-select
v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes(false))"
:value="inputValue"
clearable
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
<el-option
v-for="(option, index) in setting.suggestions"
:value="option"
:key="index"/>
</el-select>
<el-select
v-if="renderMultipleSelect(setting.type)"
:value="setting.key === ':rewrite_policy' ? rewritePolicyValue : inputValue"
multiple
filterable
allow-create
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
<el-option v-for="(option, index) in setting.suggestions" :key="index" :value="option"/>
</el-select>
<el-input
v-if="setting.key === ':ip'"
:value="inputValue"
placeholder="xxx.xxx.xxx.xx"
@input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
<el-input
v-if="setting.type === 'atom'"
:value="inputValue"
:placeholder="setting.suggestions[0] ? setting.suggestions[0].substr(1) : ''"
@input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
<template slot="prepend">:</template>
</el-input>
<div v-if="setting.type === 'keyword'">
<div v-for="subSetting in setting.children" :key="subSetting.key">
<inputs
:setting-group="settingGroup"
:setting-parent="[...settingParent, subSetting]"
:setting="subSetting"
:data="data[setting.key]"
:custom-label-width="'140px'"
:label-class="'center-label'"
:input-class="'keyword-inner-input'"
:nested="true"/>
</div>
</div>
</div>
<!-- special inputs -->
<auto-linker-input v-if="settingGroup.group === ':auto_linker'" :data="data" :setting-group="settingGroup" :setting="setting"/>
<mascots-input v-if="setting.key === ':mascots'" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
<editable-keyword-input v-if="editableKeyword(setting.key, setting.type)" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
<icons-input v-if="setting.key === ':icons'" :data="iconsData" :setting-group="settingGroup" :setting="setting"/>
<proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting" :parents="settingParent"/>
<multiple-select v-if="setting.key === ':backends' || setting.key === ':args'" :data="data" :setting-group="settingGroup" :setting="setting"/>
<prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
<rate-limit-input v-if="settingGroup.key === ':rate_limit'" :data="data" :setting-group="settingGroup" :setting="setting"/>
<!-------------------->
<span
v-if="setting.description && setting.type !== 'keyword'"
:class="inputClass"
class="expl"
v-html="getFormattedDescription(setting.description)"/>
</el-form-item>
<!-- special inputs -->
<auto-linker-input v-if="settingGroup.group === ':auto_linker'" :data="data" :setting-group="settingGroup" :setting="setting"/>
<mascots-input v-if="setting.key === ':mascots'" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
<editable-keyword-input v-if="editableKeyword(setting.key, setting.type)" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
<icons-input v-if="setting.key === ':icons'" :data="iconsData" :setting-group="settingGroup" :setting="setting"/>
<proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting" :parents="settingParent"/>
<multiple-select v-if="setting.key === ':backends' || setting.key === ':args'" :data="data" :setting-group="settingGroup" :setting="setting"/>
<prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
<rate-limit-input v-if="settingGroup.key === ':rate_limit'" :data="data" :setting-group="settingGroup" :setting="setting"/>
<!-------------------->
<div
v-if="setting.description && setting.type !== 'keyword'"
:class="inputClass"
class="expl"
v-html="getFormattedDescription(setting.description)"/>
</el-form-item>
<el-tooltip v-if="isMobile" :content="$t('settings.removeFromDB')" placement="bottom-end">
<el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting"/>
</el-tooltip>
</div>
</template>
<script>
@ -185,8 +189,14 @@ export default {
return this.data[this.setting.key]
}
},
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
isMobile() {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
keywordData() {
return Array.isArray(this.data) ? this.data : []

2
src/views/settings/components/Instance.vue
View file

@ -71,7 +71,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/JobQueue.vue
View file

@ -38,7 +38,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/Logger.vue
View file

@ -51,7 +51,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/MRF.vue
View file

@ -52,7 +52,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/Mailer.vue
View file

@ -41,7 +41,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.$store.state.settings.loading

2
src/views/settings/components/MediaProxy.vue
View file

@ -26,7 +26,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/Metadata.vue
View file

@ -30,7 +30,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/Other.vue
View file

@ -33,7 +33,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/RateLimiters.vue
View file

@ -32,7 +32,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.$store.state.settings.loading

2
src/views/settings/components/Upload.vue
View file

@ -44,7 +44,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

2
src/views/settings/components/WebPush.vue
View file

@ -26,7 +26,7 @@ export default {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '280px'
return this.isMobile ? '120px' : '280px'
},
loading() {
return this.settings.loading

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

@ -63,34 +63,36 @@
<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 v-if="isMobile">
<el-select 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>
</div>
</template>

27
src/views/settings/styles/main.scss
View file

@ -96,14 +96,14 @@
.icons-container {
display: flex;
}
.input-container {
display: flex;
align-items: start;
justify-content: space-between;
}
.keyword-inner-input {
margin-bottom: 22px;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.limit-button-container {
display: flex;
align-items: baseline;
@ -156,6 +156,9 @@
width: 47%;
margin: 0 1% 5px 0
}
.settings-delete-button {
margin-left: 5px;
}
.setting-input {
display: flex;
margin-bottom: 10px;
@ -202,9 +205,15 @@
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.el-form-item {
margin-right: 15px;
.input-container {
.el-form-item {
margin: 0 0 15px 0;
}
.settings-delete-button {
margin: 4px 7px 0 7px;
}
}
.el-input__inner {
padding: 0 5px 0 5px
}
@ -236,10 +245,6 @@
margin-left: 4px;
margin-right: 5px
}
.top-margin {
position: absolute;
top: 25%;
}
.value-input {
width: 60%;
margin-left: 5px;