Merge pull request #13810 from Budibase/BUDI-8281/update-view-column-ui

Update view column UI

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -57,6 +57,7 @@
     class:fullWidth
     class="spectrum-ActionButton spectrum-ActionButton--size{size}"
     class:active
+    class:disabled
     {disabled}
     on:longPress
     on:click|preventDefault
@@ -109,19 +110,22 @@
     background: var(--spectrum-global-color-gray-300);
     border-color: var(--spectrum-global-color-gray-500);
   }
-  .noPadding {
-    padding: 0;
-    min-width: 0;
-  }
   .spectrum-ActionButton--quiet {
     padding: 0 8px;
   }
   .spectrum-ActionButton--quiet.is-selected {
     color: var(--spectrum-global-color-gray-900);
   }
+  .noPadding {
+    padding: 0;
+    min-width: 0;
+  }
   .is-selected:not(.emphasized) .spectrum-Icon {
     color: var(--spectrum-global-color-gray-900);
   }
+  .is-selected.disabled .spectrum-Icon {
+    color: var(--spectrum-global-color-gray-500);
+  }
   .tooltip {
     position: absolute;
     pointer-events: none;

packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte

@@ -1,7 +1,8 @@
 <script>
   import { getContext } from "svelte"
-  import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
+  import { ActionButton, Popover, Icon } from "@budibase/bbui"
   import { getColumnIcon } from "../lib/utils"
+  import ToggleActionButtonGroup from "./ToggleActionButtonGroup.svelte"
 
   const { columns, datasource, stickyColumn, dispatch } = getContext("grid")
 
@@ -11,31 +12,45 @@
   $: anyHidden = $columns.some(col => !col.visible)
   $: text = getText($columns)
 
-  const toggleColumn = async (column, visible) => {
+  const toggleColumn = async (column, permission) => {
-    datasource.actions.addSchemaMutation(column.name, { visible })
+    const visible = permission !== PERMISSION_OPTIONS.HIDDEN
-    await datasource.actions.saveSchemaMutations()
-    dispatch(visible ? "show-column" : "hide-column")
-  }
 
-  const toggleAll = async visible => {
+    datasource.actions.addSchemaMutation(column.name, { visible })
-    let mutations = {}
-    $columns.forEach(column => {
-      mutations[column.name] = { visible }
-    })
-    datasource.actions.addSchemaMutations(mutations)
     await datasource.actions.saveSchemaMutations()
     dispatch(visible ? "show-column" : "hide-column")
   }
 
   const getText = columns => {
     const hidden = columns.filter(col => !col.visible).length
-    return hidden ? `Hide columns (${hidden})` : "Hide columns"
+    return hidden ? `Columns (${hidden} restricted)` : "Columns"
+  }
+
+  const PERMISSION_OPTIONS = {
+    WRITABLE: "writable",
+    HIDDEN: "hidden",
+  }
+
+  const options = [
+    { icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writable" },
+    {
+      icon: "VisibilityOff",
+      value: PERMISSION_OPTIONS.HIDDEN,
+      tooltip: "Hidden",
+    },
+  ]
+
+  function columnToPermissionOptions(column) {
+    if (!column.visible) {
+      return PERMISSION_OPTIONS.HIDDEN
+    }
+
+    return PERMISSION_OPTIONS.WRITABLE
   }
 </script>
 
 <div bind:this={anchor}>
   <ActionButton
-    icon="VisibilityOff"
+    icon="ColumnSettings"
     quiet
     size="M"
     on:click={() => (open = !open)}
@@ -54,25 +69,25 @@
           <Icon size="S" name={getColumnIcon($stickyColumn)} />
           {$stickyColumn.label}
         </div>
-        <Toggle disabled size="S" value={true} />
+
+        <ToggleActionButtonGroup
+          disabled
+          value={PERMISSION_OPTIONS.WRITABLE}
+          {options}
+        />
       {/if}
       {#each $columns as column}
         <div class="column">
           <Icon size="S" name={getColumnIcon(column)} />
           {column.label}
         </div>
-        <Toggle
+        <ToggleActionButtonGroup
-          size="S"
+          on:click={e => toggleColumn(column, e.detail)}
-          value={column.visible}
+          value={columnToPermissionOptions(column)}
-          on:change={e => toggleColumn(column, e.detail)}
+          {options}
-          disabled={column.primaryDisplay}
         />
       {/each}
     </div>
-    <div class="buttons">
-      <ActionButton on:click={() => toggleAll(true)}>Show all</ActionButton>
-      <ActionButton on:click={() => toggleAll(false)}>Hide all</ActionButton>
-    </div>
   </div>
 </Popover>
 
@@ -83,15 +98,11 @@
     flex-direction: column;
     gap: 12px;
   }
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-  }
   .columns {
     display: grid;
     align-items: center;
     grid-template-columns: 1fr auto;
+    gap: 8px;
   }
   .columns :global(.spectrum-Switch) {
     margin-right: 0;

packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte

@@ -0,0 +1,43 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+
+  let dispatch = createEventDispatcher()
+
+  import { ActionButton, AbsTooltip, TooltipType } from "@budibase/bbui"
+
+  export let value
+  export let options
+  export let disabled
+</script>
+
+<div class="permissionPicker">
+  {#each options as option}
+    <AbsTooltip text={option.tooltip} type={TooltipType.Info}>
+      <ActionButton
+        on:click={() => dispatch("click", option.value)}
+        {disabled}
+        size="S"
+        icon={option.icon}
+        quiet
+        selected={option.value === value}
+        noPadding
+      />
+    </AbsTooltip>
+  {/each}
+</div>
+
+<style>
+  .permissionPicker {
+    display: flex;
+    gap: var(--spacing-xs);
+    padding-left: calc(var(--spacing-xl) * 2);
+  }
+
+  .permissionPicker :global(.spectrum-Icon) {
+    width: 14px;
+  }
+  .permissionPicker :global(.spectrum-ActionButton) {
+    width: 28px;
+    height: 28px;
+  }
+</style>

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -18,7 +18,7 @@
   import UserAvatars from "./UserAvatars.svelte"
   import KeyboardManager from "../overlays/KeyboardManager.svelte"
   import SortButton from "../controls/SortButton.svelte"
-  import HideColumnsButton from "../controls/HideColumnsButton.svelte"
+  import ColumnsSettingButton from "../controls/ColumnsSettingButton.svelte"
   import SizeButton from "../controls/SizeButton.svelte"
   import NewRow from "./NewRow.svelte"
   import { createGridWebsocket } from "../lib/websocket"
@@ -153,7 +153,7 @@
       <div class="controls-left">
         <slot name="filter" />
         <SortButton />
-        <HideColumnsButton />
+        <ColumnsSettingButton />
         <SizeButton />
         <slot name="controls" />
       </div>