Adding progress filter, filter dot, current chapter highlighted

This commit is contained in:
advplyr 2021-09-21 18:32:59 -05:00
parent 9c5f79d54f
commit b8063b8d94
7 changed files with 59 additions and 12 deletions

View file

@ -6,7 +6,10 @@
<p class="font-book">{{ numAudiobooks }} Audiobooks</p>
<div class="flex-grow" />
<span class="material-icons px-2" @click="showFilterModal = true">filter_alt</span>
<div class="relative flex items-center px-2">
<span class="material-icons" @click="showFilterModal = true">filter_alt</span>
<div v-show="hasFilters" class="absolute top-0 right-2 w-2 h-2 rounded-full bg-success border border-green-300 shadow-sm z-10 pointer-events-none" />
</div>
<span class="material-icons px-2" @click="showSortModal = true">sort</span>
</div>
</div>
@ -29,6 +32,9 @@ export default {
}
},
computed: {
hasFilters() {
return this.$store.getters['user/getUserSetting']('filterBy') !== 'all'
},
numAudiobooks() {
return this.$store.getters['audiobooks/getFiltered']().length
}