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

fix(ui): sidebar layout

This commit is contained in:
ArneBo 2024-12-16 15:13:39 +01:00 committed by upsiflu
parent b04e5254c4
commit e563560cb1
3 changed files with 135 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,7 +39,7 @@ const isExternalLink = computed(() => {
.active { outline: 3px solid red; } .active { outline: 3px solid red; }
.external { outline: 3px dotted blue; } .external { outline: 3px dotted blue; }
.inline { display:inline-flex; } .inline { display:inline-flex; }
.link { .button {
background-color: var(--fw-bg-color); background-color: var(--fw-bg-color);
color: var(--fw-text-color); color: var(--fw-text-color);
border: 1px solid var(--fw-bg-color); border: 1px solid var(--fw-bg-color);

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

@ -9,6 +9,7 @@ import Input from '~/components/ui/Input.vue'
import Link from '~/components/ui/Link.vue' import Link from '~/components/ui/Link.vue'
import ActorAvatar from '~/components/common/ActorAvatar.vue' import ActorAvatar from '~/components/common/ActorAvatar.vue'
import UserMenu from './UserMenu.vue' import UserMenu from './UserMenu.vue'
import Button from '~/components/ui/Button.vue'
const searchQuery = ref('') const searchQuery = ref('')
@ -25,25 +26,25 @@ const uploads = useUploadsStore()
<template> <template>
<aside :class="[$style.sidebar, $style['sticky-content']]" v-bind="color('default solid raised')"> <aside :class="[$style.sidebar, $style['sticky-content']]" v-bind="color('default solid raised')">
<header :class="$style['header-wrapper']">
<Link to="/" :class="$style['logo']">
<img
src="../../assets/logo/logo.svg"
alt="Logo"
width="40px"
height="40px"
>
</Link>
<nav :class="$style['quick-actions']"> <nav :class="$style['quick-actions']">
<Link to="/">
<img <Link to="/manage/settings">
src="../../assets/logo/logo.svg" <Button round icon="bi-wrench" secondary>
alt="Logo" </Button>
class="logo"
>
</Link> </Link>
<Link to="/manage/settings" <Link to="/upload">
icon="bi-wrench" <Button round icon="bi-upload" class="is-icon-only" secondary>
color="secondary"
variant="ghost">
</Link>
<Link to="/upload"
icon="bi-upload"
color="secondary"
variant="ghost">
<Transition> <Transition>
<div <div
v-if="uploads.currentIndex < uploads.queue.length" v-if="uploads.currentIndex < uploads.queue.length"
@ -56,70 +57,85 @@ const uploads = useUploadsStore()
/> />
</div> </div>
</Transition> </Transition>
</Button>
</Link> </Link>
<UserMenu /> <UserMenu />
</nav> </nav>
</header>
<div :class="$style.search">
<Input
v-model="searchQuery"
type="search"
icon="bi-search"
:placeholder="t('components.audio.SearchBar.placeholder.search')"
/>
</div>
<div :class="$style.search"> <nav :class="$style['button-list']">
<Input <Link to="/library"
v-model="searchQuery" >
type="search" <Button
icon="bi-search"
:placeholder="t('components.audio.SearchBar.placeholder.search')"
/>
</div>
<nav :class="$style['button-list']">
<Link to="/library"
color="secondary" color="secondary"
icon="bi-compass" icon="bi-compass"
> >
Explore {{ t('components.Sidebar.header.explore') }}
</Link> </Button>
</Link>
</nav> <Link to="/library/artists">
<Button
<nav :class="$style['button-list']">
<Link to="/library/artists"
color="secondary" color="secondary"
icon="bi-person" icon="bi-person"
> >
Artists {{ t('components.Sidebar.link.artists') }}
</Link> </Button>
<Link to="/library/albums" </Link>
<Link to="/library/albums">
<Button
color="secondary" color="secondary"
icon="bi-disc" icon="bi-disc"
> >
Albums {{ t('components.Sidebar.link.albums') }}
</Link> </Button>
<Link to="/library/playlists" </Link>
<Link to="/library/playlists">
<Button
color="secondary" color="secondary"
icon="bi-music-note-list" icon="bi-music-note-list"
> >
Playlists {{ t('components.Sidebar.link.playlists') }}
</Link> </Button>
<Link to="/library/radios" </Link>
<Link to="/library/radios">
<Button
color="secondary" color="secondary"
icon="bi-question-diamond" icon="bi-question-diamond"
> >
Radios {{ t('components.Sidebar.link.radios') }}
</Link> </Button>
<Link to="/library/podcasts" </Link>
<Link to="/library/podcasts">
<Button
color="secondary" color="secondary"
icon="bi-mic" icon="bi-mic"
> >
Podcasts {{ t('components.Sidebar.link.podcasts') }}
</Link> </Button>
<Link to="/" </Link>
<Link to="/">
<Button
color="secondary" color="secondary"
icon="bi-heart" icon="bi-heart"
> >
Favorites {{ t('components.Sidebar.link.favorites') }}
</Link> </Button>
</nav> </Link>
<h3>Channels</h3> </nav>
<h3>{{ t('components.Sidebar.link.channels') }}</h3>
<nav :class="$style['button-list']"> <nav :class="$style['button-list']">
<Link inline to="/about"> <Link inline to="/about">
{{ t('components.Sidebar.link.about') }} {{ t('components.Sidebar.link.about') }}
@ -135,24 +151,39 @@ const uploads = useUploadsStore()
</template> </template>
<style module lang="scss"> <style module lang="scss">
.logo {
height: 40px;
width: 40px;
margin: 20px;
}
.sidebar { .sidebar {
height: 100%; height: 100%;
display:flex; display:flex;
flex-direction:column; flex-direction:column;
> .sticky-content { &.sticky-content {
position: sticky; position: sticky;
height: 100%; height: 100%;
max-height: 100vh; max-height: 100vh;
overflow: auto; overflow: auto;
top: 0; top: 0;
> .quick-actions { > .header-wrapper {
display: flex; display: flex;
}
.quick-actions {
display: flex;
align-self: end;
margin: 20px;
align-items: center; align-items: center;
padding: 12px;
font-size: 1.3rem; font-size: 1.3rem;
.popover-container {
display: flex;
}
button.active { button.active {
box-shadow: inset 0 0 0 2px var(--fw-blue-500); box-shadow: inset 0 0 0 2px var(--fw-blue-500);
position: relative; position: relative;
@ -201,11 +232,6 @@ const uploads = useUploadsStore()
} }
} }
> :first-child {
margin-right: auto;
}
.avatar, .avatar,
.logo { .logo {
height: 30px; height: 30px;
@ -251,33 +277,15 @@ const uploads = useUploadsStore()
font-size: 14px; font-size: 14px;
line-height: 1.2; line-height: 1.2;
} }
nav.button-list {
> .pill-list {
padding: 0 16px 8px;
white-space: nowrap;
}
> nav.button-list {
padding: 0 16px 32px; padding: 0 16px 32px;
> button { button {
margin: 2px 0; margin: 2px 0;
/* TODO: Fix in UI: When icon is applied, the text should be aligned left */
justify-content: start; justify-content: start;
/* TODO: Fix in UI: Add `block` prop that spans 100% width */
width: 100%; width: 100%;
:deep(i) {
font-size: 1.4em;
/* TODO: Fix in UI: Add margin right to the icon, when content available */
margin-right: 1ch;
}
} }
} }
} }
} }
</style> </style>

73
front/src/ui/components/UserMenu.vue
View File

@ -56,7 +56,10 @@ const labels = computed(() => ({
<Popover v-model:open="openUserMenu"> <Popover v-model:open="openUserMenu">
<Button <Button
@click="openUserMenu = !openUserMenu" @click="openUserMenu = !openUserMenu"
class="icon-only"> round
icon
class="is-icon-only"
>
<img <img
v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop" v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"
alt="" alt=""
@ -68,10 +71,8 @@ const labels = computed(() => ({
<PopoverItem v-if="store.state.ui.notifications.inbox + additionalNotifications > 0"> <PopoverItem v-if="store.state.ui.notifications.inbox + additionalNotifications > 0">
<Link :to="{name: 'notifications'}"> <Link :to="{name: 'notifications'}">
<i class="bi bi-inbox-fill" /> <i class="bi bi-inbox-fill" />
<div :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']"
> >
{{ store.state.ui.notifications.inbox + additionalNotifications }} {{ store.state.ui.notifications.inbox + additionalNotifications }}
</div>
{{ labels.notifications }} {{ labels.notifications }}
</Link> </Link>
</PopoverItem> </PopoverItem>
@ -147,14 +148,16 @@ const labels = computed(() => ({
</template> </template>
</PopoverSubmenu> </PopoverSubmenu>
<PopoverItem> <PopoverItem>
<Link <nav class="button-list">
to="https://docs.funkwhale.audio" <Link
class="item" to="https://docs.funkwhale.audio"
target="_blank" class="item"
> target="_blank"
<i class="bi bi-book" /> >
{{ labels.docs }} <i class="bi bi-book" />
</Link> {{ labels.docs }}
</Link>
</nav>
</PopoverItem> </PopoverItem>
<PopoverItem <PopoverItem
@click.prevent="emit('show:shortcuts-modal')" @click.prevent="emit('show:shortcuts-modal')"
@ -165,27 +168,43 @@ const labels = computed(() => ({
<hr v-if="store.state.auth.authenticated"/> <hr v-if="store.state.auth.authenticated"/>
<PopoverItem v-if="store.state.auth.authenticated && route.path != '/logout'" <PopoverItem v-if="store.state.auth.authenticated && route.path != '/logout'"
> >
<Link :to="{ name: 'logout' }"> <nav class="button-list">
<i class="bi bi-box-arrow-right" /> <Link :to="{ name: 'logout' }">
{{ labels.logout }} <i class="bi bi-box-arrow-right" />
</Link> {{ labels.logout }}
</Link>
</nav>
</PopoverItem> </PopoverItem>
<PopoverItem v-if="!store.state.auth.authenticated"> <PopoverItem v-if="!store.state.auth.authenticated">
<Link <nav class="button-list">
:to="{ name: 'login' }" <Link
> :to="{ name: 'login' }"
<i class="bi-box-arrow-in-right" /> >
{{ labels.login }} <i class="bi-box-arrow-in-right" />
</Link> {{ labels.login }}
</Link>
</nav>
</PopoverItem> </PopoverItem>
<PopoverItem v-if="!store.state.auth.authenticated && store.state.instance.settings.users.registration_enabled.value"> <PopoverItem v-if="!store.state.auth.authenticated && store.state.instance.settings.users.registration_enabled.value">
<Link <nav class="button-list">
:to="{ name: 'signup' }" <Link
> :to="{ name: 'signup' }"
<i class="bi bi-person-square" /> >
{{ labels.signup }} <i class="bi bi-person-square" />
</Link> {{ labels.signup }}
</Link>
</nav>
</PopoverItem> </PopoverItem>
</template> </template>
</Popover> </Popover>
</template> </template>
<style scoped lang="scss">
nav.button-list {
width: 100%;
a:hover {
background-color: transparent;
border: none;
}
}
</style>