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

UX: Improve touch event accuracy in file browser #1048

Browse source
This commit is contained in:
Michael Mayer 2021-04-21 14:25:50 +02:00
parent b07ba63108
commit 072d734754
1 changed files with 18 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
frontend/src/pages/library/files.vue
View file

@ -64,12 +64,17 @@
loading="lazy"
aspect-ratio="1"
class="accent lighten-2 clickable"
@mousedown="onMouseDown($event, index)"
@click="onClick($event, index)"
@touchstart="input.touchStart($event, index)"
@touchend.prevent="onClick($event, index)"
@mousedown="input.mouseDown($event, index)"
@click.stop.prevent="onClick($event, index)"
>
<v-btn :ripple="false"
icon flat absolute
class="input-select"
@touchstart.stop.prevent="input.touchStart($event, index)"
@touchend.stop.prevent="onSelect($event, index)"
@touchmove.stop.prevent
@click.stop.prevent="onSelect($event, index)">
<v-icon color="white" class="select-on">check_circle</v-icon>
<v-icon color="white" class="select-off">radio_button_off</v-icon>
@ -116,6 +121,7 @@ import {Folder} from "model/folder";
import Notify from "common/notify";
import {MaxItems} from "common/clipboard";
import download from "common/download";
import {Input, InputInvalid, ClickShort, ClickLong} from "common/input";
export default {
name: 'PPageFiles',
@ -149,11 +155,7 @@ export default {
offset: 0,
},
titleRule: v => v.length <= this.$config.get('clip') || this.$gettext("Name too long"),
mouseDown: {
index: -1,
scrollY: window.scrollY,
timeStamp: -1,
},
input: new Input(),
lastId: "",
breadcrumbs: [],
};
@ -242,22 +244,23 @@ export default {
return (rangeEnd - rangeStart) + 1;
},
onSelect(ev, index) {
const inputType = this.input.eval(ev, index);
if (inputType !== ClickShort) {
return;
}
if (ev.shiftKey) {
this.selectRange(index, this.results);
} else {
this.toggleSelection(this.results[index].getId());
}
},
onMouseDown(ev, index) {
this.mouseDown.index = index;
this.mouseDown.scrollY = window.scrollY;
this.mouseDown.timeStamp = ev.timeStamp;
},
onClick(ev, index) {
const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
const inputType = this.input.eval(ev, index);
const longClick = inputType === ClickLong;
if (scrolled) {
if (inputType === InputInvalid) {
return;
}