Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-10 06:34:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: move Plus badge to bottom of sidebar

Browse source
This commit is contained in:
Phan An 2024-01-08 23:52:25 +01:00
parent ca9b77f697
commit e598f0a401
3 changed files with 69 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue
View file

@ -1,36 +1,39 @@
<template>
<nav id="sidebar" v-koel-clickaway="closeIfMobile" :class="{ showing: mobileShowing }" class="side side-nav">
<SearchForm />
<section class="music">
<h1>Your Music</h1>
<ul class="menu">
<SidebarItem screen="Home" href="#/home" :icon="faHome">Home</SidebarItem>
<QueueSidebarItem />
<SidebarItem screen="Songs" href="#/songs" :icon="faMusic">All Songs</SidebarItem>
<SidebarItem screen="Albums" href="#/albums" :icon="faCompactDisc">Albums</SidebarItem>
<SidebarItem screen="Artists" href="#/artists" :icon="faMicrophone">Artists</SidebarItem>
<SidebarItem screen="Genres" href="#/genres" :icon="faTags">Genres</SidebarItem>
<YouTubeSidebarItem v-show="showYouTube" />
</ul>
<section class="search-wrapper">
<SearchForm/>
</section>
<PlaylistList />
<section class="menu-wrapper">
<section class="music">
<h1>Your Music</h1>
<section v-if="showManageSection" class="manage">
<h1>Manage</h1>
<ul class="menu">
<SidebarItem screen="Home" href="#/home" :icon="faHome">Home</SidebarItem>
<QueueSidebarItem/>
<SidebarItem screen="Songs" href="#/songs" :icon="faMusic">All Songs</SidebarItem>
<SidebarItem screen="Albums" href="#/albums" :icon="faCompactDisc">Albums</SidebarItem>
<SidebarItem screen="Artists" href="#/artists" :icon="faMicrophone">Artists</SidebarItem>
<SidebarItem screen="Genres" href="#/genres" :icon="faTags">Genres</SidebarItem>
<YouTubeSidebarItem v-show="showYouTube"/>
</ul>
</section>
<ul class="menu">
<SidebarItem screen="Settings" href="#/settings" :icon="faTools" v-if="isAdmin">Settings</SidebarItem>
<SidebarItem screen="Upload" href="#/upload" :icon="faUpload">Upload</SidebarItem>
<SidebarItem screen="Users" href="#/users" :icon="faUsers" v-if="isAdmin">Users</SidebarItem>
<li v-if="!isPlus && isAdmin">
<a :href="storeUrl" target="_blank">
<Icon :icon="faPlus" fixed-width />
<span>Upgrade to Plus</span>
</a>
</li>
</ul>
<PlaylistList/>
<section v-if="showManageSection" class="manage">
<h1>Manage</h1>
<ul class="menu">
<SidebarItem screen="Settings" href="#/settings" :icon="faTools" v-if="isAdmin">Settings</SidebarItem>
<SidebarItem screen="Upload" href="#/upload" :icon="faUpload">Upload</SidebarItem>
<SidebarItem screen="Users" href="#/users" :icon="faUsers" v-if="isAdmin">Users</SidebarItem>
</ul>
</section>
</section>
<section v-if="!isPlus && isAdmin" class="plus-wrapper">
<BtnUpgradeToPlus/>
</section>
</nav>
</template>
@ -63,7 +66,7 @@ const { onRouteChanged } = useRouter()
const { useYouTube } = useThirdPartyServices()
const { isAdmin } = useAuthorization()
const { allowsUpload } = useUpload()
const { storeUrl, isPlus } = useKoelPlus()
const { isPlus } = useKoelPlus()
const mobileShowing = ref(false)
const youTubePlaying = ref(false)
@ -85,22 +88,42 @@ eventBus.on('TOGGLE_SIDEBAR', () => (mobileShowing.value = !mobileShowing.value)
<style lang="scss" scoped>
nav {
position: relative;
width: var(--sidebar-width);
background-color: var(--color-bg-secondary);
padding: 2.05rem 1.5rem;
overflow: auto;
overflow-x: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
> * + * {
margin-top: 2.25rem;
form[role=search] {
min-height: 38px;
}
@media (hover: none) {
// Enable scroll with momentum on touch devices
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
.search-wrapper {
padding: 2.05rem 1.5rem 0;
}
.menu-wrapper {
flex: 1;
padding: 2.05rem 1.5rem;
overflow-y: auto;
@media (hover: none) {
// Enable scroll with momentum on touch devices
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
.plus-wrapper {
padding: 1rem 1.5rem;
}
.menu-wrapper > * + * {
margin-top: 2.25rem;
}
.droppable {

21
resources/assets/js/components/meta/BtnUpgradeToPlus.vue
View file

@ -1,33 +1,32 @@
<template>
<a :href="storeUrl" target="_blank">Upgrade to Plus</a>
<a :href="storeUrl" target="_blank" class="upgrade-to-plus-btn">
<Icon :icon="faPlus" fixed-width/>
Upgrade to Plus
</a>
</template>
<script setup lang="ts">
import { useKoelPlus } from '@/composables'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
const { storeUrl } = useKoelPlus()
</script>
<style scoped lang="scss">
a {
a.upgrade-to-plus-btn {
@include inset-when-pressed();
background: transparent;
border-width: 1px;
border-style: solid;
padding: .5rem 1rem;
background: linear-gradient(97.78deg, #671ce4 17.5%, #c62be8 113.39%);
border-radius: 5px;
border-color: var(--color-text-primary);
border-style: solid;
padding: .65rem 1rem;
&:hover {
transition: .3s ease-in-out;
background: var(--color-highlight);
border-color: var(--color-highlight);
color: var(--color-text-primary) !important;
}
&:active {
transition: none;
padding: .65rem 1rem; // prevent layout jump in sidebar
}
}
</style>

2
resources/assets/sass/partials/_mixins.scss
View file

@ -156,7 +156,7 @@
@mixin inset-when-pressed() {
&:not([disabled]):active {
box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, .6);
box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, .6);
}
}