upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-04-24 07:39:23 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 42

refactor: Improve design of declarative settings

Browse source 
* Remove the hint from DOM if empty (otherways they still take some place in layout)
* Individual fields of the same section should not be spaced 60px, 20px (2x 10px) should be enough
* We have the type `multi-checkbox` for real checkboxes where you can select on of multiple, and we have `checkbox` which is only used for enable / disable, so we shall use `switch` type of the checkbox component as we do for all other (non declarative) settings

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen 2024-07-16 12:24:37 +02:00
parent 2f9fcc22ae
commit aa767de2b8
1 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue
View file

@ -28,7 +28,7 @@
@update:value="onChangeDebounced(formField)"
@submit="updateDeclarativeSettingsValue(formField)" />
</div>
<span class="hint">{{ t(formApp, formField.description) }}</span>
<span v-if="formField.description" class="hint">{{ t(formApp, formField.description) }}</span>
</template>
<template v-if="formField.type === 'select'">
@ -41,7 +41,7 @@
:value="formFieldsData[formField.id].value"
@input="(value) => updateFormFieldDataValue(value, formField, true)" />
</div>
<span class="hint">{{ t(formApp, formField.description) }}</span>
<span v-if="formField.description" class="hint">{{ t(formApp, formField.description) }}</span>
</template>
<template v-if="formField.type === 'multi-select'">
@ -59,21 +59,22 @@
}
" />
</div>
<span class="hint">{{ t(formApp, formField.description) }}</span>
<span v-if="formField.description" class="hint">{{ t(formApp, formField.description) }}</span>
</template>
<template v-if="formField.type === 'checkbox'">
<label :for="formField.id + '_field'">{{ t(formApp, formField.title) }}</label>
<label v-if="formField.label" :for="formField.id + '_field'">{{ t(formApp, formField.title) }}</label>
<NcCheckboxRadioSwitch :id="formField.id + '_field'"
:checked="Boolean(formFieldsData[formField.id].value)"
type="switch"
@update:checked="(value) => {
formField.value = value
updateFormFieldDataValue(+value, formField, true)
}
">
{{ t(formApp, formField.label) }}
{{ t(formApp, formField.label ?? formField.title) }}
</NcCheckboxRadioSwitch>
<span class="hint">{{ t(formApp, formField.description) }}</span>
<span v-if="formField.description" class="hint">{{ t(formApp, formField.description) }}</span>
</template>
<template v-if="formField.type === 'multi-checkbox'">
@ -90,7 +91,7 @@
">
{{ t(formApp, option.name) }}
</NcCheckboxRadioSwitch>
<span class="hint">{{ t(formApp, formField.description) }}</span>
<span v-if="formField.description" class="hint">{{ t(formApp, formField.description) }}</span>
</template>
<template v-if="formField.type === 'radio'">
@ -103,7 +104,7 @@
@update:checked="(value) => updateFormFieldDataValue(value, formField, true)">
{{ t(formApp, option.name) }}
</NcCheckboxRadioSwitch>
<span class="hint">{{ t(formApp, formField.description) }}</span>
<span v-if="formField.description" class="hint">{{ t(formApp, formField.description) }}</span>
</template>
</div>
</NcSettingsSection>
@ -228,7 +229,6 @@ export default {
<style lang="scss" scoped>
.declarative-form-field {
margin: 20px 0;
padding: 10px 0;
.input-wrapper {