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

feat(ui): use dark and light theme for ui components in funkwhale app

This commit is contained in:
upsiflu 2024-12-13 23:01:51 +01:00
parent ad9e3dd4b0
commit 7c07f87cfd
6 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/index.html
View File

@ -68,7 +68,7 @@
</style> </style>
</head> </head>
<body id="body"> <body id="body" style="margin:0">
<div id="fake-app"> <div id="fake-app">
<div id="fake-sidebar"> <div id="fake-sidebar">
<div id="orange-square"></div> <div id="orange-square"></div>

2
front/src/components/ui/Button.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, useSlots, onMounted } from 'vue' import { ref, computed, useSlots, onMounted } from 'vue'
import { useColor, type ColorProps } from '~/composables/colors' import { type ColorProps, useColor } from '~/composables/colors'
import Loader from '~/components/ui/Loader.vue' import Loader from '~/components/ui/Loader.vue'

15
front/src/components/ui/Link.vue
View File

@ -1,30 +1,31 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { type RouterLinkProps, RouterLink } from 'vue-router'; import { type RouterLinkProps, RouterLink } from 'vue-router';
const { to, icon } = defineProps<RouterLinkProps & { import { type ColorProps, useColor } from '~/composables/colors';
const { to, icon, color } = defineProps<RouterLinkProps & ColorProps & {
icon?: string; icon?: string;
variant?: 'solid' | 'outline' | 'ghost' variant?: 'solid' | 'outline' | 'ghost'
}>() }>()
const colorClass = useColor(() => color)
const isExternalLink = computed(() => { const isExternalLink = computed(() => {
return typeof to === 'string' && to.startsWith('http') return typeof to === 'string' && to.startsWith('http')
}) })
</script> </script>
<template> <template>
<a v-if="isExternalLink" :class="$style.external" :href="to?.toString()" target="_blank"> <a v-if="isExternalLink" :class="[$style.external, $style[colorClass]]" :href="to?.toString()" target="_blank">
<slot /> <slot />
</a> </a>
<RouterLink v-if="to && !isExternalLink" :to="to" v-slot="{ isActive, href, navigate }"> <RouterLink v-if="to && !isExternalLink" :to="to" :class="$style[colorClass]">
<a :href="href" @click="navigate" :class="{ [$style.active]: isActive }"> <slot />
<slot />
<i v-if="icon" :class="['bi', icon]" /> <i v-if="icon" :class="['bi', icon]" />
</a>
</RouterLink> </RouterLink>
</template> </template>
<style module lang="scss"> <style module lang="scss">
.active { background:red; } .active { outline: 3px solid red; }
.external { outline: 3px dotted blue; } .external { outline: 3px dotted blue; }
a { a {
background-color: var(--fw-bg-color); background-color: var(--fw-bg-color);

1
front/src/style/funkwhale.scss
View File

@ -1,5 +1,6 @@
@charset "utf-8"; @charset "utf-8";
@import "base/index"; @import "base/index";
@import "inc/theme.scss";
@import "font"; @import "font";
@import "colors"; @import "colors";

2
front/src/ui/App.vue
View File

@ -10,7 +10,7 @@ onMounted(async () => {
</script> </script>
<template> <template>
<div class="grid"> <div class="funkwhale grid">
<Sidebar /> <Sidebar />
<main> <main>
<RouterView /> <RouterView />

14
front/src/ui/components/Sidebar.vue
View File

@ -183,7 +183,13 @@ const uploads = useUploadsStore()
<style scoped lang="scss"> <style scoped lang="scss">
aside { aside {
background: var(--fw-beige-300); @include light-theme {
background: var(--fw-beige-300);
}
@include dark-theme {
background: var(--fw-blue-700);
}
height: 100%; height: 100%;
> .sticky-content { > .sticky-content {
@ -288,6 +294,12 @@ aside {
margin: 0; margin: 0;
padding: 0 32px 8px; padding: 0 32px 8px;
color: var(--fw-gray-700); color: var(--fw-gray-700);
@include light-theme {
color: var(--fw-gray-700);
}
@include dark-theme {
color: var(--fw-blue-100);
}
font-size: 14px; font-size: 14px;
line-height: 1.2; line-height: 1.2;
} }