mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
update: ui changes per design.
This commit is contained in:
ItzNotABug
+12
-30
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Alert, Empty, Modal, PaginationWithLimit } from '$lib/components';
|
||||
import { Alert, Modal, PaginationWithLimit } from '$lib/components';
|
||||
import { Container } from '$lib/layout';
|
||||
import ContainerHeader from './containerHeader.svelte';
|
||||
import BackupPolicy from './policy.svelte';
|
||||
@@ -95,35 +95,9 @@
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<Empty single on:click={() => (showCreateManualBackup = true)}>
|
||||
<div class="u-text-center">
|
||||
<div class="body-text-2 u-bold darker-neutral-color">
|
||||
Create a backup to get started.
|
||||
</div>
|
||||
<p class="body-text-2 u-margin-block-start-4 policy-item-caption">
|
||||
Need a hand? Learn more in our documentation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="u-flex u-gap-16 u-main-center">
|
||||
<Button
|
||||
text
|
||||
external
|
||||
event="empty_documentation"
|
||||
href="https://appwrite.io/docs/products/databases/backups"
|
||||
ariaLabel="create backup"
|
||||
>Documentation
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
event="create_policy"
|
||||
class="small-radius-border-button"
|
||||
on:click={() => (showCreateManualBackup = true)}>
|
||||
<span class="icon-plus" aria-hidden="true" />
|
||||
<span class="text">Create Backup</span>
|
||||
</Button>
|
||||
</div>
|
||||
</Empty>
|
||||
<article class="empty card u-width-full-line common-section">
|
||||
No backups yet
|
||||
</article>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
@@ -172,3 +146,11 @@
|
||||
<Button submit>Create</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.empty {
|
||||
block-size: 365px;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
+125
-106
@@ -98,123 +98,134 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<Card
|
||||
class="u-margin-block-start-24"
|
||||
style="--card-padding: 1rem; --card-padding-mobile: 2rem; min-width: 21rem;">
|
||||
<div class="u-flex-vertical-mobile">
|
||||
{#each policies.policies as policy, index}
|
||||
<!-- TODO: check card paddings later -->
|
||||
<div
|
||||
class="policy-card-item-padding u-flex-vertical u-gap-10"
|
||||
class:u-padding-block-start-10={index !== 0}
|
||||
class:u-sep-block-end={index !== policies.total - 1}
|
||||
style:margin-block={index !== 0 ? '6px' : ''}>
|
||||
<div class="u-flex-vertical u-gap-2">
|
||||
<div class="u-flex u-main-space-between">
|
||||
<h3 class="body-text-2 u-bold darker-neutral-color">{policy.name}</h3>
|
||||
<DropList bind:show={showDropdown[index]} placement="bottom-end">
|
||||
<button
|
||||
class="is-only-icon is-text"
|
||||
aria-label="More options"
|
||||
on:click|preventDefault={() => {
|
||||
showDropdown[index] = !showDropdown[index];
|
||||
}}>
|
||||
<span class="icon-dots-horizontal" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<svelte:fragment slot="list">
|
||||
<DropListItem
|
||||
on:click={() => {
|
||||
showDelete = true;
|
||||
selectedPolicy = policy;
|
||||
showDropdown[index] = false;
|
||||
}}>
|
||||
Delete
|
||||
</DropListItem>
|
||||
</svelte:fragment>
|
||||
</DropList>
|
||||
</div>
|
||||
|
||||
<div class="policy-item-subtitles u-flex u-gap-6">
|
||||
{getPolicyDescription(policy.schedule)}
|
||||
<span class="small-ellipse">●</span>
|
||||
{formatRetentionMessage(policy.retention)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Previous and Next section -->
|
||||
<div class="u-flex u-flex-vertical u-gap-10">
|
||||
<Card
|
||||
class="u-margin-block-start-24"
|
||||
style="--card-padding: 1rem; --card-padding-mobile: 2rem; min-width: 21rem;">
|
||||
<div class="u-flex-vertical-mobile">
|
||||
{#each policies.policies as policy, index}
|
||||
<!-- TODO: check card paddings later -->
|
||||
<div
|
||||
class="policy-cycles u-flex u-cross-start u-padding-block-2 policy-item-subtitles">
|
||||
<div class="u-flex-vertical policy-item-caption">
|
||||
<span style="color: #97979B">Previous</span>
|
||||
class="policy-card-item-padding u-flex-vertical u-gap-10"
|
||||
class:u-padding-block-start-10={index !== 0}
|
||||
class:u-sep-block-end={index !== policies.total - 1}
|
||||
style:margin-block={index !== 0 ? '6px' : ''}>
|
||||
<div class="u-flex-vertical u-gap-2">
|
||||
<div class="u-flex u-main-space-between">
|
||||
<h3 class="body-text-2 u-bold darker-neutral-color">{policy.name}</h3>
|
||||
<DropList bind:show={showDropdown[index]} placement="bottom-end">
|
||||
<button
|
||||
class="is-only-icon is-text"
|
||||
aria-label="More options"
|
||||
on:click|preventDefault={() => {
|
||||
showDropdown[index] = !showDropdown[index];
|
||||
}}>
|
||||
<span class="icon-dots-horizontal" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="u-flex u-gap-4 u-cross-center policy-item-subtitles darker-neutral-color">
|
||||
<span
|
||||
style="font-size: 1rem; margin-bottom: 2px; color: {lastBackupDates[
|
||||
policy.$id
|
||||
]
|
||||
? 'hsl(var(--color-success-100))'
|
||||
: 'inherit'};">
|
||||
●
|
||||
</span>
|
||||
<svelte:fragment slot="list">
|
||||
<DropListItem
|
||||
on:click={() => {
|
||||
showDelete = true;
|
||||
selectedPolicy = policy;
|
||||
showDropdown[index] = false;
|
||||
}}>
|
||||
Delete
|
||||
</DropListItem>
|
||||
</svelte:fragment>
|
||||
</DropList>
|
||||
</div>
|
||||
|
||||
{#if lastBackupDates[policy.$id]}
|
||||
{toLocaleDateTime(lastBackupDates[policy.$id])}
|
||||
{:else}
|
||||
No backups yet
|
||||
{/if}
|
||||
<div class="policy-item-subtitles u-flex u-gap-6">
|
||||
{getPolicyDescription(policy.schedule)}
|
||||
<span class="small-ellipse">●</span>
|
||||
{formatRetentionMessage(policy.retention)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="u-border-vertical" />
|
||||
<!-- Previous and Next section -->
|
||||
<div
|
||||
class="policy-cycles u-flex u-cross-start u-padding-block-2 policy-item-subtitles">
|
||||
<div class="u-flex-vertical policy-item-caption">
|
||||
<span style="color: #97979B">Previous</span>
|
||||
|
||||
<div class="u-flex-vertical policy-item-caption">
|
||||
<span style="color: #97979B">Next</span>
|
||||
<div
|
||||
class="u-flex u-gap-4 u-cross-center policy-item-subtitles darker-neutral-color">
|
||||
{toLocaleDateTime(
|
||||
parseExpression(policy.schedule, {
|
||||
utc: !isHourlySchedule(policy.schedule)
|
||||
})
|
||||
.next()
|
||||
.toString()
|
||||
)}
|
||||
<div
|
||||
class="u-flex u-gap-4 u-cross-center policy-item-subtitles darker-neutral-color">
|
||||
<span
|
||||
style="font-size: 1rem; margin-bottom: 2px; color: {lastBackupDates[
|
||||
policy.$id
|
||||
]
|
||||
? 'hsl(var(--color-success-100))'
|
||||
: 'inherit'};">
|
||||
●
|
||||
</span>
|
||||
|
||||
{#if lastBackupDates[policy.$id]}
|
||||
{toLocaleDateTime(lastBackupDates[policy.$id])}
|
||||
{:else}
|
||||
No backups yet
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="u-border-vertical" />
|
||||
|
||||
<div class="u-flex-vertical policy-item-caption">
|
||||
<span style="color: #97979B">Next</span>
|
||||
<div
|
||||
class="u-flex u-gap-4 u-cross-center policy-item-subtitles darker-neutral-color">
|
||||
{toLocaleDateTime(
|
||||
parseExpression(policy.schedule, {
|
||||
utc: !isHourlySchedule(policy.schedule)
|
||||
})
|
||||
.next()
|
||||
.toString()
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<Empty single isCard={false} target="backup" on:click={() => (showCreatePolicy = true)}>
|
||||
<div slot="empty-media">
|
||||
{#if $app.themeInUse === 'dark'}
|
||||
<img src={EmptyDark} alt="create" aria-hidden="true" height="242" />
|
||||
{:else}
|
||||
<img src={EmptyLight} alt="create" aria-hidden="true" height="242" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="u-text-center">
|
||||
<div class="body-text-2 u-bold darker-neutral-color">
|
||||
Ensure your data stays safe
|
||||
{:else}
|
||||
<Empty
|
||||
single
|
||||
isCard={false}
|
||||
target="backup"
|
||||
on:click={() => (showCreatePolicy = true)}>
|
||||
<div slot="empty-media">
|
||||
{#if $app.themeInUse === 'dark'}
|
||||
<img src={EmptyDark} alt="create" aria-hidden="true" height="242" />
|
||||
{:else}
|
||||
<img src={EmptyLight} alt="create" aria-hidden="true" height="242" />
|
||||
{/if}
|
||||
</div>
|
||||
<p class="body-text-2 u-margin-block-start-4 policy-item-caption">
|
||||
Create a backup policy to automate regular and secure data protection.
|
||||
</p>
|
||||
</div>
|
||||
<div class="u-flex u-gap-16 u-main-center">
|
||||
<Button
|
||||
event="create_policy"
|
||||
class="small-radius-border-button"
|
||||
on:click={() => (showCreatePolicy = true)}>
|
||||
<span class="icon-plus" aria-hidden="true" />
|
||||
<span class="text">Create Policy</span>
|
||||
</Button>
|
||||
</div>
|
||||
</Empty>
|
||||
{/each}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div class="u-text-center">
|
||||
<div class="body-text-2 u-bold darker-neutral-color">
|
||||
Ensure your data stays safe
|
||||
</div>
|
||||
<p class="body-text-2 u-margin-block-start-4 policy-item-caption">
|
||||
Create a backup policy to automate regular and secure data protection.
|
||||
</p>
|
||||
</div>
|
||||
<div class="u-flex u-gap-16 u-main-center">
|
||||
<Button
|
||||
event="create_policy"
|
||||
class="small-radius-border-button"
|
||||
on:click={() => (showCreatePolicy = true)}>
|
||||
<span class="icon-plus" aria-hidden="true" />
|
||||
<span class="text">Create Policy</span>
|
||||
</Button>
|
||||
</div>
|
||||
</Empty>
|
||||
{/each}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<span class="policy-item-subtitles policy-addon-fee-alert">
|
||||
Database backups are free until <b>November 2024</b>. Starting then, a $20.00 fee will apply
|
||||
per backup policy.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
title="Delete policy"
|
||||
@@ -257,6 +268,14 @@
|
||||
/*padding-inline: var(--space-3, 6px) var(--space-4, 8px);*/
|
||||
}
|
||||
|
||||
.policy-addon-fee-alert {
|
||||
margin-inline: 12px;
|
||||
}
|
||||
|
||||
:global(.theme-light .policy-addon-fee-alert) {
|
||||
color: var(--mid-neutrals-60, #6c6c71);
|
||||
}
|
||||
|
||||
.u-padding-block-start-10 {
|
||||
padding-block-start: 10px !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user