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

UX: Disable touchmove event on icon buttons in search results

Browse source
This commit is contained in:
Michael Mayer 2021-01-19 11:16:08 +01:00
parent ad1f3df7a4
commit 1580604f2c
8 changed files with 24 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/component/photo/cards.vue
View file

@ -58,6 +58,7 @@
icon flat absolute
@touchstart.stop.prevent="openPhoto(index, true)"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="openPhoto(index, true)">
<v-icon color="white" class="default-hidden action-raw" :title="$gettext('RAW')">photo_camera</v-icon>
<v-icon color="white" class="default-hidden action-live" :title="$gettext('Live')">$vuetify.icons.live_photo</v-icon>
@ -69,6 +70,7 @@
icon flat absolute :title="$gettext('View')"
@touchstart.stop.prevent="openPhoto(index, false)"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="openPhoto(index, false)">
<v-icon color="white" class="action-fullscreen">zoom_in</v-icon>
</v-btn>
@ -77,6 +79,7 @@
outline fab large absolute :title="$gettext('Play')"
@touchstart.stop.prevent="openPhoto(index, true)"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="openPhoto(index, true)">
<v-icon color="white" class="action-play">play_arrow</v-icon>
</v-btn>
@ -92,6 +95,7 @@
class="input-select"
@touchstart.stop.prevent="onSelect($event, index)"
@touchend.stop.prevent
@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>
@ -102,6 +106,7 @@
class="input-favorite"
@touchstart.stop.prevent="photo.toggleLike()"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="photo.toggleLike()">
<v-icon color="white" class="select-on">favorite</v-icon>
<v-icon color="white" class="select-off">favorite_border</v-icon>

2
frontend/src/component/photo/list.vue
View file

@ -94,7 +94,7 @@
<td class="text-xs-center">
<v-btn v-if="hidePrivate" class="p-photo-private" icon small flat :ripple="false"
:data-uid="props.item.UID" @click.stop.prevent="props.item.togglePrivate()">
<v-icon v-if="props.item.Private" color="secondary-dark">lock</v-icon>
<v-icon v-if="props.item.Private" color="accent lighten-3">lock</v-icon>
<v-icon v-else color="accent lighten-3">lock_open</v-icon>
</v-btn>
<v-btn class="p-photo-like" icon small flat :ripple="false"

5
frontend/src/component/photo/mosaic.vue
View file

@ -57,6 +57,7 @@
icon flat small absolute
@touchstart.stop.prevent="openPhoto(index, true)"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="openPhoto(index, true)">
<v-icon color="white" class="default-hidden action-raw" :title="$gettext('RAW')">photo_camera</v-icon>
<v-icon color="white" class="default-hidden action-live" :title="$gettext('Live')">$vuetify.icons.live_photo</v-icon>
@ -68,6 +69,7 @@
icon flat small absolute :title="$gettext('View')"
@touchstart.stop.prevent="openPhoto(index, false)"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="openPhoto(index, false)">
<v-icon color="white" class="action-fullscreen">zoom_in</v-icon>
</v-btn>
@ -76,6 +78,7 @@
icon flat small absolute :title="$gettext('Play')"
@touchstart.stop.prevent="openPhoto(index, true)"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="openPhoto(index, true)">
<v-icon color="white" class="action-play">play_arrow</v-icon>
</v-btn>
@ -91,6 +94,7 @@
class="input-select"
@touchstart.stop.prevent="onSelect($event, index)"
@touchend.stop.prevent
@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>
@ -101,6 +105,7 @@
class="input-favorite"
@touchstart.stop.prevent="photo.toggleLike()"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="photo.toggleLike()">
<v-icon color="white" class="select-on">favorite</v-icon>
<v-icon color="white" class="select-off">favorite_border</v-icon>

3
frontend/src/pages/albums.vue
View file

@ -108,6 +108,7 @@
class="action-share"
@touchstart.stop.prevent="share(album)"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="share(album)">
<v-icon color="white">share</v-icon>
</v-btn>
@ -117,6 +118,7 @@
class="input-select"
@touchstart.stop.prevent="onSelect($event, index)"
@touchend.stop.prevent
@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>
@ -127,6 +129,7 @@
class="input-favorite"
@touchstart.stop.prevent="album.toggleLike()"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="album.toggleLike()">
<v-icon color="#FFD600" class="select-on">star</v-icon>
<v-icon color="white" class="select-off">star_border</v-icon>

2
frontend/src/pages/labels.vue
View file

@ -85,6 +85,7 @@
class="input-select"
@touchstart.stop.prevent="onSelect($event, index)"
@touchend.stop.prevent
@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>
@ -95,6 +96,7 @@
class="input-favorite"
@touchstart.stop.prevent="label.toggleLike()"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="label.toggleLike()">
<v-icon color="#FFD600" class="select-on">star</v-icon>
<v-icon color="white" class="select-off">star_border</v-icon>

1
frontend/src/share/albums.vue
View file

@ -59,6 +59,7 @@
class="input-select"
@touchstart.stop.prevent="onSelect($event, index)"
@touchend.stop.prevent
@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>

4
frontend/src/share/photo/cards.vue
View file

@ -54,6 +54,7 @@
icon flat absolute
@touchstart.stop.prevent="openPhoto(index, true)"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="openPhoto(index, true)">
<v-icon color="white" class="default-hidden action-raw" :title="$gettext('RAW')">photo_camera</v-icon>
<v-icon color="white" class="default-hidden action-live" :title="$gettext('Live')">$vuetify.icons.live_photo</v-icon>
@ -65,6 +66,7 @@
icon flat absolute :title="$gettext('View')"
@touchstart.stop.prevent="openPhoto(index, false)"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="openPhoto(index, false)">
<v-icon color="white" class="action-fullscreen">zoom_in</v-icon>
</v-btn>
@ -73,6 +75,7 @@
outline fab large absolute :title="$gettext('Play')"
@touchstart.stop.prevent="openPhoto(index, true)"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="openPhoto(index, true)">
<v-icon color="white" class="action-play">play_arrow</v-icon>
</v-btn>
@ -82,6 +85,7 @@
class="input-select"
@touchstart.stop.prevent="onSelect($event, index)"
@touchend.stop.prevent
@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>

3
frontend/src/share/photo/mosaic.vue
View file

@ -53,6 +53,7 @@
icon flat small absolute
@touchstart.stop.prevent="openPhoto(index, true)"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="openPhoto(index, true)">
<v-icon color="white" class="default-hidden action-raw" :title="$gettext('RAW')">photo_camera</v-icon>
<v-icon color="white" class="default-hidden action-live" :title="$gettext('Live')">$vuetify.icons.live_photo</v-icon>
@ -64,6 +65,7 @@
icon flat small absolute :title="$gettext('View')"
@touchstart.stop.prevent="openPhoto(index, false)"
@touchend.stop.prevent
@touchmove.stop.prevent
@click.stop.prevent="openPhoto(index, false)">
<v-icon color="white" class="action-fullscreen">zoom_in</v-icon>
</v-btn>
@ -81,6 +83,7 @@
class="input-select"
@touchstart.stop.prevent="onSelect($event, index)"
@touchend.stop.prevent
@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>