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

Add styles for setting input and buttons

Browse source
This commit is contained in:
Angelina Filippova 2020-02-06 23:59:01 +03:00
parent 5419704249
commit 497f36d568
11 changed files with 63 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,12 +4,12 @@
<setting :setting-group="frontend" :data="frontendData"/>
</el-form>
<el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
<el-form-item label="Assets:"/>
<el-form-item label="Assets:" class="settings-input"/>
<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:"/>
<el-form-item label="Emoji:" class="settings-input"/>
<setting :setting-group="emoji" :data="emojiData"/>
</el-form>
<div class="line"/>
@ -18,7 +18,7 @@
</el-form>
<div class="line"/>
<el-form ref="markupData" :model="markupData" :label-width="labelWidth">
<el-form-item label="Markup settings:"/>
<el-form-item label="Markup settings:" class="settings-input"/>
<setting :setting-group="markup" :data="markupData"/>
</el-form>
<div class="submit-button-container">

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

@ -4,7 +4,7 @@
<setting :setting-group="http" :data="httpData"/>
</el-form>
<el-form ref="corsPlugData" :model="corsPlugData" :label-width="labelWidth">
<el-form-item label="Cors plug config:"/>
<el-form-item label="Cors plug config:" class="settings-input"/>
<setting :setting-group="corsPlug" :data="corsPlugData"/>
</el-form>
<div class="line"/>

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

@ -83,7 +83,7 @@
class="expl"
v-html="getFormattedDescription(setting.description)"/>
</el-form-item>
<el-tooltip v-if="isMobile" :content="$t('settings.removeFromDB')" placement="bottom-end">
<el-tooltip v-if="canBeDeleted && 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>

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

@ -13,7 +13,7 @@
</el-form>
<div class="line"/>
<el-form ref="quackData" :model="quackData" :label-width="labelWidth">
<el-form-item label="Quack logger:"/>
<el-form-item label="Quack logger:" class="settings-input"/>
<setting :setting-group="quack" :data="quackData"/>
</el-form>
<div class="submit-button-container">

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

@ -1,6 +1,6 @@
<template>
<div v-if="!loading">
<el-form-item v-if="settingGroup.description" class="description-container">
<el-form-item v-if="settingGroup.description" class="description-container settings-input">
<span class="description" v-html="getFormattedDescription(settingGroup.description)"/>
</el-form-item>
<div v-if="settingGroup.key === 'Pleroma.Emails.Mailer'">
@ -37,14 +37,19 @@
:nested="true"/>
</div>
<div v-else>
<el-form-item>
<span slot="label">
{{ setting.label }}:
<el-tooltip v-if="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>
</el-form-item>
<div class="input-container">
<el-form-item class="settings-input">
<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>
</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)"/>
</el-tooltip>
</div>
<div v-for="subSetting in setting.children" :key="subSetting.key">
<inputs
:setting-group="settingGroup"
@ -91,6 +96,12 @@ export default {
const adapter = this.$store.state.settings.settings[':pleroma']['Pleroma.Emails.Mailer'][':adapter']
return this.settingGroup.children.filter(child => child.group && child.group.includes(adapter))
},
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
isMobile() {
return this.$store.state.app.device === 'mobile'
},
loading() {
return this.$store.state.settings.loading
}

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

@ -4,7 +4,7 @@
<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">
<el-form-item class="description-container description settings-input">
<span class="description"><p>Pleroma.Uploaders.Local</p></span>
</el-form-item>
<setting :setting-group="uploadersLocal" :data="uploadersLocalData"/>

6
src/views/settings/components/inputComponents/EditableKeywordInput.vue
View file

@ -4,7 +4,7 @@
<div v-for="element in data" :key="getId(element)" class="setting-input">
<el-input :value="getKey(element)" placeholder="pattern" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
<el-input :value="getValue(element)" placeholder="replacement" class="value-input" @input="parseEditableKeyword($event, 'value', element)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
</div>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
</div>
@ -12,7 +12,7 @@
<div v-for="element in data" :key="getId(element)" class="setting-input">
<el-input :value="getKey(element)" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
<el-input-number :value="getValue(element)" :min="0" size="large" class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
</div>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
</div>
@ -20,7 +20,7 @@
<div v-for="element in data" :key="getId(element)" class="setting-input">
<el-input :value="getKey(element)" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
<el-select :value="getValue(element)" multiple filterable allow-create class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
</div>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
</div>

