sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add styles for buttons in mobile UI

Browse source
This commit is contained in:
Angelina Filippova 2020-02-06 21:54:58 +03:00
parent 3a8132da7a
commit 0f4e609e0b
6 changed files with 62 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template>
<div class="input-container">
<el-form-item :label-width="customLabelWidth" :class="labelClass">
<el-form-item :label-width="customLabelWidth" :class="labelClass" class="settings-input">
<span slot="label">
{{ setting.label }}
<el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
@ -21,7 +21,7 @@
:value="inputValue === null ? 0 : inputValue"
:placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
:min="0"
size="large"
:size="isDesktop ? 'large' : 'small'"
@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))"

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

@ -4,25 +4,25 @@
<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 icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
</div>
<el-button icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
</div>
<div v-else-if="editableKeywordWithInteger">
<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 icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
</div>
<el-button icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
</div>
<div v-else>
<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 icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
</div>
<el-button icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
</div>
</div>
</template>
@ -53,6 +53,9 @@ export default {
computed: {
editableKeywordWithInteger() {
return Array.isArray(this.setting.type) && this.setting.type.includes('keyword') && this.setting.type.includes('integer')
},
isDesktop() {
return this.$store.state.app.device === 'desktop'
}
},
methods: {

11
src/views/settings/components/inputComponents/IconsInput.vue
View file

@ -8,16 +8,16 @@
<el-input :value="value" placeholder="value" class="icon-value-input" @input="parseIcons($event, 'value', index, id)"/>
</div>
</div>
<el-button icon="el-icon-minus" circle class="icon-minus-button" @click="deleteIcondRow(index)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle class="icon-minus-button" @click="deleteIcondRow(index)"/>
</div>
<div class="icons-button-container">
<el-button icon="el-icon-plus" circle @click="addValueToIcons(index)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addValueToIcons(index)"/>
<span class="icons-button-desc">Add another `key - value` pair to this icon</span>
</div>
<div class="line"/>
</div>
<div class="icons-button-container">
<el-button icon="el-icon-plus" circle @click="addIconToIcons"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addIconToIcons"/>
<span class="icons-button-desc">Add another icon configuration</span>
</div>
</div>
@ -46,6 +46,11 @@ export default {
}
}
},
computed: {
isDesktop() {
return this.$store.state.app.device === 'desktop'
}
},
methods: {
addIconToIcons() {
const updatedValue = [...this.data, [{ key: '', value: '', id: this.generateID() }]]

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

@ -4,7 +4,7 @@
<el-form-item label="Name" label-width="100px">
<div class="mascot-name-container">
<el-input :value="getName(mascot)" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot)"/>
<el-button icon="el-icon-minus" circle @click="deleteMascotsRow(mascot)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteMascotsRow(mascot)"/>
</div>
</el-form-item>
<el-form-item label="URL" label-width="100px">
@ -14,7 +14,7 @@
<el-input :value="getMimeType(mascot)" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', mascot)"/>
</el-form-item>
</div>
<el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToMascots"/>
</div>
</template>
@ -41,6 +41,11 @@ export default {
}
}
},
computed: {
isDesktop() {
return this.$store.state.app.device === 'desktop'
}
},
methods: {
addRowToMascots() {
const updatedValue = [...this.data, { '': { ':url': '', ':mime_type': '', id: this.generateID() }}]

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

@ -13,7 +13,7 @@
class="limit-input"
@input="parseRateLimiter($event, setting.key, 'limit', 'oneLimit', rateLimitAllUsers)"/>
<div class="limit-button-container">
<el-button icon="el-icon-plus" circle @click="toggleLimits([['', ''], ['', '']], setting.key)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="toggleLimits([['', ''], ['', '']], setting.key)"/>
<p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
</div>
</div>
@ -45,7 +45,7 @@
@input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
</el-form-item>
<div class="limit-button-container">
<el-button icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>
<p class="expl limit-expl">Set limit for all users</p>
</div>
</div>
@ -76,6 +76,9 @@ export default {
}
},
computed: {
isDesktop() {
return this.$store.state.app.device === 'desktop'
},
rateLimitAllUsers() {
return this.data[this.setting.key] ? this.data[this.setting.key] : ['', '']
},

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

@ -206,14 +206,16 @@
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.input-container {
.el-form-item {
margin: 0 0 15px 0;
}
width: 100%;
.settings-delete-button {
margin: 4px 7px 0 7px;
}
}
.settings-input {
display: inline-block;
width: 90%;
margin: 0 0 10px 0;
}
.el-input__inner {
padding: 0 5px 0 5px
}
@ -229,6 +231,31 @@
.el-select__tags {
overflow: hidden;
}
.expl, .expl > p {
line-height: 16px;
}
.icon-key-input {
width: 40%;
margin-right: 4px
}
.icon-minus-button {
width: 28px;
height: 28px;
margin-top: 4px;
}
.icon-values-container {
margin: 0 7px 7px 0;
}
.icon-value-input {
width: 60%;
margin-left: 4px;
}
.icons-button-container {
line-height: 24px;
}
.line {
margin-bottom: 10px;
}
.name-input {
width: 40%;
margin-right: 5px