beenull/photoprism
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Select range of photos by pressing Shift (#159)

Browse source 
* Frontend: fix lazy loading for albums

* Frontend: start working on a range select for photos

* Frontend: add range select to tiles and details view

* Frontend: remove keydown EventListener when component is destroyed
This commit is contained in:
thielepaul 2019-12-15 10:46:58 +01:00 committed by Michael Mayer
parent 722f18ee5d
commit 73fc6ac5b3
4 changed files with 61 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/component/p-photo-details.vue
View file

@ -25,7 +25,7 @@
v-bind:class="{ selected: $clipboard.has(photo) }"
style="cursor: pointer"
class="accent lighten-2"
@click="openPhoto(index)"
@click.exact="openPhoto(index)"
>
<v-layout
@ -41,7 +41,8 @@
<v-btn v-if="hover || selection.length > 0" :flat="!hover" :ripple="false"
icon large absolute
class="p-photo-select"
@click.stop.prevent="$clipboard.toggle(photo)">
@click.shift.prevent="selectRange(photo)"
@click.exact.stop.prevent="$clipboard.toggle(photo)">
<v-icon v-if="selection.length && $clipboard.has(photo)" color="white" class="t-select t-on">check_circle</v-icon>
<v-icon v-else color="accent lighten-3" class="t-select t-off">radio_button_off</v-icon>
</v-btn>
@ -93,6 +94,20 @@
album: Object,
},
methods: {
selectRange(photo) {
var selection = this.$clipboard.getIds();
if (selection.length) {
var lastAddedId = selection[selection.length - 1];
var rangeStart = this.photos.findIndex((photo) => photo.getId() == lastAddedId);
var rangeEnd = this.photos.indexOf(photo);
var photosToBeAdded = this.photos.slice(Math.min(rangeStart, rangeEnd), Math.max(rangeStart, rangeEnd) + 1);
for (var photo of photosToBeAdded) {
this.$clipboard.add(photo);
}
} else {
this.$clipboard.add(photo);
}
}
}
};
</script>

21
frontend/src/component/p-photo-mosaic.vue
View file

@ -24,7 +24,7 @@
aspect-ratio="1"
class="accent lighten-2"
style="cursor: pointer"
@click="openPhoto(index)"
@click.exact="openPhoto(index)"
>
<v-layout
slot="placeholder"
@ -40,7 +40,8 @@
<v-btn v-if="hover || selection.length > 0" :flat="!hover" :ripple="false"
icon small absolute
class="p-photo-select"
@click.stop.prevent="$clipboard.toggle(photo)">
@click.shift.prevent="selectRange(photo)"
@click.exact.stop.prevent="$clipboard.toggle(photo)">
<v-icon v-if="selection.length && $clipboard.has(photo)" color="white" class="t-select t-on">check_circle</v-icon>
<v-icon v-else color="accent lighten-3" class="t-select t-off">radio_button_off</v-icon>
</v-btn>
@ -70,6 +71,20 @@
album: Object,
},
methods: {
}
selectRange(photo) {
var selection = this.$clipboard.getIds();
if (selection.length) {
var lastAddedId = selection[selection.length - 1];
var rangeStart = this.photos.findIndex((photo) => photo.getId() == lastAddedId);
var rangeEnd = this.photos.indexOf(photo);
var photosToBeAdded = this.photos.slice(Math.min(rangeStart, rangeEnd), Math.max(rangeStart, rangeEnd) + 1);
for (var photo of photosToBeAdded) {
this.$clipboard.add(photo);
}
} else {
this.$clipboard.add(photo);
}
}
},
};
</script>

19
frontend/src/component/p-photo-tiles.vue
View file

@ -24,7 +24,7 @@
aspect-ratio="1"
class="accent lighten-2"
style="cursor: pointer"
@click="openPhoto(index)"
@click.exact="openPhoto(index)"
>
<v-layout
slot="placeholder"
@ -40,7 +40,8 @@
<v-btn v-if="hover || selection.length > 0" :flat="!hover" :ripple="false"
icon large absolute
class="p-photo-select"
@click.stop.prevent="$clipboard.toggle(photo)">
@click.shift.prevent="selectRange(photo)"
@click.exact.stop.prevent="$clipboard.toggle(photo)">
<v-icon v-if="selection.length && $clipboard.has(photo)" color="white" class="t-select t-on">check_circle</v-icon>
<v-icon v-else-if="!$clipboard.has(photo)" color="accent lighten-3" class="t-select t-off">radio_button_off</v-icon>
</v-btn>
@ -70,6 +71,20 @@
album: Object,
},
methods: {
selectRange(photo) {
var selection = this.$clipboard.getIds();
if (selection.length) {
var lastAddedId = selection[selection.length - 1];
var rangeStart = this.photos.findIndex((photo) => photo.getId() == lastAddedId);
var rangeEnd = this.photos.indexOf(photo);
var photosToBeAdded = this.photos.slice(Math.min(rangeStart, rangeEnd), Math.max(rangeStart, rangeEnd) + 1);
for (var photo of photosToBeAdded) {
this.$clipboard.add(photo);
}
} else {
this.$clipboard.add(photo);
}
}
}
};
</script>

9
frontend/src/pages/photos.vue
View file

@ -221,9 +221,18 @@
}
}).catch(() => this.loading = false);
},
onKeypress(event) {
if (event.key == "Escape") {
this.$clipboard.clear();
}
},
},
created() {
this.search();
window.addEventListener('keydown', this.onKeypress);
},
destroyed() {
window.removeEventListener('keydown', this.onKeypress);
}
};
</script>