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' return this.$store.state.app.device === 'mobile'
}, },
labelWidth() { labelWidth() {
return this.isMobile ? '100px' : '240px' return this.isMobile ? '120px' : '240px'
}, },
localPacks() { localPacks() {
return this.$store.state.emojiPacks.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' return this.$store.state.app.device === 'mobile'
}, },
labelWidth() { labelWidth() {
return this.isMobile ? '100px' : '280px' return this.isMobile ? '120px' : '280px'
}, },
loading() { loading() {
return this.$store.state.settings.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' return this.$store.state.app.device === 'mobile'
}, },
labelWidth() { labelWidth() {
return this.isMobile ? '100px' : '280px' return this.isMobile ? '120px' : '280px'
}, },
ldap() { ldap() {
return this.settings.description.find(setting => setting.key === ':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' return this.$store.state.app.device === 'mobile'
}, },
labelWidth() { labelWidth() {
return this.isMobile ? '100px' : '280px' return this.isMobile ? '120px' : '280px'
}, },
loading() { loading() {
return this.settings.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']) || {} return _.get(this.settings.settings, [':pleroma', 'Pleroma.Captcha.Kocaptcha']) || {}
}, },
labelWidth() { labelWidth() {
return this.isMobile ? '100px' : '280px' return this.isMobile ? '120px' : '280px'
}, },
loading() { loading() {
return this.settings.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' return this.$store.state.app.device === 'mobile'
}, },
labelWidth() { labelWidth() {
return this.isMobile ? '100px' : '280px' return this.isMobile ? '120px' : '280px'
}, },
loading() { loading() {
return this.settings.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' return this.$store.state.app.device === 'mobile'
}, },
labelWidth() { labelWidth() {
return this.isMobile ? '100px' : '280px' return this.isMobile ? '120px' : '280px'
}, },
loading() { loading() {
return this.settings.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' return this.$store.state.app.device === 'mobile'
}, },
labelWidth() { labelWidth() {
return this.isMobile ? '100px' : '280px' return this.isMobile ? '120px' : '280px'
}, },
loading() { loading() {
return this.settings.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' return this.$store.state.app.device === 'mobile'
}, },
labelWidth() { labelWidth() {
return this.isMobile ? '100px' : '280px' return this.isMobile ? '120px' : '280px'
}, },
loading() { loading() {
return this.settings.loading return this.settings.loading

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

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

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

@ -63,34 +63,36 @@
<other/> <other/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<el-select v-if="isMobile" v-model="activeTab" class="settings-menu" placeholder="Select"> <div v-if="isMobile">
<el-option <el-select v-model="activeTab" class="settings-menu" placeholder="Select">
v-for="item in options" <el-option
:key="item.value" v-for="item in options"
:label="item.label" :key="item.value"
:value="item.value" :label="item.label"
:disabled="configDisabled"/> :value="item.value"
</el-select> :disabled="configDisabled"/>
<activity-pub v-if="activeTab === 'activityPub'"/> </el-select>
<authentication v-if="activeTab === 'auth'"/> <activity-pub v-if="activeTab === 'activityPub'"/>
<auto-linker v-if="activeTab === 'autoLinker'"/> <authentication v-if="activeTab === 'auth'"/>
<esshd v-if="activeTab === 'esshd'"/> <auto-linker v-if="activeTab === 'autoLinker'"/>
<captcha v-if="activeTab === 'captcha'"/> <esshd v-if="activeTab === 'esshd'"/>
<frontend v-if="activeTab === 'frontend'"/> <captcha v-if="activeTab === 'captcha'"/>
<gopher v-if="activeTab === 'gopher'"/> <frontend v-if="activeTab === 'frontend'"/>
<http v-if="activeTab === 'http'"/> <gopher v-if="activeTab === 'gopher'"/>
<instance v-if="activeTab === 'instance'"/> <http v-if="activeTab === 'http'"/>
<job-queue v-if="activeTab === 'jobQueue'"/> <instance v-if="activeTab === 'instance'"/>
<logger v-if="activeTab === 'logger'"/> <job-queue v-if="activeTab === 'jobQueue'"/>
<mailer v-if="activeTab === 'mailer'"/> <logger v-if="activeTab === 'logger'"/>
<media-proxy v-if="activeTab === 'mediaProxy'"/> <mailer v-if="activeTab === 'mailer'"/>
<metadata v-if="activeTab === 'metadata'"/> <media-proxy v-if="activeTab === 'mediaProxy'"/>
<mrf v-if="activeTab === 'mrf'"/> <metadata v-if="activeTab === 'metadata'"/>
<rate-limiters v-if="activeTab === 'rateLimiters'"/> <mrf v-if="activeTab === 'mrf'"/>
<relays v-if="activeTab === 'relays'"/> <rate-limiters v-if="activeTab === 'rateLimiters'"/>
<web-push v-if="activeTab === 'webPush'"/> <relays v-if="activeTab === 'relays'"/>
<upload v-if="activeTab === 'upload'"/> <web-push v-if="activeTab === 'webPush'"/>
<other v-if="activeTab === 'other'"/> <upload v-if="activeTab === 'upload'"/>
<other v-if="activeTab === 'other'"/>
</div>
</div> </div>
</template> </template>

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

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