mirror of
https://github.com/modrinth/code.git
synced 2026-08-31 03:55:59 +00:00
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 74758fe185.
* 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>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
@@ -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