From f86c0ec36ef301e83bb0de3eede9be904e6acfec Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 13 Apr 2023 15:52:07 +0100
Subject: [PATCH] Add beta button to sheet, tidy up constants

---
 .../sheet/controls/BetaButton.svelte          | 40 +++++++++++++++++++
 .../components/sheet/layout/NewRowTop.svelte  | 13 ++----
 .../src/components/sheet/layout/Sheet.svelte  | 17 ++++----
 .../sheet/layout/StickyColumn.svelte          |  8 ++--
 .../src/components/sheet/lib/constants.js     |  2 +
 .../sheet/overlays/ReorderOverlay.svelte      |  6 +--
 .../sheet/overlays/ResizeOverlay.svelte       |  9 ++---
 .../src/components/sheet/stores/columns.js    |  7 ++--
 .../src/components/sheet/stores/resize.js     |  3 +-
 .../src/components/sheet/stores/scroll.js     |  7 ++--
 10 files changed, 73 insertions(+), 39 deletions(-)
 create mode 100644 packages/frontend-core/src/components/sheet/controls/BetaButton.svelte

diff --git a/packages/frontend-core/src/components/sheet/controls/BetaButton.svelte b/packages/frontend-core/src/components/sheet/controls/BetaButton.svelte
new file mode 100644
index 0000000000..cc11d16356
--- /dev/null
+++ b/packages/frontend-core/src/components/sheet/controls/BetaButton.svelte
@@ -0,0 +1,40 @@
+<script>
+  import { Button } from "@budibase/bbui"
+</script>
+
+<div class="beta-background" />
+<div class="beta">
+  Enjoying the spreadsheet?
+  <Button size="M" cta>Give Feedback</Button>
+</div>
+
+<style>
+  .beta {
+    position: absolute;
+    bottom: 40px;
+    right: 40px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+  }
+  .beta :global(.spectrum-Button) {
+    background: var(--spectrum-global-color-magenta-400);
+    border-color: var(--spectrum-global-color-magenta-400);
+  }
+  .beta-background {
+    z-index: 0;
+    pointer-events: none;
+    position: absolute;
+    bottom: -205px;
+    right: -105px;
+    width: 1400px;
+    height: 360px;
+    transform: rotate(-20deg);
+    background: linear-gradient(
+      to top,
+      var(--cell-background) 10%,
+      transparent
+    );
+  }
+</style>
diff --git a/packages/frontend-core/src/components/sheet/layout/NewRowTop.svelte b/packages/frontend-core/src/components/sheet/layout/NewRowTop.svelte
index 1d0b234ac2..44b40f43bd 100644
--- a/packages/frontend-core/src/components/sheet/layout/NewRowTop.svelte
+++ b/packages/frontend-core/src/components/sheet/layout/NewRowTop.svelte
@@ -1,16 +1,16 @@
 <script>
   import SheetCell from "../cells/SheetCell.svelte"
   import { getContext, onMount } from "svelte"
-  import { Icon, Button, clickOutside } from "@budibase/bbui"
+  import { Icon, Button } from "@budibase/bbui"
   import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
   import DataCell from "../cells/DataCell.svelte"
   import { fly } from "svelte/transition"
