From bcbeae22799c75d1e09384cc26a4099f384c68cb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 22 Jun 2023 08:16:59 +0100
Subject: [PATCH] Rework grid buttons, removing add row and add column buttons,
 and compression height and width into new size button

---
 .../backend/DataTable/DataTable.svelte        |   4 +-
 .../buttons/TableFilterButton.svelte          |   8 +-
 .../components/grid/cells/BooleanCell.svelte  |   6 -
 .../grid/controls/ColumnWidthButton.svelte    |  76 ----------
 .../grid/controls/HideColumnsButton.svelte    |  13 +-
 .../grid/controls/RowHeightButton.svelte      |  71 ---------
 .../grid/controls/SizeButton.svelte           | 135 ++++++++++++++++++
 .../grid/controls/SortButton.svelte           |   7 +-
 .../src/components/grid/layout/Grid.svelte    |  21 +--
 9 files changed, 169 insertions(+), 172 deletions(-)
 delete mode 100644 packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte
 delete mode 100644 packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte
 create mode 100644 packages/frontend-core/src/components/grid/controls/SizeButton.svelte

diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 81df5a475d..449be506f3 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -38,6 +38,9 @@
     showAvatars={false}
     on:updatetable={e => tables.replaceTable(id, e.detail)}
   >
