Tidy up buttons above sheets and add FAB for adding rows
This commit is contained in:
Andrew Kingston
parent
33a4d17278
commit
a78ba19cf8
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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 SheetCreateRowButton from "components/backend/DataTable/buttons/sheet/SheetCreateRowButton.svelte"
|
||||
import SheetAddColumnModal from "components/backend/DataTable/modals/sheet/SheetCreateColumnModal.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>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
|
||||
<ActionButton
|
||||
icon="Calculator"
|
||||
size="S"
|
||||
quiet
|
||||
on:click={modal.show}
|
||||
active={view.field && view.calculation}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
emphasized={highlighted}
|
||||
icon="TableColumnAddRight"
|
||||
quiet
|
||||
size="S"
|
||||
on:click={modal.show}
|
||||
>
|
||||
Create column
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -7,13 +7,7 @@
|
|||
let modal
|
||||
</script>
|
||||
|
||||
<ActionButton
|
||||
{disabled}
|
||||
icon="CollectionAdd"
|
||||
size="S"
|
||||
quiet
|
||||
on:click={modal.show}
|
||||
>
|
||||
<ActionButton {disabled} icon="CollectionAdd" quiet on:click={modal.show}>
|
||||
Create view
|
||||
</ActionButton>
|
||||
<Modal bind:this={modal}>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<Button icon="UsersLock" primary size="S" quiet on:click={modal.show}>
|
||||
<ActionButton icon="UsersLock" quiet on:click={modal.show}>
|
||||
Edit roles
|
||||
</Button>
|
||||
</div>
|
||||
</ActionButton>
|
||||
<Modal bind:this={modal}>
|
||||
<EditRolesModal />
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -38,13 +38,7 @@
|
|||
|
||||
{#if datasource}
|
||||
<div>
|
||||
<ActionButton
|
||||
icon="DataCorrelated"
|
||||
primary
|
||||
size="S"
|
||||
quiet
|
||||
on:click={modal.show}
|
||||
>
|
||||
<ActionButton icon="DataCorrelated" primary quiet on:click={modal.show}>
|
||||
Define existing relationship
|
||||
</ActionButton>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,13 +11,7 @@
|
|||
let modal
|
||||
</script>
|
||||
|
||||
<ActionButton
|
||||
{disabled}
|
||||
icon="DataDownload"
|
||||
size="S"
|
||||
quiet
|
||||
on:click={modal.show}
|
||||
>
|
||||
<ActionButton {disabled} icon="DataDownload" quiet on:click={modal.show}>
|
||||
Export
|
||||
</ActionButton>
|
||||
<Modal bind:this={modal}>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<Button
|
||||
icon="Group"
|
||||
primary
|
||||
size="S"
|
||||
quiet
|
||||
active={!!view.groupBy}
|
||||
on:click={modal.show}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
<ActionButton
|
||||
icon={hideAutocolumns ? "VisibilityOff" : "Visibility"}
|
||||
primary
|
||||
size="S"
|
||||
quiet
|
||||
on:click={hideOrUnhide}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
|
||||
<ActionButton
|
||||
icon="Filter"
|
||||
size="S"
|
||||
quiet
|
||||
{disabled}
|
||||
on:click={modal.show}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
|
||||
<ActionButton
|
||||
icon="Filter"
|
||||
size="S"
|
||||
quiet
|
||||
on:click={modal.show}
|
||||
active={view.filters?.length}
|
||||
|
|
|
|||
|
|
@ -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()}
|
||||
/>
|
||||
|
|
@ -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}
|
||||
/>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -3,43 +3,7 @@
|
|||
import { ActionButton } from "@budibase/bbui"
|
||||
|
||||
const { rows } = getContext("sheet")
|
||||
|
||||
$: rowCount = $rows.length
|
||||
</script>
|
||||
|
||||
<div class="controls">
|
||||
<div class="buttons">
|
||||
<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>
|
||||
<ActionButton icon="SortOrderDown" quiet size="M">Sort</ActionButton>
|
||||
<ActionButton icon="VisibilityOff" quiet size="M">Hide fields</ActionButton>
|
||||
|
|
|
|||
Loading…
Reference in New Issue