mirror of
https://github.com/koel/koel
synced 2024-11-10 06:34:14 +00:00
chore(ui): better icons for playlist and repeat mode
This commit is contained in:
Phan An
parent
9b7759a492
commit
2fd7b8628e
5 changed files with 36 additions and 19 deletions
|
|
@ -52,6 +52,7 @@
|
|||
"@typescript-eslint/parser": "^4.11.1",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"@vueuse/core": "^10.9.0",
|
||||
"add": "^2.0.6",
|
||||
"cross-env": "^7.0.3",
|
||||
"cypress": "^9.5.4",
|
||||
"eslint": "^8.14.0",
|
||||
|
|
@ -69,13 +70,15 @@
|
|||
"kill-port": "^1.6.1",
|
||||
"laravel-vite-plugin": "^1.0.2",
|
||||
"lint-staged": "^10.3.0",
|
||||
"lucide-vue-next": "^0.363.0",
|
||||
"sass": "^1.72.0",
|
||||
"start-server-and-test": "^2.0.3",
|
||||
"typescript": "^4.8.4",
|
||||
"vite": "^5.1.6",
|
||||
"vitepress": "^1.0.0-rc.45",
|
||||
"vitest": "^0.24.0",
|
||||
"vue-advanced-cropper": "^2.8.8"
|
||||
"vue-advanced-cropper": "^2.8.8",
|
||||
"yarn": "^1.22.22"
|
||||
},
|
||||
"scripts": {
|
||||
"lint": "eslint ./resources/assets/js/**/*.ts --no-error-on-unmatched-pattern && eslint ./cypress/**/*.ts --no-error-on-unmatched-pattern",
|
||||
|
|
|
|||
|
|
@ -2,20 +2,22 @@
|
|||
|
||||
exports[`renders with a current song 1`] = `
|
||||
<div data-v-2e8b419d="" class="playback-controls" data-testid="footer-middle-pane">
|
||||
<div data-v-2e8b419d="" class="buttons"><button data-v-2e8b419d="" title="Unlike Fahrstuhl to Heaven by Led Zeppelin" type="button" class="like-btn"><br data-testid="Icon" icon="[object Object]"></button><!-- a placeholder to maintain the flex layout --><button data-v-2e8b419d="" type="button" title="Play previous song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" type="button" title="Play next song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="repeat-mode-btn" title="Change repeat mode (current: No Repeat)" data-testid="repeat-mode-switch" type="button">
|
||||
<div data-v-cab48a7c="" class="fa-layers"><br data-v-cab48a7c="" data-testid="Icon" icon="[object Object]">
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</button></div>
|
||||
<div data-v-2e8b419d="" class="buttons"><button data-v-2e8b419d="" title="Unlike Fahrstuhl to Heaven by Led Zeppelin" type="button" class="like-btn"><br data-testid="Icon" icon="[object Object]"></button><!-- a placeholder to maintain the flex layout --><button data-v-2e8b419d="" type="button" title="Play previous song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" type="button" title="Play next song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="repeat-mode-btn" title="Change repeat mode (current: No Repeat)" data-testid="repeat-mode-switch" type="button"><svg data-v-cab48a7c="" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" size="16" class="lucide lucide-repeat-icon">
|
||||
<path d="m17 2 4 4-4 4"></path>
|
||||
<path d="M3 11v-1a4 4 0 0 1 4-4h14"></path>
|
||||
<path d="m7 22-4-4 4-4"></path>
|
||||
<path d="M21 13v1a4 4 0 0 1-4 4H3"></path>
|
||||
</svg></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders without a current song 1`] = `
|
||||
<div data-v-2e8b419d="" class="playback-controls" data-testid="footer-middle-pane">
|
||||
<div data-v-2e8b419d="" class="buttons"><button data-v-2e8b419d="" type="button"></button><!-- a placeholder to maintain the flex layout --><button data-v-2e8b419d="" type="button" title="Play previous song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" type="button" title="Play next song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="repeat-mode-btn" title="Change repeat mode (current: No Repeat)" data-testid="repeat-mode-switch" type="button">
|
||||
<div data-v-cab48a7c="" class="fa-layers"><br data-v-cab48a7c="" data-testid="Icon" icon="[object Object]">
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</button></div>
|
||||
<div data-v-2e8b419d="" class="buttons"><button data-v-2e8b419d="" type="button"></button><!-- a placeholder to maintain the flex layout --><button data-v-2e8b419d="" type="button" title="Play previous song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" type="button" title="Play next song"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="repeat-mode-btn" title="Change repeat mode (current: No Repeat)" data-testid="repeat-mode-switch" type="button"><svg data-v-cab48a7c="" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" size="16" class="lucide lucide-repeat-icon">
|
||||
<path d="m17 2 4 4-4 4"></path>
|
||||
<path d="M3 11v-1a4 4 0 0 1 4-4h14"></path>
|
||||
<path d="m7 22-4-4 4-4"></path>
|
||||
<path d="M21 13v1a4 4 0 0 1-4 4H3"></path>
|
||||
</svg></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<Icon v-else-if="isFavoriteList(list)" :icon="faHeart" class="text-maroon" fixed-width />
|
||||
<Icon v-else-if="list.is_smart" :icon="faWandMagicSparkles" fixed-width />
|
||||
<Icon v-else-if="list.is_collaborative" :icon="faUsers" fixed-width />
|
||||
<Icon v-else :icon="faFileLines" fixed-width />
|
||||
<ListMusic v-else :size="16" />
|
||||
<span>{{ list.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -24,11 +24,11 @@
|
|||
<script lang="ts" setup>
|
||||
import {
|
||||
faClockRotateLeft,
|
||||
faFileLines,
|
||||
faHeart,
|
||||
faUsers,
|
||||
faWandMagicSparkles
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { ListMusic } from 'lucide-vue-next'
|
||||
import { computed, ref, toRefs } from 'vue'
|
||||
import { eventBus } from '@/utils'
|
||||
import { favoriteStore } from '@/stores'
|
||||
|
|
|
|||
|
|
@ -7,16 +7,13 @@
|
|||
type="button"
|
||||
@click.prevent="changeMode"
|
||||
>
|
||||
<FontAwesomeLayers>
|
||||
<Icon :icon="faRepeat" />
|
||||
<FontAwesomeLayersText v-if="mode === 'REPEAT_ONE'" counter value="1" />
|
||||
</FontAwesomeLayers>
|
||||
<Repeat1 v-if="mode === 'REPEAT_ONE'" :size="16" />
|
||||
<Repeat v-else :size="16" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'
|
||||
import { faRepeat } from '@fortawesome/free-solid-svg-icons'
|
||||
import { Repeat, Repeat1 } from 'lucide-vue-next'
|
||||
import { computed, toRef } from 'vue'
|
||||
import { playbackService } from '@/services'
|
||||
import { preferenceStore } from '@/stores'
|
||||
|
|
|
|||
15
yarn.lock
15
yarn.lock
|
|
@ -1128,6 +1128,11 @@ acorn@^8.5.0, acorn@^8.8.0:
|
|||
resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
|
||||
integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
|
||||
|
||||
add@^2.0.6:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
|
||||
integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==
|
||||
|
||||
agent-base@6:
|
||||
version "6.0.2"
|
||||
resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
|
||||
|
|
@ -3537,6 +3542,11 @@ lru-cache@^6.0.0:
|
|||
dependencies:
|
||||
yallist "^4.0.0"
|
||||
|
||||
lucide-vue-next@^0.363.0:
|
||||
version "0.363.0"
|
||||
resolved "https://registry.yarnpkg.com/lucide-vue-next/-/lucide-vue-next-0.363.0.tgz#c838b274d04a98f59e22244a07f8692580794d64"
|
||||
integrity sha512-dc5KgrXhCPMEzKz6voDVvxXkwEr7n+Q4b7qLyS2e3DTlH9GMFydS4fHoSvpZR/a5M7i1EOpFI8/BA8SPjAOwEQ==
|
||||
|
||||
lz-string@^1.4.4:
|
||||
version "1.4.4"
|
||||
resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
|
||||
|
|
@ -5027,6 +5037,11 @@ yaml@^1.10.0:
|
|||
resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
|
||||
integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
|
||||
|
||||
yarn@^1.22.22:
|
||||
version "1.22.22"
|
||||
resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.22.tgz#ac34549e6aa8e7ead463a7407e1c7390f61a6610"
|
||||
integrity sha512-prL3kGtyG7o9Z9Sv8IPfBNrWTDmXB4Qbes8A9rEzt6wkJV8mUvoirjU0Mp3GGAU06Y0XQyA3/2/RQFVuK7MTfg==
|
||||
|
||||
yauzl@^2.10.0:
|
||||
version "2.10.0"
|
||||
resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
|
||||
|
|
|
|||
Loading…
Reference in a new issue