Use small/dense style for Element Panel's Fields

2025-04-03 04:35:31 +00:00 · 2024-07-12 08:06:25 +00:00 · 2024-07-12 08:06:25 +00:00 · 10fec15531
commit 10fec15531
parent ad55157f53
22 changed files with 24 additions and 29 deletions
--- a/changelog/entries/unreleased/refactor/2705_ensure_element_panel_dropdown_and_input_fields_use_the_dense.json
+++ b/changelog/entries/unreleased/refactor/2705_ensure_element_panel_dropdown_and_input_fields_use_the_dense.json
@ -0,0 +1,7 @@
+{
+    "type": "refactor",
+    "message": "[Builder] Ensure the Element Panel's Dropdown and Input fields use the dense style.",
+    "issue_number": 2705,
+    "bullet_points": [],
+    "created_at": "2024-07-11"
+}
--- a/web-frontend/modules/builder/components/ApplicationBuilderFormulaInputGroup.vue
+++ b/web-frontend/modules/builder/components/ApplicationBuilderFormulaInputGroup.vue
@ -13,6 +13,7 @@
        ...applicationContextAdditions,
      }
    "
+    :small="small"
    v-on="$listeners"
  >
    <template #after-input>
@ -54,6 +55,11 @@ export default {
      required: false,
      default: () => {},
    },
