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>

diff --git a/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue b/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue
index 0a5e2415668df7f4d8baea7170a9321944a7ad95..a4e01bcef7de08dc7ed9bb61f37a64d741bd2c73 100644 (file)
--- 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 {