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

chore(ui): better icons for playlist and repeat mode

Browse source
This commit is contained in:
Phan An 2024-03-27 12:31:39 +01:00
parent 9b7759a492
commit 2fd7b8628e
5 changed files with 36 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
package.json
View file

@ -52,6 +52,7 @@
"@typescript-eslint/parser": "^4.11.1", "@typescript-eslint/parser": "^4.11.1",
"@vitejs/plugin-vue": "^5.0.4", "@vitejs/plugin-vue": "^5.0.4",
"@vueuse/core": "^10.9.0", "@vueuse/core": "^10.9.0",
"add": "^2.0.6",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"cypress": "^9.5.4", "cypress": "^9.5.4",
"eslint": "^8.14.0", "eslint": "^8.14.0",
@ -69,13 +70,15 @@
"kill-port": "^1.6.1", "kill-port": "^1.6.1",
"laravel-vite-plugin": "^1.0.2", "laravel-vite-plugin": "^1.0.2",
"lint-staged": "^10.3.0", "lint-staged": "^10.3.0",
"lucide-vue-next": "^0.363.0",
"sass": "^1.72.0", "sass": "^1.72.0",
"start-server-and-test": "^2.0.3", "start-server-and-test": "^2.0.3",
"typescript": "^4.8.4", "typescript": "^4.8.4",
"vite": "^5.1.6", "vite": "^5.1.6",
"vitepress": "^1.0.0-rc.45", "vitepress": "^1.0.0-rc.45",
"vitest": "^0.24.0", "vitest": "^0.24.0",
"vue-advanced-cropper": "^2.8.8" "vue-advanced-cropper": "^2.8.8",
"yarn": "^1.22.22"
}, },
"scripts": { "scripts": {
"lint": "eslint ./resources/assets/js/**/*.ts --no-error-on-unmatched-pattern && eslint ./cypress/**/*.ts --no-error-on-unmatched-pattern", "lint": "eslint ./resources/assets/js/**/*.ts --no-error-on-unmatched-pattern && eslint ./cypress/**/*.ts --no-error-on-unmatched-pattern",

22
resources/assets/js/components/layout/app-footer/__snapshots__/FooterPlaybackControls.spec.ts.snap
View file

@ -2,20 +2,22 @@
exports[`renders with a current song 1`] = ` exports[`renders with a current song 1`] = `
<div data-v-2e8b419d="" class="playback-controls" data-testid="footer-middle-pane"> <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-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">
<div data-v-cab48a7c="" class="fa-layers"><br data-v-cab48a7c="" data-testid="Icon" icon="[object Object]"> <path d="m17 2 4 4-4 4"></path>
<!--v-if--> <path d="M3 11v-1a4 4 0 0 1 4-4h14"></path>
</div> <path d="m7 22-4-4 4-4"></path>
</button></div> <path d="M21 13v1a4 4 0 0 1-4 4H3"></path>
</svg></button></div>
</div> </div>
`; `;
exports[`renders without a current song 1`] = ` exports[`renders without a current song 1`] = `
<div data-v-2e8b419d="" class="playback-controls" data-testid="footer-middle-pane"> <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-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">
<div data-v-cab48a7c="" class="fa-layers"><br data-v-cab48a7c="" data-testid="Icon" icon="[object Object]"> <path d="m17 2 4 4-4 4"></path>
<!--v-if--> <path d="M3 11v-1a4 4 0 0 1 4-4h14"></path>
</div> <path d="m7 22-4-4 4-4"></path>
</button></div> <path d="M21 13v1a4 4 0 0 1-4 4H3"></path>
</svg></button></div>
</div> </div>
`; `;

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

@ -15,7 +15,7 @@
<Icon v-else-if="isFavoriteList(list)" :icon="faHeart" class="text-maroon" fixed-width /> <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_smart" :icon="faWandMagicSparkles" fixed-width />
<Icon v-else-if="list.is_collaborative" :icon="faUsers" 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> <span>{{ list.name }}</span>
</a> </a>
</li> </li>
@ -24,11 +24,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import { import {
faClockRotateLeft, faClockRotateLeft,
faFileLines,
faHeart, faHeart,
faUsers, faUsers,
faWandMagicSparkles faWandMagicSparkles
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import { ListMusic } from 'lucide-vue-next'
import { computed, ref, toRefs } from 'vue' import { computed, ref, toRefs } from 'vue'
import { eventBus } from '@/utils' import { eventBus } from '@/utils'
import { favoriteStore } from '@/stores' import { favoriteStore } from '@/stores'

9
resources/assets/js/components/ui/RepeatModeSwitch.vue
View file

@ -7,16 +7,13 @@
type="button" type="button"
@click.prevent="changeMode" @click.prevent="changeMode"
> >
<FontAwesomeLayers> <Repeat1 v-if="mode === 'REPEAT_ONE'" :size="16" />
<Icon :icon="faRepeat" /> <Repeat v-else :size="16" />
<FontAwesomeLayersText v-if="mode === 'REPEAT_ONE'" counter value="1" />
</FontAwesomeLayers>
</button> </button>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome' import { Repeat, Repeat1 } from 'lucide-vue-next'
import { faRepeat } from '@fortawesome/free-solid-svg-icons'
import { computed, toRef } from 'vue' import { computed, toRef } from 'vue'
import { playbackService } from '@/services' import { playbackService } from '@/services'
import { preferenceStore } from '@/stores' import { preferenceStore } from '@/stores'

15
yarn.lock
View file

@ -1128,6 +1128,11 @@ acorn@^8.5.0, acorn@^8.8.0:
resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8" resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w== 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: agent-base@6:
version "6.0.2" version "6.0.2"
resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77" resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@ -3537,6 +3542,11 @@ lru-cache@^6.0.0:
dependencies: dependencies:
yallist "^4.0.0" 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: lz-string@^1.4.4:
version "1.4.4" version "1.4.4"
resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26" 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" resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg== 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: yauzl@^2.10.0:
version "2.10.0" version "2.10.0"
resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9" resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"