Fix displaying delete buttons in mobile UI
This commit is contained in:
Angelina Filippova
parent
b03ef7f9bb
commit
39f892bbfb
2 changed files with 93 additions and 61 deletions
|
|
@ -28,71 +28,79 @@
|
|||
<el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @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 ? undefined : inputValue"
|
||||
:placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
|
||||
:min="0"
|
||||
: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('dropdown'))"
|
||||
: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>
|
||||
<!-- 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 class="input-row">
|
||||
<el-input
|
||||
v-if="setting.type === 'string' || (setting.type.includes('string') && setting.type.includes('atom'))"
|
||||
:value="inputValue"
|
||||
:placeholder="setting.suggestions ? setting.suggestions[0] : null"
|
||||
class="input"
|
||||
@input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
|
||||
<el-switch
|
||||
v-if="setting.type === 'boolean'"
|
||||
:value="inputValue"
|
||||
class="switch-input"
|
||||
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
|
||||
<el-input-number
|
||||
v-if="setting.type === 'integer'"
|
||||
:value="inputValue === null ? undefined : inputValue"
|
||||
:placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
|
||||
:min="0"
|
||||
: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('dropdown'))"
|
||||
:value="inputValue === false ? 'false' : inputValue"
|
||||
clearable
|
||||
class="input"
|
||||
@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
|
||||
class="input"
|
||||
@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"
|
||||
class="input"
|
||||
@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) : ''"
|
||||
class="input"
|
||||
@input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
|
||||
<template slot="prepend">:</template>
|
||||
</el-input>
|
||||
<!-- 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"/>
|
||||
<!-------------------->
|
||||
<el-tooltip v-if="canBeDeleted && isMobile" :content="$t('settings.removeFromDB')" placement="bottom-end" class="delete-setting-button-container">
|
||||
<el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeSetting"/>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div
|
||||
v-if="setting.description && setting.type !== 'keyword'"
|
||||
class="expl"
|
||||
v-html="getFormattedDescription(setting.description)"/>
|
||||
</el-form-item>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -190,6 +190,11 @@
|
|||
}
|
||||
.prune-options {
|
||||
display: flex;
|
||||
height: 36px;
|
||||
align-items: baseline;
|
||||
.el-radio {
|
||||
margin-top: 11px;
|
||||
}
|
||||
}
|
||||
.rate-limit {
|
||||
.el-form-item__content {
|
||||
|
|
@ -262,6 +267,9 @@
|
|||
right: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
.switch-input {
|
||||
height: 36px;
|
||||
}
|
||||
.text {
|
||||
line-height: 20px;
|
||||
margin-right: 15px
|
||||
|
|
@ -287,9 +295,16 @@
|
|||
|
||||
@media only screen and (max-width: 760px),
|
||||
(min-device-width: 768px) and (max-device-width: 1024px) {
|
||||
.delete-setting-button {
|
||||
margin-left: 5px;
|
||||
height: 28px;
|
||||
}
|
||||
.delete-setting-button-container {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.description > p {
|
||||
line-height: 18px;
|
||||
margin: 0 0 7px 0;
|
||||
margin: 0 5px 7px 0;
|
||||
code {
|
||||
display: inline;
|
||||
line-height: 18px;
|
||||
|
|
@ -314,6 +329,9 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.input {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.input-container {
|
||||
width: 100%;
|
||||
.el-form-item:first-child {
|
||||
|
|
@ -324,6 +342,11 @@
|
|||
margin: 4px 7px 0 -5px;
|
||||
}
|
||||
}
|
||||
.input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.limit-input {
|
||||
width: 46%;
|
||||
}
|
||||
|
|
@ -342,6 +365,7 @@
|
|||
}
|
||||
.prune-options {
|
||||
flex-direction: column;
|
||||
height: 80px;
|
||||
}
|
||||
.rate-limit {
|
||||
.el-form-item__content {
|
||||
|
|
|
|||
Loading…
Reference in a new issue