diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte index eb235ad153..7bedc769c8 100644 --- a/packages/bbui/src/ColorPicker/ColorPicker.svelte +++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte @@ -40,6 +40,15 @@ { label: "Colors", colors: [ + "red-100", + "orange-100", + "yellow-100", + "green-100", + "seafoam-100", + "blue-100", + "indigo-100", + "magenta-100", + "red-400", "orange-400", "yellow-400", @@ -108,12 +117,17 @@ const getCheckColor = value => { // Use dynamic color for theme grays - if (value?.includes("gray")) { + if (value?.includes("-gray-")) { return /^.*(gray-(50|75|100|200|300|400|500))\)$/.test(value) ? "var(--spectrum-global-color-gray-900)" : "var(--spectrum-global-color-gray-50)" } + // Use contrasating check for the dim colours + if (value?.includes("-100")) { + return "var(--spectrum-global-color-gray-900)" + } + // Use black check for static white if (value?.includes("static-black")) { return "var(--spectrum-global-color-static-gray-50)" diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte index 0111bd6bcf..3806281438 100644 --- a/packages/bbui/src/Form/Core/Select.svelte +++ b/packages/bbui/src/Form/Core/Select.svelte @@ -62,7 +62,9 @@ return placeholder || "Choose an option" } - return getFieldAttribute(getOptionLabel, value, options) + return ( + getFieldAttribute(getOptionLabel, value, options) || "Choose an option" + ) } const selectOption = value => { diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css index d60a3e18ea..dd0588818e 100644 --- a/packages/bbui/src/bbui.css +++ b/packages/bbui/src/bbui.css @@ -111,17 +111,38 @@ a { /* Custom theme additions */ .spectrum--darkest { --drop-shadow: rgba(0, 0, 0, 0.6); - --spectrum-global-color-blue-100: rgb(30, 36, 50); + --spectrum-global-color-red-100: #570000; + --spectrum-global-color-orange-100: #481801; + --spectrum-global-color-yellow-100: #352400; + --spectrum-global-color-green-100: #002f07; + --spectrum-global-color-seafoam-100: #122b2a; + --spectrum-global-color-blue-100: #002651; + --spectrum-global-color-indigo-100: #1a1d61; + --spectrum-global-color-magenta-100: #530329; + --translucent-grey: rgba(255, 255, 255, 0.1); } .spectrum--dark { --drop-shadow: rgba(0, 0, 0, 0.3); - --spectrum-global-color-blue-100: rgb(42, 47, 57); -} -.spectrum--light { - --drop-shadow: rgba(0, 0, 0, 0.075); - --spectrum-global-color-blue-100: rgb(240, 245, 255); + --spectrum-global-color-red-100: #7b0000; + --spectrum-global-color-orange-100: #662500; + --spectrum-global-color-yellow-100: #4c3600; + --spectrum-global-color-green-100: #00450a; + --spectrum-global-color-seafoam-100: #12413f; + --spectrum-global-color-blue-100: #003877; + --spectrum-global-color-indigo-100: #282c8c; + --spectrum-global-color-magenta-100: #76003a; + --translucent-grey: rgba(255, 255, 255, 0.065); } +.spectrum--light, .spectrum--lightest { - --drop-shadow: rgba(0, 0, 0, 0.05); - --spectrum-global-color-blue-100: rgb(240, 244, 255); + --drop-shadow: rgba(0, 0, 0, 0.075); + --spectrum-global-color-red-100: #ffddd6; + --spectrum-global-color-orange-100: #ffdfad; + --spectrum-global-color-yellow-100: #fbf198; + --spectrum-global-color-green-100: #cef8e0; + --spectrum-global-color-seafoam-100: #cef7f3; + --spectrum-global-color-blue-100: #e0f2ff; + --spectrum-global-color-indigo-100: #edeeff; + --spectrum-global-color-magenta-100: #ffeaf1; + --translucent-grey: rgba(0, 0, 0, 0.085); } diff --git a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte index 4e5789b563..4aa7ced9dc 100644 --- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte +++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte @@ -5,6 +5,7 @@ export let bindings = [] export let value = "" + export let allowHBS = true export let allowJS = false export let allowHelpers = true export let autofocusEditor = false @@ -31,6 +32,7 @@ context={{ ...$previewStore.selectedComponentContext, ...context }} snippets={$snippets} {value} + {allowHBS} {allowJS} {allowHelpers} {autofocusEditor} diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte index 9c482dbc0a..65831b652a 100644 --- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte +++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte @@ -16,6 +16,7 @@ export let placeholder export let label export let disabled = false + export let allowHBS = true export let allowJS = true export let allowHelpers = true export let updateOnChange = true @@ -100,6 +101,7 @@ value={readableValue} on:change={event => (tempValue = event.detail)} {bindings} + {allowHBS} {allowJS} {allowHelpers} {context} diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js index e174a2e6f7..f5ab1cb157 100644 --- a/packages/builder/src/components/design/settings/componentSettings.js +++ b/packages/builder/src/components/design/settings/componentSettings.js @@ -30,6 +30,7 @@ import RelationshipFilterEditor from "./controls/RelationshipFilterEditor.svelte import FormStepConfiguration from "./controls/FormStepConfiguration.svelte" import FormStepControls from "./controls/FormStepControls.svelte" import PaywalledSetting from "./controls/PaywalledSetting.svelte" +import TableConditionEditor from "./controls/TableConditionEditor.svelte" const componentMap = { text: DrawerBindableInput, @@ -61,6 +62,7 @@ const componentMap = { columns: ColumnEditor, "columns/basic": BasicColumnEditor, "columns/grid": GridColumnEditor, + tableConditions: TableConditionEditor, "field/sortable": SortableFieldSelect, "field/string": FormFieldSelect, "field/number": FormFieldSelect, diff --git a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte index 0ba7de42c2..2bfa7d39fd 100644 --- a/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte +++ b/packages/builder/src/components/design/settings/controls/DraggableList/DraggableList.svelte @@ -12,6 +12,7 @@ export let listItemKey export let draggable = true export let focus + export let bindings = [] let zoneType = generate() @@ -126,6 +127,7 @@ anchor={anchors[draggableItem.id]} item={draggableItem.item} {...listTypeProps} + {bindings} on:change={onItemChanged} /> diff --git a/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte index 116867caf8..a491561f93 100644 --- a/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte +++ b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte @@ -10,7 +10,6 @@ export let componentBindings export let bindings export let parseSettings - export let disabled const draggable = getContext("draggable") const dispatch = createEventDispatcher() diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte index a16fe9273e..149ec7265a 100644 --- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte +++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/FieldSetting.svelte @@ -4,9 +4,12 @@ import { createEventDispatcher } from "svelte" import { cloneDeep } from "lodash/fp" import { FIELDS } from "constants/backend" + import { Constants } from "@budibase/frontend-core" + import { FieldType } from "@budibase/types" export let item export let anchor + export let bindings const dispatch = createEventDispatcher() @@ -28,19 +31,30 @@ } const parseSettings = settings => { - return settings + let columnSettings = settings .filter(setting => setting.key !== "field") .map(setting => { return { ...setting, nested: true } }) + + // Filter out conditions for invalid types. + // Allow formulas as we have all the data already loaded in the table. + if ( + Constants.BannedSearchTypes.includes(item.columnType) && + item.columnType !== FieldType.FORMULA + ) { + return columnSettings.filter(x => x.key !== "conditions") + } + return columnSettings }