From 10fec15531447e42f295b4a75e04cf42785185b5 Mon Sep 17 00:00:00 2001
From: Tsering Paljor <20007514-paljort@users.noreply.gitlab.com>
Date: Fri, 12 Jul 2024 08:06:25 +0000
Subject: [PATCH] Use small/dense style for Element Panel's Fields
---
...ment_panel_dropdown_and_input_fields_use_the_dense.json | 7 +++++++
.../components/ApplicationBuilderFormulaInputGroup.vue | 6 ++++++
.../modules/builder/components/PaddingSelector.vue | 2 --
.../modules/builder/components/PixelValueSelector.vue | 1 -
.../components/collectionField/form/BooleanFieldForm.vue | 1 -
.../components/collectionField/form/ButtonFieldForm.vue | 1 -
.../components/collectionField/form/LinkFieldForm.vue | 1 -
.../components/collectionField/form/TagsFieldForm.vue | 2 --
.../components/collectionField/form/TextFieldForm.vue | 1 -
.../elements/components/forms/VisibilityForm.vue | 1 +
.../components/forms/general/ColumnElementForm.vue | 3 +--
.../components/forms/general/HeadingElementForm.vue | 2 +-
.../components/forms/general/IFrameElementForm.vue | 1 -
.../components/forms/general/InputTextElementForm.vue | 5 ++---
.../elements/components/forms/general/LinkElementForm.vue | 1 -
.../forms/general/LinkNavigationSelectionForm.vue | 2 --
.../components/forms/general/RepeatElementForm.vue | 3 +--
.../elements/components/forms/general/TableElementForm.vue | 5 ++---
.../elements/components/forms/style/DefaultStyleForm.vue | 2 +-
.../builder/components/theme/ImageThemeConfigBlock.vue | 2 --
.../workflowAction/RefreshDataSourceWorkflowActionForm.vue | 2 +-
.../core/components/integrations/IntegrationDropdown.vue | 2 +-
22 files changed, 24 insertions(+), 29 deletions(-)
create mode 100644 changelog/entries/unreleased/refactor/2705_ensure_element_panel_dropdown_and_input_fields_use_the_dense.json
diff --git 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
new file mode 100644
index 000000000..d5881b346
--- /dev/null
+++ 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"
+}
diff --git a/web-frontend/modules/builder/components/ApplicationBuilderFormulaInputGroup.vue b/web-frontend/modules/builder/components/ApplicationBuilderFormulaInputGroup.vue
index ba8d712ad..1e8e60082 100644
--- 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() {
diff --git a/web-frontend/modules/builder/components/PaddingSelector.vue b/web-frontend/modules/builder/components/PaddingSelector.vue
index 8f48144fc..f982630ec 100644
--- 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
diff --git a/web-frontend/modules/builder/components/PixelValueSelector.vue b/web-frontend/modules/builder/components/PixelValueSelector.vue
index e8d7c5f85..0a6668e43 100644
--- 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
diff --git a/web-frontend/modules/builder/components/elements/components/collectionField/form/BooleanFieldForm.vue b/web-frontend/modules/builder/components/elements/components/collectionField/form/BooleanFieldForm.vue
index e48c83472..6d756af1c 100644
--- 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"
diff --git a/web-frontend/modules/builder/components/elements/components/collectionField/form/ButtonFieldForm.vue b/web-frontend/modules/builder/components/elements/components/collectionField/form/ButtonFieldForm.vue
index 93f89e45f..c840f2267 100644
--- 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"
diff --git a/web-frontend/modules/builder/components/elements/components/collectionField/form/LinkFieldForm.vue b/web-frontend/modules/builder/components/elements/components/collectionField/form/LinkFieldForm.vue
index 19439d212..3970db30e 100644
--- 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"
diff --git a/web-frontend/modules/builder/components/elements/components/collectionField/form/TagsFieldForm.vue b/web-frontend/modules/builder/components/elements/components/collectionField/form/TagsFieldForm.vue
index 4de7be047..edcf7a79e 100644
--- 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"
diff --git a/web-frontend/modules/builder/components/elements/components/collectionField/form/TextFieldForm.vue b/web-frontend/modules/builder/components/elements/components/collectionField/form/TextFieldForm.vue
index 3c925e070..77aca1153 100644
--- 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"
diff --git a/web-frontend/modules/builder/components/elements/components/forms/VisibilityForm.vue b/web-frontend/modules/builder/components/elements/components/forms/VisibilityForm.vue
index 3398c79d5..b93eb86bf 100644
--- 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"
diff --git a/web-frontend/modules/builder/components/elements/components/forms/general/ColumnElementForm.vue b/web-frontend/modules/builder/components/elements/components/forms/general/ColumnElementForm.vue
index 93c86ca02..f1634cf94 100644
--- 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"
diff --git a/web-frontend/modules/builder/components/elements/components/forms/general/HeadingElementForm.vue b/web-frontend/modules/builder/components/elements/components/forms/general/HeadingElementForm.vue
index 8f7840d66..d288f73e8 100644
--- 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"
diff --git a/web-frontend/modules/builder/components/elements/components/forms/general/IFrameElementForm.vue b/web-frontend/modules/builder/components/elements/components/forms/general/IFrameElementForm.vue
index 956f618a9..b3aed48e1 100644
--- 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)"
diff --git a/web-frontend/modules/builder/components/elements/components/forms/general/InputTextElementForm.vue b/web-frontend/modules/builder/components/elements/components/forms/general/InputTextElementForm.vue
index c22c2428e..cd527451f 100644
--- 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"
diff --git a/web-frontend/modules/builder/components/elements/components/forms/general/LinkElementForm.vue b/web-frontend/modules/builder/components/elements/components/forms/general/LinkElementForm.vue
index fd3ba1caf..a32ef03a2 100644
--- 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)"
diff --git a/web-frontend/modules/builder/components/elements/components/forms/general/LinkNavigationSelectionForm.vue b/web-frontend/modules/builder/components/elements/components/forms/general/LinkNavigationSelectionForm.vue
index a0b8a866a..31b23f338 100644
--- 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>
diff --git a/web-frontend/modules/builder/components/elements/components/forms/general/RepeatElementForm.vue b/web-frontend/modules/builder/components/elements/components/forms/general/RepeatElementForm.vue
index 931467a77..f33c0a352 100644
--- 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"
diff --git a/web-frontend/modules/builder/components/elements/components/forms/general/TableElementForm.vue b/web-frontend/modules/builder/components/elements/components/forms/general/TableElementForm.vue
index d17fb2398..b7b8a68c8 100644
--- 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
diff --git a/web-frontend/modules/builder/components/elements/components/forms/style/DefaultStyleForm.vue b/web-frontend/modules/builder/components/elements/components/forms/style/DefaultStyleForm.vue
index 72245315d..b3ea47c25 100644
--- 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"
diff --git a/web-frontend/modules/builder/components/theme/ImageThemeConfigBlock.vue b/web-frontend/modules/builder/components/theme/ImageThemeConfigBlock.vue
index 2cee1c1dc..9ddda0d23 100644
--- 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')"
diff --git a/web-frontend/modules/builder/components/workflowAction/RefreshDataSourceWorkflowActionForm.vue b/web-frontend/modules/builder/components/workflowAction/RefreshDataSourceWorkflowActionForm.vue
index 0d2272d86..e04a98419 100644
--- 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"
diff --git a/web-frontend/modules/core/components/integrations/IntegrationDropdown.vue b/web-frontend/modules/core/components/integrations/IntegrationDropdown.vue
index 6b39c0eec..b54153aca 100644
--- 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="