WIP column popovers for dataspace sheets

packages/frontend-core/src/components/sheet/HeaderRow.svelte

@@ -1,34 +1,16 @@
 <script>
-  import SheetCell from "./SheetCell.svelte"
   import { getContext } from "svelte"
-  import { Icon } from "@budibase/bbui"
-  import { getIconForField } from "./utils"
   import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
+  import HeaderCell from "./cells/HeaderCell.svelte"
 
-  const { visibleColumns, reorder } = getContext("sheet")
+  const { visibleColumns } = getContext("sheet")
 </script>
 
 <div class="header">
   <SheetScrollWrapper scrollVertically={false} wheelInteractive={false}>
     <div class="row">
       {#each $visibleColumns as column}
-        <SheetCell
-          header
-          reorderSource={$reorder.sourceColumn === column.name}
-          reorderTarget={$reorder.targetColumn === column.name}
-          on:mousedown={e => reorder.actions.startReordering(column.name, e)}
-          width={column.width}
-          left={column.left}
-        >
-          <Icon
-            size="S"
-            name={getIconForField(column)}
-            color="var(--spectrum-global-color-gray-600)"
-          />
-          <span>
-            {column.name}
-          </span>
-        </SheetCell>
+        <HeaderCell {column} />
       {/each}
     </div>
   </SheetScrollWrapper>

packages/frontend-core/src/components/sheet/NewRow.svelte

@@ -1,5 +1,5 @@
 <script>
-  import SheetCell from "./SheetCell.svelte"
+  import SheetCell from "./cells/SheetCell.svelte"
   import { getContext } from "svelte"
 
   const { visibleColumns, hoveredRowId, rows, selectedCellId, reorder } =

packages/frontend-core/src/components/sheet/Sheet.svelte

@@ -19,7 +19,6 @@
   import ScrollOverlay from "./ScrollOverlay.svelte"
   import StickyColumn from "./StickyColumn.svelte"
   import UserAvatars from "./UserAvatars.svelte"
-  import RowCount from "./RowCount.svelte"
 
   export let API
   export let tableId
@@ -28,7 +27,7 @@
   export let filter
 
   // Sheet constants
-  const cellHeight = 40
+  const cellHeight = 36
   const rand = Math.random()
 
   // State stores

packages/frontend-core/src/components/sheet/SheetRow.svelte

@@ -1,6 +1,6 @@
 <script>
   import { getContext } from "svelte"
-  import SheetCell from "./SheetCell.svelte"
+  import SheetCell from "./cells/SheetCell.svelte"
   import { getCellRenderer } from "./renderers"
 
   export let row

packages/frontend-core/src/components/sheet/StickyColumn.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { Checkbox, Icon } from "@budibase/bbui"
   import { getIconForField } from "./utils"
-  import SheetCell from "./SheetCell.svelte"
+  import SheetCell from "./cells/SheetCell.svelte"
   import { getCellRenderer } from "./renderers"
   import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
 

packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte

@@ -0,0 +1,78 @@
+<script>
+  import { getContext } from "svelte"
+  import SheetCell from "./SheetCell.svelte"
+  import { Icon, Popover } from "@budibase/bbui"
+  import { getIconForField } from "../utils"
+
+  export let column
+
+  const { reorder } = getContext("sheet")
+
+  let popover
+  let anchor
+
+  const openPopover = () => {
+    console.log("open")
+    popover.show()
+  }
+</script>
+
+<div class="header-cell" bind:this={anchor}>
+  <SheetCell
+    reorderSource={$reorder.sourceColumn === column.name}
+    reorderTarget={$reorder.targetColumn === column.name}
+    on:mousedown={e => reorder.actions.startReordering(column.name, e)}
+    on:click={openPopover}
+    width={column.width}
+    left={column.left}
+  >
+    <div class="content">
+      <Icon
+        size="S"
+        name={getIconForField(column)}
+        color="var(--spectrum-global-color-gray-600)"
+      />
+      <div class="name">
+        {column.name} asdasdasd asdasdas asdasdasd
+      </div>
+      <div class="more">
+        <Icon size="S" name="MoreVertical" />
+      </div>
+    </div>
+  </SheetCell>
+</div>
+
+<Popover bind:this={popover} {anchor} align="left"
+  >asdsad asdasd asdasd asasa</Popover
+>
+
+<style>
+  .header-cell {
+    display: contents;
+  }
+  .header-cell:hover :global(.cell) {
+    cursor: pointer;
+    background: var(--spectrum-global-color-gray-200);
+  }
+  .header-cell :global(.cell) {
+    background: var(--background);
+    padding: 0 var(--cell-padding);
+    gap: calc(2 * var(--cell-spacing));
+    border-bottom: none;
+  }
+
+  .name {
+    flex: 1 1 auto;
+    width: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .more {
+    display: none;
+  }
+  .header-cell:hover .more {
+    display: block;
+  }
+</style>

packages/frontend-core/src/components/sheet/cells/SheetCell.svelte

@@ -1,7 +1,4 @@
 <script>
-  import Avatar from "./Avatar.svelte"
-
-  export let header = false
   export let label = false
   export let rowSelected = false
   export let rowHovered = false
@@ -27,7 +24,6 @@
 
 <div
   class="cell"
-  class:header
   class:label
   class:row-selected={rowSelected}
   class:row-hovered={rowHovered}
@@ -92,24 +88,6 @@
     justify-content: center;
   }
 
-  /* Header cells */
-  .cell.header {
-    background: var(--background);
-    padding: 0 var(--cell-padding);
-    gap: calc(2 * var(--cell-spacing));
-    border-bottom: none;
-  }
-  .cell.header :global(> span) {
-    flex: 1 1 auto;
-    width: 0;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-  .cell.header:hover {
-    cursor: pointer;
-  }
-
   /* Reorder styles */
   .cell.reorder-source {
     background: var(--spectrum-global-color-gray-100);