+    <svelte:fragment slot="filter">
+      <GridFilterButton />
+    </svelte:fragment>
     <svelte:fragment slot="controls">
       {#if isInternal}
         <GridCreateViewButton />
@@ -52,7 +55,6 @@
         <GridImportButton />
       {/if}
       <GridExportButton />
-      <GridFilterButton />
       <GridAddColumnModal />
       <GridEditColumnModal />
       {#if isUsersTable}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
index 5af8d1bac8..ce6a3f0c51 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
@@ -14,6 +14,12 @@
 
   $: tempValue = filters || []
   $: schemaFields = Object.values(schema || {})
+  $: text = getText(filters)
+
+  const getText = filters => {
+    const count = filters?.length
+    return count ? `Filter (${count})` : "Filter"
+  }
 </script>
 
 <ActionButton
@@ -23,7 +29,7 @@
   on:click={modal.show}
   selected={tempValue?.length > 0}
 >
-  Filter
+  {text}
 </ActionButton>
 <Modal bind:this={modal}>
   <ModalContent
diff --git a/packages/frontend-core/src/components/grid/cells/BooleanCell.svelte b/packages/frontend-core/src/components/grid/cells/BooleanCell.svelte
index 719fece3df..c3449c0b39 100644
--- a/packages/frontend-core/src/components/grid/cells/BooleanCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/BooleanCell.svelte
@@ -44,10 +44,4 @@
   .boolean-cell.editable {
     pointer-events: all;
   }
-  .boolean-cell :global(.spectrum-Checkbox-box:before),
-  .boolean-cell :global(.spectrum-Checkbox-box:after),
-  .boolean-cell :global(.spectrum-Checkbox-checkmark),
-  .boolean-cell :global(.spectrum-Checkbox-partialCheckmark) {
-    transition: none;
-  }
 </style>
diff --git a/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte
deleted file mode 100644
index fb20cc50e5..0000000000
--- a/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { ActionButton, Popover } from "@budibase/bbui"
-  import { DefaultColumnWidth } from "../lib/constants"
-
-  const { stickyColumn, columns, compact } = getContext("grid")
-  const smallSize = 120
-  const mediumSize = DefaultColumnWidth
-  const largeSize = DefaultColumnWidth * 1.5
-
-  let open = false
-  let anchor
-
-  $: allCols = $columns.concat($stickyColumn ? [$stickyColumn] : [])
-  $: allSmall = allCols.every(col => col.width === smallSize)
-  $: allMedium = allCols.every(col => col.width === mediumSize)
-  $: allLarge = allCols.every(col => col.width === largeSize)
-  $: custom = !allSmall && !allMedium && !allLarge
-  $: sizeOptions = [
-    {
-      label: "Small",
-      size: smallSize,
-      selected: allSmall,
-    },
-    {
-      label: "Medium",
-      size: mediumSize,
-      selected: allMedium,
-    },
-    {
-      label: "Large",
-      size: largeSize,
-      selected: allLarge,
-    },
-  ]
-</script>
-
-<div bind:this={anchor}>
-  <ActionButton
-    icon="MoveLeftRight"
-    quiet
-    size="M"
-    on:click={() => (open = !open)}
-    selected={open}
-    disabled={!allCols.length}
-    tooltip={$compact ? "Width" : null}
-  >
-    {$compact ? "" : "Width"}
-  </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
-  <div class="content">
-    {#each sizeOptions as option}
-      <ActionButton
-        quiet
-        on:click={() => columns.actions.changeAllColumnWidths(option.size)}
-        selected={option.selected}
-      >
-        {option.label}
-      </ActionButton>
-    {/each}
-    {#if custom}
-      <ActionButton selected={custom} quiet>Custom</ActionButton>
-    {/if}
-  </div>
-</Popover>
-
-<style>
-  .content {
-    padding: 12px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
index fb66b106c9..b8728156db 100644
--- a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
@@ -3,12 +3,13 @@
   import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
 
-  const { columns, stickyColumn, compact } = getContext("grid")
+  const { columns, stickyColumn } = getContext("grid")
 
   let open = false
   let anchor
 
   $: anyHidden = $columns.some(col => !col.visible)
+  $: text = getText($columns)
 
   const toggleVisibility = (column, visible) => {
     columns.update(state => {
@@ -38,6 +39,11 @@
     })
     columns.actions.saveChanges()
   }
+
+  const getText = columns => {
+    const hidden = columns.filter(col => !col.visible).length
+    return hidden ? `Hide columns (${hidden})` : "Hide columns"
+  }
 </script>
 
 <div bind:this={anchor}>
@@ -48,13 +54,12 @@
     on:click={() => (open = !open)}
     selected={open || anyHidden}
     disabled={!$columns.length}
-    tooltip={$compact ? "Columns" : ""}
   >
-    {$compact ? "" : "Columns"}
+    {text}
   </ActionButton>
 </div>
 
-<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
+<Popover bind:open {anchor} align="left">
   <div class="content">
     <div class="columns">
       {#if $stickyColumn}
diff --git a/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte b/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte
deleted file mode 100644
index e9617ce0b6..0000000000
--- a/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { ActionButton, Popover } from "@budibase/bbui"
-  import {
-    LargeRowHeight,
-    MediumRowHeight,
-    SmallRowHeight,
-  } from "../lib/constants"
-
-  const { rowHeight, columns, table, compact } = getContext("grid")
-  const sizeOptions = [
-    {
-      label: "Small",
-      size: SmallRowHeight,
-    },
-    {
-      label: "Medium",
-      size: MediumRowHeight,
-    },
-    {
-      label: "Large",
-      size: LargeRowHeight,
-    },
-  ]
-
-  let open = false
-  let anchor
-
-  const changeRowHeight = height => {
-    columns.actions.saveTable({
-      ...$table,
-      rowHeight: height,
-    })
-  }
-</script>
-
-<div bind:this={anchor}>
-  <ActionButton
-    icon="MoveUpDown"
-    quiet
-    size="M"
-    on:click={() => (open = !open)}
-    selected={open}
-    tooltip={$compact ? "Height" : null}
-  >
-    {$compact ? "" : "Height"}
-  </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
-  <div class="content">
-    {#each sizeOptions as option}
-      <ActionButton
-        quiet
-        selected={$rowHeight === option.size}
-        on:click={() => changeRowHeight(option.size)}
-      >
-        {option.label}
-      </ActionButton>
-    {/each}
-  </div>
-</Popover>
-
-<style>
-  .content {
-    padding: 12px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/controls/SizeButton.svelte b/packages/frontend-core/src/components/grid/controls/SizeButton.svelte
new file mode 100644
index 0000000000..eb9bf917d9
--- /dev/null
+++ b/packages/frontend-core/src/components/grid/controls/SizeButton.svelte
@@ -0,0 +1,135 @@
+<script>
+  import { getContext } from "svelte"
+  import { ActionButton, Popover, Label } from "@budibase/bbui"
+  import {
+    DefaultColumnWidth,
+    LargeRowHeight,
+    MediumRowHeight,
+    SmallRowHeight,
+  } from "../lib/constants"
+
+  const { stickyColumn, columns, rowHeight, table } = getContext("grid")
+
+  // Some constants for column width options
+  const smallColSize = 120
+  const mediumColSize = DefaultColumnWidth
+  const largeColSize = DefaultColumnWidth * 1.5
+
+  // Row height sizes
+  const rowSizeOptions = [
+    {
+      label: "Small",
+      size: SmallRowHeight,
+    },
+    {
+      label: "Medium",
+      size: MediumRowHeight,
+    },
+    {
+      label: "Large",
+      size: LargeRowHeight,
+    },
+  ]
+
+  let open = false
+  let anchor
+
+  // Column width sizes
+  $: allCols = $columns.concat($stickyColumn ? [$stickyColumn] : [])
+  $: allSmall = allCols.every(col => col.width === smallColSize)
+  $: allMedium = allCols.every(col => col.width === mediumColSize)
+  $: allLarge = allCols.every(col => col.width === largeColSize)
+  $: custom = !allSmall && !allMedium && !allLarge
+  $: columnSizeOptions = [
+    {
+      label: "Small",
+      size: smallColSize,
+      selected: allSmall,
+    },
+    {
+      label: "Medium",
+      size: mediumColSize,
+      selected: allMedium,
+    },
+    {
+      label: "Large",
+      size: largeColSize,
+      selected: allLarge,
+    },
+  ]
+
+  const changeRowHeight = height => {
+    columns.actions.saveTable({
+      ...$table,
+      rowHeight: height,
+    })
+  }
+</script>
+
+<div bind:this={anchor}>
+  <ActionButton
+    icon="MoveUpDown"
+    quiet
+    size="M"
+    on:click={() => (open = !open)}
+    selected={open}
+    disabled={!allCols.length}
+  >
+    Size
+  </ActionButton>
+</div>
+
+<Popover bind:open {anchor} align="left">
+  <div class="content">
+    <div class="size">
+      <Label>Row height</Label>
+      <div class="options">
+        {#each rowSizeOptions as option}
+          <ActionButton
+            quiet
+            selected={$rowHeight === option.size}
+            on:click={() => changeRowHeight(option.size)}
+          >
+            {option.label}
+          </ActionButton>
+        {/each}
+      </div>
+    </div>
+    <div class="size">
+      <Label>Column width</Label>
+      <div class="options">
+        {#each columnSizeOptions as option}
+          <ActionButton
+            quiet
+            on:click={() => columns.actions.changeAllColumnWidths(option.size)}
+            selected={option.selected}
+          >
+            {option.label}
+          </ActionButton>
+        {/each}
+        {#if custom}
+          <ActionButton selected={custom} quiet>Custom</ActionButton>
+        {/if}
+      </div>
+    </div>
+  </div>
+</Popover>
+
+<style>
+  .content {
+    padding: 12px;
+  }
+  .size {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .size:first-child {
+    margin-bottom: 16px;
+  }
+  .options {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+</style>
diff --git a/packages/frontend-core/src/components/grid/controls/SortButton.svelte b/packages/frontend-core/src/components/grid/controls/SortButton.svelte
index 2018e83e44..bd75249216 100644
--- a/packages/frontend-core/src/components/grid/controls/SortButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/SortButton.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Select } from "@budibase/bbui"
 
-  const { sort, columns, stickyColumn, compact } = getContext("grid")
+  const { sort, columns, stickyColumn } = getContext("grid")
 
   let open = false
   let anchor
@@ -90,13 +90,12 @@
     on:click={() => (open = !open)}
     selected={open}
     disabled={!columnOptions.length}
-    tooltip={$compact ? "Sort" : ""}
   >
-    {$compact ? "" : "Sort"}
+    Sort
   </ActionButton>
 </div>
 
-<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
+<Popover bind:open {anchor} align="left">
   <div class="content">
     <Select
       placeholder={null}
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index 38664c0813..e94cf5da93 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -16,11 +16,8 @@
   import UserAvatars from "./UserAvatars.svelte"
   import KeyboardManager from "../overlays/KeyboardManager.svelte"
   import SortButton from "../controls/SortButton.svelte"
-  import AddColumnButton from "../controls/AddColumnButton.svelte"
   import HideColumnsButton from "../controls/HideColumnsButton.svelte"
-  import AddRowButton from "../controls/AddRowButton.svelte"
-  import RowHeightButton from "../controls/RowHeightButton.svelte"
-  import ColumnWidthButton from "../controls/ColumnWidthButton.svelte"
+  import SizeButton from "../controls/SizeButton.svelte"
   import NewRow from "./NewRow.svelte"
   import { createGridWebsocket } from "../lib/websocket"
   import {
@@ -120,13 +117,11 @@
   {#if showControls}
     <div class="controls">
       <div class="controls-left">
-        <AddRowButton />
-        <AddColumnButton />
-        <slot name="controls" />
+        <slot name="filter" />
         <SortButton />
         <HideColumnsButton />
-        <ColumnWidthButton />
-        <RowHeightButton />
+        <SizeButton />
+        <slot name="controls" />
       </div>
       <div class="controls-right">
         {#if showAvatars}
@@ -277,4 +272,12 @@
     background: var(--grid-background-alt);
     opacity: 0.6;
   }
+
+  /* Disable checkbox animation anywhere in the grid data */
+  .grid-data-outer :global(.spectrum-Checkbox-box:before),
+  .grid-data-outer :global(.spectrum-Checkbox-box:after),
+  .grid-data-outer :global(.spectrum-Checkbox-checkmark),
+  .grid-data-outer :global(.spectrum-Checkbox-partialCheckmark) {
+    transition: none;
+  }
 </style>