starred/audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2026-08-08 12:58:38 +02:00
Code Issues 454 Packages Projects Releases 10 Wiki Activity

Replace all material-icons with material-symbols

Browse Source
This commit is contained in:
Nicholas Wallace
2025-03-30 23:26:14 -07:00
parent 6e0f67b19c
commit 8cf757c080
62 changed files with 218 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/tables/ChaptersTable.vue
+1 -1
View File
@@ -7,7 +7,7 @@
</div>
<div class="flex-grow" />
<div class="h-10 w-10 rounded-full flex justify-center items-center duration-500" :class="expanded ? 'transform rotate-180' : ''">
<span class="material-icons text-3xl">expand_more</span>
<span class="material-symbols text-3xl">arrow_drop_down</span>
</div>
</div>
<transition name="slide">
components/tables/TracksTable.vue
+1 -1
View File
@@ -7,7 +7,7 @@
</div>
<div class="flex-grow" />
<div class="h-10 w-10 rounded-full flex justify-center items-center duration-500" :class="showTracks ? 'transform rotate-180' : ''">
<span class="material-icons text-3xl">expand_more</span>
<span class="material-symbols text-3xl">arrow_drop_down</span>
</div>
</div>
<transition name="slide">
components/tables/collection/BookTableRow.vue
+3 -3
View File
@@ -6,14 +6,14 @@
</div>
<div class="book-table-content h-full px-2 flex items-center">
<div class="max-w-full">
<p class="truncate block text-sm">{{ bookTitle }} <span v-if="localLibraryItem" class="material-icons text-success text-base align-text-bottom">download_done</span></p>
<p class="truncate block text-sm">{{ bookTitle }} <span v-if="localLibraryItem" class="material-symbols text-success text-base align-text-bottom">download_done</span></p>
<p class="truncate block text-fg-muted text-xs">{{ bookAuthor }}</p>
<p v-if="media.duration" class="text-xxs text-fg-muted">{{ bookDuration }}</p>
</div>
</div>
<div class="w-8 min-w-8 flex justify-center">
<button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white border-opacity-20 flex items-center justify-center" @click.stop.prevent="playClick">
<span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="material-symbols fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
</button>
</div>
</nuxt-link>
@@ -120,4 +120,4 @@ export default {
width: calc(100% - 82px);
max-width: calc(100% - 82px);
}
</style>
</style>
components/tables/ebook/EbookFilesTable.vue
+2 -2
View File
@@ -7,7 +7,7 @@
</div>
<div class="flex-grow" />
<div class="h-10 w-10 rounded-full flex justify-center items-center duration-500" :class="showFiles ? 'transform rotate-180' : ''">
<span class="material-icons text-3xl">expand_more</span>
<span class="material-symbols text-3xl">arrow_drop_down</span>
</div>
</div>
<transition name="slide">
@@ -96,4 +96,4 @@ export default {
},
mounted() {}
}
</script>
</script>
components/tables/ebook/EbookFilesTableRow.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<tr>
<td class="px-4">{{ file.metadata.filename }} <span v-if="isPrimary" class="material-icons-outlined text-success align-text-bottom text-base">check_circle</span></td>
<td class="px-4">{{ file.metadata.filename }} <span v-if="isPrimary" class="material-symbols text-success align-text-bottom text-base">check_circle</span></td>
<td class="text-xs w-16">
<ui-icon-btn icon="auto_stories" outlined borderless icon-font-size="1.125rem" :size="8" @click="readEbook" />
</td>
@@ -57,4 +57,4 @@ export default {
},
mounted() {}
}
</script>
</script>
components/tables/playlist/ItemTableRow.vue
+4 -4
View File
@@ -7,14 +7,14 @@
</div>
<div class="item-table-content h-full px-2 flex items-center">
<div class="max-w-full">
<p class="truncate block text-sm">{{ itemTitle }} <span v-if="localLibraryItem" class="material-icons text-success text-base align-text-bottom">download_done</span></p>
<p class="truncate block text-sm">{{ itemTitle }} <span v-if="localLibraryItem" class="material-symbols text-success text-base align-text-bottom">download_done</span></p>
<p v-if="authorName" class="truncate block text-fg-muted text-xs">{{ authorName }}</p>
<p class="text-xxs text-fg-muted">{{ itemDuration }}</p>
</div>
</div>
<div class="w-8 min-w-8 flex justify-center">
<button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white/20 flex items-center justify-center" @click.stop.prevent="playClick">
<span v-if="!playerIsStartingForThisMedia" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span v-if="!playerIsStartingForThisMedia" class="material-symbols fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<svg v-else class="animate-spin" style="width: 18px; height: 18px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
@@ -22,7 +22,7 @@
</div>
<div class="w-8 min-w-8 flex justify-center">
<button class="w-8 h-8 rounded-full flex items-center justify-center" @click.stop.prevent="showMore">
<span class="material-icons">more_vert</span>
<span class="material-symbols">more_vert</span>
</button>
</div>
</nuxt-link>
@@ -188,4 +188,4 @@ export default {
width: calc(100% - 114px);
max-width: calc(100% - 114px);
}
</style>
</style>
components/tables/podcast/EpisodeRow.vue
+5 -5
View File
@@ -30,7 +30,7 @@
<div class="flex items-center pt-2">
<div class="h-8 px-4 border border-border rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
<span v-if="!playerIsStartingForThisMedia" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span v-if="!playerIsStartingForThisMedia" class="material-symbols fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<svg v-else class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
@@ -40,13 +40,13 @@
<ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
<button v-if="!isLocal" class="mx-1.5 mt-1.5" @click.stop="addToPlaylist">
<span class="material-icons text-2xl">playlist_add</span>
<span class="material-symbols text-2xl">playlist_add</span>
</button>
<div v-if="userCanDownload">
<span v-if="isLocal" class="material-icons-outlined px-2 text-success text-lg">audio_file</span>
<span v-else-if="!localEpisode" class="material-icons mx-1.5 mt-2 text-xl" :class="downloadItem || startingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
<span v-else class="material-icons px-2 text-success text-xl">download_done</span>
<span v-if="isLocal" class="material-symbols px-2 text-success text-lg">audio_file</span>
<span v-else-if="!localEpisode" class="material-symbols mx-1.5 mt-2 text-xl" :class="downloadItem || startingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
<span v-else class="material-symbols px-2 text-success text-xl">download_done</span>
</div>
<div class="flex-grow" />
components/tables/podcast/EpisodesTable.vue
+4 -4
View File
@@ -5,7 +5,7 @@
<div class="flex items-center">
<p class="text-sm py-1">{{ $getString('MessageEpisodesQueuedForDownload', [episodeDownloadsQueued.length]) }}</p>
<div class="flex-grow" />
<span v-if="isAdminOrUp" class="material-icons text-xl ml-3 cursor-pointer" @click="clearDownloadQueue">close</span>
<span v-if="isAdminOrUp" class="material-symbols text-xl ml-3 cursor-pointer" @click="clearDownloadQueue">close</span>
</div>
</div>
@@ -23,18 +23,18 @@
<div class="flex-grow" />
<button v-if="isAdminOrUp && !fetchingRSSFeed" class="outline:none mx-1 pt-0.5 relative" @click="searchEpisodes">
<span class="material-icons text-xl text-fg">search</span>
<span class="material-symbols text-xl text-fg">search</span>
</button>
<widgets-loading-spinner v-else-if="fetchingRSSFeed" class="mx-1" />
<button class="outline:none mx-3 pt-0.5 relative" @click="showFilters">
<span class="material-icons text-xl text-fg">filter_alt</span>
<span class="material-symbols text-xl text-fg">filter_alt</span>
<div v-show="filterKey !== 'all' && episodesAreFiltered" class="absolute top-0 right-0 w-1.5 h-1.5 rounded-full bg-success border border-green-300 shadow-sm z-10 pointer-events-none" />
</button>
<div class="flex items-center border border-white border-opacity-25 rounded px-2" @click="clickSort">
<p class="text-sm text-fg">{{ sortText }}</p>
<span class="material-icons ml-1 text-fg">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
<span class="material-symbols ml-1 text-fg">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
</div>
</div>
components/tables/podcast/LatestEpisodeRow.vue
+5 -5
View File
@@ -28,7 +28,7 @@
<div class="flex items-center pt-2">
<div class="h-8 px-4 border border-border hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-fg text-opacity-40' : ''" @click.stop="playClick">
<span v-if="!playerIsStartingForThisMedia" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span v-if="!playerIsStartingForThisMedia" class="material-symbols fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<svg v-else class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
@@ -38,13 +38,13 @@
<ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
<button v-if="!isLocal" class="mx-1.5 mt-1.5" @click.stop="addToPlaylist">
<span class="material-icons text-2xl">playlist_add</span>
<span class="material-symbols text-2xl">playlist_add</span>
</button>
<div v-if="userCanDownload">
<span v-if="isLocal" class="material-icons-outlined px-2 text-success text-lg">audio_file</span>
<span v-else-if="!localEpisode" class="material-icons mx-1.5 mt-2 text-xl" :class="downloadItem || pendingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem || pendingDownload ? 'downloading' : 'download' }}</span>
<span v-else class="material-icons px-2 text-success text-xl">download_done</span>
<span v-if="isLocal" class="material-symbols px-2 text-success text-lg">audio_file</span>
<span v-else-if="!localEpisode" class="material-symbols mx-1.5 mt-2 text-xl" :class="downloadItem || pendingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem || pendingDownload ? 'downloading' : 'download' }}</span>
<span v-else class="material-symbols px-2 text-success text-xl">download_done</span>
</div>
<div class="flex-grow" />