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: use feather as the lyrics icon (#1633)

Browse source
This commit is contained in:
Phan An 2022-12-16 00:16:36 +07:00 committed by GitHub
parent ccd6394718
commit bf29f7e32e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/assets/js/components/layout/main-wrapper/ExtraDrawer.vue
View file

@ -3,7 +3,7 @@
<div class="controls">
<div class="top">
<SidebarMenuToggleButton class="burger" />
<ExtraPanelTabHeader v-if="song" v-model="activeTab" />
<ExtraDrawerTabHeader v-if="song" v-model="activeTab" />
</div>
<div class="bottom">
@ -88,7 +88,7 @@ const LyricsPane = defineAsyncComponent(() => import('@/components/ui/LyricsPane
const ArtistInfo = defineAsyncComponent(() => import('@/components/artist/ArtistInfo.vue'))
const AlbumInfo = defineAsyncComponent(() => import('@/components/album/AlbumInfo.vue'))
const YouTubeVideoList = defineAsyncComponent(() => import('@/components/ui/YouTubeVideoList.vue'))
const ExtraPanelTabHeader = defineAsyncComponent(() => import('@/components/ui/ExtraPanelTabHeader.vue'))
const ExtraDrawerTabHeader = defineAsyncComponent(() => import('@/components/ui/ExtraDrawerTabHeader.vue'))
const { currentUser } = useAuthorization()
const { useYouTube } = useThirdPartyServices()

8
resources/assets/js/components/ui/ExtraPanelTabHeader.spec.ts → resources/assets/js/components/ui/ExtraDrawerTabHeader.spec.ts
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 ExtraPanelTabHeader from './ExtraPanelTabHeader.vue'
import ExtraDrawerTabHeader from './ExtraDrawerTabHeader.vue'
new class extends UnitTestCase {
protected test () {
it('renders tab headers', () => {
commonStore.state.use_you_tube = false
this.render(ExtraPanelTabHeader)
this.render(ExtraDrawerTabHeader)
;['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.use_you_tube = true
this.render(ExtraPanelTabHeader)
this.render(ExtraDrawerTabHeader)
screen.getByRole('button', { name: 'Related YouTube videos' })
})
it('emits the selected tab value', async () => {
const { emitted } = this.render(ExtraPanelTabHeader)
const { emitted } = this.render(ExtraDrawerTabHeader)
await this.user.click(screen.getByRole('button', { name: 'Lyrics' }))

4
resources/assets/js/components/ui/ExtraPanelTabHeader.vue → resources/assets/js/components/ui/ExtraDrawerTabHeader.vue
View file

@ -7,7 +7,7 @@
type="button"
@click.prevent="toggleTab('Lyrics')"
>
<icon :icon="faFileLines" fixed-width />
<icon :icon="faFeather" fixed-width />
</button>
<button
id="extraTabArtist"
@ -43,7 +43,7 @@
</template>
<script lang="ts" setup>
import { faCompactDisc, faFileLines, faMicrophone } from '@fortawesome/free-solid-svg-icons'
import { faCompactDisc, faFeather, faMicrophone } from '@fortawesome/free-solid-svg-icons'
import { faYoutube } from '@fortawesome/free-brands-svg-icons'
import { computed } from 'vue'
import { useThirdPartyServices } from '@/composables'