Tidy up buttons above sheets and add FAB for adding rows

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -71,7 +71,7 @@
     {/if}
     {#if icon}
       <svg
-        class="spectrum-Icon spectrum-Icon--size{size}"
+        class="spectrum-Icon spectrum-Icon--sizeS"
         focusable="false"
         aria-hidden="true"
         aria-label={icon}

packages/builder/src/components/backend/DataTable/DataTable.svelte

@@ -5,8 +5,8 @@
   import { Sheet } from "@budibase/frontend-core"
   import { API } from "api"
 
-  import SheetCreateColumnButton from "components/backend/DataTable/buttons/sheet/SheetCreateColumnButton.svelte"
+  import SheetAddColumnModal from "components/backend/DataTable/modals/sheet/SheetCreateColumnModal.svelte"
-  import SheetCreateRowButton from "components/backend/DataTable/buttons/sheet/SheetCreateRowButton.svelte"
+  import SheetAddRowModal from "components/backend/DataTable/modals/sheet/SheetCreateRowModal.svelte"
   import SheetCreateViewButton from "components/backend/DataTable/buttons/sheet/SheetCreateViewButton.svelte"
   import SheetImportButton from "components/backend/DataTable/buttons/sheet/SheetImportButton.svelte"
   import SheetExportButton from "components/backend/DataTable/buttons/sheet/SheetExportButton.svelte"
@@ -23,10 +23,6 @@
 <div class="wrapper">
   <Sheet {API} tableId={id} allowAddRows={!isUsersTable}>
     <svelte:fragment slot="controls">
-      <SheetCreateColumnButton />
-      {#if !isUsersTable}
-        <SheetCreateRowButton />
-      {/if}
       {#if isInternal}
         <SheetCreateViewButton />
       {/if}
@@ -42,7 +38,9 @@
       {/if}
       <SheetExportButton />
       <SheetFilterButton />
+      <SheetAddColumnModal />
       <SheetEditColumnModal />
+      <SheetAddRowModal />
     </svelte:fragment>
   </Sheet>
 </div>

packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte

@@ -9,7 +9,6 @@
 
 <ActionButton
   icon="Calculator"
-  size="S"
   quiet
   on:click={modal.show}
   active={view.field && view.calculation}

packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte

@@ -16,7 +16,6 @@
   emphasized={highlighted}
   icon="TableColumnAddRight"
   quiet
-  size="S"
   on:click={modal.show}
 >
   Create column

packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte

@@ -8,6 +8,8 @@
   export let highlighted = false
 
   let modal
+
+  export const show = () => modal?.show()
 </script>
 
 <ActionButton
@@ -15,7 +17,6 @@
   emphasized={highlighted}
   selected={highlighted}
   icon="TableRowAddBottom"
-  size="S"
   quiet
   on:click={modal.show}
 >

packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte

@@ -7,13 +7,7 @@
   let modal
 </script>
 
-<ActionButton
+<ActionButton {disabled} icon="CollectionAdd" quiet on:click={modal.show}>
-  {disabled}
-  icon="CollectionAdd"
-  size="S"
-  quiet
-  on:click={modal.show}
->
   Create view
 </ActionButton>
 <Modal bind:this={modal}>

packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte

@@ -19,7 +19,7 @@
   $: text = `${item}${selectedRows?.length === 1 ? "" : "s"}`
 </script>
 
-<Button icon="Delete" size="s" warning quiet on:click={modal.show}>
+<Button icon="Delete" warning quiet on:click={modal.show}>
   Delete
   {selectedRows.length}
   {text}

packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte

@@ -1,15 +1,13 @@
 <script>
-  import { Button, Modal } from "@budibase/bbui"
+  import { ActionButton, Modal } from "@budibase/bbui"
   import EditRolesModal from "../modals/EditRoles.svelte"
 
   let modal
 </script>
 
-<div>
+<ActionButton icon="UsersLock" quiet on:click={modal.show}>
-  <Button icon="UsersLock" primary size="S" quiet on:click={modal.show}>
+  Edit roles
-    Edit roles
+</ActionButton>
-  </Button>
-</div>
 <Modal bind:this={modal}>
   <EditRolesModal />
 </Modal>

packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte

@@ -38,13 +38,7 @@
 
 {#if datasource}
   <div>
-    <ActionButton
+    <ActionButton icon="DataCorrelated" primary quiet on:click={modal.show}>
-      icon="DataCorrelated"
-      primary
-      size="S"
-      quiet
-      on:click={modal.show}
-    >
       Define existing relationship
     </ActionButton>
   </div>

packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte

@@ -11,13 +11,7 @@
   let modal
 </script>
 
-<ActionButton
+<ActionButton {disabled} icon="DataDownload" quiet on:click={modal.show}>
-  {disabled}
-  icon="DataDownload"
-  size="S"
-  quiet
-  on:click={modal.show}
->
   Export
 </ActionButton>
 <Modal bind:this={modal}>

packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte

@@ -10,7 +10,6 @@
 <Button
   icon="Group"
   primary
-  size="S"
   quiet
   active={!!view.groupBy}
   on:click={modal.show}

packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte

@@ -11,7 +11,6 @@
 <ActionButton
   icon={hideAutocolumns ? "VisibilityOff" : "Visibility"}
   primary
-  size="S"
   quiet
   on:click={hideOrUnhide}
 >

packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte

@@ -8,7 +8,7 @@
   let modal
 </script>
 
-<ActionButton icon="DataUpload" size="S" quiet on:click={modal.show} {disabled}>
+<ActionButton icon="DataUpload" quiet on:click={modal.show} {disabled}>
   Import
 </ActionButton>
 <Modal bind:this={modal}>

packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte

@@ -14,7 +14,7 @@
   }
 </script>
 
-<ActionButton icon="LockClosed" size="S" quiet on:click={openDropdown}>
+<ActionButton icon="LockClosed" quiet on:click={openDropdown}>
   Manage access
 </ActionButton>
 <Modal bind:this={modal}>

packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte

@@ -18,7 +18,6 @@
 
 <ActionButton
   icon="Filter"
-  size="S"
   quiet
   {disabled}
   on:click={modal.show}

packages/builder/src/components/backend/DataTable/buttons/ViewFilterButton.svelte

@@ -9,7 +9,6 @@
 
 <ActionButton
   icon="Filter"
-  size="S"
   quiet
   on:click={modal.show}
   active={view.filters?.length}

packages/builder/src/components/backend/DataTable/buttons/sheet/SheetCreateColumnButton.svelte

@@ -1,20 +0,0 @@
-<script>
-  import CreateColumnButton from "../CreateColumnButton.svelte"
-  import { getContext, onMount } from "svelte"
-
-  const { rows, columns, subscribe, filter, loaded } = getContext("sheet")
-
-  let createColumnModal
-
-  $: hasCols = !$loaded || $columns.length
-  $: hasRows = !$loaded || $filter.length || $rows.length
-  $: highlighted = !hasRows || !hasCols
-
-  onMount(() => subscribe("add-column", createColumnModal.show))
-</script>
-
-<CreateColumnButton
-  {highlighted}
-  bind:this={createColumnModal}
-  on:updatecolumns={() => rows.actions.refreshSchema()}
-/>

packages/builder/src/components/backend/DataTable/buttons/sheet/SheetCreateRowButton.svelte

@@ -1,17 +0,0 @@
-<script>
-  import CreateRowButton from "../CreateRowButton.svelte"
-  import CreateEditRow from "../../modals/CreateEditRow.svelte"
-  import { getContext } from "svelte"
-
-  const { rows, columns, filter, loaded } = getContext("sheet")
-
-  $: hasCols = !$loaded || $columns.length
-  $: hasRows = !$loaded || $filter.length || $rows.length
-</script>
-
-<CreateRowButton
-  title="Create row"
-  modalContentComponent={CreateEditRow}
-  disabled={!hasCols}
-  highlighted={hasCols && !hasRows}
-/>

packages/builder/src/components/backend/DataTable/modals/sheet/SheetCreateColumnModal.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { getContext, onMount } from "svelte"
+  import { Modal } from "@budibase/bbui"
+  import CreateEditColumn from "components/backend/DataTable/modals/CreateEditColumn.svelte"
+
+  const { rows, subscribe } = getContext("sheet")
+
+  let modal
+
+  onMount(() => subscribe("add-column", modal.show))
+</script>
+
+<Modal bind:this={modal}>
+  <CreateEditColumn on:updatecolumns={() => rows.actions.refreshSchema()} />
+</Modal>

packages/builder/src/components/backend/DataTable/modals/sheet/SheetCreateRowModal.svelte

@@ -0,0 +1,14 @@
+<script>
+  import CreateEditRow from "../../modals/CreateEditRow.svelte"
+  import { getContext, onMount } from "svelte"
+  import { Modal } from "@budibase/bbui"
+
+  const { subscribe } = getContext("sheet")
+
+  let modal
+  onMount(() => subscribe("add-row", modal.show))
+</script>
+
+<Modal bind:this={modal}>
+  <CreateEditRow />
+</Modal>

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

@@ -0,0 +1,31 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  import { getContext } from "svelte"
+
+  const { dispatch } = getContext("sheet")
+</script>
+
+<div class="add-component" on:click={() => dispatch("add-row")}>
+  <Icon size="XL" name="Add" />
+</div>
+
+<style>
+  .add-component {
+    position: absolute;
+    bottom: calc(20px + var(--spacing-l));
+    right: calc(20px + var(--spacing-xl));
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: var(--spectrum-global-color-blue-500);
+    display: grid;
+    place-items: center;
+    color: white;
+    box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    transition: transform ease-out 300ms, background ease-out 130ms;
+  }
+  .add-component:hover {
+    background: var(--spectrum-global-color-blue-600);
+  }
+</style>

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

@@ -25,7 +25,8 @@
   import UserAvatars from "./UserAvatars.svelte"
   import KeyboardManager from "./KeyboardManager.svelte"
   import { clickOutside } from "@budibase/bbui"
-  import NewRow from "./NewRow.svelte"
+  import AddRowButton from "./AddRowButton.svelte"
+  import SheetControls from "./SheetControls.svelte"
 
   export let API
   export let tableId
@@ -104,6 +105,7 @@
   <div class="controls">
     <div class="controls-left">
       <slot name="controls" />
+      <SheetControls />
     </div>
     <div class="controls-right">
       <DeleteButton />
@@ -120,6 +122,9 @@
       <ResizeOverlay />
       <ScrollOverlay />
       <MenuOverlay />
+      {#if $config.allowAddRows}
+        <AddRowButton />
+      {/if}
     </div>
   {/if}
   <KeyboardManager />

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

@@ -3,43 +3,7 @@
   import { ActionButton } from "@budibase/bbui"
 
   const { rows } = getContext("sheet")
-
-  $: rowCount = $rows.length
 </script>
 
-<div class="controls">
+<ActionButton icon="SortOrderDown" quiet size="M">Sort</ActionButton>
-  <div class="buttons">
+<ActionButton icon="VisibilityOff" quiet size="M">Hide fields</ActionButton>
-    <ActionButton icon="Filter" quiet size="M">Filter</ActionButton>
-    <ActionButton icon="Group" quiet size="M">Group</ActionButton>
-    <ActionButton icon="SortOrderDown" quiet size="M">Sort</ActionButton>
-    <ActionButton icon="VisibilityOff" quiet size="M">Hide fields</ActionButton>
-  </div>
-  <div class="title" />
-  <div class="delete">
-    {rowCount} row{rowCount === 1 ? "" : "s"}
-  </div>
-</div>
-
-<style>
-  .controls {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    align-items: center;
-    height: var(--controls-height);
-    padding: 0 12px;
-    background: var(--background);
-    gap: 8px;
-    border-bottom: 2px solid var(--spectrum-global-color-gray-200);
-  }
-  .title {
-    font-weight: 600;
-  }
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: calc(1 * var(--cell-spacing));
-    margin-left: -8px;
-  }
-</style>