mirror of
https://github.com/koel/koel
synced 2024-11-12 23:47:09 +00:00
refactor: rename Extra Drawer to Side Sheet (#1853)
This commit is contained in:
parent
0ecfeb978a
commit
abfa65bfe8
17 changed files with 63 additions and 48 deletions
|
@ -13,11 +13,11 @@ context('Other Controls', () => {
|
|||
})
|
||||
|
||||
it('toggles the info panel', () => {
|
||||
cy.findByTestId('extra-drawer').should('be.visible')
|
||||
cy.findByTestId('toggle-extra-drawer-btn').as('btn').click()
|
||||
cy.findByTestId('extra-drawer').should('not.be.visible')
|
||||
cy.findByTestId('toggle-extra-drawer-btn').as('btn').click()
|
||||
cy.findByTestId('extra-drawer').should('be.visible')
|
||||
cy.findByTestId('side-sheet').should('be.visible')
|
||||
cy.findByTestId('toggle-side-sheet-btn').as('btn').click()
|
||||
cy.findByTestId('side-sheet').should('not.be.visible')
|
||||
cy.findByTestId('toggle-side-sheet-btn').as('btn').click()
|
||||
cy.findByTestId('side-sheet').should('be.visible')
|
||||
})
|
||||
|
||||
it('toggles the "sound bars" icon when a song is played/paused', () => {
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
--header-height: auto;
|
||||
--footer-height: 84px;
|
||||
--extra-drawer-width: 25rem;
|
||||
--side-sheet-width: 25rem;
|
||||
--sidebar-width: 20rem;
|
||||
|
||||
--color-love: #bf2043;
|
||||
|
@ -32,6 +32,6 @@
|
|||
@media screen and (max-width: 768px) {
|
||||
--header-height: 56px;
|
||||
--footer-height: 96px;
|
||||
--extra-drawer-width: 100%;
|
||||
--side-sheet-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<div class="relative flex flex-1 overflow-hidden">
|
||||
<SideBar />
|
||||
<MainContent />
|
||||
<ExtraDrawer />
|
||||
<SideSheet />
|
||||
<ModalWrapper />
|
||||
</div>
|
||||
</template>
|
||||
|
@ -10,9 +10,9 @@
|
|||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
import SideBar from '@/components/layout/main-wrapper/sidebar/Sidebar.vue'
|
||||
import MainContent from '@/components/layout/main-wrapper/MainContent.vue'
|
||||
import ExtraDrawer from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawer.vue'
|
||||
import SideBar from '@/components/layout/main-wrapper/sidebar/Sidebar.vue'
|
||||
import SideSheet from '@/components/layout/main-wrapper/side-sheet/SideSheet.vue'
|
||||
|
||||
const ModalWrapper = defineAsyncComponent(() => import('@/components/layout/ModalWrapper.vue'))
|
||||
</script>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<ExtraDrawerButton
|
||||
<SideSheetButton
|
||||
v-koel-tooltip.left
|
||||
:title="shouldNotifyNewVersion ? 'New version available!' : 'About Koel'"
|
||||
@click.prevent="openAboutKoelModal"
|
||||
|
@ -10,7 +10,7 @@
|
|||
class="absolute w-[10px] aspect-square right-px top-px rounded-full bg-k-highlight"
|
||||
data-testid="new-version-indicator"
|
||||
/>
|
||||
</ExtraDrawerButton>
|
||||
</SideSheetButton>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
@ -18,7 +18,7 @@ import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
|
|||
import { eventBus } from '@/utils'
|
||||
import { useNewVersionNotification } from '@/composables'
|
||||
|
||||
import ExtraDrawerButton from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue'
|
||||
import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
|
||||
|
||||
const { shouldNotifyNewVersion } = useNewVersionNotification()
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<ExtraDrawerButton v-koel-tooltip.left title="Log out" @click.prevent="logout">
|
||||
<SideSheetButton v-koel-tooltip.left title="Log out" @click.prevent="logout">
|
||||
<Icon :icon="faArrowRightFromBracket" />
|
||||
</ExtraDrawerButton>
|
||||
</SideSheetButton>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { faArrowRightFromBracket } from '@fortawesome/free-solid-svg-icons'
|
||||
import { eventBus } from '@/utils'
|
||||
|
||||
import ExtraDrawerButton from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue'
|
||||
import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
|
||||
|
||||
const logout = () => eventBus.emit('LOG_OUT')
|
||||
</script>
|
|
@ -9,7 +9,7 @@ import { albumStore, artistStore, commonStore, preferenceStore } from '@/stores'
|
|||
import UnitTestCase from '@/__tests__/UnitTestCase'
|
||||
import { CurrentPlayableKey } from '@/symbols'
|
||||
import { eventBus } from '@/utils'
|
||||
import ExtraDrawer from './ExtraDrawer.vue'
|
||||
import Component from './SideSheet.vue'
|
||||
|
||||
new class extends UnitTestCase {
|
||||
protected test () {
|
||||
|
@ -18,7 +18,7 @@ new class extends UnitTestCase {
|
|||
it('sets the active tab to the preference', async () => {
|
||||
preferenceStore.active_extra_panel_tab = 'YouTube'
|
||||
this.renderComponent(ref(factory('song')))
|
||||
const tab = screen.getByTestId<HTMLElement>('extra-drawer-youtube')
|
||||
const tab = screen.getByTestId<HTMLElement>('side-sheet-youtube')
|
||||
|
||||
expect(tab.style.display).toBe('none')
|
||||
await this.tick()
|
||||
|
@ -75,7 +75,7 @@ new class extends UnitTestCase {
|
|||
const album = factory('album')
|
||||
const resolveAlbumMock = this.mock(albumStore, 'resolve').mockResolvedValue(album)
|
||||
|
||||
const rendered = this.render(ExtraDrawer, {
|
||||
const rendered = this.render(Component, {
|
||||
global: {
|
||||
stubs: {
|
||||
ProfileAvatar: this.stub(),
|
|
@ -10,10 +10,10 @@
|
|||
py-0 px-6 h-k-header-height"
|
||||
>
|
||||
<div class="btn-group">
|
||||
<ExtraDrawerButton class="md:hidden" @click.prevent="expandSidebar">
|
||||
<SideSheetButton class="md:hidden" @click.prevent="expandSidebar">
|
||||
<Icon :icon="faBars" fixed-width />
|
||||
</ExtraDrawerButton>
|
||||
<ExtraDrawerTabHeader v-if="songPlaying" v-model="activeTab" />
|
||||
</SideSheetButton>
|
||||
<SideSheetTabHeader v-if="songPlaying" v-model="activeTab" />
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
|
@ -60,7 +60,7 @@
|
|||
v-show="activeTab === 'YouTube'"
|
||||
id="extraPanelYouTube"
|
||||
aria-labelledby="extraTabYouTube"
|
||||
data-testid="extra-drawer-youtube"
|
||||
data-testid="side-sheet-youtube"
|
||||
role="tabpanel"
|
||||
tabindex="0"
|
||||
>
|
||||
|
@ -81,15 +81,15 @@ import { eventBus, isSong, requireInjection } from '@/utils'
|
|||
import { CurrentPlayableKey } from '@/symbols'
|
||||
|
||||
import ProfileAvatar from '@/components/ui/ProfileAvatar.vue'
|
||||
import AboutKoelButton from '@/components/layout/main-wrapper/extra-drawer/AboutKoelButton.vue'
|
||||
import LogoutButton from '@/components/layout/main-wrapper/extra-drawer/LogoutButton.vue'
|
||||
import ExtraDrawerButton from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue'
|
||||
import AboutKoelButton from '@/components/layout/main-wrapper/side-sheet/AboutKoelButton.vue'
|
||||
import LogoutButton from '@/components/layout/main-wrapper/side-sheet/LogoutButton.vue'
|
||||
import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
|
||||
|
||||
const LyricsPane = defineAsyncComponent(() => import('@/components/ui/LyricsPane.vue'))
|
||||
const ArtistInfo = defineAsyncComponent(() => import('@/components/artist/ArtistInfo.vue'))
|
||||
const AlbumInfo = defineAsyncComponent(() => import('@/components/album/AlbumInfo.vue'))
|
||||
const YouTubeVideoList = defineAsyncComponent(() => import('@/components/ui/youtube/YouTubeVideoList.vue'))
|
||||
const ExtraDrawerTabHeader = defineAsyncComponent(() => import('./ExtraDrawerTabHeader.vue'))
|
||||
const SideSheetTabHeader = defineAsyncComponent(() => import('./SideSheetTabHeader.vue'))
|
||||
|
||||
const { useYouTube } = useThirdPartyServices()
|
||||
|
||||
|
@ -152,7 +152,7 @@ aside {
|
|||
}
|
||||
|
||||
.panes {
|
||||
@apply no-hover:overflow-y-auto w-k-extra-drawer-width;
|
||||
@apply no-hover:overflow-y-auto w-k-side-sheet-width;
|
||||
|
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -2,13 +2,13 @@ import { expect, it } from 'vitest'
|
|||
import UnitTestCase from '@/__tests__/UnitTestCase'
|
||||
import { commonStore } from '@/stores'
|
||||
import { screen } from '@testing-library/vue'
|
||||
import ExtraDrawerTabHeader from './ExtraDrawerTabHeader.vue'
|
||||
import Component from './SideSheetTabHeader.vue'
|
||||
|
||||
new class extends UnitTestCase {
|
||||
protected test () {
|
||||
it('renders tab headers', () => {
|
||||
commonStore.state.uses_you_tube = false
|
||||
this.render(ExtraDrawerTabHeader)
|
||||
this.render(Component)
|
||||
|
||||
;['Lyrics', 'Artist information', 'Album information'].forEach(name => screen.getByRole('button', { name }))
|
||||
expect(screen.queryByRole('button', { name: 'Related YouTube videos' })).toBeNull()
|
||||
|
@ -16,13 +16,13 @@ new class extends UnitTestCase {
|
|||
|
||||
it('has a YouTube tab header if using YouTube', () => {
|
||||
commonStore.state.uses_you_tube = true
|
||||
this.render(ExtraDrawerTabHeader)
|
||||
this.render(Component)
|
||||
|
||||
screen.getByRole('button', { name: 'Related YouTube videos' })
|
||||
})
|
||||
|
||||
it('emits the selected tab value', async () => {
|
||||
const { emitted } = this.render(ExtraDrawerTabHeader)
|
||||
const { emitted } = this.render(Component)
|
||||
|
||||
await this.user.click(screen.getByRole('button', { name: 'Lyrics' }))
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<ExtraDrawerButton
|
||||
<SideSheetButton
|
||||
id="extraTabLyrics"
|
||||
v-koel-tooltip.left
|
||||
:class="{ active: value === 'Lyrics' }"
|
||||
|
@ -7,8 +7,8 @@
|
|||
@click.prevent="toggleTab('Lyrics')"
|
||||
>
|
||||
<Icon :icon="faFeather" fixed-width />
|
||||
</ExtraDrawerButton>
|
||||
<ExtraDrawerButton
|
||||
</SideSheetButton>
|
||||
<SideSheetButton
|
||||
id="extraTabArtist"
|
||||
v-koel-tooltip.left
|
||||
:class="{ active: value === 'Artist' }"
|
||||
|
@ -16,8 +16,8 @@
|
|||
@click.prevent="toggleTab('Artist')"
|
||||
>
|
||||
<MicVocalIcon size="18" />
|
||||
</ExtraDrawerButton>
|
||||
<ExtraDrawerButton
|
||||
</SideSheetButton>
|
||||
<SideSheetButton
|
||||
id="extraTabAlbum"
|
||||
v-koel-tooltip.left
|
||||
:class="{ active: value === 'Album' }"
|
||||
|
@ -25,8 +25,8 @@
|
|||
@click.prevent="toggleTab('Album')"
|
||||
>
|
||||
<Icon :icon="faCompactDisc" fixed-width />
|
||||
</ExtraDrawerButton>
|
||||
<ExtraDrawerButton
|
||||
</SideSheetButton>
|
||||
<SideSheetButton
|
||||
v-if="useYouTube"
|
||||
id="extraTabYouTube"
|
||||
v-koel-tooltip.left
|
||||
|
@ -35,7 +35,7 @@
|
|||
@click.prevent="toggleTab('YouTube')"
|
||||
>
|
||||
<Icon :icon="faYoutube" fixed-width />
|
||||
</ExtraDrawerButton>
|
||||
</SideSheetButton>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
@ -45,7 +45,7 @@ import { faYoutube } from '@fortawesome/free-brands-svg-icons'
|
|||
import { computed } from 'vue'
|
||||
import { useThirdPartyServices } from '@/composables'
|
||||
|
||||
import ExtraDrawerButton from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue'
|
||||
import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
|
||||
|
||||
const props = withDefaults(defineProps<{ modelValue?: ExtraPanelTab | null }>(), {
|
||||
modelValue: null,
|
|
@ -0,0 +1,15 @@
|
|||
// Vitest Snapshot v1
|
||||
|
||||
exports[`renders without a current song 1`] = `
|
||||
<aside data-v-9fd7deea="" class="fixed sm:relative top-0 w-screen md:w-auto flex flex-col md:flex-row-reverse z-[2] text-k-text-secondary">
|
||||
<div data-v-9fd7deea="" class="controls flex md:flex-col justify-between items-center md:w-[64px] md:py-6 tw:px-0 bg-black/5 md:border-l border-solid md:border-l-white/5 md:border-b-0 md:shadow-none z-[2] w-screen flex-row border-b border-b-white/5 border-l-0 shadow-xl py-0 px-6 h-k-header-height">
|
||||
<div data-v-9fd7deea="" class="btn-group"><button data-v-7447146c="" data-v-9fd7deea="" class="relative flex items-center justify-center h-[42px] aspect-square rounded-full bg-none md:bg-black/30 text-xl opacity-70 transition-opacity duration-200 ease-in-out text-current cursor-pointer hover:active-state active:scale-90 md:hidden" type="button"><br data-v-9fd7deea="" data-testid="Icon" icon="[object Object]" fixed-width=""></button>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div data-v-9fd7deea="" class="btn-group"><button data-v-7447146c="" data-v-9fd7deea="" class="relative flex items-center justify-center h-[42px] aspect-square rounded-full bg-none md:bg-black/30 text-xl opacity-70 transition-opacity duration-200 ease-in-out text-current cursor-pointer hover:active-state active:scale-90" type="button" title="About Koel"><br data-testid="Icon" icon="[object Object]">
|
||||
<!--v-if-->
|
||||
</button><button data-v-7447146c="" data-v-9fd7deea="" class="relative flex items-center justify-center h-[42px] aspect-square rounded-full bg-none md:bg-black/30 text-xl opacity-70 transition-opacity duration-200 ease-in-out text-current cursor-pointer hover:active-state active:scale-90" type="button" title="Log out"><br data-testid="Icon" icon="[object Object]"></button><br data-v-9fd7deea="" data-testid="stub"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</aside>
|
||||
`;
|
|
@ -7,9 +7,9 @@
|
|||
>
|
||||
<section class="btn-collapse-block flex md:hidden items-center border-b border-b-white/5 h-k-header-height px-6">
|
||||
<div class="bg-white/5 rounded-full">
|
||||
<ExtraDrawerButton @click.prevent="collapseSidebar">
|
||||
<SideSheetButton @click.prevent="collapseSidebar">
|
||||
<Icon :icon="faTimes" fixed-width />
|
||||
</ExtraDrawerButton>
|
||||
</SideSheetButton>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
@ -43,9 +43,9 @@ import { eventBus } from '@/utils'
|
|||
import { useAuthorization, useKoelPlus, useLocalStorage, useRouter, useUpload } from '@/composables'
|
||||
|
||||
import BtnUpgradeToPlus from '@/components/koel-plus/BtnUpgradeToPlus.vue'
|
||||
import ExtraDrawerButton from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue'
|
||||
import HomeButton from '@/components/layout/main-wrapper/sidebar/HomeButton.vue'
|
||||
import SearchForm from '@/components/ui/SearchForm.vue'
|
||||
import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
|
||||
import SidebarManageSection from './SidebarManageSection.vue'
|
||||
import SidebarPlaylistsSection from './SidebarPlaylistsSection.vue'
|
||||
import SidebarToggleButton from '@/components/layout/main-wrapper/sidebar/SidebarToggleButton.vue'
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<ExtraDrawerButton class="block md:hidden" @click.prevent="toggleSidebar">
|
||||
<SideSheetButton class="block md:hidden" @click.prevent="toggleSidebar">
|
||||
<Icon v-if="sidebarExpanded" :icon="faTimes" fixed-width />
|
||||
<Icon v-else :icon="faBars" fixed-width />
|
||||
</ExtraDrawerButton>
|
||||
</SideSheetButton>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
@ -10,7 +10,7 @@ import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
|
|||
import { ref } from 'vue'
|
||||
import { eventBus } from '@/utils'
|
||||
|
||||
import ExtraDrawerButton from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue'
|
||||
import SideSheetButton from '@/components/layout/main-wrapper/side-sheet/SideSheetButton.vue'
|
||||
|
||||
const sidebarExpanded = ref(false)
|
||||
|
||||
|
|
|
@ -25,7 +25,7 @@ export default {
|
|||
'k-header-height': 'var(--header-height)',
|
||||
'k-footer-height': 'var(--footer-height)',
|
||||
'k-sidebar-width': 'var(--sidebar-width)',
|
||||
'k-extra-drawer-width': 'var(--extra-drawer-width)',
|
||||
'k-side-sheet-width': 'var(--side-sheet-width)',
|
||||
},
|
||||
screens: {
|
||||
'no-hover': {'raw': '(hover: none)'},
|
||||
|
|
Loading…
Reference in a new issue