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

Change the way headers of group of settings are displayed

Browse source
This commit is contained in:
Angelina Filippova 2020-02-14 22:56:59 +03:00
parent 50ed2adf17
commit 0d991135fa
7 changed files with 31 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/lang/en.js
View file

@ -359,7 +359,11 @@ export default {
metadatLowerCase: 'metadata',
files: 'files',
successfullyRemoved: 'Setting removed successfully!',
seeDocs: 'See Documentation'
seeDocs: 'See Documentation',
assets: 'Assets',
emoji: 'Emoji',
markup: 'Markup settings',
corsPlug: 'CORS plug config'
},
invites: {
inviteTokens: 'Invite tokens',

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

@ -4,12 +4,16 @@
<setting :setting-group="frontend" :data="frontendData"/>
</el-form>
<el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
<el-form-item label="Assets:" class="settings-input"/>
<el-form-item class="grouped-settings-header">
<span class="label-font">{{ $t('settings.assets') }}</span>
</el-form-item>
<setting :setting-group="assets" :data="assetsData"/>
</el-form>
<div class="line"/>
<el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
<el-form-item label="Emoji:" class="settings-input"/>
<el-form-item class="grouped-settings-header">
<span class="label-font">{{ $t('settings.emoji') }}</span>
</el-form-item>
<setting :setting-group="emoji" :data="emojiData"/>
</el-form>
<div class="line"/>
@ -18,7 +22,9 @@
</el-form>
<div class="line"/>
<el-form ref="markupData" :model="markupData" :label-width="labelWidth">
<el-form-item label="Markup settings:" class="settings-input"/>
<el-form-item class="grouped-settings-header">
<span class="label-font">{{ $t('settings.markup') }}</span>
</el-form-item>
<setting :setting-group="markup" :data="markupData"/>
</el-form>
<div class="submit-button-container">

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

@ -4,7 +4,9 @@
<setting :setting-group="http" :data="httpData"/>
</el-form>
<el-form ref="corsPlugData" :model="corsPlugData" :label-width="labelWidth">
<el-form-item label="Cors plug config:" class="settings-input"/>
<el-form-item class="grouped-settings-header">
<span class="label-font">{{ $t('settings.corsPlug') }}</span>
</el-form-item>
<setting :setting-group="corsPlug" :data="corsPlugData"/>
</el-form>
<div class="line"/>

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

@ -16,8 +16,7 @@
:setting="subSetting"
:data="data[setting.key]"
:custom-label-width="isDesktop ? '120px' : '100px'"
:label-class="'center-label'"
:input-class="'keyword-inner-input'"
:label-class="subSetting.type === 'keyword' ? 'center-label' : ''"
:margin="isDesktop ? margin + 15 : margin + 8"
:nested="true"/>
</el-form-item>
@ -76,20 +75,6 @@
@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">
<!-- {{ [...settingParent, subSetting].map(s => s.label) }} -->
<inputs
:setting-group="settingGroup"
:setting-parent="[...settingParent, subSetting]"
:setting="subSetting"
:data="data[setting.key]"
:custom-label-width="isDesktop ? '140px' : '100px'"
:label-class="'center-label'"
:input-class="'keyword-inner-input'"
:nested="true"/>
</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"/>
@ -145,13 +130,6 @@ export default {
return {}
}
},
inputClass: {
type: String,
default: function() {
return 'input-class'
},
required: false
},
labelClass: {
type: String,
default: function() {

4
src/views/settings/components/Setting.vue
View file

@ -38,13 +38,13 @@
</div>
<div v-else>
<div class="input-container">
<el-form-item class="settings-input">
<el-form-item class="grouped-settings-header">
<span slot="label">
{{ setting.label }}:
<el-tooltip v-if="isDesktop && canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end">
<el-button icon="el-icon-delete" circle size="mini" style="margin-left:5px" @click="removeSetting(setting.key)"/>
</el-tooltip>
</span>
<span class="label-font">{{ setting.label }}</span>
</el-form-item>
<el-tooltip v-if="isMobile && canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end">
<el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting(setting.key)"/>

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

@ -4,8 +4,8 @@
<setting :setting-group="upload" :data="uploadData"/>
</el-form>
<el-form v-if="showUploadersLocal" ref="uploadersLocal" :model="uploadersLocalData" :label-width="labelWidth">
<el-form-item class="description-container description settings-input">
<span class="description"><p>Pleroma.Uploaders.Local</p></span>
<el-form-item class="grouped-settings-header">
<span class="label-font">Pleroma.Uploaders.Local</span>
</el-form-item>
<setting :setting-group="uploadersLocal" :data="uploadersLocalData"/>
<div class="line"/>

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

@ -63,6 +63,9 @@
.form-container {
margin-bottom: 80px;
}
.grouped-settings-header {
margin: 0 0 14px 0;
}
.highlight {
background-color: #e6e6e6;
}
@ -111,13 +114,16 @@
width: 100%;
}
}
.keyword-inner-input {
margin-bottom: 22px;
}
label {
overflow: hidden;
text-overflow: ellipsis;
}
.label-font {
font-size: 14px;
color: #606266;
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
font-weight: 700;
}
.limit-button-container {
display: flex;
align-items: baseline;
@ -377,9 +383,6 @@
.icons-button-container {
line-height: 24px;
}
.keyword-inner-input {
margin-bottom: 10px;
}
.line {
margin-bottom: 10px;
}