feat: better tooltips for list play buttons

This commit is contained in:
Phan An 2024-01-12 11:09:15 +01:00
parent 7fcffa3854
commit bcc71ea1d9
2 changed files with 12 additions and 8 deletions

View file

@ -30,7 +30,7 @@ new class extends UnitTestCase {
it.each([[0], [1]])('shuffles all if %s songs are selected', async (selectedCount: number) => { it.each([[0], [1]])('shuffles all if %s songs are selected', async (selectedCount: number) => {
const { emitted } = this.renderComponent(selectedCount) const { emitted } = this.renderComponent(selectedCount)
await this.user.click(screen.getByTitle('Shuffle all songs')) await this.user.click(screen.getByTitle('Shuffle all. Press Alt/⌥ to change mode.'))
expect(emitted().playAll[0]).toEqual([true]) expect(emitted().playAll[0]).toEqual([true])
}) })
@ -39,7 +39,7 @@ new class extends UnitTestCase {
const { emitted } = this.renderComponent(selectedCount) const { emitted } = this.renderComponent(selectedCount)
await this.user.keyboard('{Alt>}') await this.user.keyboard('{Alt>}')
await this.user.click(screen.getByTitle('Play all songs')) await this.user.click(screen.getByTitle('Play all. Press Alt/⌥ to change mode.'))
await this.user.keyboard('{/Alt}') await this.user.keyboard('{/Alt}')
expect(emitted().playAll[0]).toEqual([false]) expect(emitted().playAll[0]).toEqual([false])
@ -48,7 +48,7 @@ new class extends UnitTestCase {
it('shuffles selected if more than one song are selected', async () => { it('shuffles selected if more than one song are selected', async () => {
const { emitted } = this.renderComponent(2) const { emitted } = this.renderComponent(2)
await this.user.click(screen.getByTitle('Shuffle selected songs')) await this.user.click(screen.getByTitle('Shuffle selected. Press Alt/⌥ to change mode.'))
expect(emitted().playSelected[0]).toEqual([true]) expect(emitted().playSelected[0]).toEqual([true])
}) })
@ -57,7 +57,7 @@ new class extends UnitTestCase {
const { emitted } = this.renderComponent(2) const { emitted } = this.renderComponent(2)
await this.user.keyboard('{Alt>}') await this.user.keyboard('{Alt>}')
await this.user.click(screen.getByTitle('Play selected songs')) await this.user.click(screen.getByTitle('Play selected. Press Alt/⌥ to change mode.'))
await this.user.keyboard('{/Alt}') await this.user.keyboard('{/Alt}')
expect(emitted().playSelected[0]).toEqual([false]) expect(emitted().playSelected[0]).toEqual([false])

View file

@ -7,7 +7,8 @@
v-if="selectedSongs.length < 2 && songs.length" v-if="selectedSongs.length < 2 && songs.length"
class="btn-play-all" class="btn-play-all"
orange orange
title="Play all songs" title="Play all. Press Alt/⌥ to change mode."
v-koel-tooltip.bottom
@click.prevent="playAll" @click.prevent="playAll"
> >
<Icon :icon="faPlay" fixed-width /> <Icon :icon="faPlay" fixed-width />
@ -18,7 +19,8 @@
v-if="selectedSongs.length > 1" v-if="selectedSongs.length > 1"
class="btn-play-selected" class="btn-play-selected"
orange orange
title="Play selected songs" title="Play selected. Press Alt/⌥ to change mode."
v-koel-tooltip.bottom
@click.prevent="playSelected" @click.prevent="playSelected"
> >
<Icon :icon="faPlay" fixed-width /> <Icon :icon="faPlay" fixed-width />
@ -32,7 +34,8 @@
class="btn-shuffle-all" class="btn-shuffle-all"
data-testid="btn-shuffle-all" data-testid="btn-shuffle-all"
orange orange
title="Shuffle all songs" title="Shuffle all. Press Alt/⌥ to change mode."
v-koel-tooltip.bottom
@click.prevent="shuffle" @click.prevent="shuffle"
> >
<Icon :icon="faRandom" fixed-width /> <Icon :icon="faRandom" fixed-width />
@ -44,7 +47,8 @@
class="btn-shuffle-selected" class="btn-shuffle-selected"
data-testid="btn-shuffle-selected" data-testid="btn-shuffle-selected"
orange orange
title="Shuffle selected songs" title="Shuffle selected. Press Alt/⌥ to change mode."
v-koel-tooltip.bottom
@click.prevent="shuffleSelected" @click.prevent="shuffleSelected"
> >
<Icon :icon="faRandom" fixed-width /> <Icon :icon="faRandom" fixed-width />