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

refactor: align files tab with content tab design (#5621)

Browse Source 
* fix: files.vue bugs before styling changes

* feat: move files tab to shared layout structure

* fix: qa

* fix: qa

* fix: bugs

* fix: lint

* fix: admonition cleanup with progress + actions

* fix: cleanup

* fix: modals

* fix: admon title

* fix: i18n standard

* fix: lint + i18n pass

* fix: remove transition

* fix: type errors

* feat: files tab in app

* fix: qa

* fix: backup item minmax

* fix: use ContentPageHeader for server panel

* fix: lint

* fix: lint

* fix: lint

* feat: page leave safety

* fix: lint

* fix: cargo fmt fix

* fix: blank in prod

* fix: content card table stuff

* Revert "fix: blank in prod"

This reverts commit 74758fe185cf85a4a20355857f889cb091b97ace.

* fix: import

* feat: browse worlds/servers flow

* fix: worlds tab parity with content tab

* fix: perf bug + shader filter pill copy

* feat: singleplayer filter

* fix: ordering

* fix: breadcrumbs

* fix: lint

* fix: qa

* feat: store server proj id when adding to a non-linked instance

* fix: lint

* fix: i18n + qa

* fix: conflict

* qa: already installed modal + placeholders not server-specific

* fix: qa

* fix: add + edit server modals

* fix: qa

* fix: security

* fix: devin flags

* fix: lint

* chore: change file to break build cache

* fix: admon

* fix: import path stuff

* feat: qa

* fix: fmt fmt idiot

---------

Signed-off-by: Calum H. <calum@modrinth.com>
This commit is contained in:
Calum H.
2026-03-26 18:55:15 +00:00
committed by GitHub
parent 706eb800cb
commit 381ea51cce
170 changed files with 8052 additions and 4571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,8 @@
import type { Meta, StoryObj } from '@storybook/vue3-vite'
import Admonition from '../../components/base/Admonition.vue'
import ButtonStyled from '../../components/base/ButtonStyled.vue'
import ProgressBar from '../../components/base/ProgressBar.vue'
const meta = {
title: 'Base/Admonition',
@@ -45,3 +47,92 @@ export const Success: Story = {
body: 'Everything went smoothly.',
},
}
export const Dismissible: Story = {
args: {
type: 'info',
header: 'Dismissible Notice',
body: 'This admonition can be dismissed by clicking the X button.',
dismissible: true,
},
}
export const WithTopRightActions: Story = {
render: () => ({
components: { Admonition, ButtonStyled },
template: /*html*/ `
<div style="display: flex; flex-direction: column; gap: 1rem;">
<Admonition type="info" header="Uploading files (2/5)">
Uploading server files...
<template #top-right-actions>
<ButtonStyled type="outlined" color="blue">
<button class="!border">Cancel</button>
</ButtonStyled>
</template>
</Admonition>
<Admonition type="critical" header="Extraction failed">
Something went wrong while extracting the archive.
<template #top-right-actions>
<ButtonStyled color="red">
<button>Retry</button>
</ButtonStyled>
<ButtonStyled circular type="transparent" hover-color-fill="background" color="red">
<button>✕</button>
</ButtonStyled>
</template>
</Admonition>
<Admonition type="success" header="Extraction complete">
All files have been extracted successfully.
<template #top-right-actions>
<ButtonStyled circular type="transparent" hover-color-fill="background" color="green">
<button>✕</button>
</ButtonStyled>
</template>
</Admonition>
</div>
`,
}),
}
export const WithProgressBar: Story = {
render: () => ({
components: { Admonition, ButtonStyled, ProgressBar },
template: /*html*/ `
<div style="display: flex; flex-direction: column; gap: 1rem;">
<Admonition type="info" header="Uploading files (2/5)">
128 KB / 1.2 MB (45%)
<template #top-right-actions>
<ButtonStyled type="outlined" color="blue">
<button class="!border">Cancel</button>
</ButtonStyled>
</template>
<template #progress>
<ProgressBar :progress="0.45" :max="1" color="blue" full-width />
</template>
</Admonition>
<Admonition type="info" header="Extracting modpack.zip">
24 MB extracted — config/settings.yml
<template #top-right-actions>
<ButtonStyled type="outlined" color="blue">
<button class="!border">Cancel</button>
</ButtonStyled>
</template>
<template #progress>
<ProgressBar :progress="0.7" :max="1" color="blue" full-width />
</template>
</Admonition>
<Admonition type="success" header="Extraction complete — Done">
56 MB extracted
<template #top-right-actions>
<ButtonStyled circular type="transparent" hover-color-fill="background" color="green">
<button>✕</button>
</ButtonStyled>
</template>
<template #progress>
<ProgressBar :progress="1" :max="1" color="green" full-width />
</template>
</Admonition>
</div>
`,
}),
}