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

feat(ui): simplify layout of Sidebar

This commit is contained in:
upsiflu 2024-12-17 15:15:12 +01:00
parent efc0fb4f19
commit 17ff21ab4f
2 changed files with 79 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/components/ui/popover.scss
View File

@ -1,5 +1,5 @@
.funkwhale.popover-container {
width: max-content;
display: contents;
}
.funkwhale.popover-outer {

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

@ -30,8 +30,10 @@ const uploads = useUploadsStore()
<template>
<aside :class="[$style.sidebar, $style['sticky-content']]" v-bind="color('default solid raised')">
<header :class="$style['header-wrapper']">
<Link to="/" :class="$style['logo']">
<Layout header flex>
<Link to="/"
:class="$style['logo']"
>
<img
src="../../assets/logo/logo.svg"
alt="Logo"
@ -40,34 +42,38 @@ const uploads = useUploadsStore()
>
</Link>
<nav :class="$style['quick-actions']">
<Spacer grow />
<Link to="/manage/settings">
<Button round icon="bi-wrench" ghost secondary>
</Button>
<Layout nav no-gap flex style="align-items: center;">
<Link to="/manage/settings"
round
icon="bi-wrench"
ghost
>
</Link>
<Link to="/upload">
<Button round icon="bi-upload" class="is-icon-only" ghost secondary>
<Transition>
<Link to="/upload"
round icon="bi-upload"
class="is-icon-only"
ghost
>
<Transition>
<div
v-if="uploads.currentIndex < uploads.queue.length"
:class="$style['upload-progress']"
>
<div :class="[$style.progress, $style.fake]" />
<div
v-if="uploads.currentIndex < uploads.queue.length"
:class="$style['upload-progress']"
>
<div :class="[$style.progress, $style.fake]" />
<div
:class="$style.progress"
:style="{ maxWidth: `${uploads.progress}%` }"
/>
</div>
</Transition>
</Button>
:class="$style.progress"
:style="{ maxWidth: `${uploads.progress}%` }"
/>
</div>
</Transition>
</Link>
<UserMenu :showShortcutsModal="openShortcutsModal" />
</nav>
</header>
<UserMenu :showShortcutsModal="openShortcutsModal"/>
</Layout>
</Layout>
<Layout no-gap stack :class="$style['button-list']">
<div :class="$style.search">
<Input
@ -80,7 +86,6 @@ const uploads = useUploadsStore()
<nav style="display:contents;">
<Link to="/library"
ghost
secondary
icon="bi-compass"
>
{{ t('components.Sidebar.header.explore') }}
@ -88,7 +93,6 @@ const uploads = useUploadsStore()
<Link to="/library/artists"
ghost
secondary
icon="bi-person"
>
{{ t('components.Sidebar.link.artists') }}
@ -96,7 +100,6 @@ const uploads = useUploadsStore()
<Link to="/library/albums"
ghost
secondary
icon="bi-disc"
>
{{ t('components.Sidebar.link.albums') }}
@ -104,28 +107,24 @@ const uploads = useUploadsStore()
<Link to="/library/playlists"
ghost
secondary
icon="bi-music-note-list"
>
{{ t('components.Sidebar.link.playlists') }}
</Link>
<Link to="/library/radios"
ghost
secondary
icon="bi-boombox-fill"
>
{{ t('components.Sidebar.link.radios') }}
</Link>
<Link to="/library/podcasts"
ghost
secondary
icon="bi-mic"
>
{{ t('components.Sidebar.link.podcasts') }}
</Link>
<Link to="/"
ghost
secondary
icon="bi-heart"
>
{{ t('components.Sidebar.link.favorites') }}
@ -163,99 +162,62 @@ const uploads = useUploadsStore()
overflow: auto;
top: 0;
> .header-wrapper {
display: flex;
.upload-progress {
background: var(--fw-blue-500);
position: absolute;
left: 0;
bottom: 2px;
width: 100%;
padding: 2px;
.logo {
height: 40px;
width: 40px;
margin: 20px;
&.v-enter-active,
&.v-leave-active {
transition: transform 0.2s ease, opacity 0.2s ease;
}
&.v-leave-to,
&.v-enter-from {
transform: translateY(0.5rem);
opacity: 0;
}
> .progress {
height: 0.25rem;
width: 100%;
transition: max-width 0.1s ease;
background: var(--fw-gray-100);
border-radius: 100vh;
position: relative;
&.fake {
background: var(--fw-blue-700);
}
&:not(.fake) {
position: absolute;
inset: 2px;
}
}
}
.quick-actions {
display: flex;
align-self: end;
margin: 20px;
align-items: center;
font-size: 1.3rem;
.avatar {
aspect-ratio: 1;
background: var(--fw-beige-100);
border-radius: 100%;
.popover-container {
display: flex;
}
text-decoration: none !important;
color: var(--fw-gray-700);
button.active {
box-shadow: inset 0 0 0 2px var(--fw-blue-500);
position: relative;
overflow: hidden;
:deep(svg + span) {
margin-left: 0 !important;
}
}
.upload-progress {
background: var(--fw-blue-500);
position: absolute;
left: 0;
bottom: 2px;
> img,
> i {
width: 100%;
padding: 2px;
height: 100%;
&.v-enter-active,
&.v-leave-active {
transition: transform 0.2s ease, opacity 0.2s ease;
}
&.v-leave-to,
&.v-enter-from {
transform: translateY(0.5rem);
opacity: 0;
}
> .progress {
height: 0.25rem;
width: 100%;
transition: max-width 0.1s ease;
background: var(--fw-gray-100);
border-radius: 100vh;
position: relative;
&.fake {
background: var(--fw-blue-700);
}
&:not(.fake) {
position: absolute;
inset: 2px;
}
}
}
.avatar,
.logo {
height: 30px;
display: block;
}
.avatar {
aspect-ratio: 1;
background: var(--fw-beige-100);
border-radius: 100%;
text-decoration: none !important;
color: var(--fw-gray-700);
> img,
> i {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 !important;
border-radius: 100vh;
}
display: flex;
justify-content: center;
align-items: center;
margin: 0 !important;
border-radius: 100vh;
}
}