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>
</head>
<body id="body">
<body id="body" style="margin:0">
<div id="fake-app">
<div id="fake-sidebar">
<div id="orange-square"></div>

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

@ -1,6 +1,6 @@
<script setup lang="ts">
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'

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

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

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

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

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

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

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

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