Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-28 15:00:42 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: better screen header

Browse source
This commit is contained in:
Phan An 2022-07-17 10:58:05 +02:00
parent 8e43f73bea
commit 47dc2a5744
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
9 changed files with 13 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/assets/js/components/screens/AlbumScreen.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<section id="albumWrapper"> <section id="albumWrapper">
<ScreenHeader :layout="headerLayout" has-thumbnail> <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
{{ album.name }} {{ album.name }}
<ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/> <ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/>

2
resources/assets/js/components/screens/AllSongsScreen.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<section id="songsWrapper"> <section id="songsWrapper">
<ScreenHeader :layout="headerLayout" has-thumbnail> <ScreenHeader :layout="headerLayout">
All Songs All Songs
<ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/> <ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/>

2
resources/assets/js/components/screens/ArtistScreen.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<section id="artistWrapper"> <section id="artistWrapper">
<ScreenHeader :layout="headerLayout" has-thumbnail> <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
{{ artist.name }} {{ artist.name }}
<ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/> <ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/>

2
resources/assets/js/components/screens/FavoritesScreen.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<section id="favoritesWrapper"> <section id="favoritesWrapper">
<ScreenHeader :layout="headerLayout" has-thumbnail> <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
Songs You Love Songs You Love
<ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/> <ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/>

2
resources/assets/js/components/screens/PlaylistScreen.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<section id="playlistWrapper" v-if="playlist"> <section id="playlistWrapper" v-if="playlist">
<ScreenHeader :layout="headerLayout" has-thumbnail> <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
{{ playlist.name }} {{ playlist.name }}
<ControlsToggle v-if="songs.length" :showing-controls="showingControls" @toggleControls="toggleControls"/> <ControlsToggle v-if="songs.length" :showing-controls="showingControls" @toggleControls="toggleControls"/>

3
resources/assets/js/components/screens/QueueScreen.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<section id="queueWrapper"> <section id="queueWrapper">
<ScreenHeader :layout="headerLayout" :has-thumbnail="shouldDisplayThumbnails"> <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
Current Queue Current Queue
<ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/> <ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/>
@ -79,7 +79,6 @@ const {
} = useSongList(toRef(queueStore.state, 'songs'), 'queue', { sortable: false }) } = useSongList(toRef(queueStore.state, 'songs'), 'queue', { sortable: false })
const libraryNotEmpty = computed(() => commonStore.state.song_count > 0) const libraryNotEmpty = computed(() => commonStore.state.song_count > 0)
const shouldDisplayThumbnails = computed(() => songs.value.length > 0)
const playAll = (shuffle = true) => playbackService.queueAndPlay(songs.value, shuffle) const playAll = (shuffle = true) => playbackService.queueAndPlay(songs.value, shuffle)

2
resources/assets/js/components/screens/RecentlyPlayedScreen.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<section id="recentlyPlayedWrapper"> <section id="recentlyPlayedWrapper">
<ScreenHeader :layout="headerLayout" has-thumbnail> <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
Recently Played Recently Played
<ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/> <ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/>

2
resources/assets/js/components/screens/search/SearchSongResultsScreen.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<section id="songResultsWrapper"> <section id="songResultsWrapper">
<ScreenHeader :layout="headerLayout" has-thumbnail> <ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
Songs for <span class="text-thin">{{ decodedQ }}</span> Songs for <span class="text-thin">{{ decodedQ }}</span>
<ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/> <ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/>

17
resources/assets/js/components/ui/ScreenHeader.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<header class="screen-header" :class="layout"> <header class="screen-header" :class="layout">
<div class="thumbnail-wrapper" :class="{ 'non-empty': hasThumbnail }"> <div class="thumbnail-wrapper">
<slot name="thumbnail"></slot> <slot name="thumbnail"></slot>
</div> </div>
@ -20,14 +20,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { toRefs } from 'vue' const props = withDefaults(defineProps<{ layout?: 'expanded' | 'collapsed' }>(), { layout: 'expanded' })
const props = withDefaults(defineProps<{ hasThumbnail?: boolean, layout?: 'expanded' | 'collapsed' }>(), {
hasThumbnail: false,
layout: 'expanded'
})
const { hasThumbnail } = toRefs(props)
</script> </script>
<style lang="scss"> <style lang="scss">
@ -68,7 +61,7 @@ header.screen-header {
.thumbnail-wrapper { .thumbnail-wrapper {
overflow: hidden; overflow: hidden;
display: none; display: block;
width: 0; width: 0;
transition: width var(--transition-duration); transition: width var(--transition-duration);
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
@ -80,8 +73,8 @@ header.screen-header {
transition: transform var(--transition-duration), width var(--transition-duration); transition: transform var(--transition-duration), width var(--transition-duration);
} }
&.non-empty { &:empty {
display: block; display: none;
} }
} }