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
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>
<template>
@ -89,5 +94,7 @@ const isUIv2 = useLocalStorage('ui-v2', false)
<style>
html, body {
font-size: 16px;
}
</style>

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

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