From 3aa7b4e2c90a948fda17f0e13f060f3137042fc0 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 8 Jun 2022 15:13:47 +0100 Subject: [PATCH] Update select settings to match the settings bar style where possible --- .../bbui/src/ActionButton/ActionButton.svelte | 3 +++ .../design/settings/componentSettings.js | 13 +++++++++++- .../settings/controls/BarButtonList.svelte | 17 +++++++++++++++ .../settings/ComponentSettingsSection.svelte | 13 ++++++++---- .../settings/ConditionalUIDrawer.svelte | 21 +++++++------------ 5 files changed, 49 insertions(+), 18 deletions(-) create mode 100644 packages/builder/src/components/design/settings/controls/BarButtonList.svelte diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte index b518ac3d92..2b4d1076c2 100644 --- a/packages/bbui/src/ActionButton/ActionButton.svelte +++ b/packages/bbui/src/ActionButton/ActionButton.svelte @@ -80,4 +80,7 @@ .active svg { color: var(--spectrum-global-color-blue-600); } + :global([dir="ltr"] .spectrum-ActionButton .spectrum-Icon) { + margin-left: 0; + } diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js index 7f504c4ea8..56ae3de490 100644 --- a/packages/builder/src/components/design/settings/componentSettings.js +++ b/packages/builder/src/components/design/settings/componentSettings.js @@ -18,6 +18,7 @@ import FormFieldSelect from "./controls/FormFieldSelect.svelte" import ValidationEditor from "./controls/ValidationEditor/ValidationEditor.svelte" import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte" import ColumnEditor from "./controls/ColumnEditor/ColumnEditor.svelte" +import BarButtonList from "./controls/BarButtonList.svelte" const componentMap = { text: DrawerBindableCombobox, @@ -61,6 +62,16 @@ const componentMap = { "validation/link": ValidationEditor, } -export const getComponentForSettingType = type => { +export const getComponentForSetting = setting => { + const { type, showInBar, barStyle } = setting || {} + if (!type) { + return null + } + + // We can show a clone of the bar settings for certain select settings + if (showInBar && type === "select" && barStyle === "buttons") { + return BarButtonList + } + return componentMap[type] } diff --git a/packages/builder/src/components/design/settings/controls/BarButtonList.svelte b/packages/builder/src/components/design/settings/controls/BarButtonList.svelte new file mode 100644 index 0000000000..01f198c5ec --- /dev/null +++ b/packages/builder/src/components/design/settings/controls/BarButtonList.svelte @@ -0,0 +1,17 @@ + + + + {#each options as option} + onChange(option.value)} + /> + {/each} + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte index 2e04401b0a..60b0b1b5df 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte @@ -6,7 +6,7 @@ import LayoutSelect from "components/design/settings/controls/LayoutSelect.svelte" import RoleSelect from "components/design/settings/controls/RoleSelect.svelte" import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte" - import { getComponentForSettingType } from "components/design/settings/componentSettings" + import { getComponentForSetting } from "components/design/settings/componentSettings" import { Utils } from "@budibase/frontend-core" export let componentDefinition @@ -51,7 +51,7 @@ }) const canRenderControl = setting => { - const control = getComponentForSettingType(setting?.type) + const control = getComponentForSetting(setting) if (!control) { return false } @@ -104,7 +104,7 @@ {#if canRenderControl(setting)} updateProp(setting.key, val)} props={{ - options: setting.options || [], + // Generic settings placeholder: setting.placeholder || null, + + // Select settings + options: setting.options || [], + + // Number fields min: setting.min || null, max: setting.max || null, }} diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte index 2605343c45..b40b33744f 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte @@ -14,7 +14,7 @@ import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte" import { LuceneUtils, Constants } from "@budibase/frontend-core" import { selectedComponent } from "builderStore" - import { getComponentForSettingType } from "components/design/settings/componentSettings" + import { getComponentForSetting } from "components/design/settings/componentSettings" import PropertyControl from "components/design/settings/controls/PropertyControl.svelte" import { getComponentSettings } from "builderStore/componentUtils" @@ -71,11 +71,6 @@ return settings.find(setting => setting.key === key) } - const getComponentForSetting = key => { - const settingDefinition = getSettingDefinition(key) - return getComponentForSettingType(settingDefinition?.type || "text") - } - const addCondition = () => { conditions = [ ...conditions, @@ -154,6 +149,7 @@ on:consider={updateConditions} > {#each conditions as condition (condition.id)} + {@const definition = getSettingDefinition(condition.setting)}
TO
- {#if getSettingDefinition(condition.setting)} + {#if definition} (condition.settingValue = val)} props={{ - options: getSettingDefinition(condition.setting).options, - placeholder: getSettingDefinition(condition.setting) - .placeholder, + options: definition.options, + placeholder: definition.placeholder, }} {bindings} />