refactor: align files tab with content tab design (#5621)
* 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.
@@ -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>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
97
packages/ui/src/stories/base/NavTabs.stories.ts
Normal file
97
packages/ui/src/stories/base/NavTabs.stories.ts
Normal file
@@ -0,0 +1,97 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
import { getCurrentInstance, ref } from 'vue'
|
||||
import { createMemoryHistory, createRouter } from 'vue-router'
|
||||
|
||||
import NavTabs from '../../components/base/NavTabs.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createMemoryHistory(),
|
||||
routes: [{ path: '/', component: { template: '<div />' } }],
|
||||
})
|
||||
|
||||
const meta = {
|
||||
title: 'Base/NavTabs',
|
||||
component: NavTabs,
|
||||
decorators: [
|
||||
(story) => {
|
||||
return {
|
||||
components: { story },
|
||||
setup() {
|
||||
const app = getCurrentInstance()?.appContext.app
|
||||
if (app && !app.config.globalProperties.$router) {
|
||||
app.use(router)
|
||||
}
|
||||
},
|
||||
template: '<story />',
|
||||
}
|
||||
},
|
||||
],
|
||||
} satisfies Meta<typeof NavTabs>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
mode: 'local',
|
||||
activeIndex: 0,
|
||||
links: [
|
||||
{ label: 'Overview', href: '' },
|
||||
{ label: 'Gallery', href: 'gallery' },
|
||||
{ label: 'Changelog', href: 'changelog' },
|
||||
{ label: 'Versions', href: 'versions' },
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
export const LocalMode: StoryObj = {
|
||||
render: () => ({
|
||||
components: { NavTabs },
|
||||
setup() {
|
||||
const activeIndex = ref(0)
|
||||
const links = [
|
||||
{ label: 'Overview', href: '' },
|
||||
{ label: 'Gallery', href: 'gallery' },
|
||||
{ label: 'Changelog', href: 'changelog' },
|
||||
{ label: 'Versions', href: 'versions' },
|
||||
]
|
||||
function onTabClick(index: number) {
|
||||
activeIndex.value = index
|
||||
}
|
||||
return { activeIndex, links, onTabClick }
|
||||
},
|
||||
template: /* html */ `
|
||||
<NavTabs
|
||||
mode="local"
|
||||
:active-index="activeIndex"
|
||||
:links="links"
|
||||
@tab-click="onTabClick"
|
||||
/>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const TwoTabs: StoryObj = {
|
||||
render: () => ({
|
||||
components: { NavTabs },
|
||||
setup() {
|
||||
const activeIndex = ref(0)
|
||||
const links = [
|
||||
{ label: 'Details', href: '' },
|
||||
{ label: 'Settings', href: 'settings' },
|
||||
]
|
||||
function onTabClick(index: number) {
|
||||
activeIndex.value = index
|
||||
}
|
||||
return { activeIndex, links, onTabClick }
|
||||
},
|
||||
template: /* html */ `
|
||||
<NavTabs
|
||||
mode="local"
|
||||
:active-index="activeIndex"
|
||||
:links="links"
|
||||
@tab-click="onTabClick"
|
||||
/>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
Reference in New Issue
Block a user