From b060de98d0dae31a9c015da071f415d6e9b20f31 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 26 Jun 2024 16:12:44 +0100 Subject: [PATCH 01/35] Add UI for configuring conditions on table columns --- .../design/settings/componentSettings.js | 2 + .../controls/CellConditionEditor.svelte | 183 ++++++++++++++++++ .../GridColumnConfiguration/getColumns.js | 2 + packages/client/manifest.json | 5 + 4 files changed, 192 insertions(+) create mode 100644 packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js index e174a2e6f7..3540c8b990 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 CellConditionEditor from "./controls/CellConditionEditor.svelte" const componentMap = { text: DrawerBindableInput, @@ -61,6 +62,7 @@ const componentMap = { columns: ColumnEditor, "columns/basic": BasicColumnEditor, "columns/grid": GridColumnEditor, + cellConditions: CellConditionEditor, "field/sortable": SortableFieldSelect, "field/string": FormFieldSelect, "field/number": FormFieldSelect, diff --git a/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte new file mode 100644 index 0000000000..fb0c98df9e --- /dev/null +++ b/packages/builder/src/components/design/settings/controls/CellConditionEditor.svelte @@ -0,0 +1,183 @@ + + +{conditionText} + + + + +
+ + {#if tempValue.length} +
+ {#each tempValue as condition} + Set background color to + (condition.color = e.detail)} + /> + if value + onValueTypeChange(condition, e.detail)} + /> + (condition.referenceValue = e.detail)} + /> + duplicateCondition(condition)} + /> + removeCondition(condition)} + /> + {/each} +
+ {/if} +
+ +
+
+
+
+
+ + diff --git a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js index 4af3e48110..4fbe6fc9e7 100644 --- a/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js +++ b/packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js @@ -68,6 +68,7 @@ const toGridFormat = draggableListColumns => { field: entry.field, active: entry.active, width: entry.width, + conditions: entry.conditions, })) } @@ -83,6 +84,7 @@ const toDraggableListFormat = (gridFormatColumns, createComponent, schema) => { label: column.label, columnType: schema[column.field].type, width: column.width, + conditions: column.conditions, }, {} ) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 7a9d1a5695..c8a5f8e1a4 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -2879,6 +2879,11 @@ "placeholder": "Auto", "min": 80, "max": 9999 + }, + { + "type": "cellConditions", + "label": "Conditions", + "key": "conditions" } ] }, From 42162e711ad8f332e0aea0200a08231893f6b909 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 27 Jun 2024 08:23:18 +0100 Subject: [PATCH 02/35] Add initial work on conditional cell colours and add new 100 variant spectrum colours --- .../bbui/src/ColorPicker/ColorPicker.svelte | 16 ++- packages/bbui/src/bbui.css | 34 ++++-- .../src/components/app/GridBlock.svelte | 1 + .../src/components/grid/cells/DataCell.svelte | 1 + .../src/components/grid/cells/GridCell.svelte | 45 ++++--- .../src/components/grid/stores/columns.js | 1 + .../src/components/grid/stores/rows.js | 110 ++++++++++++++---- .../frontend-core/src/themes/midnight.css | 2 +- packages/frontend-core/src/themes/nord.css | 2 +- 9 files changed, 161 insertions(+), 51 deletions(-) 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/bbui.css b/packages/bbui/src/bbui.css index d60a3e18ea..f707a75975 100644 --- a/packages/bbui/src/bbui.css +++ b/packages/bbui/src/bbui.css @@ -111,17 +111,35 @@ 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; } .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; } +.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: #ffebe7; + --spectrum-global-color-orange-100: #ffeccc; + --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; } diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index 2035b03391..cc914324c7 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -91,6 +91,7 @@ overrides[column.field] = { displayName: column.label, order: idx, + conditions: column.conditions, } if (column.width) { overrides[column.field].width = column.width diff --git a/packages/frontend-core/src/components/grid/cells/DataCell.svelte b/packages/frontend-core/src/components/grid/cells/DataCell.svelte index 372563995a..67a0cb6adc 100644 --- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/DataCell.svelte @@ -130,6 +130,7 @@ on:mouseup={stopSelectionCallback} on:click={handleClick} width={column.width} + metadata={row.__metadata?.[column.name]} >