From 9465021a086afefa385ab18895b0369921165ea1 Mon Sep 17 00:00:00 2001 From: ildyria Date: Sat, 13 Jun 2026 13:16:20 +0200 Subject: [PATCH 1/3] Add support for toggle select on mobile view --- lang/en/gallery.php | 2 + .../gallery/albumModule/AlbumListItem.vue | 31 ++++++- .../gallery/albumModule/AlbumListView.vue | 2 + .../gallery/albumModule/AlbumPanel.vue | 10 +++ .../gallery/albumModule/AlbumThumbPanel.vue | 7 ++ .../albumModule/AlbumThumbPanelList.vue | 2 + .../albumModule/PhotoThumbPanelList.vue | 6 +- .../gallery/albumModule/thumbs/AlbumThumb.vue | 21 +++++ .../gallery/albumModule/thumbs/PhotoThumb.vue | 15 +++- .../js/components/headers/AlbumHeader.vue | 87 ++++++++++++------- .../js/composables/selections/selections.ts | 14 ++- resources/js/stores/ModalsState.ts | 11 +++ 12 files changed, 168 insertions(+), 40 deletions(-) diff --git a/lang/en/gallery.php b/lang/en/gallery.php index 1324a3de326..2a6db39f64d 100644 --- a/lang/en/gallery.php +++ b/lang/en/gallery.php @@ -140,6 +140,8 @@ 'header_photos' => 'Photos', 'show_highlighted' => 'Filter highlighted images', 'copy_highlighted_names' => 'Copy highlighted photo names to clipboard', + 'toggle_touch_select' => 'Toggle photo selection mode', + 'photo_actions' => 'Photo actions', 'no_results' => 'Nothing to see here', 'upload' => 'Upload photos', 'tabs' => [ diff --git a/resources/js/components/gallery/albumModule/AlbumListItem.vue b/resources/js/components/gallery/albumModule/AlbumListItem.vue index 99fe257afe1..259bb9ff22f 100644 --- a/resources/js/components/gallery/albumModule/AlbumListItem.vue +++ b/resources/js/components/gallery/albumModule/AlbumListItem.vue @@ -1,13 +1,26 @@ @@ -25,6 +26,7 @@ const props = defineProps<{ const emits = defineEmits<{ clicked: [event: MouseEvent, id: string]; + selected: [event: MouseEvent, id: string]; contexted: [event: MouseEvent, id: string]; }>(); diff --git a/resources/js/components/gallery/albumModule/AlbumPanel.vue b/resources/js/components/gallery/albumModule/AlbumPanel.vue index 9be15d2c224..cc5b29647d7 100644 --- a/resources/js/components/gallery/albumModule/AlbumPanel.vue +++ b/resources/js/components/gallery/albumModule/AlbumPanel.vue @@ -9,6 +9,7 @@ @open-search="emits('openSearch')" @go-back="emits('goBack')" @show-selected="albumCallbacks.copyHighlighted()" + @open-context-menu="openContextMenuFromHeader" /> @@ -27,6 +28,7 @@ const props = defineProps<{ // bubble up. const emits = defineEmits<{ clicked: [event: MouseEvent, id: string]; + selected: [event: MouseEvent, id: string]; contexted: [event: MouseEvent, id: string]; }>(); diff --git a/resources/js/components/gallery/albumModule/PhotoThumbPanelList.vue b/resources/js/components/gallery/albumModule/PhotoThumbPanelList.vue index 698c1bea918..5818664b36b 100644 --- a/resources/js/components/gallery/albumModule/PhotoThumbPanelList.vue +++ b/resources/js/components/gallery/albumModule/PhotoThumbPanelList.vue @@ -38,6 +38,7 @@ import { useRoute } from "vue-router"; import { useLayoutStore } from "@/stores/LayoutState"; import { useAlbumStore } from "@/stores/AlbumState"; import { useCatalogStore } from "@/stores/CatalogState"; +import { useTogglablesStateStore } from "@/stores/ModalsState"; const props = defineProps<{ photos: App.Http.Resources.Models.PhotoResource[]; @@ -50,6 +51,9 @@ const lycheeStore = useLycheeStateStore(); const layoutStore = useLayoutStore(); const albumStore = useAlbumStore(); const catalogStore = useCatalogStore(); +const togglableStore = useTogglablesStateStore(); + +const { is_touch_select_mode } = storeToRefs(togglableStore); const isBuyable = computed(() => catalogStore.catalog?.album_purchasable !== undefined && catalogStore.catalog.album_purchasable !== null); const { is_timeline_left_border_visible } = storeToRefs(lycheeStore); @@ -69,7 +73,7 @@ const emits = defineEmits<{ }>(); function maySelect(id: string, e: MouseEvent) { - if (ctrlKeyState.value || metaKeyState.value || shiftKeyState.value) { + if (is_touch_select_mode.value || ctrlKeyState.value || metaKeyState.value || shiftKeyState.value) { emits("selected", id, e); return; } diff --git a/resources/js/components/gallery/albumModule/thumbs/AlbumThumb.vue b/resources/js/components/gallery/albumModule/thumbs/AlbumThumb.vue index c22ef4e4f06..a75ba11871d 100644 --- a/resources/js/components/gallery/albumModule/thumbs/AlbumThumb.vue +++ b/resources/js/components/gallery/albumModule/thumbs/AlbumThumb.vue @@ -64,6 +64,22 @@ + +
+ +
+ +