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

misc: ui fixes, alignments.

Browse Source
This commit is contained in:
ItzNotABug
2024-09-22 18:20:24 +05:30
parent b930caa0c5
commit b263ca92c6
5 changed files with 95 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/backupsPromotionBox.svelte
+1 -1
View File
@@ -23,7 +23,7 @@
const message = isFreePlan
? 'Schedule automatic or manual backups to protect your data and ensure quick recovery.'
: isCloud
? 'Protect your data and ensure quick recovery with our new backups.<br/><br/><b>Try it now for free until Nov 2024.</b>'
? 'Protect your data and ensure quick recovery with our new backups.<br/><b>Try it now for free until Nov 2024.</b>'
: 'Protect your data and ensure quick recovery with Appwrite backups. Sign up now.';
const ctaText = isFreePlan ? 'Upgrade plan' : isCloud ? 'Try now' : 'Sign up';
src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
+6 -9
View File
@@ -94,11 +94,12 @@
{/if}
</div>
{:else}
<article
class:empty-bigger={data.policies.total === 0}
class="empty card u-width-full-line common-section">
No backups yet
</article>
<div class="u-flex u-flex-vertical u-gap-16">
<article
class="empty card u-width-full-line common-section u-margin-block-start-24">
No backups yet
</article>
</div>
{/if}
</div>
{:else}
@@ -154,8 +155,4 @@
text-align: center;
align-content: center;
}
.empty-bigger {
block-size: 363px;
}
</style>
src/routes/(console)/project-[project]/databases/database-[database]/backups/createPolicy.svelte
+11 -2
View File
@@ -75,14 +75,20 @@
try {
await Promise.all(totalPoliciesPromise);
const message =
totalPolicies.length > 1
? `Backup policies have been created`
: `<b>${totalPolicies[0].label}</b> has been created`;
addNotification({
isHtml: true,
type: 'success',
message: `Backup ${totalPoliciesPromise.length > 1 ? 'policies' : 'policy'} created`
message
});
showCreate = false;
resetFormVariables();
totalPolicies = [];
listOfCustomPolicies = [];
invalidate(Dependencies.BACKUPS);
} catch (err) {
@@ -178,7 +184,10 @@
<div class="card policy-default-custom-card">
<div class="u-flex-vertical u-gap-4 body-text-2">
<div class="u-flex u-main-space-between">
<h3 class="body-text-2 u-bold">{policy.label}</h3>
<div class="u-flex u-cross-center u-gap-4">
<h3 class="u-bold">{policy.label}</h3>
<span class="inline-tag">$20.00</span>
</div>
<div class="u-flex u-gap-8">
<Button
src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
+62 -49
View File
@@ -60,7 +60,6 @@
const getPolicyDescription = (cron: string): string => {
const cronParts = cron.split(' ');
// A standard cron has 5 parts: minute, hour, day of month, month, day of week
const [minute, hour, dayOfMonth, month, dayOfWeek] = cronParts;
if (dayOfMonth !== '*' && month === '*' && dayOfWeek === '*') {
@@ -95,17 +94,17 @@
<div class="u-flex u-flex-vertical u-gap-16">
<Card
class="u-margin-block-start-24"
class="backups-policy-list-card u-margin-block-start-24"
style="--card-padding: 0.5rem; --card-padding-mobile: 0.5rem; min-width: 21.5rem;">
<div class="u-flex-vertical-mobile">
{#each policies.policies as policy, index (policy.$id)}
<div
class="policy-card-item-padding u-flex-vertical u-gap-10"
class:u-padding-block-end-10={index === 0}
class:u-padding-block-start-10={index !== 0}
class:opacity-gradient-bottom={index === 2}
data-show-every={showEveryPolicy}
data-visible={index <= 3 || showEveryPolicy}>
data-visible={index < 3 || showEveryPolicy}
class:opacity-gradient-bottom={index === 2}
class:u-padding-block-start-10={index !== 0}
class:u-padding-block-end-10={index === 0 && policies.policies.length > 1}>
<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>
@@ -132,7 +131,9 @@
</DropList>
</div>
<div class="policy-item-subtitles u-flex u-gap-6">
<div
class="policy-item-subtitles u-flex u-gap-6"
style="width: fit-content;">
{getPolicyDescription(policy.schedule)}
<span class="small-ellipse">●</span>
{formatRetentionMessage(policy.retention)}
@@ -140,8 +141,8 @@
</div>
<div
class="policy-cycles u-flex u-gap-12 u-cross-start u-padding-block-2 policy-item-subtitles">
<div class="u-flex-vertical policy-item-caption">
class="policy-cycles u-flex u-cross-center u-padding-block-2 policy-item-subtitles">
<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 policy-item-subtitles darker-neutral-color">
@@ -151,17 +152,19 @@
]
? 'hsl(var(--color-success-100))'
: 'inherit'};">●</span>
{#if lastBackupDates[policy.$id]}
{toLocaleDateTime(lastBackupDates[policy.$id])}
{:else}
No backups yet
{/if}
<span class="policy-item-subtitles">
{#if lastBackupDates[policy.$id]}
{toLocaleDateTime(lastBackupDates[policy.$id])}
{:else}
No backups yet
{/if}
</span>
</div>
</div>
<div class="u-border-vertical" />
<div class="u-flex-vertical policy-item-caption">
<div style="width: 128px" 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">
@@ -178,13 +181,21 @@
</div>
{:else}
<div class="u-padding-24 u-flex-vertical u-gap-16 u-cross-center">
<div>
{#if $app.themeInUse === 'dark'}
<img src={EmptyDark} alt="create" aria-hidden="true" height="152" />
{:else}
<img src={EmptyLight} alt="create" aria-hidden="true" height="152" />
{/if}
</div>
{#if $app.themeInUse === 'dark'}
<img
src={EmptyDark}
alt="create"
aria-hidden="true"
height="152"
width="280" />
{:else}
<img
src={EmptyLight}
alt="create"
aria-hidden="true"
height="152"
width="280" />
{/if}
<div class="u-text-center">
<div class="body-text-2 u-bold darker-neutral-color">
@@ -195,7 +206,7 @@
</p>
</div>
<div class="u-flex u-main-center">
<div class="u-flex u-main-center u-padding-block-end-8">
<Button
event="create_policy"
class="small-radius-border-button"
@@ -236,6 +247,7 @@
bind:show={showDelete}
headerDivider={false}
onSubmit={deletePolicy}>
<!-- TODO: Add `This will also delete all the backups associated with this backups.` -->
<p class="text" data-private>
Are you sure you want to delete <b>{selectedPolicy.name}</b> policy?
<br />This action is irreversible.
@@ -255,15 +267,15 @@
}
:global(.small-ellipse) {
font-size: 0.5rem !important;
font-size: 0.25rem;
}
:global(.u-gap-6) {
gap: 0.375rem !important;
gap: 0.375rem;
}
.u-gap-10 {
gap: 0.625rem !important;
gap: 0.625rem;
}
.policy-card-item-padding {
@@ -272,7 +284,7 @@
}
.policy-card-item-padding:last-child {
border-block-end: none !important;
border-block-end: none;
}
.policy-addon-fee-alert {
@@ -284,11 +296,11 @@
}
.u-padding-block-start-10 {
padding-block-start: 10px !important;
padding-block-start: 10px;
}
.u-padding-block-end-10 {
padding-block-end: 10px !important;
padding-block-end: 10px;
}
.policy-item-subtitles {
@@ -300,7 +312,7 @@
}
.policy-cycles {
margin-block-start: 0.625rem !important;
margin-block: 0.125rem;
}
:global(.theme-light .policy-item-subtitles) {
@@ -317,7 +329,7 @@
:global(.show-more-policy-button) {
background: transparent;
border-radius: 1rem !important;
border-radius: 1rem;
}
.show-more-policy-wrapper {
@@ -326,36 +338,37 @@
}
@media (max-width: 768px) {
.policy-cycles.u-cross-start {
justify-content: space-between !important;
:global(.backups-policy-list-card) {
min-width: unset !important;
}
.policy-card-item-padding {
display: none !important;
visibility: hidden !important;
display: none;
visibility: hidden;
}
.policy-card-item-padding[data-visible='true'] {
display: block !important;
visibility: visible !important;
display: block;
visibility: visible;
}
.policy-card-item-padding[data-visible='true']:nth-child(3) {
opacity: 0.25;
border-block-end: none !important;
border-block-end: none;
}
.policy-card-item-padding[data-visible='true']:nth-child(3) .policy-cycles {
height: 0 !important;
margin: unset !important;
padding: unset !important;
visibility: hidden !important;
height: 0;
margin: unset;
padding: unset;
visibility: hidden;
}
.policy-card-item-padding[data-visible='false']:nth-child(n + 4) {
height: 0 !important;
padding: unset !important;
border-block-end: none !important;
opacity: 0;
height: 0;
padding: unset;
border-block-end: none;
}
.policy-card-item-padding[data-visible='true'][data-show-every='true']:nth-child(3) {
@@ -365,15 +378,15 @@
.policy-card-item-padding[data-visible='true'][data-show-every='true']:nth-child(3):not(
:last-child
) {
border-block-end: solid 0.0625rem hsl(var(--color-border)) !important;
border-block-end: solid 0.0625rem hsl(var(--color-border));
}
.policy-card-item-padding[data-visible='true'][data-show-every='true']:nth-child(3)
.policy-cycles,
.policy-card-item-padding[data-visible='true'][data-show-every='true']:nth-child(3),
.policy-cycles {
height: auto !important;
visibility: visible !important;
height: auto;
visibility: visible;
}
.opacity-gradient-bottom {
@@ -398,7 +411,7 @@
.opacity-gradient-bottom[data-visible='true'][data-show-every='true']::after,
:global(.theme-dark)
.opacity-gradient-bottom[data-visible='true'][data-show-every='true']::after {
background: transparent !important;
background: transparent;
}
}
</style>
src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte
+15 -3
View File
@@ -9,6 +9,7 @@
TableRow,
TableScroll
} from '$lib/elements/table';
import { tooltip } from '$lib/actions/tooltip';
import RestoreModal from './restoreModal.svelte';
import type { PageData } from './$types';
import { timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
@@ -76,8 +77,8 @@
}
};
const policyName = (policyId: string | null) =>
data.policies.policies.find((policy) => policy.$id === policyId)?.name || 'Manual';
const policyDetails = (policyId: string | null) =>
data.policies.policies.find((policy) => policy.$id === policyId);
const cleanBackupName = (backup: Models.BackupArchive) =>
toLocaleDateTime(backup.$createdAt).replaceAll(',', '');
@@ -93,6 +94,10 @@
</TableHeader>
<TableBody>
{#each data.backups.archives as backup, index}
{@const policy = policyDetails(backup.policyId)}
{@const retainedUntil = new Date(
new Date(policy?.$createdAt).getTime() + policy?.retention * 24 * 60 * 60 * 1000
)}
<TableRow>
<TableCell width={192} title={backup.$createdAt}>
{cleanBackupName(backup)}
@@ -119,7 +124,14 @@
</TableCell>
<TableCell width={168} title="Backup Policy">
<div class="u-flex u-main-space-between u-cross-baseline">
{policyName(backup.policyId)}
<span
use:tooltip={{
content: policy
? `Retained until: ${retainedUntil}`
: `Retained forever`
}}>
{policy?.name || 'Manual'}
</span>
</div>
</TableCell>