mirror of
https://github.com/koel/koel
synced 2024-11-12 23:47:09 +00:00
chore: use some better icons (#1851)
This commit is contained in:
Phan An
GitHub
parent
5f37982641
commit
e051c5cd11
10 changed files with 45 additions and 29 deletions
|
|
@ -26,6 +26,7 @@
|
|||
"ismobilejs": "^0.4.0",
|
||||
"local-storage": "^2.0.0",
|
||||
"lodash": "^4.17.19",
|
||||
"lucide-vue-next": "^0.452.0",
|
||||
"nouislider": "^14.0.2",
|
||||
"nprogress": "^0.2.0",
|
||||
"plyr": "1.5.x",
|
||||
|
|
@ -73,7 +74,6 @@
|
|||
"kill-port": "^1.6.1",
|
||||
"laravel-vite-plugin": "^1.0.2",
|
||||
"lint-staged": "^10.3.0",
|
||||
"lucide-vue-next": "^0.363.0",
|
||||
"postcss": "^8.4.38",
|
||||
"postcss-mixins": "^10.0.0",
|
||||
"postcss-nested": "^6.0.1",
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
title="Show equalizer"
|
||||
@click.prevent="showEqualizer"
|
||||
>
|
||||
<Icon :icon="faSliders" fixed-width />
|
||||
<AudioLinesIcon size="16" />
|
||||
</FooterBtn>
|
||||
|
||||
<VolumeSlider />
|
||||
|
|
@ -32,7 +32,8 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { faBolt, faCompress, faExpand, faSliders } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faBolt, faCompress, faExpand } from '@fortawesome/free-solid-svg-icons'
|
||||
import { AudioLinesIcon } from 'lucide-vue-next'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { eventBus, isFullscreenSupported, isAudioContextSupported as useEqualizer } from '@/utils'
|
||||
import { useRouter } from '@/composables'
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
exports[`renders with a current playable 1`] = `
|
||||
<div data-v-2e8b419d="" class="playback-controls flex flex-1 flex-col justify-center">
|
||||
<div data-v-2e8b419d="" class="flex items-center justify-between md:justify-center gap-5 md:gap-12 px-4 md:px-0"><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-base" type="button" title="Unlike"><br data-testid="Icon" icon="[object Object]"></button><!-- a placeholder to maintain the asymmetric layout --><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play previous in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play next in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="opacity-30 text-base" 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-2e8b419d="" class="flex items-center justify-between md:justify-center gap-5 md:gap-12 px-4 md:px-0"><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-base" type="button" title="Unlike"><br data-testid="Icon" icon="[object Object]"></button><!-- a placeholder to maintain the asymmetric layout --><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play previous in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play next in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="opacity-30 text-base" 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" 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>
|
||||
|
|
@ -13,7 +13,7 @@ exports[`renders with a current playable 1`] = `
|
|||
|
||||
exports[`renders without a current playable 1`] = `
|
||||
<div data-v-2e8b419d="" class="playback-controls flex flex-1 flex-col justify-center">
|
||||
<div data-v-2e8b419d="" class="flex items-center justify-between md:justify-center gap-5 md:gap-12 px-4 md:px-0"><button data-v-2e8b419d="" type="button"></button><!-- a placeholder to maintain the asymmetric layout --><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play previous in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play next in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="opacity-30 text-base" 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-2e8b419d="" class="flex items-center justify-between md:justify-center gap-5 md:gap-12 px-4 md:px-0"><button data-v-2e8b419d="" type="button"></button><!-- a placeholder to maintain the asymmetric layout --><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play previous in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><br data-v-2e8b419d="" data-testid="PlayButton"><button data-v-2e8b419d="" class="transition-[color] duration-200 ease-in-out text-k-text-secondary hover:text-k-text-primary text-2xl" type="button" title="Play next in queue"><br data-v-2e8b419d="" data-testid="Icon" icon="[object Object]"></button><button data-v-cab48a7c="" data-v-2e8b419d="" class="opacity-30 text-base" 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" 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>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
title="Artist information"
|
||||
@click.prevent="toggleTab('Artist')"
|
||||
>
|
||||
<Icon :icon="faMicrophone" fixed-width />
|
||||
<MicVocalIcon size="18" />
|
||||
</ExtraDrawerButton>
|
||||
<ExtraDrawerButton
|
||||
id="extraTabAlbum"
|
||||
|
|
@ -39,10 +39,12 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { faCompactDisc, faFeather, faMicrophone } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faCompactDisc, faFeather } from '@fortawesome/free-solid-svg-icons'
|
||||
import { MicVocalIcon } from 'lucide-vue-next'
|
||||
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'
|
||||
|
||||
const props = withDefaults(defineProps<{ modelValue?: ExtraPanelTab | null }>(), {
|
||||
|
|
|
|||
|
|
@ -19,13 +19,13 @@
|
|||
</SidebarItem>
|
||||
<SidebarItem href="#/artists" screen="Artists">
|
||||
<template #icon>
|
||||
<Icon :icon="faMicrophone" fixed-width />
|
||||
<MicVocalIcon size="16" />
|
||||
</template>
|
||||
Artists
|
||||
</SidebarItem>
|
||||
<SidebarItem href="#/genres" screen="Genres">
|
||||
<template #icon>
|
||||
<Icon :icon="faTags" fixed-width />
|
||||
<GuitarIcon size="16" />
|
||||
</template>
|
||||
Genres
|
||||
</SidebarItem>
|
||||
|
|
@ -43,7 +43,8 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { faCompactDisc, faMicrophone, faMusic, faPodcast, faTags } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faCompactDisc, faMusic, faPodcast } from '@fortawesome/free-solid-svg-icons'
|
||||
import { GuitarIcon, MicVocalIcon } from 'lucide-vue-next'
|
||||
import { unescape } from 'lodash'
|
||||
import { ref } from 'vue'
|
||||
import { eventBus } from '@/utils'
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<ScreenEmptyState v-if="libraryEmpty">
|
||||
<template #icon>
|
||||
<Icon :icon="faTags" />
|
||||
<GuitarIcon size="96" />
|
||||
</template>
|
||||
No genres found.
|
||||
<span class="secondary d-block">
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { faTags } from '@fortawesome/free-solid-svg-icons'
|
||||
import { GuitarIcon } from 'lucide-vue-next'
|
||||
import { maxBy, minBy } from 'lodash'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { commonStore, genreStore } from '@/stores'
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
<ScreenEmptyState v-if="!songs.length && !loading">
|
||||
<template #icon>
|
||||
<Icon :icon="faTags" />
|
||||
<GuitarIcon size="96" />
|
||||
</template>
|
||||
|
||||
No songs in this genre.
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { faTags } from '@fortawesome/free-solid-svg-icons'
|
||||
import { GuitarIcon } from 'lucide-vue-next'
|
||||
import { eventBus, pluralize, secondsToHumanReadable } from '@/utils'
|
||||
import { playbackService } from '@/services'
|
||||
import { genreStore, songStore } from '@/stores'
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
title="View as thumbnails"
|
||||
>
|
||||
<input v-model="value" class="hidden" name="view-mode" type="radio" value="thumbnails">
|
||||
<Icon :icon="faThumbnailsHehe" />
|
||||
<LayoutGridIcon size="16" />
|
||||
<span class="hidden">View as thumbnails</span>
|
||||
</label>
|
||||
|
||||
|
|
@ -20,15 +20,14 @@
|
|||
title="View as list"
|
||||
>
|
||||
<input v-model="value" class="hidden" name="view-mode" type="radio" value="list">
|
||||
<Icon :icon="faList" />
|
||||
<LayoutListIcon size="16" />
|
||||
<span class="hidden">View as list</span>
|
||||
</label>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { faMicrosoft as faThumbnailsHehe } from '@fortawesome/free-brands-svg-icons'
|
||||
import { faList } from '@fortawesome/free-solid-svg-icons'
|
||||
import { LayoutGridIcon, LayoutListIcon } from 'lucide-vue-next'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = withDefaults(defineProps<{ modelValue?: ArtistAlbumViewMode }>(), { modelValue: 'thumbnails' })
|
||||
|
|
|
|||
|
|
@ -1,5 +1,23 @@
|
|||
// Vitest Snapshot v1
|
||||
|
||||
exports[`renders list mode 1`] = `<span data-v-d5772cd7="" class="flex w-[64px] border border-solid border-white/20 rounded-md overflow-hidden mt-[0.5rem] md:mt-0"><label data-v-d5772cd7="" class="thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="thumbnails"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as thumbnails</span></label><label data-v-d5772cd7="" class="active list" data-testid="view-mode-list" title="View as list"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="list"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as list</span></label></span>`;
|
||||
exports[`renders list mode 1`] = `
|
||||
<span data-v-d5772cd7="" class="flex w-[64px] border border-solid border-white/20 rounded-md overflow-hidden mt-[0.5rem] md:mt-0"><label data-v-d5772cd7="" class="thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="thumbnails"><svg data-v-d5772cd7="" 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" class="lucide lucide-layout-grid-icon"><rect width="7" height="7" x="3" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="14" rx="1"></rect><rect width="7" height="7" x="3" y="14" rx="1"></rect></svg><span data-v-d5772cd7="" class="hidden">View as thumbnails</span></label><label data-v-d5772cd7="" class="active list" data-testid="view-mode-list" title="View as list"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="list"><svg data-v-d5772cd7="" 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" class="lucide lucide-layout-list-icon">
|
||||
<rect width="7" height="7" x="3" y="3" rx="1"></rect>
|
||||
<rect width="7" height="7" x="3" y="14" rx="1"></rect>
|
||||
<path d="M14 4h7"></path>
|
||||
<path d="M14 9h7"></path>
|
||||
<path d="M14 15h7"></path>
|
||||
<path d="M14 20h7"></path>
|
||||
</svg><span data-v-d5772cd7="" class="hidden">View as list</span></label></span>
|
||||
`;
|
||||
|
||||
exports[`renders thumbnails mode 1`] = `<span data-v-d5772cd7="" class="flex w-[64px] border border-solid border-white/20 rounded-md overflow-hidden mt-[0.5rem] md:mt-0"><label data-v-d5772cd7="" class="active thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="thumbnails"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as thumbnails</span></label><label data-v-d5772cd7="" class="list" data-testid="view-mode-list" title="View as list"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="list"><br data-v-d5772cd7="" data-testid="Icon" icon="[object Object]"><span data-v-d5772cd7="" class="hidden">View as list</span></label></span>`;
|
||||
exports[`renders thumbnails mode 1`] = `
|
||||
<span data-v-d5772cd7="" class="flex w-[64px] border border-solid border-white/20 rounded-md overflow-hidden mt-[0.5rem] md:mt-0"><label data-v-d5772cd7="" class="active thumbnails" data-testid="view-mode-thumbnail" title="View as thumbnails"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="thumbnails"><svg data-v-d5772cd7="" 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" class="lucide lucide-layout-grid-icon"><rect width="7" height="7" x="3" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="14" rx="1"></rect><rect width="7" height="7" x="3" y="14" rx="1"></rect></svg><span data-v-d5772cd7="" class="hidden">View as thumbnails</span></label><label data-v-d5772cd7="" class="list" data-testid="view-mode-list" title="View as list"><input data-v-d5772cd7="" class="hidden" name="view-mode" type="radio" value="list"><svg data-v-d5772cd7="" 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" class="lucide lucide-layout-list-icon">
|
||||
<rect width="7" height="7" x="3" y="3" rx="1"></rect>
|
||||
<rect width="7" height="7" x="3" y="14" rx="1"></rect>
|
||||
<path d="M14 4h7"></path>
|
||||
<path d="M14 9h7"></path>
|
||||
<path d="M14 15h7"></path>
|
||||
<path d="M14 20h7"></path>
|
||||
</svg><span data-v-d5772cd7="" class="hidden">View as list</span></label></span>
|
||||
`;
|
||||
|
|
|
|||
13
yarn.lock
13
yarn.lock
|
|
@ -4007,11 +4007,6 @@ is-unicode-supported@^0.1.0:
|
|||
resolved "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz"
|
||||
integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
|
||||
|
||||
is-unicode-supported@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz#d824984b616c292a2e198207d4a609983842f714"
|
||||
integrity sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==
|
||||
|
||||
is-weakmap@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz"
|
||||
|
|
@ -4468,10 +4463,10 @@ lru-cache@^4.1.5:
|
|||
pseudomap "^1.0.2"
|
||||
yallist "^2.1.2"
|
||||
|
||||
lucide-vue-next@^0.363.0:
|
||||
version "0.363.0"
|
||||
resolved "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.363.0.tgz"
|
||||
integrity sha512-dc5KgrXhCPMEzKz6voDVvxXkwEr7n+Q4b7qLyS2e3DTlH9GMFydS4fHoSvpZR/a5M7i1EOpFI8/BA8SPjAOwEQ==
|
||||
lucide-vue-next@^0.452.0:
|
||||
version "0.452.0"
|
||||
resolved "https://registry.yarnpkg.com/lucide-vue-next/-/lucide-vue-next-0.452.0.tgz#dbd87395feae9fdd2116300982b084b0aa2f1429"
|
||||
integrity sha512-a7i6LayYT/kPDkwRvcWWZlPTRPiaM11xhUhFctRXmjibZod9TdVhk4U/7q2RYYkkkDJHp/4OSiXbxC82+mda3Q==
|
||||
|
||||
lz-string@^1.4.4:
|
||||
version "1.4.4"
|
||||
|
|
|
|||
Loading…
Reference in a new issue