CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-14 17:42:01 +12:00
Code Issues Projects Releases Wiki Activity

Improve animations for adding rows and handle add row failure

Browse source
This commit is contained in:
Andrew Kingston 2023-03-31 10:17:18 +01:00
parent fc009b722f
commit 58141b5183
1 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/frontend-core/src/components/sheet/layout/NewRow.svelte
View file

@ -36,8 +36,8 @@
const savedRow = await rows.actions.addRow(newRow) const savedRow = await rows.actions.addRow(newRow)
if (savedRow && firstColumn) { if (savedRow && firstColumn) {
$selectedCellId = `${newRow._id}-${firstColumn.name}` $selectedCellId = `${newRow._id}-${firstColumn.name}`
isAdding = false
} }
isAdding = false
} }
const cancel = () => { const cancel = () => {
@ -62,11 +62,13 @@
<!-- Only show new row functionality if we have any columns --> <!-- Only show new row functionality if we have any columns -->
{#if firstColumn} {#if firstColumn}
{#if !isAdding} <div
<div class="add-button" class:above-scrollbar={$showHScrollbar}> class="add-button"
<Button size="M" cta icon="Add" on:click={startAdding}>Add row</Button> class:visible={!isAdding}
</div> class:above-scrollbar={$showHScrollbar}
{/if} >
<Button size="M" cta icon="Add" on:click={startAdding}>Add row</Button>
</div>
<div <div
class="container" class="container"
@ -148,12 +150,16 @@
.add-button { .add-button {
position: absolute; position: absolute;
left: 16px; left: 16px;
bottom: 16px;
z-index: 1; z-index: 1;
transform: translateY(calc(16px + 100%));
transition: transform 130ms ease-out;
} }
.add-button.above-scrollbar { .add-button.above-scrollbar {
bottom: 32px; bottom: 32px;
} }
.add-button.visible {
transform: translateY(0);
}
.container { .container {
pointer-events: none; pointer-events: none;