From 5b42aff1f750f2ae3c175d147e164b183fd46c8b Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 29 May 2024 16:21:19 +0200
Subject: [PATCH] Add picker to sticky columns

---
 .../bbui/src/ActionButton/ActionButton.svelte     |  4 ++++
 .../grid/controls/ColumnsSettingButton.svelte     | 15 ++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index 96969d1435..d3cec0f307 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/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
@@ -122,6 +123,9 @@
   .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;
diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
index c3ce6d2743..2f8e141a61 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -64,7 +64,19 @@
           <Icon size="S" name={getColumnIcon($stickyColumn)} />
           {$stickyColumn.label}
         </div>
-        <Toggle disabled size="S" value={true} />
+
+        <div class="permissionPicker">
+          {#each options as option}
+            <ActionButton
+              disabled
+              size="S"
+              icon={option.icon}
+              quiet
+              selected={option.value === PERMISSION_OPTIONS.WRITABLE}
+              noPadding
+            />
+          {/each}
+        </div>
       {/if}
       {#each $columns as column}
         <div class="column">
@@ -99,6 +111,7 @@
     display: grid;
     align-items: center;
     grid-template-columns: 1fr auto;
+    gap: 8px;
   }
   .columns :global(.spectrum-Switch) {
     margin-right: 0;