Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: actions not showing on footer.

Browse Source
This commit is contained in:
Darshan
2025-09-12 18:16:53 +05:30
parent 245b215b22
commit 739b41c0c3
1 changed files with 51 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
+51 -26
View File
@@ -3,6 +3,8 @@
import { Button, Form } from '$lib/elements/forms';
import { Badge, Divider, Layout, Sheet, Tag, Typography } from '@appwrite.io/pink-svelte';
import { Copy } from '$lib/components';
import { writable } from 'svelte/store';
import { isTabletViewport } from '$lib/stores/viewport';
let {
show = $bindable(false),
@@ -38,6 +40,9 @@
footer?: Snippet | null;
} = $props();
let form: Form;
let submitting = writable(false);
let copyText = $state(undefined);
</script>
@@ -72,8 +77,10 @@
</Layout.Stack>
</div>
<Layout.Stack direction="column" justifyContent="space-evenly">
<Layout.Stack direction="column" justifyContent="space-evenly" gap="xxxl">
<Form
bind:this={form}
bind:isSubmitting={submitting}
onSubmit={async () => {
try {
const keepOpen = await submit?.onClick?.();
@@ -87,32 +94,38 @@
<Layout.Stack gap="xl" class="sheet-content">
{@render children?.()}
</Layout.Stack>
{#if submit}
<div class="sheet-footer">
<Layout.Stack gap="l">
<Divider />
<div class="sheet-footer-actions">
<Layout.Stack
gap="m"
direction="row"
justifyContent="flex-end"
alignItems="center">
{#if footer}
{@render footer?.()}
{/if}
<Button size="s" secondary on:click={() => (show = false)}
>Cancel</Button>
<Button size="s" submit disabled={submit.disabled}>
{submit.text}
</Button>
</Layout.Stack>
</div>
</Layout.Stack>
</div>
{/if}
</Form>
{#if submit}
<div class="sheet-footer">
<Layout.Stack gap="l">
<Divider />
<div class="sheet-footer-actions">
<Layout.Stack
gap="m"
direction="row"
justifyContent="flex-end"
alignItems="center">
{#if footer}
{@render footer?.()}
{/if}
<Button size="s" secondary on:click={() => (show = false)}
>Cancel</Button>
<Button
size="s"
submit
disabled={submit.disabled || $submitting}
forceShowLoader={$submitting && $isTabletViewport}
submissionLoader={$submitting && $isTabletViewport}
on:click={() => (form?.triggerSubmit())}>
{submit.text}
</Button>
</Layout.Stack>
</div>
</Layout.Stack>
</div>
{/if}
</Layout.Stack>
</Sheet>
</div>
@@ -131,6 +144,14 @@
& :global(.sheet-content) {
// overflow-y: auto;
padding-bottom: 5rem;
@media (max-width: 768px) {
/*
* different mobile browsers handle bottom spaces differently,
* therefore, having extra bottom space doesn't hurt anyone imo!
*/
padding-bottom: 15rem;
}
}
}
@@ -141,6 +162,10 @@
position: absolute;
background: var(--bgcolor-neutral-primary);
@media (max-width: 768px) {
position: fixed;
}
& .sheet-footer-actions {
padding-inline: var(--space-8);
padding-block-end: var(--space-6);