Skip to content

Commit 13a0f5e

Browse files
ItzNotABugItzNotABug
authored
Merge pull request #2232 from appwrite/fix-SER-289-Improve-BackUp-ui-changes
2 parents 14de55d + 0d59d44 commit 13a0f5e

6 files changed

Lines changed: 92 additions & 55 deletions

File tree

‎src/lib/components/dropList.svelte‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
export let wrapperFullWidth = false;
1515
export let position: 'relative' | 'static' = 'relative';
1616
export let noMaxWidthList = false;
17+
export let paddingBlock: string = undefined;
18+
export let paddingInline: string = undefined;
19+
export let resetListPadding: boolean = false;
20+
export let gap: string = undefined;
1721
let classes: string = '';
1822
export { classes as class };
1923
</script>
@@ -34,14 +38,20 @@
3438
class="drop is-no-arrow {classes}"
3539
class:u-max-width-100-percent={fullWidth}
3640
style:--drop-width-size-desktop={width ? `${width}rem` : ''}
41+
style:margin-block-start={gap}
3742
style:position>
3843
{#if $$slots.list}
3944
<section
4045
class:u-overflow-y-auto={scrollable}
4146
class:u-max-height-200={scrollable}
4247
class="drop-section"
43-
style={noMaxWidthList ? 'max-inline-size: 100%' : ''}>
44-
<ul class="drop-list">
48+
style={noMaxWidthList ? 'max-inline-size: 100%' : ''}
49+
style:padding-block={paddingBlock}
50+
style:padding-inline={paddingInline}>
51+
<ul
52+
class="drop-list"
53+
style:padding={resetListPadding ? '0' : undefined}
54+
style:margin={resetListPadding ? '0' : undefined}>
4555
<slot name="list" />
4656
</ul>
4757
</section>

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@
178178
</script>
179179

180180
<Container size="xxl" databasesMainScreen>
181-
<div class="u-flex u-gap-32 u-flex-vertical-mobile">
181+
<div class="backups-page u-flex u-gap-32 u-flex-vertical-mobile">
182182
{#if !isDisabled}
183183
<div class="u-flex-vertical u-gap-16 policies-holder-card">
184184
<ContainerHeader
@@ -285,4 +285,8 @@
285285
min-width: 330px;
286286
}
287287
}
288+
289+
:global(.backups-page .common-section) {
290+
margin-block-start: 0 !important;
291+
}
288292
</style>

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte‎

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
import { DropList } from '$lib/components';
33
import { Button } from '$lib/elements/forms';
44
import { IconInfo, IconPlus } from '@appwrite.io/pink-icons-svelte';
5-
import { Badge, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
5+
import { Badge, Icon, Layout, Tag, Typography } from '@appwrite.io/pink-svelte';
66
import { goto } from '$app/navigation';
77
import { upgradeURL } from '$lib/stores/billing';
8+
import { BillingPlan } from '$lib/constants';
9+
import { organization } from '$lib/stores/organization';
810
911
export let isFlex = true;
1012
export let title: string;
@@ -39,13 +41,32 @@
3941

4042
{#if title === 'Policies' && policiesCreated >= maxPolicies}
4143
<div style:height="40px;" style:padding-block-start="4px">
42-
<DropList bind:show={showDropdown} width="16">
43-
<Badge
44-
variant="secondary"
45-
content={`${policiesCreated}/${maxPolicies} created`}
46-
on:click={() => (showDropdown = true)}>
47-
<Icon icon={IconInfo} size="s" slot="start" />
48-
</Badge>
44+
<DropList
45+
bind:show={showDropdown}
46+
width="16"
47+
noArrow
48+
placement="bottom-start"
49+
gap="6px"
50+
paddingBlock="var(--space-5, 12px)"
51+
paddingInline="var(--space-6, 16px)"
52+
resetListPadding>
53+
{#if $organization?.billingPlan === BillingPlan.PRO}
54+
<Tag
55+
size="s"
56+
style="white-space: nowrap; max-width: none;"
57+
on:click={() => (showDropdown = true)}>
58+
<Icon icon={IconInfo} size="s" />
59+
{policiesCreated}/{maxPolicies} created
60+
</Tag>
61+
{:else}
62+
<Badge
63+
style="white-space: nowrap; max-width: none;"
64+
variant="secondary"
65+
content={`${policiesCreated}/${maxPolicies} created`}
66+
on:click={() => (showDropdown = true)}>
67+
<Icon icon={IconInfo} size="s" slot="start" />
68+
</Badge>
69+
{/if}
4970
<svelte:fragment slot="list">
5071
<slot name="tooltip">
5172
<span>

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/policy.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@
198198

199199
<!-- Prev / Next section -->
200200
<div class="policy-cycles u-flex u-gap-24 u-padding-block-2">
201-
<div style="width: 128px" class="u-flex-vertical policy-item-caption">
201+
<div style="width: 160px" class="u-flex-vertical policy-item-caption">
202202
<Typography.Caption variant="400" color="--fgcolor-neutral-tertiary"
203203
>Previous
204204
</Typography.Caption>
@@ -225,7 +225,7 @@
225225
<Divider vertical />
226226
</div>
227227

228-
<div style="width: 128px" class="u-flex-vertical policy-item-caption">
228+
<div style="width: 140px" class="u-flex-vertical policy-item-caption">
229229
<Typography.Caption variant="400" color="--fgcolor-neutral-tertiary"
230230
>Next
231231
</Typography.Caption>

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/store.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ export const presetPolicies = writable<UserBackupPolicy[]>([
3030

3131
export const columns = writable<Column[]>([
3232
{ id: 'backups', title: 'Backups', type: 'string', width: { min: 180 } },
33-
{ id: 'size', title: 'Size', type: 'integer', width: { min: 163 } },
33+
{ id: 'size', title: 'Size', type: 'integer', width: { min: 100 } },
3434
{ id: 'status', title: 'Status', type: 'enum', width: { min: 163 } },
35-
{ id: 'policy', title: 'Policy', type: 'string', width: { min: 163 } },
36-
{ id: 'actions', title: '', type: 'string', width: 48 }
35+
{ id: 'policy', title: 'Policy', type: 'string', width: { min: 100 } },
36+
{ id: 'actions', title: '', type: 'string', width: 64 }
3737
]);

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/table.svelte‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@
205205
<!--{/if}-->
206206
</Table.Cell>
207207
<Table.Cell column="policy" {root}>
208-
<div class="u-flex u-main-space-between u-cross-baseline">
208+
<div class="u-flex u-cross-baseline">
209209
<Tooltip maxWidth="fit-content">
210210
<span>
211211
{policy?.name || 'Manual'}
@@ -217,51 +217,53 @@
217217
</Tooltip>
218218
</div>
219219
</Table.Cell>
220-
<Table.Cell column="action" {root}>
221-
<Popover let:toggle padding="m" placement="bottom-end">
222-
<Button extraCompact on:click={toggle}>
223-
<Icon icon={IconDotsHorizontal} />
224-
</Button>
225-
<svelte:fragment slot="tooltip" let:toggle>
226-
<ActionMenu.Root width="180px" noPadding>
227-
{#if backup.status === 'completed'}
220+
<Table.Cell column="actions" {root}>
221+
<div class="action-cell u-flex u-main-end u-width-full-line">
222+
<Popover let:toggle padding="m" placement="bottom-end">
223+
<Button extraCompact on:click={toggle}>
224+
<Icon icon={IconDotsHorizontal} />
225+
</Button>
226+
<svelte:fragment slot="tooltip" let:toggle>
227+
<ActionMenu.Root width="180px" noPadding>
228+
{#if backup.status === 'completed'}
229+
<ActionMenu.Item.Button
230+
trailingIcon={IconRefresh}
231+
on:click={(e) => {
232+
toggle(e);
233+
showRestore = true;
234+
selectedBackup = backup;
235+
showDropdown[index] = false;
236+
trackEvent(Click.BackupRestoreClick);
237+
}}>
238+
Restore
239+
</ActionMenu.Item.Button>
240+
{/if}
228241
<ActionMenu.Item.Button
229-
trailingIcon={IconRefresh}
242+
trailingIcon={IconDuplicate}
230243
on:click={(e) => {
231244
toggle(e);
232-
showRestore = true;
245+
copy(backup.$id);
246+
showDropdown[index] = false;
247+
trackEvent(Click.BackupCopyIdClick);
248+
}}>
249+
Copy ID
250+
</ActionMenu.Item.Button>
251+
<ActionMenu.Item.Button
252+
status="danger"
253+
trailingIcon={IconTrash}
254+
on:click={(e) => {
255+
toggle(e);
256+
showDelete = true;
233257
selectedBackup = backup;
234258
showDropdown[index] = false;
235-
trackEvent(Click.BackupRestoreClick);
259+
trackEvent(Click.BackupDeleteClick);
236260
}}>
237-
Restore
261+
Delete
238262
</ActionMenu.Item.Button>
239-
{/if}
240-
<ActionMenu.Item.Button
241-
trailingIcon={IconDuplicate}
242-
on:click={(e) => {
243-
toggle(e);
244-
copy(backup.$id);
245-
showDropdown[index] = false;
246-
trackEvent(Click.BackupCopyIdClick);
247-
}}>
248-
Copy ID
249-
</ActionMenu.Item.Button>
250-
<ActionMenu.Item.Button
251-
status="danger"
252-
trailingIcon={IconTrash}
253-
on:click={(e) => {
254-
toggle(e);
255-
showDelete = true;
256-
selectedBackup = backup;
257-
showDropdown[index] = false;
258-
trackEvent(Click.BackupDeleteClick);
259-
}}>
260-
Delete
261-
</ActionMenu.Item.Button>
262-
</ActionMenu.Root>
263-
</svelte:fragment>
264-
</Popover>
263+
</ActionMenu.Root>
264+
</svelte:fragment>
265+
</Popover>
266+
</div>
265267
</Table.Cell>
266268
</Table.Row.Base>
267269
{/each}

0 commit comments

Comments
 (0)