misc: updates.

2026-06-06 19:27:48 +00:00 · 2025-03-11 19:40:14 +05:30
parent 00a665e249
commit c1020322db
6 changed files with 81 additions and 55 deletions
@@ -8,6 +8,7 @@
    export let show = false;
    export let error: string = null;
    export let dismissible = true;
+    export let size: 's' | 'm' | 'l' = 'm';
    export let onSubmit: (e: SubmitEvent) => Promise<void> | void = function () {
        return;
    };
@@ -42,7 +43,7 @@
 <svelte:window on:keydown={handleKeydown} />

 <Form isModal {onSubmit} bind:this={formComponent}>
-    <Modal {title} bind:open={show} {hideFooter} {dismissible}>
+    <Modal {title} bind:open={show} {hideFooter} {dismissible} {size}>
        <slot slot="description" name="description" />
        {#if error}
            <div bind:this={alert}>
@@ -25,7 +25,7 @@ if (isCloud) {
        },
        learnMore: {
            text: 'Learn more',
-            link: () => 'http://appwrite.io/docs/products/databases/backups'
+            link: () => 'https://appwrite.io/docs/products/databases/backups'
        }
    });
 }
@@ -21,7 +21,7 @@
    import { showCreateBackup, showCreatePolicy } from './store';
    import { getProjectId } from '$lib/helpers/project';
    import { trackEvent } from '$lib/actions/analytics';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';

    let policyCreateError: string;
    let totalPolicies: UserBackupPolicy[] = [];
@@ -243,12 +243,19 @@
    </svelte:fragment>
 </Modal>

-<Modal title="Create manual backup" bind:show={$showCreateBackup} onSubmit={createManualBackup}>
-    <p class="text" data-private>
-        Manual backups are <b>retained forever</b> unless manually deleted. Use for major data
-        changes or rollback safeguards.
+<Modal
+    size="s"
+    title="Create manual backup"
+    bind:show={$showCreateBackup}
+    onSubmit={createManualBackup}>
+    <Typography.Text variant="m-400">
+        Manual backups are <b>retained forever</b> unless manually deleted. Use for major data changes
+        or rollback safeguards.
+    </Typography.Text>
+
+    <Typography.Text variant="m-500">
        <b>Depending on the size of your data, this may take a while.</b>
-    </p>
+    </Typography.Text>

    <svelte:fragment slot="footer">
        <Button text on:click={() => ($showCreateBackup = false)}>Cancel</Button>
@@ -0,0 +1,42 @@
+<script lang="ts">
+    export let size: 'm' | 's' = 'm';
+    export let color: string | undefined = 'currentColor';
+
+    const sizes = {
+        m: { width: 8, height: 8, cx: 4, cy: 4, r: 4 },
+        s: { width: 4, height: 4, cx: 2, cy: 2, r: 2 }
+    };
+
+    const { width, height, cx, cy, r } = sizes[size] || sizes.m;
+</script>
+
+<span class="ellipse" class:m={size === 'm'} class:s={size === 's'}>
+    <span class="ellipse-wrapper">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            {width}
+            {height}
+            viewBox={`0 0 ${width} ${height}`}
+            fill="none">
+            <circle {cx} {cy} {r} fill={color ?? 'currentColor'} />
+        </svg>
+    </span>
+</span>
+
+<style>
+    .ellipse {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .ellipse-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .ellipse svg {
+        display: inline;
+        vertical-align: middle;
+    }
+</style>
@@ -26,6 +26,7 @@
    } from '@appwrite.io/pink-svelte';
    import { IconDotsHorizontal, IconPlus, IconTrash } from '@appwrite.io/pink-icons-svelte';
    import { Confirm } from '$lib/components/index.js';
+    import Ellipse from './components/Ellipse.svelte';

    let showDelete = false;
    let selectedPolicy: BackupPolicy = null;
@@ -186,16 +187,7 @@
                                    {policyDescription}
                                {/if}

-                                <span class="small-ellipse">
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="2"
-                                        height="2"
-                                        viewBox="0 0 2 2"
-                                        fill="none">
-                                        <circle cx="1" cy="1" r="1" fill="currentColor" />
-                                    </svg>
-                                </span>
+                                <Ellipse size="s" />

                                {formatRetentionMessage(policy.retention)}
                            </Layout.Stack>
@@ -207,15 +199,10 @@
                        <div style="width: 128px" class="u-flex-vertical policy-item-caption">
                            <span style="color: #97979B">Previous</span>
                            <div class="u-flex u-gap-4 u-cross-center darker-neutral-color">
-                                <span class="ellipse" class:success={!!lastBackupDates[policy.$id]}>
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        height="8"
-                                        width="8"
-                                        viewBox="0 0 8 8"
-                                        fill="none"
-                                        ><circle cx="4" cy="4" r="4" fill="currentColor" /></svg>
-                                </span>
+                                <Ellipse
+                                    color={lastBackupDates[policy.$id]
+                                        ? 'var(--bgcolor-success)'
+                                        : undefined} />

                                <Typography.Caption variant="400">
                                    {#if lastBackupDates[policy.$id]}
@@ -326,18 +313,6 @@
        }
    }

-    :global(.small-ellipse) {
-        line-height: 0;
-    }
-
-    :global(.ellipse) {
-        line-height: 8px;
-
-        &.success {
-            color: hsl(var(--color-success-100));
-        }
-    }
-
    :global(.u-gap-6) {
        gap: 0.375rem;
    }
@@ -18,12 +18,14 @@
    import {
        ActionMenu,
        Icon,
+        Layout,
        Popover,
        Selector,
        Status,
        Table,
        Tag,
-        Tooltip
+        Tooltip,
+        Typography
    } from '@appwrite.io/pink-svelte';
    import {
        IconDotsHorizontal,
@@ -33,6 +35,7 @@
        IconTrash
    } from '@appwrite.io/pink-icons-svelte';
    import { capitalize } from '$lib/helpers/string';
+    import Ellipse from './components/Ellipse.svelte';

    export let data: PageData;

@@ -290,25 +293,23 @@

 <Modal title="Restore backup" bind:show={showRestore} onSubmit={restoreBackup}>
    <Card
-        isTile
        class="restore-modal-inner-card u-width-full-line"
        style="border-radius: var(--border-radius-small, 8px); padding: 1rem;">
-        <div class="u-flex u-flex-vertical u-gap-4">
-            <span class="body-text-2 u-bold darker-neutral-color">
+        <Layout.Stack gap="xxs">
+            <Typography.Text variant="m-500">
                {cleanBackupName(selectedBackup)}
-            </span>
-            <div class="u-flex u-cross-center u-gap-6 u-width-full-line">
-                <span class="u-flex u-cross-center u-gap-4">
-                    <span class="u-color-text-success u-font-size-12">●</span> Completed
-                </span>
-                <span class="small-ellipse">●</span>
-                {calculateSize(selectedBackup.size)}
-                <span class="small-ellipse">●</span>
+            </Typography.Text>

-                <!-- TODO: ellipsis-->
-                {timeFromNow(selectedBackup.$createdAt)}
-            </div>
-        </div>
+            <Typography.Caption variant="500">
+                <Layout.Stack direction="row" gap="xs">
+                    <Ellipse color="var(--bgcolor-success)" /> Completed
+                    <Ellipse size="s" />
+                    {calculateSize(selectedBackup.size)}
+                    <Ellipse size="s" />
+                    {timeFromNow(selectedBackup.$createdAt)}
+                </Layout.Stack>
+            </Typography.Caption>
+        </Layout.Stack>
    </Card>

    <FormList>