Rework grid buttons, removing add row and add column buttons, and compression height and width into new size button

2023-06-22 08:16:59 +01:00 · 2023-06-22 08:16:59 +01:00 · bcbeae2279
parent 0a3dd1a1b4
commit bcbeae2279
9 changed files with 169 additions and 172 deletions
--- 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}
--- 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
--- 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>
--- a/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnWidthButton.svelte
@ -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>
--- 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}
--- a/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/RowHeightButton.svelte
@ -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>
--- a/packages/frontend-core/src/components/grid/controls/SizeButton.svelte
+++ 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>
--- 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}
--- 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>