Add initial work on conditional cell colours and add new 100 variant spectrum colours

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)"

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-global-color-red-100: #7b0000;
-}
+  --spectrum-global-color-orange-100: #662500;
-.spectrum--light {
+  --spectrum-global-color-yellow-100: #4c3600;
-  --drop-shadow: rgba(0, 0, 0, 0.075);
+  --spectrum-global-color-green-100: #00450a;
-  --spectrum-global-color-blue-100: rgb(240, 245, 255);
+  --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);
+  --drop-shadow: rgba(0, 0, 0, 0.075);
-  --spectrum-global-color-blue-100: rgb(240, 244, 255);
+  --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;
 }

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

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]}
 >
   <svelte:component
     this={getCellRenderer(column)}

packages/frontend-core/src/components/grid/cells/GridCell.svelte

@@ -11,13 +11,17 @@
   export let center = false
   export let readonly = false
   export let hidden = false
+  export let metadata = null
 
-  $: style = getStyle(width, selectedUser)
+  $: style = getStyle(width, selectedUser, metadata)
 
-  const getStyle = (width, selectedUser) => {
+  const getStyle = (width, selectedUser, metadata) => {
     let style = width === "auto" ? "width: auto;" : `flex: 0 0 ${width}px;`
     if (selectedUser) {
-      style += `--user-color:${selectedUser.color};`
+      style += `--user-color :${selectedUser.color};`
+    }
+    if (metadata?.background) {
+      style += `--cell-background: ${metadata.background};`
     }
     return style
   }
@@ -94,9 +98,9 @@
   }
 
   /* Cell border */
-  .cell.focused:after,
+  .cell.focused::after,
-  .cell.error:after,
+  .cell.error::after,
-  .cell.selected-other:not(.focused):after {
+  .cell.selected-other:not(.focused)::after {
     content: " ";
     position: absolute;
     top: 0;
@@ -109,14 +113,30 @@
     box-sizing: border-box;
   }
 
+  /* Cell background overlay */
+  .cell.selected::before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    box-sizing: border-box;
+    height: calc(100% + 1px);
+    width: calc(100% + 1px);
+    opacity: 0.16;
+    background: var(--spectrum-global-color-blue-400);
+    z-index: 2;
+    pointer-events: none;
+  }
+
   /* Cell border for cells with labels */
