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

feat(ui): [WIP] activate UIv2 (new designs, new routes)

This commit is contained in:
upsiflu 2024-12-13 10:01:44 +01:00
parent 5eef4692e1
commit f3ee0b9f77
3 changed files with 46 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
front/src/App.vue
View File

@ -78,7 +78,12 @@ onKeyboardShortcut('h', () => toggleShortcutsModal())
// because we want to learn if we are authenticated at all // because we want to learn if we are authenticated at all
store.dispatch('auth/fetchUser') store.dispatch('auth/fetchUser')
const isUIv2 = useLocalStorage('ui-v2', false) // TODO:
// Research...
// - "What is the use case for this toggle?"
// - "Is Local Storage (persistence on a specific browser
// on a specific machine) the right place?"
const isUIv2 = useLocalStorage('ui-v2', true)
</script> </script>
<template> <template>
@ -89,5 +94,7 @@ const isUIv2 = useLocalStorage('ui-v2', false)
<style> <style>
html, body { html, body {
font-size: 16px; font-size: 16px;
} }
</style> </style>

7
front/src/router/index.ts
View File

@ -5,7 +5,12 @@ import { forceInstanceChooser } from './guards'
import routesV1 from './routes' import routesV1 from './routes'
import routesV2 from '~/ui/routes' import routesV2 from '~/ui/routes'
const isUIv2 = useLocalStorage('ui-v2', false) // TODO:
// Research...
// - "What is the use case for this toggle?"
// - "Is Local Storage (persistence on a specific browser
// on a specific machine) the right place?"
const isUIv2 = useLocalStorage('ui-v2', true)
const routes = isUIv2.value ? routesV2 : routesV1 const routes = isUIv2.value ? routesV2 : routesV1
const router = createRouter({ const router = createRouter({

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

@ -4,6 +4,10 @@ import { useUploadsStore } from '../stores/upload'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useStore } from '~/store' import { useStore } from '~/store'
import Button from '~/components/ui/Button.vue'
import Input from '~/components/ui/Input.vue'
import Pill from '~/components/ui/Pill.vue'
const searchQuery = ref('') const searchQuery = ref('')
// Hide the fake app when the real one is loaded // Hide the fake app when the real one is loaded
@ -29,14 +33,14 @@ const uploads = useUploadsStore()
> >
</RouterLink> </RouterLink>
<FwButton <Button
icon="bi:wrench" icon="bi:wrench"
color="secondary" color="secondary"
variant="ghost" variant="ghost"
/> />
<RouterLink to="/upload" custom v-slot="{ navigate, isExactActive }"> <RouterLink to="/upload" custom v-slot="{ navigate, isExactActive }">
<FwButton <Button
icon="bi:upload" icon="bi:upload"
color="secondary" color="secondary"
variant="ghost" variant="ghost"
@ -55,10 +59,10 @@ const uploads = useUploadsStore()
/> />
</div> </div>
</Transition> </Transition>
</FwButton> </Button>
</RouterLink> </RouterLink>
<FwButton <Button
icon="bi:inbox" icon="bi:inbox"
color="secondary" color="secondary"
variant="ghost" variant="ghost"
@ -86,7 +90,7 @@ const uploads = useUploadsStore()
</nav> </nav>
<div class="search"> <div class="search">
<FwInput <Input
v-model="searchQuery" v-model="searchQuery"
icon="bi-search" icon="bi-search"
:placeholder="t('components.audio.SearchBar.placeholder.search')" :placeholder="t('components.audio.SearchBar.placeholder.search')"
@ -95,82 +99,82 @@ const uploads = useUploadsStore()
<h3>Explore</h3> <h3>Explore</h3>
<nav class="button-list"> <nav class="button-list">
<FwButton <Button
color="secondary" color="secondary"
variant="ghost" variant="ghost"
icon="bi-compass" icon="bi-compass"
> >
All Funkwhale All Funkwhale
</FwButton> </Button>
<FwButton <Button
color="secondary" color="secondary"
variant="ghost" variant="ghost"
icon="bi-music-note-beamed" icon="bi-music-note-beamed"
> >
Music Music
</FwButton> </Button>
<FwButton <Button
color="secondary" color="secondary"
variant="ghost" variant="ghost"
icon="bi-mic" icon="bi-mic"
> >
Podcasts Podcasts
</FwButton> </Button>
</nav> </nav>
<h3>Library</h3> <h3>Library</h3>
<div class="pill-list"> <div class="pill-list">
<FwPill>Music</FwPill> <Pill>Music</Pill>
<FwPill outline> <Pill outline>
Podcasts Podcasts
</FwPill> </Pill>
<FwPill outline> <Pill outline>
Sharing Sharing
</FwPill> </Pill>
</div> </div>
<nav class="button-list"> <nav class="button-list">
<FwButton <Button
color="secondary" color="secondary"
variant="ghost" variant="ghost"
icon="bi-collection" icon="bi-collection"
> >
Collections Collections
</FwButton> </Button>
<FwButton <Button
color="secondary" color="secondary"
variant="ghost" variant="ghost"
icon="bi-person" icon="bi-person"
> >
Artists Artists
</FwButton> </Button>
<FwButton <Button
color="secondary" color="secondary"
variant="ghost" variant="ghost"
icon="bi-disc" icon="bi-disc"
> >
Albums Albums
</FwButton> </Button>
<FwButton <Button
color="secondary" color="secondary"
variant="ghost" variant="ghost"
icon="bi-music-note-list" icon="bi-music-note-list"
> >
Playlists Playlists
</FwButton> </Button>
<FwButton <Button
color="secondary" color="secondary"
variant="ghost" variant="ghost"
icon="bi-question-diamond" icon="bi-question-diamond"
> >
Radios Radios
</FwButton> </Button>
<FwButton <Button
color="secondary" color="secondary"
variant="ghost" variant="ghost"
icon="bi-heart" icon="bi-heart"
> >
Favorites Favorites
</FwButton> </Button>
</nav> </nav>
</div> </div>
</aside> </aside>