From 1ec5df1299a7d89887bf13d72a954ecd10da9fd7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 5 May 2023 08:56:45 +0100
Subject: [PATCH] Use magic icon for auto column and show icons in hide columns
 button

---
 .../grid/controls/HideColumnsButton.svelte    | 24 +++++++++++++++----
 .../src/components/grid/lib/utils.js          |  3 +++
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
index 79a773347b..691d879ace 100644
--- a/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/HideColumnsButton.svelte
@@ -1,6 +1,7 @@
 <script>
   import { getContext } from "svelte"
-  import { ActionButton, Popover, Toggle } from "@budibase/bbui"
+  import { ActionButton, Popover, Toggle, Icon } from "@budibase/bbui"
+  import { getColumnIcon } from "../lib/utils"
 
   const { columns, stickyColumn, compact } = getContext("grid")
 
@@ -57,16 +58,24 @@
   <div class="content">
     <div class="columns">
       {#if $stickyColumn}
+        <div class="column">
+          <Icon size="S" name={getColumnIcon($stickyColumn)} />
+          {$stickyColumn.label}
+        </div>
         <Toggle disabled size="S" value={true} />
-        <span>{$stickyColumn.label}</span>
       {/if}
       {#each $columns as column}
+        <div class="column">
+          <!--{#if column.schema.autocolumn}-->
+          <Icon size="S" name={getColumnIcon(column)} />
+          <!--{/if}-->
+          {column.label}
+        </div>
         <Toggle
           size="S"
           value={column.visible}
           on:change={e => toggleVisibility(column, e.detail)}
         />
-        <span>{column.label}</span>
       {/each}
     </div>
     <div class="buttons">
@@ -91,6 +100,13 @@
   .columns {
     display: grid;
     align-items: center;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr auto;
+  }
+  .columns :global(.spectrum-Switch) {
+    margin-right: 0;
+  }
+  .column {
+    display: flex;
+    gap: 8px;
   }
 </style>
diff --git a/packages/frontend-core/src/components/grid/lib/utils.js b/packages/frontend-core/src/components/grid/lib/utils.js
index d830d96dba..4006b3def6 100644
--- a/packages/frontend-core/src/components/grid/lib/utils.js
+++ b/packages/frontend-core/src/components/grid/lib/utils.js
@@ -21,6 +21,9 @@ const TypeIconMap = {
 }
 
 export const getColumnIcon = column => {
+  if (column.schema.autocolumn) {
+    return "MagicWand"
+  }
   const type = column.schema.type
   return TypeIconMap[type] || "Text"
 }