-  .cell.error:after {
+  .cell.error::after {
     border-radius: 0 2px 2px 2px;
   }
-  .cell.top.error:after {
+  .cell.top.error::after {
     border-radius: 2px 2px 2px 0;
   }
-  .cell.selected-other:not(.focused):after {
+  .cell.selected-other:not(.focused)::after {
     border-radius: 2px;
   }
 
@@ -151,15 +171,10 @@
   .cell.focused.readonly {
     --cell-color: var(--spectrum-global-color-gray-600);
   }
-
+  .cell.highlighted:not(.focused):not(.selected),
-  .cell.highlighted:not(.focused),
   .cell.focused.readonly {
     --cell-background: var(--cell-background-hover);
   }
-  .cell.selected.focused,
-  .cell.selected:not(.focused) {
-    --cell-background: var(--spectrum-global-color-blue-100);
-  }
 
   /* Label for additional text */
   .label {

packages/frontend-core/src/components/grid/stores/columns.js

@@ -144,6 +144,7 @@ export const initialise = context => {
             visible: fieldSchema.visible ?? true,
             readonly: fieldSchema.readonly,
             order: fieldSchema.order ?? oldColumn?.order,
+            conditions: fieldSchema.conditions,
           }
           // Override a few properties for primary display
           if (field === primaryDisplay) {

packages/frontend-core/src/components/grid/stores/rows.js

@@ -5,6 +5,51 @@ import { getCellID, parseCellID } from "../lib/utils"
 import { tick } from "svelte"
 import { Helpers } from "@budibase/bbui"
 import { sleep } from "../../../utils/utils"
+import { QueryUtils } from "../../../utils"
+
+const evaluateConditions = (row, column) => {
+  if (!column.conditions?.length) {
+    return
+  }
+  for (let condition of column.conditions) {
+    let value = row[column.name]
+    let referenceValue = condition.referenceValue
+
+    // Parse values into correct types
+    if (condition.valueType === "number") {
+      referenceValue = parseFloat(referenceValue)
+      value = parseFloat(value)
+    } else if (condition.valueType === "datetime") {
+      if (referenceValue) {
+        referenceValue = new Date(referenceValue).toISOString()
+      }
+      if (value) {
+        value = new Date(value).toISOString()
+      }
+    } else if (condition.valueType === "boolean") {
+      referenceValue = `${referenceValue}`.toLowerCase() === "true"
+      value = `${value}`.toLowerCase() === "true"
+    }
+
+    // Build lucene compatible condition expression
+    const luceneCondition = {
+      operator: condition.operator,
+      type: condition.valueType,
+      field: "value",
+      value: referenceValue,
+    }
+    const query = QueryUtils.buildQuery([luceneCondition])
+    const result = QueryUtils.runQuery([{ value }], query)
+    if (result.length > 0) {
+      if (!row.__metadata) {
+        row.__metadata = {}
+      }
+      row.__metadata[column.name] = {
+        background: condition.color,
+      }
+    }
+  }
+}
 
 export const createStores = () => {
   const rows = writable([])
@@ -17,15 +62,47 @@ export const createStores = () => {
   const error = writable(null)
   const fetch = writable(null)
 
+  // Mark loaded as true if we've ever stopped loading
+  let hasStartedLoading = false
+  loading.subscribe($loading => {
+    if ($loading) {
+      hasStartedLoading = true
+    } else if (hasStartedLoading) {
+      loaded.set(true)
+    }
+  })
+
+  return {
+    rows,
+    fetch,
+    loaded,
+    refreshing,
+    loading,
+    rowChangeCache,
+    inProgressChanges,
+    hasNextPage,
+    error,
+  }
+}
+
+export const deriveStores = context => {
+  const { rows, columns, rowChangeCache } = context
+
   // Enrich rows with an index property and any pending changes
   const enrichedRows = derived(
-    [rows, rowChangeCache],
+    [rows, rowChangeCache, columns],
-    ([$rows, $rowChangeCache]) => {
+    ([$rows, $rowChangeCache, $columns]) => {
-      return $rows.map((row, idx) => ({
+      return $rows.map((row, idx) => {
-        ...row,
+        let enriched = {
-        ...$rowChangeCache[row._id],
+          ...row,
-        __idx: idx,
+          ...$rowChangeCache[row._id],
-      }))
+          __idx: idx,
+        }
+        for (let column of $columns) {
+          evaluateConditions(enriched, column)
+        }
+        return enriched
+      })
     }
   )
 
@@ -38,30 +115,12 @@ export const createStores = () => {
     return map
   })
 
-  // Mark loaded as true if we've ever stopped loading
-  let hasStartedLoading = false
-  loading.subscribe($loading => {
-    if ($loading) {
-      hasStartedLoading = true
-    } else if (hasStartedLoading) {
-      loaded.set(true)
-    }
-  })
-
   return {
     rows: {
       ...rows,
       subscribe: enrichedRows.subscribe,
     },
-    fetch,
     rowLookupMap,
-    loaded,
-    refreshing,
-    loading,
-    rowChangeCache,
-    inProgressChanges,
-    hasNextPage,
-    error,
   }
 }
 
@@ -643,6 +702,7 @@ export const createActions = context => {
   const cleanRow = row => {
     let clone = { ...row }
     delete clone.__idx
+    delete clone.__metadata
     if (!get(hasBudibaseIdentifiers)) {
       delete clone._id
     }

packages/frontend-core/src/themes/midnight.css

@@ -16,5 +16,5 @@
   /* Custom additions */
   --modal-background: var(--spectrum-global-color-gray-50);
   --drop-shadow: rgba(0, 0, 0, 0.25) !important;
-  --spectrum-global-color-blue-100: rgba(36, 44, 64) !important;
+  --spectrum-global-color-blue-100: hsl(var(--hue), 48%, 24%) !important;
 }

packages/frontend-core/src/themes/nord.css

@@ -49,5 +49,5 @@
   /* Custom additions */
   --modal-background: var(--spectrum-global-color-gray-50);
   --drop-shadow: rgba(0, 0, 0, 0.15) !important;
-  --spectrum-global-color-blue-100: rgb(56, 65, 90) !important;
+  --spectrum-global-color-blue-100: hsl(213, 36%, 30%) !important;
 }