+    small: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
  },
  computed: {
    dataSourceLoading() {
--- a/web-frontend/modules/builder/components/PaddingSelector.vue
+++ b/web-frontend/modules/builder/components/PaddingSelector.vue
@ -1,7 +1,6 @@
 <template>
  <div class="padding-selector">
    <FormInput
-      small
      :value="value.horizontal"
      type="number"
      remove-number-input-controls
@ -12,7 +11,6 @@
      @blur="$emit('blur')"
    />
    <FormInput
-      small
      :value="value.vertical"
      type="number"
      remove-number-input-controls
--- a/web-frontend/modules/builder/components/PixelValueSelector.vue
+++ b/web-frontend/modules/builder/components/PixelValueSelector.vue
@ -1,6 +1,5 @@
 <template>
  <FormInput
-    small
    :value="value"
    type="number"
    remove-number-input-controls
--- a/web-frontend/modules/builder/components/elements/components/collectionField/form/BooleanFieldForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/collectionField/form/BooleanFieldForm.vue
@ -2,7 +2,6 @@
  <form @submit.prevent @keydown.enter.prevent>
    <ApplicationBuilderFormulaInputGroup
      v-model="values.value"
-      small
      :label="$t('textFieldForm.fieldValueLabel')"
      :placeholder="$t('textFieldForm.fieldValuePlaceholder')"
      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
--- a/web-frontend/modules/builder/components/elements/components/collectionField/form/ButtonFieldForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/collectionField/form/ButtonFieldForm.vue
@ -2,7 +2,6 @@
  <form @submit.prevent @keydown.enter.prevent>
    <ApplicationBuilderFormulaInputGroup
      v-model="values.label"
-      small
      :label="$t('generalForm.labelTitle')"
      :placeholder="$t('buttonFieldForm.labelPlaceholder')"
      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
--- a/web-frontend/modules/builder/components/elements/components/collectionField/form/LinkFieldForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/collectionField/form/LinkFieldForm.vue
@ -2,7 +2,6 @@
  <form @submit.prevent @keydown.enter.prevent>
    <ApplicationBuilderFormulaInputGroup
      v-model="values.link_name"
-      small
      :label="$t('linkFieldForm.fieldLinkNameLabel')"
      :placeholder="$t('linkFieldForm.fieldLinkNamePlaceholder')"
      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
--- a/web-frontend/modules/builder/components/elements/components/collectionField/form/TagsFieldForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/collectionField/form/TagsFieldForm.vue
@ -2,7 +2,6 @@
  <form @submit.prevent @keydown.enter.prevent>
    <ApplicationBuilderFormulaInputGroup
      v-model="values.values"
-      small
      :label="$t('tagsFieldForm.fieldValuesLabel')"
      :placeholder="$t('tagsFieldForm.fieldValuesPlaceholder')"
      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
@ -12,7 +11,6 @@
      <ApplicationBuilderFormulaInputGroup
        v-if="values.colors_is_formula"
        v-model="values.colors"
-        small
        :label="$t('tagsFieldForm.fieldColorsLabel')"
        :placeholder="$t('tagsFieldForm.fieldColorsPlaceholder')"
        :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
--- a/web-frontend/modules/builder/components/elements/components/collectionField/form/TextFieldForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/collectionField/form/TextFieldForm.vue
@ -2,7 +2,6 @@
  <form @submit.prevent @keydown.enter.prevent>
    <ApplicationBuilderFormulaInputGroup
      v-model="values.value"
-      small
      :label="$t('textFieldForm.fieldValueLabel')"
      :placeholder="$t('textFieldForm.fieldValuePlaceholder')"
      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
--- a/web-frontend/modules/builder/components/elements/components/forms/VisibilityForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/VisibilityForm.vue
@ -19,6 +19,7 @@
          <Dropdown
            v-model="selectedRoleType"
            :placeholder="$t('visibilityForm.roleTypesHint')"
+            small
          >
            <DropdownItem
              v-for="(value, key) in roleTypeOptions"
--- a/web-frontend/modules/builder/components/elements/components/forms/general/ColumnElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/ColumnElementForm.vue
@ -6,7 +6,7 @@
      small-label
      :label="$t('columnElementForm.columnAmountTitle')"
    >
-      <Dropdown v-model="values.column_amount" :show-search="false">
+      <Dropdown v-model="values.column_amount" :show-search="false" small>
        <DropdownItem
          v-for="columnAmount in columnAmounts"
          :key="columnAmount.value"
@ -27,7 +27,6 @@
    >
      <FormInput
        v-model="values.column_gap"
-        size="large"
        :label="$t('columnElementForm.columnGapTitle')"
        :placeholder="$t('columnElementForm.columnGapPlaceholder')"
        type="number"
--- a/web-frontend/modules/builder/components/elements/components/forms/general/HeadingElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/HeadingElementForm.vue
@ -14,7 +14,7 @@
      :label="$t('headingElementForm.levelTitle')"
      class="margin-bottom-2"
    >
-      <Dropdown v-model="values.level" :show-search="false">
+      <Dropdown v-model="values.level" :show-search="false" small>
        <DropdownItem
          v-for="level in levels"
          :key="level.value"
--- a/web-frontend/modules/builder/components/elements/components/forms/general/IFrameElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/IFrameElementForm.vue
@ -53,7 +53,6 @@
    >
      <FormInput
        v-model="values.height"
-        size="large"
        type="number"
        :placeholder="$t('iframeElementForm.heightPlaceholder')"
        :to-value="(value) => parseInt(value)"
--- a/web-frontend/modules/builder/components/elements/components/forms/general/InputTextElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/InputTextElementForm.vue
@ -37,7 +37,7 @@
      required
      class="margin-bottom-2"
    >
-      <Dropdown v-model="values.validation_type" :show-search="true">
+      <Dropdown v-model="values.validation_type" :show-search="true" small>
        <DropdownItem
          v-for="validationType in validationTypes"
          :key="validationType.name"
@ -78,7 +78,6 @@
      <FormInput
        v-model="values.rows"
        type="number"
-        size="large"
        :label="$t('inputTextElementForm.rowsTitle')"
        :placeholder="$t('inputTextElementForm.rowsPlaceholder')"
        :to-value="(value) => parseInt(value)"
@ -97,7 +96,7 @@
      required
      class="margin-bottom-2"
    >
-      <Dropdown v-model="values.input_type" :show-search="false">
+      <Dropdown v-model="values.input_type" :show-search="false" small>
        <DropdownItem
          v-for="inputType in inputTypes"
          :key="inputType.name"
--- a/web-frontend/modules/builder/components/elements/components/forms/general/LinkElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/LinkElementForm.vue
@ -23,7 +23,6 @@
      :placeholder="$t('linkElementForm.textPlaceholder')"
      :data-providers-allowed="DATA_PROVIDERS_ALLOWED_ELEMENTS"
    />
-
    <LinkNavigationSelectionForm
      :default-values="defaultValues"
      @values-changed="emitChange($event)"
--- a/web-frontend/modules/builder/components/elements/components/forms/general/LinkNavigationSelectionForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/LinkNavigationSelectionForm.vue
@ -46,7 +46,6 @@
        :label="$t('linkNavigationSelection.url')"
        :placeholder="$t('linkNavigationSelection.urlPlaceholder')"
        :data-providers-allowed="dataProvidersAllowed"
-        small
      />
    </FormGroup>
    <FormGroup v-if="destinationPage" class="margin-bottom-2" required>
@ -74,7 +73,6 @@
            horizontal
            :placeholder="$t('linkNavigationSelection.paramPlaceholder')"
            :data-providers-allowed="dataProvidersAllowed"
-            small
          />
        </div>
      </div>
--- a/web-frontend/modules/builder/components/elements/components/forms/general/RepeatElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/RepeatElementForm.vue
@ -6,7 +6,7 @@
      required
      class="margin-bottom-2"
    >
-      <Dropdown v-model="values.data_source_id" :show-search="false">
+      <Dropdown v-model="values.data_source_id" :show-search="false" small>
        <DropdownItem
          v-for="dataSource in availableDataSources"
          :key="dataSource.id"
@ -35,7 +35,6 @@
    >
      <FormInput
        v-model="values.items_per_page"
-        size="large"
        :placeholder="$t('repeatElementForm.itemsPerPagePlaceholder')"
        :to-value="(value) => parseInt(value)"
        class="margin-bottom-2"
--- a/web-frontend/modules/builder/components/elements/components/forms/general/TableElementForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/general/TableElementForm.vue
@ -7,7 +7,7 @@
      :label="$t('tableElementForm.dataSource')"
    >
      <div @click="userHasChangedDataSource = true">
-        <Dropdown v-model="values.data_source_id" :show-search="false">
+        <Dropdown v-model="values.data_source_id" :show-search="false" small>
          <DropdownItem
            v-for="dataSource in availableDataSources"
            :key="dataSource.id"
@ -27,7 +27,6 @@
    >
      <FormInput
        v-model="values.items_per_page"
-        size="large"
        :placeholder="$t('tableElementForm.itemsPerPagePlaceholder')"
        :to-value="(value) => parseInt(value)"
        type="number"
@ -132,9 +131,9 @@
                :label="$t('tableElementForm.fieldType')"
              >
                <Dropdown
-                  small
                  :value="field.type"
                  :show-search="false"
+                  small
                  @input="changeFieldType(field, $event)"
                >
                  <DropdownItem
--- a/web-frontend/modules/builder/components/elements/components/forms/style/DefaultStyleForm.vue
+++ b/web-frontend/modules/builder/components/elements/components/forms/style/DefaultStyleForm.vue
@ -61,7 +61,7 @@
        required
        class="margin-bottom-1"
      >
-        <Dropdown v-model="values.style_width">
+        <Dropdown v-model="values.style_width" small>
          <DropdownItem
            v-for="type in Object.values(WIDTH_TYPES)"
            :key="type.value"
--- a/web-frontend/modules/builder/components/theme/ImageThemeConfigBlock.vue
+++ b/web-frontend/modules/builder/components/theme/ImageThemeConfigBlock.vue
@ -39,7 +39,6 @@
        >
          <FormInput
            v-model="values.image_max_width"
-            small
            type="number"
            :min="0"
            :max="100"
@ -78,7 +77,6 @@
        >
          <FormInput
            v-model="imageMaxHeight"
-            small
            type="number"
            remove-number-input-controls
            :placeholder="$t('imageThemeConfigBlock.maxHeightPlaceholder')"
--- a/web-frontend/modules/builder/components/workflowAction/RefreshDataSourceWorkflowActionForm.vue
+++ b/web-frontend/modules/builder/components/workflowAction/RefreshDataSourceWorkflowActionForm.vue
@ -2,7 +2,7 @@
  <form @submit.prevent>
    <FormGroup :label="$t('tableElementForm.dataSource')" small-label required>
      <div class="control__elements">
-        <Dropdown v-model="values.data_source_id" :show-search="false">
+        <Dropdown v-model="values.data_source_id" :show-search="false" small>
          <DropdownItem
            v-for="dataSource in dataSources"
            :key="dataSource.id"
--- a/web-frontend/modules/core/components/integrations/IntegrationDropdown.vue
+++ b/web-frontend/modules/core/components/integrations/IntegrationDropdown.vue
@ -2,7 +2,7 @@
  <Dropdown
    :value="value"
    fixed-items
-    :small="small"
+    small
    class="integration-dropdown"
    :disabled="disabled || !integrationType"
    :placeholder="