Scroll to selected setting
This commit is contained in:
parent
9bca5fbdad
commit
0556b874cf
12 changed files with 33 additions and 18 deletions
|
@ -262,7 +262,7 @@ export const formSearchObject = description => {
|
|||
const updatedAcc = [...acc, { label: setting.label, key: setting.key, groupKey: key, groupLabel: label, search: searchArray }]
|
||||
return [...updatedAcc, ...parseNestedSettings(setting.children, setting.label, setting.key)]
|
||||
}
|
||||
return [...acc, { label: setting.label, key: setting.label, groupKey: key, groupLabel: label, search: searchArray }]
|
||||
return [...acc, { label: setting.label, key: setting.key, groupKey: key, groupLabel: label, search: searchArray }]
|
||||
}, [])
|
||||
|
||||
return description.reduce((acc, setting) => {
|
||||
|
@ -271,6 +271,6 @@ export const formSearchObject = description => {
|
|||
const updatedAcc = [...acc, { label: setting.label, key: setting.key, groupKey: setting.key, groupLabel: setting.label, search: searchArray }]
|
||||
return [...updatedAcc, ...parseNestedSettings(setting.children, setting.label, setting.key)]
|
||||
}
|
||||
return [...acc, { label: setting.label, key: setting.label, groupKey: setting.key, groupLabel: setting.label, search: searchArray }]
|
||||
return [...acc, { label: setting.label, key: setting.key, groupKey: setting.key, groupLabel: setting.label, search: searchArray }]
|
||||
}, [])
|
||||
}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div v-if="!loading" class="form-container">
|
||||
<el-form ref="activitypubData" :model="activitypubData" :label-width="labelWidth">
|
||||
<el-form ref="activitypubData" :model="activitypubData" :label-width="labelWidth" data-search=":activitypub">
|
||||
<setting :setting-group="activitypub" :data="activitypubData"/>
|
||||
</el-form>
|
||||
<el-divider class="divider thick-line"/>
|
||||
<el-form ref="userData" :model="userData" :label-width="labelWidth">
|
||||
<el-form ref="userData" :model="userData" :label-width="labelWidth" data-search=":user">
|
||||
<setting :setting-group="user" :data="userData"/>
|
||||
</el-form>
|
||||
<div class="submit-button-container">
|
||||
|
|
|
@ -1,7 +1,11 @@
|
|||
<template>
|
||||
<div class="input-container">
|
||||
<div v-if="setting.type === 'keyword'" class="keyword-container">
|
||||
<el-form-item :label-width="customLabelWidth" :class="labelClass" :style="`margin-left:${margin}px;margin-bottom:0`" >
|
||||
<el-form-item
|
||||
:label-width="customLabelWidth"
|
||||
:class="labelClass"
|
||||
:style="`margin-left:${margin}px;margin-bottom:0`"
|
||||
:data-search="setting.key">
|
||||
<span slot="label">
|
||||
{{ setting.label }}
|
||||
<el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
|
||||
|
@ -33,11 +37,13 @@
|
|||
v-if="setting.type === 'string' || (setting.type.includes('string') && setting.type.includes('atom'))"
|
||||
:value="inputValue"
|
||||
:placeholder="setting.suggestions ? setting.suggestions[0] : null"
|
||||
:data-search="setting.key"
|
||||
class="input"
|
||||
@input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
|
||||
<el-switch
|
||||
v-if="setting.type === 'boolean'"
|
||||
:value="inputValue"
|
||||
:data-search="setting.key"
|
||||
class="switch-input"
|
||||
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
|
||||
<el-input-number
|
||||
|
@ -46,10 +52,12 @@
|
|||
:placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
|
||||
:min="0"
|
||||
:size="isDesktop ? 'large' : 'medium'"
|
||||
:data-search="setting.key"
|
||||
@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"
|
||||
:data-search="setting.key"
|
||||
clearable
|
||||
class="input"
|
||||
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
|
||||
|
@ -61,6 +69,7 @@
|
|||
<el-select
|
||||
v-if="renderMultipleSelect(setting.type)"
|
||||
:value="setting.key === ':rewrite_policy' ? rewritePolicyValue : inputValue"
|
||||
:data-search="setting.key"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
|
@ -71,6 +80,7 @@
|
|||
<el-input
|
||||
v-if="setting.key === ':ip'"
|
||||
:value="inputValue"
|
||||
:data-search="setting.key"
|
||||
placeholder="xxx.xxx.xxx.xx"
|
||||
class="input"
|
||||
@input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
|
||||
|
@ -78,6 +88,7 @@
|
|||
v-if="setting.type === 'atom'"
|
||||
:value="inputValue"
|
||||
:placeholder="setting.suggestions[0] ? setting.suggestions[0].substr(1) : ''"
|
||||
:data-search="setting.key"
|
||||
class="input"
|
||||
@input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
|
||||
<template slot="prepend">:</template>
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="setting.key === ':class' || setting.key === ':rel'">
|
||||
<div v-if="setting.key === ':class' || setting.key === ':rel'" :data-search="setting.key">
|
||||
<el-switch :value="autoLinkerBooleanValue(setting.key)" @change="processTwoTypeValue($event, setting.key)"/>
|
||||
<el-input v-if="autoLinkerBooleanValue(setting.key)" :value="autoLinkerStringValue(setting.key)" @input="processTwoTypeValue($event, setting.key)"/>
|
||||
</div>
|
||||
<div v-if="setting.key === ':truncate'">
|
||||
<div v-if="setting.key === ':truncate'" :data-search="setting.key">
|
||||
<el-switch :value="autoLinkerBooleanValue(setting.key)" @change="processTwoTypeValue($event, setting.key)"/>
|
||||
<el-input-number v-if="autoLinkerBooleanValue(setting.key)" :value="autoLinkerIntegerValue(setting.key)" @input="processTwoTypeValue($event, setting.key)"/>
|
||||
</div>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="editable-keyword-container">
|
||||
<div v-if="setting.key === ':replace'">
|
||||
<div v-if="setting.key === ':replace'" :data-search="setting.key">
|
||||
<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)"/>
|
||||
|
@ -8,7 +8,7 @@
|
|||
</div>
|
||||
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
|
||||
</div>
|
||||
<div v-else-if="editableKeywordWithInteger">
|
||||
<div v-else-if="editableKeywordWithInteger" :data-search="setting.key">
|
||||
<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)"/>
|
||||
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
<el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-else :data-search="setting.key">
|
||||
<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)"/>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="mascot-container">
|
||||
<div :data-search="setting.key" class="mascot-container">
|
||||
<div v-for="(icon, index) in data" :key="index" class="mascot">
|
||||
<div class="icons-container">
|
||||
<div class="icon-container">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="mascot-container">
|
||||
<div :data-search="setting.key" class="mascot-container">
|
||||
<div v-for="mascot in data" :key="getId(mascot)" class="mascot">
|
||||
<el-form-item label="Name" label-width="85px" class="mascot-form-item">
|
||||
<div class="mascot-name-container">
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
<el-select
|
||||
v-if="setting.key === ':backends'"
|
||||
:value="data.value"
|
||||
:data-search="setting.key"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
|
@ -15,6 +16,7 @@
|
|||
<el-select
|
||||
v-if="setting.key === ':args'"
|
||||
:value="data[setting.key]"
|
||||
:data-search="setting.key"
|
||||
multiple
|
||||
filterable
|
||||
allow-create
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="proxy-url-input">
|
||||
<div :data-search="setting.key" class="proxy-url-input">
|
||||
<el-input
|
||||
:value="proxyUrlData.host"
|
||||
placeholder="host (e.g. localhost or 127.0.0.1)"
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div :data-search="setting.key">
|
||||
<el-radio-group v-model="prune" class="prune-options">
|
||||
<el-radio label=":disabled">Disabled</el-radio>
|
||||
<el-radio label=":maxlen">Limit-based</el-radio>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="rate-limit-container">
|
||||
<div :data-search="setting.key" class="rate-limit-container">
|
||||
<div v-if="!rateLimitAuthUsers">
|
||||
<el-input
|
||||
:value="rateLimitAllUsers[0]"
|
||||
|
|
|
@ -223,16 +223,18 @@ export default {
|
|||
message: i18n.t('settings.restartSuccess')
|
||||
})
|
||||
},
|
||||
handleSearchSelect(selectedValue) {
|
||||
async handleSearchSelect(selectedValue) {
|
||||
const tab = Object.keys(this.tabs).find(tab => {
|
||||
return this.tabs[tab].settings.includes(selectedValue.group)
|
||||
})
|
||||
this.$store.dispatch('SetActiveTab', tab)
|
||||
await this.$store.dispatch('SetActiveTab', tab)
|
||||
const selectedSetting = document.querySelector(`[data-search="${selectedValue.key}"]`)
|
||||
selectedSetting.scrollIntoView({ block: 'start', behavior: 'smooth' })
|
||||
},
|
||||
querySearch(queryString, cb) {
|
||||
const results = this.searchData.filter(searchObj => searchObj.search.find(el => el.includes(queryString.toLowerCase())))
|
||||
.map(searchObj => {
|
||||
return { value: `${searchObj.label} in ${searchObj.groupLabel}`, group: searchObj.groupKey }
|
||||
return { value: `${searchObj.label} in ${searchObj.groupLabel}`, group: searchObj.groupKey, key: searchObj.key }
|
||||
})
|
||||
cb(results)
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue