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

chore(ui): minor improvements

This commit is contained in:
upsiflu 2024-12-30 11:52:26 +01:00
parent 8ff2c05e05
commit 61e03ca9a0
4 changed files with 46 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
front/src/components/ui/Toggle.vue
View File

@ -1,8 +1,6 @@
<script setup lang="ts">
import { color } from "~/composables/colors.ts";
import Layout from './Layout.vue';
const { big } = defineProps<{
big?: boolean
title?: string
@ -18,7 +16,9 @@ const diameter = big? '28px' : '20px'
v-bind="color({}, ['interactive', 'raised'])"
:checked = "isOn || undefined"
>
<input type="checkbox" v-model="isOn" />
<input type="checkbox" v-model="isOn"
style="visibility: hidden; /* Hide even before stylesheet is loaded */"
/>
<span v-if="title">{{ title }}</span>
</label>
</template>

28
front/src/style/colors.scss
View File

@ -104,6 +104,15 @@
--disabled-background-color:var(--fw-beige-100);
--disabled-border-color:var(--fw-beige-100);
&.raised {
--background-color:var(--fw-beige-300);
--border-color:color-mix(in oklab, var(--fw-beige-400) 90%, currentcolor);
}
--link-active-border-color:var(--fw-beige-400);
--link-exact-active-background-color:var(--fw-beige-400);
--link-exact-active-border-color:transparent;
--void-off-background-color: var(--fw-gray-500);
--void-off-pin-color: var(--fw-beige-100);
--void-on-background-color: var(--fw-blue-100);
@ -113,15 +122,6 @@
--void-off-hover-pin-color: var(--fw-beige-200);
--void-on-hover-background-color: var(--fw-blue-400);
--void-on-hover-pin-color: var(--fw-blue-010);
&.raised {
--background-color:var(--fw-beige-300);
--border-color:color-mix(in oklab, var(--fw-beige-400) 90%, currentcolor);
}
--link-active-border-color:var(--fw-beige-400);
--link-exact-active-background-color:var(--fw-beige-400);
--link-exact-active-border-color:transparent;
}
.secondary {
@ -329,6 +329,16 @@
--link-active-border-color:var(--fw-gray-700);
--link-exact-active-background-color:var(--fw-gray-950);
--link-exact-active-border-color:transparent;
--void-off-background-color: var(--fw-gray-800);
--void-off-pin-color: var(--fw-beige-100);
--void-on-background-color: var(--fw-blue-400);
--void-on-pin-color: var(--fw-beige-100);
--void-off-hover-background-color: var(--fw-gray-700);
--void-off-hover-pin-color: var(--fw-beige-200);
--void-on-hover-background-color: var(--fw-blue-400);
--void-on-hover-pin-color: var(--fw-blue-010);
}
.secondary {

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

@ -109,13 +109,7 @@ const user: User = {
## Grid
::: details Default widths
![alt text](image-1.png)
:::
The page grid consists of 46px wide tracks, separated by 32px wide gaps.
The page grid consists of 46px wide tracks, separated by 32px wide gaps. [See examples on design.funkwhale.audio](https://design.funkwhale.audio/#/workspace/582e7be1-0cc7-11ed-87a1-ae44a720651d/e3a00150-0f5e-11ed-adb9-fff9e854a67c?page-id=e7a90671-0f5e-11ed-adb9-fff9e854a67c)
### Responsivity
@ -127,11 +121,12 @@ 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" title="Left-align the layout"/>
<Toggle v-model="alignLeft" title="Left-align the layout"/>
</Layout>
---
<div class="preview" style="margin: 0 -40px; padding: 0 25px;">
<Layout
grid="auto / repeat(auto-fit, calc(46px * 3 + 32px * 2))"
v-bind="attributes"
@ -186,9 +181,11 @@ Resize the window to observe how the items move.
</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;"
>
@ -220,6 +217,7 @@ Resize the window to observe how the items move.
<Activity :track="track" :user="user" />
<Activity :track="track" :user="user" />
</Layout>
</div>
## Navigation

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

@ -508,13 +508,13 @@ Its structure is as follows:
<Layout stack style="--width:100%; background:#0002;">
<Card solid purple title="(1) Palette">
<Card full solid purple title="(1) Palette">
Defining [all funkwhale color values](#palette)
</Card>
<Card solid blue title="(2) Choosing the semantic colors from the palette">
<Card full solid blue title="(2) Choosing the semantic colors from the palette">
both for light and dark theme, and both normal and raised:
@ -530,7 +530,7 @@ both for light and dark theme, and both normal and raised:
</Card>
<Card solid green title="(3) Applying colors">
<Card full solid green title="(3) Applying colors">
(for all elements not managed by vitepress)
@ -586,7 +586,7 @@ Here is the meaning the styles should convey:
---
<Layout flex>
<Layout flex style="--gap:4px; margin: 0 -50px;">
<Card min-content title="Default" solid default>
<span>
@ -595,14 +595,14 @@ Here is the meaning the styles should convey:
---
<Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
<Layout no-gap>
<Layout flex style="margin: 0 -22px; justify-content:space-evenly;">
<Layout >
Here
<Link ghost :to="here"> ghost </Link>
<Link outline :to="here"> outline </Link>
<Link solid raised :to="here"> solid raised </Link>
</Layout>
<Layout no-gap>
<Layout >
Elsewhere
<Link ghost to="-"> ghost </Link>
<Link outline to="-"> outline </Link>
@ -637,14 +637,14 @@ Here is the meaning the styles should convey:
---
<Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
<Layout no-gap>
<Layout flex style="margin: 0 -22px; justify-content:space-evenly;">
<Layout >
Here
<Link ghost :to="here"> ghost </Link>
<Link outline :to="here"> outline </Link>
<Link solid raised :to="here"> solid raised </Link>
</Layout>
<Layout no-gap>
<Layout >
Elsewhere
<Link ghost to="-"> ghost </Link>
<Link outline to="-"> outline </Link>
@ -679,14 +679,14 @@ Here is the meaning the styles should convey:
---
<Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
<Layout no-gap>
<Layout flex style="margin: 0 -22px; justify-content:space-evenly;">
<Layout >
Here
<Link ghost :to="here"> ghost </Link>
<Link outline :to="here"> outline </Link>
<Link solid raised :to="here"> solid raised </Link>
</Layout>
<Layout no-gap>
<Layout >
Elsewhere
<Link ghost to="-"> ghost </Link>
<Link outline to="-"> outline </Link>
@ -721,14 +721,14 @@ Here is the meaning the styles should convey:
---
<Layout flex no-gap style="margin: 0 -22px; justify-content:space-evenly;">
<Layout no-gap>
<Layout flex style="margin: 0 -22px; justify-content:space-evenly;">
<Layout >
Here
<Link ghost :to="here"> ghost </Link>
<Link outline :to="here"> outline </Link>
<Link solid raised :to="here"> solid raised </Link>
</Layout>
<Layout no-gap>
<Layout >
Elsewhere
<Link ghost to="-"> ghost </Link>
<Link outline to="-"> outline </Link>