MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: backups alignment with Figma (#5559)

Browse Source 
* feat: backup admonitions

* feat: align modals + fix backupitem

* fix: body needs opac 80

* fix: lint
This commit is contained in:
Calum H.
2026-03-13 22:27:06 +00:00
committed by GitHub
parent 31b541007d
commit 8a2125ef16
16 changed files with 715 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/ui/src/stories/base/Admonition.stories.ts
View File

@@ -24,6 +24,7 @@ export const AllTypes: Story = {
<Admonition type="info" header="Info" body="This is an informational message." />
<Admonition type="warning" header="Warning" body="This is a warning message." />
<Admonition type="critical" header="Critical" body="This is a critical message." />
<Admonition type="success" header="Success" body="This operation completed successfully." />
</div>
`,
}),
@@ -36,3 +37,11 @@ export const WithHeader: Story = {
body: 'Please read this carefully before proceeding.',
},
}
export const Success: Story = {
args: {
type: 'success',
header: 'Operation Complete',
body: 'Everything went smoothly.',
},
}

114
packages/ui/src/stories/servers/BackupProgressAdmonition.stories.ts Normal file
View File

@@ -0,0 +1,114 @@
import type { Meta, StoryObj } from '@storybook/vue3-vite'
import BackupProgressAdmonition from '../../components/servers/backups/BackupProgressAdmonition.vue'
const meta = {
title: 'Servers/BackupProgressAdmonition',
component: BackupProgressAdmonition,
parameters: {
layout: 'padded',
},
} satisfies Meta<typeof BackupProgressAdmonition>
export default meta
type Story = StoryObj<typeof meta>
const justNow = new Date().toISOString()
const eightMinsAgo = new Date(Date.now() - 8 * 60 * 1000).toISOString()
const fiveHoursAgo = new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString()
export const AllStates: Story = {
render: () => ({
components: { BackupProgressAdmonition },
setup() {
const now = new Date().toISOString()
const mins8 = new Date(Date.now() - 8 * 60 * 1000).toISOString()
const hours5 = new Date(Date.now() - 5 * 60 * 60 * 1000).toISOString()
return { now, mins8, hours5 }
},
template: /*html*/ `
<div style="display: flex; flex-direction: column; gap: 1rem; max-width: 1020px;">
<h3 style="margin: 0; color: var(--color-contrast);">Backup Creation</h3>
<BackupProgressAdmonition type="create" state="ongoing" :progress="0" backup-name="World Backup 1" :created-at="now" />
<BackupProgressAdmonition type="create" state="ongoing" :progress="0.33" backup-name="World Backup 1" :created-at="mins8" />
<BackupProgressAdmonition type="create" state="failed" :progress="0" backup-name="World Backup 1" :created-at="hours5" />
<h3 style="margin: 1rem 0 0; color: var(--color-contrast);">Backup Restoration</h3>
<BackupProgressAdmonition type="restore" state="ongoing" :progress="0" backup-name="World Backup 1" :created-at="now" />
<BackupProgressAdmonition type="restore" state="ongoing" :progress="0.33" backup-name="World Backup 1" :created-at="mins8" />
<BackupProgressAdmonition type="restore" state="done" :progress="1" backup-name="World Backup 1" :created-at="hours5" />
<BackupProgressAdmonition type="restore" state="failed" :progress="0" backup-name="World Backup 1" :created-at="hours5" />
</div>
`,
}),
}
export const BackupQueued: Story = {
args: {
type: 'create',
state: 'ongoing',
progress: 0,
backupName: 'World Backup 1',
createdAt: justNow,
},
}
export const CreatingBackup: Story = {
args: {
type: 'create',
state: 'ongoing',
progress: 0.33,
backupName: 'World Backup 1',
createdAt: eightMinsAgo,
},
}
export const BackupFailed: Story = {
args: {
type: 'create',
state: 'failed',
progress: 0,
backupName: 'World Backup 1',
createdAt: fiveHoursAgo,
},
}
export const RestoreQueued: Story = {
args: {
type: 'restore',
state: 'ongoing',
progress: 0,
backupName: 'World Backup 1',
createdAt: justNow,
},
}
export const RestoringBackup: Story = {
args: {
type: 'restore',
state: 'ongoing',
progress: 0.33,
backupName: 'World Backup 1',
createdAt: eightMinsAgo,
},
}
export const RestoreSuccessful: Story = {
args: {
type: 'restore',
state: 'done',
progress: 1,
backupName: 'World Backup 1',
createdAt: fiveHoursAgo,
},
}
export const RestoreFailed: Story = {
args: {
type: 'restore',
state: 'failed',
progress: 0,
backupName: 'World Backup 1',
createdAt: fiveHoursAgo,
},
}