MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(ui-docs): minor improvements

This commit is contained in:
upsiflu 2024-12-23 00:35:56 +01:00
parent 3ba9f38fa7
commit 9dd10d856d
7 changed files with 74 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
front/ui-docs/.vitepress/config.ts
View File

@ -14,6 +14,9 @@ export default defineConfig({
{
text: 'Using Color', link: '/using-color'
},
{
text: 'Using Widths', link: '/using-widths'
},
{
text: 'Using Components', link: '/using-components'
},

29
front/ui-docs/components/ui/button.md
View File

@ -1,9 +1,8 @@
<script setup>
<script setup lang="ts">
import Button from '~/components/ui/Button.vue'
import Layout from '~/components/ui/Layout.vue'
import { color } from '~/composables/colors.ts';
const click = () => new Promise(resolve => setTimeout(resolve, 1000))
const click = ():Promise<void> => new Promise(resolve => setTimeout(resolve, 1000))
</script>
# Button
@ -363,7 +362,7 @@ Icon buttons shrink down to the icon size if you don't pass any content. If you
```vue-html
<Button icon="bi-three-dots-vertical" />
<Button round icon="bi-x" />
<Button round icon="bi-x large" />
<Button primary icon="bi-save" buttonWidth/>
<Button destructive icon="bi-trash">
Delete
@ -404,18 +403,18 @@ Icon buttons shrink down to the icon size if you don't pass any content. If you
```
<Layout class="preview solid primary" stack no-gap>
<Button min-content>·</Button>
<Button tiny>·</Button>
<Button buttonWidth>·</Button>
<Button small>·</Button>
<Button auto>·</Button>
<Button min-content>🐌</Button>
<Button tiny>🐌</Button>
<Button buttonWidth>🐌</Button>
<Button small>🐌</Button>
<Button auto>🐌</Button>
<hr />
<Button alignSelf="start">·</Button>
<Button alignSelf="center">·</Button>
<Button alignSelf="end">·</Button>
<Button alignSelf="start">🐌</Button>
<Button alignSelf="center">🐌</Button>
<Button alignSelf="end">🐌</Button>
<hr />
<Button alignText="left">·</Button>
<Button alignText="center">·</Button>
<Button alignText="right">·</Button>
<Button alignText="left">🐌</Button>
<Button alignText="center">🐌</Button>
<Button alignText="right">🐌</Button>
</Layout>
</Layout>

18
front/ui-docs/components/ui/card.md
View File

@ -111,11 +111,11 @@ Pass an image source to the `image` prop or set both `image.src` and `image.styl
```vue-html{3,8-9}
<Card
title="For music lovers"
title=" smallFor music lovers"
image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb">
/>
<Card
<Card small
title="For music lovers"
:image="{ src:'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
style:'withPadding' }"
@ -123,12 +123,12 @@ Pass an image source to the `image` prop or set both `image.src` and `image.styl
```
</div>
<Card
<Card small
title="For music lovers"
image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
/>
<Card
<Card small
title="For music lovers"
:image="{ src:'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
style:'withPadding' }"
@ -142,14 +142,14 @@ Pass an image source to the `image` prop or set both `image.src` and `image.styl
<div style="grid-column: span 5; grid-row: span 2;">
```vue-html{4,10}
<Card large
<Card
title="Uploading..."
image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
icon="bi-cloud-arrow-up-fill"
/>
<Card large
<Card
to="./"
title="Find out more"
icon="bi-box-arrow-up-right"
@ -160,13 +160,13 @@ Visit the Docs and learn more about developing Funkwhale
</div>
<Card medium
<Card
title="Uploading..."
image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
icon="bi-cloud-arrow-up-fill"
/>
<Card medium
<Card
to="./"
title="Find out more"
icon="bi-box-arrow-up-right">
@ -280,7 +280,7 @@ If there are multiple actions, they will be presented in a row:
>
Items
</Button>
<Spacer h />
<Spacer h grow />
<Button primary @click="alert('Yay')">
OK
</Button>

2
front/ui-docs/components/ui/layout/spacer.md
View File

@ -134,7 +134,7 @@ const size = ref(1);
</Layout>
```
<div class="preview" style="flex-wrap:no-wrap">
<div class="preview" style="flex-wrap:nowrap">
<Layout flex style="height:30em">
<Input v-model="size" type="range" style="writing-mode: vertical-lr; height:100%"><template #input-right>{{ size }}%</template></Input>

16
front/ui-docs/designing-pages.md
View File

@ -127,18 +127,15 @@ The page grid consists of 46px wide tracks, separated by 32px wide gaps.
Resize the window to observe how the items move.
<Layout flex>
<Toggle v-model="alignLeft" />
Click Toggle to left-align the layout.
<Toggle v-model="alignLeft" title="Left-align the layout"/>
</Layout>
---
<Layout
grid="auto / repeat(auto-fit, calc(46px _ 3 + 32px _ 2))"
v-bind="attributes"
grid="auto / repeat(auto-fit, calc(46px * 3 + 32px * 2))"
v-bind="attributes"
>
<!-- The title row's width is a multiple of 3 rows -->
<Layout flex no-gap
style="grid-column: 1 / -1; align-self: baseline;"
@ -160,7 +157,6 @@ v-bind="attributes"
Show all
</Button>
</Layout>
</Layout>
<Layout solid default
style="position:relative;"
@ -190,11 +186,9 @@ v-bind="attributes"
</Layout>
<Layout
grid="auto / repeat(auto-fit, calc(46px _ 4 + 32px _ 3))"
v-bind="attributes"
grid="auto / repeat(auto-fit, calc(46px * 4 + 32px * 3))"
v-bind="attributes"
>
<Layout flex no-gap
style="grid-column: 1 / -1; align-self: baseline;"
>

6
front/ui-docs/using-color.md
View File

@ -1,4 +1,4 @@
<script setup>
<script setup lang="ts">
import { color, setColors } from "~/composables/colors.ts"
import { useRoute } from "vue-router"
@ -59,12 +59,12 @@ import { color } from "~/composables/colors.ts";
</script>
<template>
<div v-bind="setColors('primary solid interactive raised')" />
<div v-bind="color({}, ['primary', 'solid', 'interactive', 'raised'])" />
</template>
```
<div class="preview">
<div :class="$style.swatch" v-bind="setColors('primary solid interactive raised')" />
<div :class="$style.swatch" v-bind="color({}, ['primary', 'solid', 'interactive', 'raised'])" />
</div>
</Layout>

39
front/ui-docs/using-widths.md Normal file
View File

@ -0,0 +1,39 @@
<script setup>
import { color, setColors } from "~/composables/colors.ts"
import { useRoute } from "vue-router"
import Button from "~/components/ui/Button.vue"
import Card from "~/components/ui/Card.vue"
import Link from "~/components/ui/Link.vue"
import Layout from "~/components/ui/Layout.vue"
import Alert from "~/components/ui/Alert.vue"
import Spacer from "~/components/ui/layout/Spacer.vue"
const route = useRoute();
const here = route.path
</script>
# Using widths
## Add width via prop
<Layout flex class="preview" style="flex-grow: 1">
```vue-html
<Card min-content title='min-content' />
<Card tiny title='tiny' />
<Card buttonWidth title='buttonWidth' />
<Card small title='small' />
<Card medium title='medium' />
<Card auto title='auto' />
<Card full title='full' />
```
<Card min-content title='min-content' />
<Card tiny title='tiny' />
<Card buttonWidth title='buttonWidth' />
<Card small title='small' />
<Card medium title='medium' />
<Card auto title='auto' />
<Card full title='full' />
</Layout>