Add support for toggle select on mobile view

lang/ar/gallery.php

@@ -140,6 +140,8 @@
         'header_photos' => 'الصور',
         'show_highlighted' => 'Filter highlighted images',
         'copy_highlighted_names' => 'Copy highlighted photo names to clipboard',
+        'toggle_touch_select' => 'Toggle selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'لا يوجد شيء هنا',
         'upload' => 'رفع الصور',
         'tabs' => [

lang/bg/gallery.php

@@ -140,6 +140,8 @@
         'header_photos' => 'Снимки',
         'show_highlighted' => 'Филтрирай отбелязаните снимки',
         'copy_highlighted_names' => 'Копирай имената на маркираните снимки',
+        'toggle_touch_select' => 'Toggle selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Няма какво да се покаже',
         'upload' => 'Качване на снимки',
         'tabs' => [

lang/cz/gallery.php

@@ -140,6 +140,8 @@
         'header_photos' => 'Fotografie',
         'show_highlighted' => 'Filtrovat zvýrazněné obrázky',
         'copy_highlighted_names' => 'Kopírovat názvy zvýrazněných fotografií do schránky',
+        'toggle_touch_select' => 'Toggle selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Zde není nic k vidění',
         'upload' => 'Nahrát fotografie',
         'tabs' => [

lang/de/gallery.php

@@ -139,6 +139,8 @@
         'header_photos' => 'Fotos',
         'show_highlighted' => 'Favoriten filtern',
         'copy_highlighted_names' => 'Namen der Favoriten in die Zwischenablage kopieren',
+        'toggle_touch_select' => 'Toggle selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Hier gibt es nichts zu sehen',
         'upload' => 'Fotos hochladen',
         'tabs' => [

lang/el/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 selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Nothing to see here',
         'upload' => 'Upload photos',
         'tabs' => [

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 selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Nothing to see here',
         'upload' => 'Upload photos',
         'tabs' => [

lang/es/gallery.php

@@ -139,6 +139,8 @@
         'header_photos' => 'Fotos',
         'show_highlighted' => 'Filter highlighted images',
         'copy_highlighted_names' => 'Copy highlighted photo names to clipboard',
+        'toggle_touch_select' => 'Toggle selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'No hay nada que ver aquí',
         'upload' => 'Subir fotos',
         'tabs' => [

lang/fa/gallery.php

@@ -140,6 +140,8 @@
         'header_photos' => 'عکس‌ها',
         'show_highlighted' => 'Filter highlighted images',
         'copy_highlighted_names' => 'Copy highlighted photo names to clipboard',
+        'toggle_touch_select' => 'Toggle selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'اینجا چیزی برای نمایش نیست',
         'upload' => 'بارگذاری عکس‌ها',
         'tabs' => [

lang/fr/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 selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Rien à voir ici',
         'upload' => 'Téléverser des photos',
         'tabs' => [

lang/hu/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 selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Nothing to see here',
         'upload' => 'Upload photos',
         'tabs' => [

lang/it/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 selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Nothing to see here',
         'upload' => 'Upload photos',
         'tabs' => [

lang/ja/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 selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Nothing to see here',
         'upload' => 'Upload photos',
         'tabs' => [

lang/nl/gallery.php

@@ -140,6 +140,8 @@
         'header_photos' => 'Foto’s',
         'show_highlighted' => 'Filter highlighted images',
         'copy_highlighted_names' => 'Copy highlighted photo names to clipboard',
+        'toggle_touch_select' => 'Toggle selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Niets te zien hier',
         'upload' => 'Foto’s uploaden',
         'tabs' => [

lang/no/gallery.php

@@ -139,6 +139,8 @@
         'header_photos' => 'Bilder',
         'show_highlighted' => 'Filter highlighted images',
         'copy_highlighted_names' => 'Copy highlighted photo names to clipboard',
+        'toggle_touch_select' => 'Toggle selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Ingenting å se her',
         'upload' => 'Last opp bilder',
         'tabs' => [

lang/pl/gallery.php

@@ -140,6 +140,8 @@
         'header_photos' => 'Zdjęcia',
         'show_highlighted' => 'Filter highlighted images',
         'copy_highlighted_names' => 'Copy highlighted photo names to clipboard',
+        'toggle_touch_select' => 'Toggle selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Nie ma tu nic do oglądania',
         'upload' => 'Przesyłanie zdjęć',
         'tabs' => [

lang/pt/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 selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Nothing to see here',
         'upload' => 'Upload photos',
         'tabs' => [

lang/ru/gallery.php

@@ -140,6 +140,8 @@
         'header_photos' => 'Фотографии',
         'show_highlighted' => 'Filter highlighted images',
         'copy_highlighted_names' => 'Copy highlighted photo names to clipboard',
+        'toggle_touch_select' => 'Toggle selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Здесь ничего нет',
         'upload' => 'Загрузить фотографии',
         'tabs' => [

lang/sk/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 selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Nothing to see here',
         'upload' => 'Upload photos',
         'tabs' => [

lang/sv/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 selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Nothing to see here',
         'upload' => 'Upload photos',
         'tabs' => [

lang/tr/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 selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Nothing to see here',
         'upload' => 'Upload photos',
         'tabs' => [

lang/vi/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 selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Nothing to see here',
         'upload' => 'Upload photos',
         'tabs' => [

lang/zh_CN/gallery.php

@@ -140,6 +140,8 @@
         'header_photos' => '照片',
         'show_highlighted' => 'Filter highlighted images',
         'copy_highlighted_names' => 'Copy highlighted photo names to clipboard',
+        'toggle_touch_select' => 'Toggle selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => '这里什么都没有',
         'upload' => '上传照片',
         'tabs' => [

lang/zh_TW/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 selection mode',
+        'photo_actions' => 'Photo actions',
         'no_results' => 'Nothing to see here',
         'upload' => 'Upload photos',
         'tabs' => [

resources/js/components/gallery/albumModule/AlbumListItem.vue

@@ -1,13 +1,26 @@
 <template>
 	<div
-		class="group flex items-center gap-4 px-3 py-0.5 cursor-pointer hover:bg-primary-400/10 flex-row"
+		class="group relative flex items-center gap-4 px-3 py-0.5 cursor-pointer hover:bg-primary-400/10 flex-row"
 		:class="{
 			'bg-primary-100 dark:bg-primary-900/50': isSelected,
 		}"
 		:data-album-id="album.id"
-		@click="propagateClicked($event, album.id)"
+		@click="maySelect($event, album.id)"
 		@contextmenu.prevent="propagateContexted($event, album.id)"
 	>
+		<!-- Touch select overlay: sits above router-links so they don't capture clicks -->
+		<div v-if="is_touch_select_mode" class="absolute inset-0 z-10" />
+		<!-- Touch select mode indicator -->
+		<div
+			v-if="is_touch_select_mode"
+			class="relative z-20 shrink-0 w-5 h-5 rounded-full flex items-center justify-center"
+			:class="{
+				'bg-primary-500 border-2 border-white': isSelected,
+				'border-2 border-surface-400 bg-surface-100 dark:bg-surface-800': !isSelected,
+			}"
+		>
+			<i v-if="isSelected" class="pi pi-check text-white" style="font-size: 0.6rem" />
+		</div>
 		<!-- Thumbnail -->
 		<router-link
 			:to="{ name: 'album', params: { albumId: album.id } }"
@@ -79,11 +92,14 @@ import { useLycheeStateStore } from "@/stores/LycheeState";
 import { useAlbumsStore } from "@/stores/AlbumsState";
 import ListBadge from "./thumbs/ListBadge.vue";
 import { usePropagateAlbumEvents } from "@/composables/album/propagateEvents";
+import { useTogglablesStateStore } from "@/stores/ModalsState";
+import { storeToRefs } from "pinia";
 
 const albumStore = useAlbumStore();
 const albumsStore = useAlbumsStore();
-
 const lycheeStore = useLycheeStateStore();
+const togglableStore = useTogglablesStateStore();
+const { is_touch_select_mode } = storeToRefs(togglableStore);
 
 defineProps<{
 	album: App.Http.Resources.Models.ThumbAlbumResource;
@@ -92,11 +108,20 @@ defineProps<{
 
 const emits = defineEmits<{
 	clicked: [event: MouseEvent, id: string];
+	selected: [event: MouseEvent, id: string];
 	contexted: [event: MouseEvent, id: string];
 }>();
 
 const { propagateClicked, propagateContexted } = usePropagateAlbumEvents(emits);
 
+function maySelect(e: MouseEvent, id: string) {
+	if (is_touch_select_mode.value) {
+		emits("selected", e, id);
+		return;
+	}
+	propagateClicked(e, id);
+}
+
 const aspectRatio = computed(
 	() => albumStore.config?.album_thumb_css_aspect_ratio ?? albumsStore.rootConfig?.album_thumb_css_aspect_ratio ?? "aspect-square",
 );

resources/js/components/gallery/albumModule/AlbumListView.vue

@@ -6,6 +6,7 @@
 				:album="album"
 				:is-selected="selectedIds.includes(album.id)"
 				@clicked="propagateClicked"
+				@selected="(e: MouseEvent, id: string) => emits('selected', e, id)"
 				@contexted="propagateContexted"
 			/>
 		</template>
@@ -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];
 }>();
 

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"
 		/>
 		<template v-if="albumStore.album && albumStore.config && userStore.isLoaded">
 			<div id="galleryView" class="relative flex flex-wrap content-start w-full justify-start overflow-y-auto h-full select-none">
@@ -58,6 +59,7 @@
 						:selected-albums="selectedAlbumsIds"
 						:is-timeline="albumStore.config.is_album_timeline_enabled"
 						@clicked="albumSelect"
+						@selected="albumSelect"
 						@contexted="contextMenuAlbumOpen"
 					/>
 					<!-- Pagination for albums -->
@@ -244,6 +246,14 @@ function photoClick(photoId: string, _e: MouseEvent) {
 	router.push(photoRoute(photoId));
 }
 
+function openContextMenuFromHeader(e: MouseEvent): void {
+	if (selectedPhotosIds.value.length > 0) {
+		contextMenuPhotoOpen(selectedPhotosIds.value[0], e);
+	} else if (selectedAlbumsIds.value.length > 0) {
+		contextMenuAlbumOpen(e, selectedAlbumsIds.value[0]);
+	}
+}
+
 function goToPhotosPage(page: number) {
 	albumStore.loadPhotos(page, false);
 }

resources/js/components/gallery/albumModule/AlbumThumbPanel.vue

@@ -14,13 +14,15 @@
 				:albums="props.albums"
 				:selected-ids="props.selectedAlbums"
 				@clicked="propagateClicked"
+				@selected="propagateSelected"
 				@contexted="propagateContexted"
 			/>
 			<AlbumThumbPanelList
 				v-else
 				:albums="props.albums"
 				:selected-albums="props.selectedAlbums"
 				@clicked="propagateClicked"
+				@selected="propagateSelected"
 				@contexted="propagateContexted"
 			/>
 		</div>
@@ -113,10 +115,15 @@ const props = defineProps<{
 // bubble up.
 const emits = defineEmits<{
 	clicked: [event: MouseEvent, id: string];
+	selected: [event: MouseEvent, id: string];
 	contexted: [event: MouseEvent, id: string];
 }>();
 const { propagateClicked, propagateContexted } = usePropagateAlbumEvents(emits);
 
+function propagateSelected(event: MouseEvent, id: string) {
+	emits("selected", event, id);
+}
+
 const { spliter, verifyOrder } = useSplitter();
 
 const albumsTimeLine = computed<SplitData<App.Http.Resources.Models.ThumbAlbumResource>[]>(() =>

resources/js/components/gallery/albumModule/AlbumThumbPanelList.vue

@@ -6,6 +6,7 @@
 			:cover_id="null"
 			:is-selected="props.selectedAlbums.includes(album.id)"
 			@click="propagateClicked($event, album.id)"
+			@touch-select="(e: MouseEvent) => emits('selected', e, album.id)"
 			@contextmenu.prevent="propagateContexted($event, album.id)"
 		/>
 	</template>
@@ -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];
 }>();
 

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;
 	}