+  import { GutterWidth } from "../lib/constants"
 
   const {
     hoveredRowId,
     focusedCellId,
     stickyColumn,
-    gutterWidth,
     scroll,
     config,
     dispatch,
@@ -29,7 +29,7 @@
   $: firstColumn = $stickyColumn || $visibleColumns[0]
   $: rowHovered = $hoveredRowId === "new"
   $: rowFocused = $focusedCellId?.startsWith("new-")
-  $: width = gutterWidth + ($stickyColumn?.width || 0)
+  $: width = GutterWidth + ($stickyColumn?.width || 0)
   $: $tableId, (isAdding = false)
 
   const addRow = async () => {
@@ -89,7 +89,7 @@
           style="flex: 0 0 {width}px"
           class:scrolled={$scrollLeft > 0}
         >
-          <SheetCell width={gutterWidth} {rowHovered} {rowFocused}>
+          <SheetCell width={GutterWidth} {rowHovered} {rowFocused}>
             <div class="gutter">
               <div class="number">1</div>
               {#if $config.allowExpandRows}
@@ -153,11 +153,6 @@
     position: absolute;
     top: var(--row-height);
     left: 0;
-    /*background: linear-gradient(*/
-    /*  to bottom,*/
-    /*  var(--cell-background) 20%,*/
-    /*  transparent 100%*/
-    /*);*/
     width: 100%;
     padding-bottom: 800px;
     display: flex;
diff --git a/packages/frontend-core/src/components/sheet/layout/Sheet.svelte b/packages/frontend-core/src/components/sheet/layout/Sheet.svelte
index 4c5aa71215..268de50f67 100644
--- a/packages/frontend-core/src/components/sheet/layout/Sheet.svelte
+++ b/packages/frontend-core/src/components/sheet/layout/Sheet.svelte
@@ -1,10 +1,12 @@
 <script>
   import { setContext } from "svelte"
   import { writable } from "svelte/store"
+  import { clickOutside, ProgressCircle } from "@budibase/bbui"
   import { createEventManagers } from "../lib/events"
   import { createAPIClient } from "../../../api"
   import { attachStores } from "../stores"
   import DeleteButton from "../controls/DeleteButton.svelte"
+  import BetaButton from "../controls/BetaButton.svelte"
   import SheetBody from "./SheetBody.svelte"
   import ResizeOverlay from "../overlays/ResizeOverlay.svelte"
   import ReorderOverlay from "../overlays/ReorderOverlay.svelte"
@@ -14,15 +16,15 @@
   import StickyColumn from "./StickyColumn.svelte"
   import UserAvatars from "./UserAvatars.svelte"
   import KeyboardManager from "../overlays/KeyboardManager.svelte"
-  import { clickOutside, ProgressCircle } from "@budibase/bbui"
-  import {
-    MaxCellRenderHeight,
-    MaxCellRenderWidthOverflow,
-  } from "../lib/constants"
   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 {
+    MaxCellRenderHeight,
+    MaxCellRenderWidthOverflow,
+    GutterWidth,
+  } from "../lib/constants"
 
   export let API
   export let tableId
@@ -34,7 +36,6 @@
   export let allowDeleteRows = true
 
   // Sheet constants
-  const gutterWidth = 72
   const rand = Math.random()
 
   // State stores
@@ -52,7 +53,6 @@
   let context = {
     API: API || createAPIClient(),
     rand,
-    gutterWidth,
     config,
     tableId: tableIdStore,
   }
@@ -88,7 +88,7 @@
   id="sheet-{rand}"
   class:is-resizing={$isResizing}
   class:is-reordering={$isReordering}
-  style="--row-height:{$rowHeight}px; --gutter-width:{gutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px;"
+  style="--row-height:{$rowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px;"
 >
   <div class="controls">
     <div class="controls-left">
@@ -114,6 +114,7 @@
         <div class="overlays">
           <ResizeOverlay />
           <ReorderOverlay />
+          <BetaButton />
           <ScrollOverlay />
           <MenuOverlay />
         </div>
diff --git a/packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte b/packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte
index 59b5b50f6b..5abcfbb90f 100644
--- a/packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte
@@ -5,6 +5,7 @@
   import DataCell from "../cells/DataCell.svelte"
   import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
   import HeaderCell from "../cells/HeaderCell.svelte"
+  import { GutterWidth } from "../lib/constants"
 
   const {
     rows,
@@ -16,14 +17,13 @@
     config,
     selectedCellMap,
     focusedRow,
-    gutterWidth,
     dispatch,
     scrollLeft,
   } = getContext("sheet")
 
   $: rowCount = $rows.length
   $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
-  $: width = gutterWidth + ($stickyColumn?.width || 0)
+  $: width = GutterWidth + ($stickyColumn?.width || 0)
 
   const selectAll = () => {
     const allSelected = selectedRowCount === rowCount
@@ -58,7 +58,7 @@
   class:scrolled={$scrollLeft > 0}
 >
   <div class="header row">
-    <SheetCell width={gutterWidth}>
+    <SheetCell width={GutterWidth}>
       <div class="gutter">
         <div class="checkbox visible">
           {#if $config.allowDeleteRows}
@@ -96,7 +96,7 @@
           on:mouseleave={() => ($hoveredRowId = null)}
         >
           <SheetCell
-            width={gutterWidth}
+            width={GutterWidth}
             highlighted={rowFocused || rowHovered}
             selected={rowSelected}
           >
diff --git a/packages/frontend-core/src/components/sheet/lib/constants.js b/packages/frontend-core/src/components/sheet/lib/constants.js
index cb4bd5a069..7511db2b75 100644
--- a/packages/frontend-core/src/components/sheet/lib/constants.js
+++ b/packages/frontend-core/src/components/sheet/lib/constants.js
@@ -2,3 +2,5 @@ export const SheetPadding = 264
 export const MaxCellRenderHeight = 216
 export const MaxCellRenderWidthOverflow = 200
 export const ScrollBarSize = 8
+export const GutterWidth = 72
+export const DefaultColumnWidth = 200
diff --git a/packages/frontend-core/src/components/sheet/overlays/ReorderOverlay.svelte b/packages/frontend-core/src/components/sheet/overlays/ReorderOverlay.svelte
index bde8c34182..d4d804365a 100644
--- a/packages/frontend-core/src/components/sheet/overlays/ReorderOverlay.svelte
+++ b/packages/frontend-core/src/components/sheet/overlays/ReorderOverlay.svelte
@@ -1,12 +1,12 @@
 <script>
   import { getContext } from "svelte"
   import SheetScrollWrapper from "../layout/SheetScrollWrapper.svelte"
+  import { GutterWidth } from "../lib/constants"
 
   const {
     isReordering,
     reorder,
     visibleColumns,
-    gutterWidth,
     stickyColumn,
     rowHeight,
     renderedRows,
@@ -14,14 +14,14 @@
   } = getContext("sheet")
 
   $: targetColumn = $reorder.targetColumn
-  $: minLeft = gutterWidth + ($stickyColumn?.width || 0)
+  $: minLeft = GutterWidth + ($stickyColumn?.width || 0)
   $: left = getLeft(targetColumn, $stickyColumn, $visibleColumns, $scrollLeft)
   $: height = $rowHeight * ($renderedRows.length + 1)
   $: style = `left:${left}px; height:${height}px;`
   $: visible = $isReordering && left >= minLeft
 
   const getLeft = (targetColumn, stickyColumn, visibleColumns, scrollLeft) => {
-    let left = gutterWidth + (stickyColumn?.width || 0) - scrollLeft
+    let left = GutterWidth + (stickyColumn?.width || 0) - scrollLeft
 
     // If this is not the sticky column, add additional left space
     if (targetColumn !== stickyColumn?.name) {
diff --git a/packages/frontend-core/src/components/sheet/overlays/ResizeOverlay.svelte b/packages/frontend-core/src/components/sheet/overlays/ResizeOverlay.svelte
index 01e22b0d0e..7f119550b0 100644
--- a/packages/frontend-core/src/components/sheet/overlays/ResizeOverlay.svelte
+++ b/packages/frontend-core/src/components/sheet/overlays/ResizeOverlay.svelte
@@ -1,19 +1,18 @@
 <script>
   import { getContext } from "svelte"
+  import { GutterWidth } from "../lib/constants"
 
   const {
     columns,
     resize,
-    scroll,
     renderedColumns,
     stickyColumn,
     isReordering,
-    gutterWidth,
     scrollLeft,
   } = getContext("sheet")
 
-  $: cutoff = $scrollLeft + gutterWidth + ($columns[0]?.width || 0)
-  $: offset = gutterWidth + ($stickyColumn?.width || 0)
+  $: cutoff = $scrollLeft + GutterWidth + ($columns[0]?.width || 0)
+  $: offset = GutterWidth + ($stickyColumn?.width || 0)
   $: activeColumn = $resize.column
 
   const getStyle = (column, offset, scrollLeft) => {
@@ -29,7 +28,7 @@
       class:visible={activeColumn === $stickyColumn.name}
       on:mousedown={e => resize.actions.startResizing($stickyColumn, e)}
       on:dblclick={() => resize.actions.resetSize($stickyColumn)}
-      style="left:{gutterWidth + $stickyColumn.width}px;"
+      style="left:{GutterWidth + $stickyColumn.width}px;"
     >
       <div class="resize-indicator" />
     </div>
diff --git a/packages/frontend-core/src/components/sheet/stores/columns.js b/packages/frontend-core/src/components/sheet/stores/columns.js
index 7c0d800dfc..45a38ec91b 100644
--- a/packages/frontend-core/src/components/sheet/stores/columns.js
+++ b/packages/frontend-core/src/components/sheet/stores/columns.js
@@ -1,7 +1,6 @@
 import { derived, get, writable } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
-
-export const DefaultColumnWidth = 200
+import { GutterWidth, DefaultColumnWidth } from "../lib/constants"
 
 export const createStores = () => {
   const columns = writable([])
@@ -47,7 +46,7 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { table, gutterWidth, columns, stickyColumn, API, dispatch } = context
+  const { table, columns, stickyColumn, API, dispatch } = context
 
   // Merge new schema fields with existing schema in order to preserve widths
   table.subscribe($table => {
@@ -121,7 +120,7 @@ export const deriveStores = context => {
     stickyColumn.set({
       name: primaryDisplay,
       width: schema[primaryDisplay].width || DefaultColumnWidth,
-      left: gutterWidth,
+      left: GutterWidth,
       schema: schema[primaryDisplay],
       idx: "sticky",
     })
diff --git a/packages/frontend-core/src/components/sheet/stores/resize.js b/packages/frontend-core/src/components/sheet/stores/resize.js
index a98e6058b0..8946858966 100644
--- a/packages/frontend-core/src/components/sheet/stores/resize.js
+++ b/packages/frontend-core/src/components/sheet/stores/resize.js
@@ -1,6 +1,5 @@
 import { writable, get, derived } from "svelte/store"
-import { DefaultColumnWidth } from "./columns"
-import { cloneDeep } from "lodash/fp"
+import { DefaultColumnWidth } from "../lib/constants"
 
 export const MinColumnWidth = 100
 
diff --git a/packages/frontend-core/src/components/sheet/stores/scroll.js b/packages/frontend-core/src/components/sheet/stores/scroll.js
index 37ad38b4ab..bf5cf611a4 100644
--- a/packages/frontend-core/src/components/sheet/stores/scroll.js
+++ b/packages/frontend-core/src/components/sheet/stores/scroll.js
@@ -1,6 +1,6 @@
 import { writable, derived, get } from "svelte/store"
 import { tick } from "svelte"
-import { SheetPadding } from "../lib/constants"
+import { SheetPadding, GutterWidth } from "../lib/constants"
 
 export const createStores = () => {
   const scroll = writable({
@@ -29,7 +29,6 @@ export const deriveStores = context => {
     rowHeight,
     focusedRow,
     focusedCellId,
-    gutterWidth,
     scrollTop,
     scrollLeft,
     width,
@@ -55,7 +54,7 @@ export const deriveStores = context => {
   const contentWidth = derived(
     [visibleColumns, stickyColumnWidth],
     ([$visibleColumns, $stickyColumnWidth]) => {
-      let width = gutterWidth + SheetPadding + $stickyColumnWidth
+      let width = GutterWidth + SheetPadding + $stickyColumnWidth
       $visibleColumns.forEach(col => {
         width += col.width
       })
@@ -65,7 +64,7 @@ export const deriveStores = context => {
   )
   const screenWidth = derived(
     [width, stickyColumnWidth],
-    ([$width, $stickyColumnWidth]) => $width + gutterWidth + $stickyColumnWidth,
+    ([$width, $stickyColumnWidth]) => $width + GutterWidth + $stickyColumnWidth,
     0
   )
   const maxScrollLeft = derived(