MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Tidy up buttons above sheets and add FAB for adding rows

This commit is contained in:
Andrew Kingston 2023-03-10 11:59:10 +00:00
parent 33a4d17278
commit a78ba19cf8
23 changed files with 85 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/bbui/src/ActionButton/ActionButton.svelte
View File

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

10
packages/builder/src/components/backend/DataTable/DataTable.svelte
View File

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

1
packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
View File

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

1
packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
View File

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

3
packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
View File

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

8
packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
View File

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

2
packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
View File

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

10
packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
View File

@ -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}>
Edit roles
</Button>
</div>
<ActionButton icon="UsersLock" quiet on:click={modal.show}>
Edit roles
</ActionButton>
<Modal bind:this={modal}>
<EditRolesModal />
</Modal>

8
packages/builder/src/components/backend/DataTable/buttons/ExistingRelationshipButton.svelte
View File

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

8
packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
View File

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

1
packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
View File

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

1
packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
View File

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

2
packages/builder/src/components/backend/DataTable/buttons/ImportButton.svelte
View File

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

2
packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
View File

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

1
packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
View File

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

1
packages/builder/src/components/backend/DataTable/buttons/ViewFilterButton.svelte
View File

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

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

@ -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()}
/>

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

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

15
packages/builder/src/components/backend/DataTable/modals/sheet/SheetCreateColumnModal.svelte Normal file
View File

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

14
packages/builder/src/components/backend/DataTable/modals/sheet/SheetCreateRowModal.svelte Normal file
View File

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

31
packages/frontend-core/src/components/sheet/AddRowButton.svelte Normal file
View File

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

7
packages/frontend-core/src/components/sheet/Sheet.svelte
View File

@ -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 />

40
packages/frontend-core/src/components/sheet/SheetControls.svelte
View File

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