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

fix(ui): improve Heading component

This commit is contained in:
upsiflu 2025-02-06 13:49:47 +01:00
parent 48800e2eee
commit e16d0a6130
2 changed files with 71 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
front/src/components/ui/Heading.vue
View File

@ -1,28 +1,35 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'
const props = defineProps<{ const props = defineProps<{
[H in `h${'1' | '2' | '3' | '4' | '5' | '6' | '7'}`]? : string [H in `h${'1' | '2' | '3' | '4' | '5' | '6' | '7'}`]? : string
} & {[S in 'page-heading' | 'section-heading' | 'subsection-heading' | 'caption' | 'title' | 'radio' | 'secondary' ]? : true}>() } & {[S in 'page-heading' | 'section-heading' | 'subsection-heading' | 'caption' | 'title' | 'radio' | 'secondary' ]? : true}>()
const [level, title] = Object.entries(props).find(([key, value]) => value && key.startsWith('h')) || ['h1', ''] const [level, title] = Object.entries(props).find(([key, value]) => value && key.startsWith('h')) || ['h1', '']
const size = Object.entries(props).find(([key, value]) => value && key!==level)?.[0] || 'section-heading' const size = computed(()=>(Object.entries(props).find(([key, value]) => value && key!==level)?.[0] || 'section-heading').replace('-', '').toLowerCase())
</script> </script>
<template> <template>
<component :is="level" :class="size" style="margin: 0; padding: 0; vertical-align: baseline;"> <component :is="level" :class="[$style[size], $style.heading]">
<slot name="before" />
{{ title }} {{ title }}
<slot /> <slot />
<slot name="after" />
</component> </component>
</template> </template>
<style scoped> <style module>
/* Any heading */
:is(h1, h2, h3, h4, h5, h6).heading { margin: 0; padding:0; vertical-align: baseline; align-self: baseline;}
/* Page heading */ /* Page heading */
.pageHeading { font-size: 36px; font-weight: 900; letter-spacing: -1px; } .pageheading { font-size: 36px; font-weight: 900; letter-spacing: -1px; }
/* Section heading, Modal heading [DEFAULT] */ /* Section heading, Modal heading [DEFAULT] */
.sectionHeading { font-size: 20px; font-weight: 700; letter-spacing: -.5px; } .sectionheading { font-size: 20px; font-weight: 700; letter-spacing: -.5px; }
/* Form subsection */ /* Form subsection */
.subsectionHeading {font-size: 16px; font-weight: 600; letter-spacing: 0; } .subsectionheading {font-size: 16px; font-weight: 600; letter-spacing: 0; }
/* input caption */ /* input caption */
.caption {font-size: 14px; font-weight: 600; letter-spacing: .25px; } .caption {font-size: 14px; font-weight: 600; letter-spacing: .25px; }

64
front/ui-docs/components/ui/heading.md
View File

@ -24,19 +24,31 @@ Consult [the allyproject for a comprehensive guide on headings](https://www.a11y
--- ---
<Heading h1 page-heading>Page heading</Heading> ```vue-html
<Heading h1="Page heading" page-heading />
```
<Heading h1="Page heading" page-heading />
Use this visual size on the main heading of the page. Use this visual size on the main heading of the page.
--- ---
<Heading h3 section-heading>Section heading</Heading> ```vue-html
<Heading h3="Section heading" section-heading />
```
<Heading h3="Section heading" section-heading />
Use section headings to subdivide the main content on the page. Also use for modal headings. This is the default visual size. Use section headings to subdivide the main content on the page. Also use for modal headings. This is the default visual size.
--- ---
<Heading h3 subsection-heading>Subsection heading</Heading> ```vue-html
<Heading h3="Subsection heading" subsection-heading />
```
<Heading h3="Subsection heading" subsection-heading />
Use subsection headings to break long sections or forms with several groups into digestible subsections. Use subsection headings to break long sections or forms with several groups into digestible subsections.
@ -44,24 +56,62 @@ Use subsection headings to break long sections or forms with several groups into
--- ---
<Heading h4 caption>Caption</Heading> ```vue-html
<Heading h4="Caption" caption />
```
<Heading h4="Caption" caption />
Caption-style headings are found only within forms. Caption-style headings are found only within forms.
--- ---
<Heading h3 title>Title</Heading> ```vue-html
<Heading h3="Title" title />
```
<Heading h3="Title" title />
Use this visual size to title [Tabs](/components/ui/tabs), Channels, [Cards](/components/ui/card) and [Activities](/components/ui/activity). Use this visual size to title [Tabs](/components/ui/tabs), Channels, [Cards](/components/ui/card) and [Activities](/components/ui/activity).
--- ---
<Heading h3 radio>Radio</Heading> ```vue-html
<Heading h3="Radio" radio />
```
<Heading h3="Radio" radio />
Radio cards have giant titles. Radio cards have giant titles.
--- ---
<Heading h3 secondary>Secondary</Heading> ```vue-html
<Heading h3="Secondary" secondary />
```
<Heading h3="Secondary" secondary />
A card may have a secondary title, [as exemplified in the designs](https://design.funkwhale.audio/#/workspace/a4e0101a-252c-80ef-8003-918b4c2c3927/e3a187f0-0f5e-11ed-adb9-fff9e854a67c?page-id=5e293790-52d3-11ed-9497-8deeaf0bfa97). A card may have a secondary title, [as exemplified in the designs](https://design.funkwhale.audio/#/workspace/a4e0101a-252c-80ef-8003-918b4c2c3927/e3a187f0-0f5e-11ed-adb9-fff9e854a67c?page-id=5e293790-52d3-11ed-9497-8deeaf0bfa97).
## Add content to the left and to the right
```vue-html
<Heading h2="Heading" page-heading>
<template #before>
(Before)
</template>
<template #after>
(After)
</template>
</Heading>
```
<Heading h2="Heading" page-heading>
<template #before>
(Before)
</template>
<template #after>
(After)
</template>
</Heading>