CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-14 18:55:45 +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)
if (savedRow && firstColumn) {
$selectedCellId = `${newRow._id}-${firstColumn.name}`
isAdding = false
}
isAdding = false
}
const cancel = () => {
@ -62,11 +62,13 @@
<!-- Only show new row functionality if we have any columns -->
{#if firstColumn}
{#if !isAdding}
<div class="add-button" class:above-scrollbar={$showHScrollbar}>
<Button size="M" cta icon="Add" on:click={startAdding}>Add row</Button>
</div>
{/if}
<div
class="add-button"
class:visible={!isAdding}
class:above-scrollbar={$showHScrollbar}
>
<Button size="M" cta icon="Add" on:click={startAdding}>Add row</Button>
</div>
<div
class="container"
@ -148,12 +150,16 @@
.add-button {
position: absolute;
left: 16px;
bottom: 16px;
z-index: 1;
transform: translateY(calc(16px + 100%));
transition: transform 130ms ease-out;
}
.add-button.above-scrollbar {
bottom: 32px;
}
.add-button.visible {
transform: translateY(0);
}
.container {
pointer-events: none;