8
src/views/settings/components/inputComponents/MascotsInput.vue
View file

@ -1,16 +1,16 @@
<template>
<div>
<div v-for="mascot in data" :key="getId(mascot)" class="mascot-container">
<el-form-item label="Name" label-width="100px">
<el-form-item label="Name" label-width="85px" class="settings-input">
<div class="mascot-name-container">
<el-input :value="getName(mascot)" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteMascotsRow(mascot)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="deleteMascotsRow(mascot)"/>
</div>
</el-form-item>
<el-form-item label="URL" label-width="100px">
<el-form-item label="URL" label-width="85px" class="settings-input">
<el-input :value="getUrl(mascot)" placeholder="URL" class="mascot-input" @input="parseMascots($event, 'url', mascot)"/>
</el-form-item>
<el-form-item label="Mime type" label-width="100px">
<el-form-item label="Mime type" label-width="85px" class="settings-input">
<el-input :value="getMimeType(mascot)" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', mascot)"/>
</el-form-item>
</div>

4
src/views/settings/components/inputComponents/PruneInput.vue
View file

@ -5,7 +5,7 @@
<el-radio label=":maxlen">Limit-based</el-radio>
<el-radio label=":maxage">Time-based</el-radio>
</el-radio-group>
<el-form-item v-if="prune === ':maxlen'" label="max length" label-width="100" label-position="left">
<el-form-item v-if="prune === ':maxlen'" label="max length" label-width="100" label-position="left" class="settings-input">
<el-input-number
:value="data[1]"
:min="0"
@ -14,7 +14,7 @@
class="top-margin"
@change="updateIntInput($event, ':maxlen')"/>
</el-form-item>
<el-form-item v-if="prune === ':maxage'" label="max age" label-width="100" label-position="left">
<el-form-item v-if="prune === ':maxage'" label="max age" label-width="100" label-position="left" class="settings-input">
<el-input-number
:value="data[1]"
:min="0"

6
src/views/settings/components/inputComponents/RateLimitInput.vue
View file

@ -18,7 +18,7 @@
</div>
</div>
<div v-if="rateLimitAuthUsers">
<el-form-item label="Unauthenticated users:" label-width="180px" class="rate-limit">
<el-form-item label="Unauthenticated users:" label-width="180px" class="rate-limit settings-input">
<el-input
:value="rateLimitUnauthUsers[0]"
placeholder="scale"
@ -31,7 +31,7 @@
class="limit-input"
@input="parseRateLimiter($event, setting.key, 'limit', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
</el-form-item>
<el-form-item label="Authenticated users:" label-width="180px" class="rate-limit">
<el-form-item label="Authenticated users:" label-width="180px" class="rate-limit settings-input">
<el-input
:value="rateLimitAuthUsers[0]"
placeholder="scale"
@ -45,7 +45,7 @@
@input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
</el-form-item>
<div class="limit-button-container">
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>
<p class="expl limit-expl">Set limit for all users</p>
</div>
</div>

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

@ -104,6 +104,10 @@
.keyword-inner-input {
margin-bottom: 22px;
}
label {
overflow: hidden;
text-overflow: ellipsis;
}
.limit-button-container {
display: flex;
align-items: baseline;
@ -205,12 +209,23 @@
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.description > p {
line-height: 18px;
margin: 0 0 7px 0;
}
.description-container.settings-input {
margin-bottom: 0;
}
.input-container {
width: 100%;
.settings-delete-button {
margin: 4px 7px 0 7px;
}
}
.setting-label {
display: flex;
justify-content: space-between;
}
.settings-input {
display: inline-block;
width: 90%;
@ -253,9 +268,18 @@
.icons-button-container {
line-height: 24px;
}
.keyword-inner-input {
margin-bottom: 10px;
}
.line {
margin-bottom: 10px;
}
.mascot-container {
margin-bottom: 5px;
.settings-input {
width: 100%;
}
}
.name-input {
width: 40%;
margin-right: 5px