Add beta button to sheet, tidy up constants

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>

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;

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>

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}
           >

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

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) {

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)
+  $: cutoff = $scrollLeft + GutterWidth + ($columns[0]?.width || 0)
-  $: offset = gutterWidth + ($stickyColumn?.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>

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"
-
+import { GutterWidth, DefaultColumnWidth } from "../lib/constants"
-export const DefaultColumnWidth = 200
 
 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",
     })

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 { DefaultColumnWidth } from "../lib/constants"
-import { cloneDeep } from "lodash/fp"
 
 export const MinColumnWidth = 100
 

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(