Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2026-04-18 21:13:24 +02:00
Code Issues Projects Releases Wiki Activity

fix(webui): better multi-select

Browse source 
once one element is selected, other elements show visual cues, and clicking any part of the element will add it to the selection
This commit is contained in:
Gauthier Roebroeck 2020-02-28 09:38:29 +08:00
parent 7028e0c14b
commit 881806ed1c
2 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
komga-webui/src/components/CardSeries.vue
View file

@ -2,8 +2,8 @@
<v-hover :disabled="!overlay"> <v-hover :disabled="!overlay">
<template v-slot:default="{ hover }"> <template v-slot:default="{ hover }">
<v-card :width="width" <v-card :width="width"
:to="{name:'browse-series', params: {seriesId: series.id}}"
:ripple="false" :ripple="false"
@click="cardClick"
> >
<v-img <v-img
:src="thumbnailUrl" :src="thumbnailUrl"
@ -17,7 +17,7 @@
</span> </span>
<v-fade-transition> <v-fade-transition>
<v-overlay <v-overlay
v-if="hover || selected" v-if="hover || selected || preSelect"
absolute absolute
:opacity="hover ? 0.3 : 0" :opacity="hover ? 0.3 : 0"
:class="`item-border${hover ? '-darken' : ''} overlay-full`" :class="`item-border${hover ? '-darken' : ''} overlay-full`"
@ -25,14 +25,15 @@
<v-icon v-if="select" <v-icon v-if="select"
:color="selected ? 'secondary' : ''" :color="selected ? 'secondary' : ''"
style="position: absolute; top: 5px; left: 10px" style="position: absolute; top: 5px; left: 10px"
@click.prevent="selectItem" @click.stop="selectItem"
> >
{{ selected ? 'mdi-checkbox-marked-circle' : 'mdi-checkbox-blank-circle-outline' }} {{ selected || (preSelect && hover) ? 'mdi-checkbox-marked-circle' : 'mdi-checkbox-blank-circle-outline'
}}
</v-icon> </v-icon>
<v-icon v-if="!selected && showEdit && edit" <v-icon v-if="!selected && !preSelect && edit"
style="position: absolute; bottom: 10px; left: 10px" style="position: absolute; bottom: 10px; left: 10px"
@click.prevent="editItem" @click.stop="editItem"
> >
mdi-pencil mdi-pencil
</v-icon> </v-icon>
@ -79,9 +80,9 @@ export default Vue.extend({
type: Boolean, type: Boolean,
default: false default: false
}, },
showEdit: { preSelect: {
type: Boolean, type: Boolean,
default: true default: false
}, },
select: { select: {
type: Function, type: Function,
@ -110,6 +111,13 @@ export default Vue.extend({
if (this.edit !== undefined) { if (this.edit !== undefined) {
this.edit(this.series) this.edit(this.series)
} }
},
cardClick () {
if (this.preSelect && this.select !== undefined) {
this.select()
} else {
this.$router.push({ name: 'browse-series', params: { seriesId: this.series.id.toString() } })
}
} }
} }
}) })

2
komga-webui/src/views/BrowseLibraries.vue
View file

@ -88,7 +88,7 @@
:width="cardWidth" :width="cardWidth"
:selected="active" :selected="active"
:select="toggle" :select="toggle"
:showEdit="selected.length === 0" :preSelect="selected.length > 0"
:edit="singleEdit" :edit="singleEdit"
/> />
</v-item> </v-item>