diff options
| author | Ferdinand Thiessen <opensource@fthiessen.de> | 2024-07-16 12:24:37 +0200 |
|---|---|---|
| committer | Ferdinand Thiessen <opensource@fthiessen.de> | 2024-07-16 15:38:34 +0200 |
| commit | aa767de2b877783100d3753228181b1df7540746 (patch) | |
| tree | 13de2c111530be778ef1f96bb3985045a8ef458e /apps | |
| parent | 2f9fcc22aec918a9d07603b5e481d43bfb980ba0 (diff) | |
| download | nextcloud-server-aa767de2b877783100d3753228181b1df7540746.tar.gz nextcloud-server-aa767de2b877783100d3753228181b1df7540746.zip | |
refactor: Improve design of declarative settings
* 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>
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue | 18 |
1 files changed, 9 insertions, 9 deletions
diff --git a/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue b/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue index 0a5e2415668..a4e01bcef7d 100644 --- a/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue +++ b/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue @@ -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 { |