mirror of
https://github.com/advplyr/audiobookshelf-app.git
synced 2026-08-28 14:17:19 +02:00
Replace all material-icons with material-symbols
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<p class="text-base font-semibold">{{ $strings.LabelFolder }}: {{ folderName }}</p>
|
||||
<div class="flex-grow" />
|
||||
|
||||
<span v-if="dialogItems.length" class="material-icons" @click="showDialog = true">more_vert</span>
|
||||
<span v-if="dialogItems.length" class="material-symbols" @click="showDialog = true">more_vert</span>
|
||||
</div>
|
||||
|
||||
<p class="text-sm mb-4 text-fg-muted">{{ $strings.LabelMediaType }}: {{ mediaType }}</p>
|
||||
@@ -22,7 +22,7 @@
|
||||
<p class="text-xs text-fg-muted">{{ getLocalLibraryItemSubText(localLibraryItem) }}</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 flex items-center justify-center">
|
||||
<span class="material-icons text-xl text-fg-muted">arrow_right</span>
|
||||
<span class="material-symbols text-xl text-fg-muted">arrow_right</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</template>
|
||||
@@ -159,4 +159,4 @@ export default {
|
||||
height: calc(100vh - 310px);
|
||||
max-height: calc(100vh - 310px);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -4,17 +4,17 @@
|
||||
<h1 class="text-base font-semibold px-2">
|
||||
{{ $strings.HeaderLocalFolders }}
|
||||
</h1>
|
||||
<button type="button" class="material-icons-outlined" @click.stop="showLocalFolderMoreInfo">info</button>
|
||||
<button type="button" class="material-symbols" @click.stop="showLocalFolderMoreInfo">info</button>
|
||||
</div>
|
||||
|
||||
<div v-if="!isIos" class="w-full max-w-full px-2 py-2">
|
||||
<template v-for="folder in localFolders">
|
||||
<nuxt-link :to="`/localMedia/folders/${folder.id}`" :key="folder.id" class="flex items-center px-2 py-4 bg-primary rounded-md border-bg mb-1">
|
||||
<span class="material-icons text-xl text-yellow-400">folder</span>
|
||||
<span class="material-symbols fill text-xl text-yellow-400">folder</span>
|
||||
<p class="ml-2">{{ folder.name }}</p>
|
||||
<div class="flex-grow" />
|
||||
<p class="text-sm italic text-fg-muted px-3 capitalize">{{ folder.mediaType }}s</p>
|
||||
<span class="material-icons text-xl text-fg-muted">arrow_right</span>
|
||||
<span class="material-symbols text-xl text-fg-muted">arrow_right</span>
|
||||
</nuxt-link>
|
||||
</template>
|
||||
<div v-if="!localFolders.length" class="flex justify-center">
|
||||
|
||||
@@ -6,9 +6,9 @@
|
||||
<div class="flex-grow" />
|
||||
|
||||
<button v-if="audioTracks.length && !isPodcast" class="shadow-sm text-success flex items-center justify-center rounded-full mx-2" @click.stop="play">
|
||||
<span class="material-icons" style="font-size: 2rem">play_arrow</span>
|
||||
<span class="material-symbols fill" style="font-size: 2rem">play_arrow</span>
|
||||
</button>
|
||||
<span class="material-icons" @click="showItemDialog">more_vert</span>
|
||||
<span class="material-symbols" @click="showItemDialog">more_vert</span>
|
||||
</div>
|
||||
|
||||
<p v-if="!isIos" class="px-2 text-sm mb-0.5 text-fg-muted">{{ $strings.LabelFolder }}: {{ folderName }}</p>
|
||||
@@ -27,7 +27,7 @@
|
||||
<template v-for="track in audioTracksCopy">
|
||||
<div :key="track.localFileId" class="flex items-center my-1 item">
|
||||
<div v-if="!isIos" class="w-8 h-12 flex items-center justify-center" style="min-width: 32px">
|
||||
<span class="material-icons drag-handle text-lg text-fg-muted">menu</span>
|
||||
<span class="material-symbols drag-handle text-lg text-fg-muted">menu</span>
|
||||
</div>
|
||||
<div class="w-8 h-12 flex items-center justify-center" style="min-width: 32px">
|
||||
<p class="font-mono font-bold text-xl">{{ track.index }}</p>
|
||||
@@ -40,7 +40,7 @@
|
||||
<p class="text-sm">{{ $elapsedPretty(track.duration) }}</p>
|
||||
</div>
|
||||
<div v-if="!isIos" class="w-12 h-12 flex items-center justify-center" style="min-width: 48px">
|
||||
<span class="material-icons" @click="showTrackDialog(track)">more_vert</span>
|
||||
<span class="material-symbols" @click="showTrackDialog(track)">more_vert</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -66,7 +66,7 @@
|
||||
<p class="text-sm">{{ $elapsedPretty(episode.audioTrack.duration) }}</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 flex items-center justify-center" style="min-width: 48px">
|
||||
<span class="material-icons" @click="showTrackDialog(episode)">more_vert</span>
|
||||
<span class="material-symbols" @click="showTrackDialog(episode)">more_vert</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -98,7 +98,7 @@
|
||||
<div :key="file.id" class="flex items-center my-1">
|
||||
<div class="w-12 h-12 flex items-center justify-center">
|
||||
<img v-if="(file.mimeType || '').startsWith('image')" :src="getCapImageSrc(file.contentUrl)" class="w-full h-full object-contain" />
|
||||
<span v-else class="material-icons">music_note</span>
|
||||
<span v-else class="material-symbols">music_note</span>
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<p class="text-sm">{{ file.filename }}</p>
|
||||
@@ -111,9 +111,7 @@
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-sm text-fg-muted">
|
||||
{{ $strings.LabelTotalSize }}: {{ $bytesPretty(totalLibraryItemSize) }}
|
||||
</div>
|
||||
<div class="mt-4 text-sm text-fg-muted">{{ $strings.LabelTotalSize }}: {{ $bytesPretty(totalLibraryItemSize) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="px-2 w-full h-full">
|
||||
@@ -263,7 +261,7 @@ export default {
|
||||
return this.$store.state.playerIsStartingPlayback
|
||||
},
|
||||
totalAudioSize() {
|
||||
return this.audioTracks.reduce((acc, item) => item.metadata ? acc + item.metadata.size : acc, 0)
|
||||
return this.audioTracks.reduce((acc, item) => (item.metadata ? acc + item.metadata.size : acc), 0)
|
||||
},
|
||||
totalEpisodesSize() {
|
||||
return this.episodes.reduce((acc, item) => acc + item.size, 0)
|
||||
@@ -353,7 +351,7 @@ export default {
|
||||
} else if (action == 'play-episode') {
|
||||
this.playEpisode()
|
||||
}
|
||||
this.showDialog = false;
|
||||
this.showDialog = false
|
||||
},
|
||||
getLocalFileForTrack(localFileId) {
|
||||
return this.localFiles.find((lf) => lf.id == localFileId)
|
||||
|
||||
Reference in New Issue
Block a user