Click image to select.

packages/gallery/src/interface/allImages.js

@@ -27,7 +27,7 @@ export function AllImagesView(vm, params, key, opts) {
 	const images = container([], pouchDocArrayHash);
 	const hoverId = prop(null);
 	const selectedIds = container(new Set(), hashSet);
-	const mode = computed(sIds => (sIds.size > 0 ? 'select' : 'view'), [selectedIds]);
+	const selectMode = computed(sIds => sIds.size > 0, [selectedIds]);
 
 	const sections = computed(
 		imageArr => {
@@ -99,6 +99,14 @@ export function AllImagesView(vm, params, key, opts) {
 		return parentNode;
 	}
 
+	function photoClick(evt, node, vm) {
+		if (selectMode()) {
+			toggleSelect(evt, node, vm);
+		} else {
+			// todo implement zoom-view
+		}
+	}
+
 	function toggleSelect(evt, node, vm) {
 		const imageNode = nodeParentWithType(node, 'image');
 		const id = imageNode.data._id;
@@ -120,7 +128,7 @@ export function AllImagesView(vm, params, key, opts) {
 		}
 	}
 
-	subscribeToRender(vm, [selectedIds, images, hoverId, mode]);
+	subscribeToRender(vm, [selectedIds, images, hoverId, selectMode]);
 
 	function renderSection([title, _images]) {
 		return AlbumTemplate({
@@ -128,7 +136,7 @@ export function AllImagesView(vm, params, key, opts) {
 			id: title,
 			photos: _images,
 			selectedIds,
-			mode: mode()
+			selectMode: selectMode()
 		});
 	}
 
@@ -140,7 +148,8 @@ export function AllImagesView(vm, params, key, opts) {
 					'.photoSelect .icon svg path': toggleSelect,
 					'.photoSelect .icon': toggleSelect,
 					'.albumSelectButton .icon': toggleAll,
-					'.albumSelectButton .icon svg path': toggleAll
+					'.albumSelectButton .icon svg path': toggleAll,
+					'.photoOverlay': photoClick
 				}
 			},
 			Object.entries(sections()).map(renderSection)

packages/gallery/src/interface/components/albumPhotoTemplate.js

@@ -19,7 +19,7 @@ const full = 'opacity: 1;';
 
 export function AlbumPhotoTemplate(vm, { doc }) {
 	const photoSelectButtonRef = `pSB${doc._id}`;
-	const photoBackgroundRef = `pBkd${doc._id}`;
+	const photoOverlayRef = `pBkd${doc._id}`;
 	const hover = prop(false);
 	const hoverSelectButton = prop(false);
 
@@ -33,7 +33,8 @@ export function AlbumPhotoTemplate(vm, { doc }) {
 				onmouseleave: [hover, false],
 				css: {
 					cursor: selectMode ? 'pointer' : 'zoom-in'
-				}
+				},
+				_data: doc
 			},
 			[
 				AttachmentImageView(doc, {
@@ -44,7 +45,6 @@ export function AlbumPhotoTemplate(vm, { doc }) {
 				photoSelectButton(
 					{
 						_ref: photoSelectButtonRef,
-						_data: doc,
 						class: 'photoSelect',
 						css: {
 							backgroundColor: isSelected ? 'white' : 'transparent',
@@ -61,8 +61,9 @@ export function AlbumPhotoTemplate(vm, { doc }) {
 						})
 					]
 				),
-				photoBackdrop({
-					_ref: photoBackgroundRef,
+				photoOverlay({
+					_ref: photoOverlayRef,
+					class: 'photoOverlay',
 					css: {
 						transform: isSelected ? 'translateZ(-50px)' : null,
 						opacity: selectMode || hover() ? 0.7 : 0
@@ -101,7 +102,7 @@ const photoSelectButton = styled(DEFAULT_TRANSITION, {
 	cursor: 'pointer'
 });
 
-const photoBackdrop = styled(CSS_FULL_SIZE, DEFAULT_TRANSITION, {
+const photoOverlay = styled(CSS_FULL_SIZE, DEFAULT_TRANSITION, {
 	position: 'absolute', // Unnecessary but helps with a rendering bug in Chrome. https://gitlab.com/explorigin/gallery/issues/1
 	top: '0px',
 	left: '0px',

packages/gallery/src/interface/components/albumTemplate.js

@@ -11,9 +11,8 @@ import { AlbumPhotoTemplate } from './albumPhotoTemplate.js';
 import { extractID } from '../../utils/conversion.js';
 
 export function AlbumTemplate(params) {
-	const { id, title, photos, selectedIds, mode } = params;
+	const { id, title, photos, selectedIds, selectMode } = params;
 	const albumSelectButtonRef = `albSel${id}`;
-	const selectMode = mode === 'select';
 
 	function photoMap(doc) {
 		return vw(