Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-24 13:13:05 +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>
<section id="albumWrapper">
<ScreenHeader :layout="headerLayout" has-thumbnail>
<ScreenHeader :layout="songs.length === 0 ? 'collapsed' : headerLayout">
{{ album.name }}
<ControlsToggle :showing-controls="showingControls" @toggleControls="toggleControls"/>

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

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

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

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

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

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

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

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

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

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

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

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

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

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