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