refactor: rename Extra Drawer to Side Sheet (#1853)

This commit is contained in:
Phan An 2024-10-15 22:19:37 +07:00 committed by GitHub
parent 0ecfeb978a
commit abfa65bfe8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 63 additions and 48 deletions

View file

@ -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', () => {

View file

@ -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%;
}
}

View file

@ -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>

View file

@ -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()

View file

@ -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>

View file

@ -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(),

View file

@ -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);

View file

@ -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' }))

View file

@ -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,

View file

@ -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>
`;

View file

@ -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'

View file

@ -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)

View file

@ -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)'},