Basic button positions and styles

packages/gallery/src/interface/allImages.js

@@ -4,7 +4,6 @@ import { subscribeToRender, defineView, defineElement as el } from '../utils/dom
 
 import { ImageType } from '../data/image.js';
 import { pouchDocArrayHash, pouchDocHash } from '../utils/conversion.js';
-import { ThumbnailTemplate } from './components/thumbnail.js';
 import { AlbumTemplate } from './components/albumTemplate.js';
 import { injectStyle, styled } from '../services/style.js';
 
@@ -64,7 +63,7 @@ export function AllImagesView(vm, params, key, opts) {
 		return AlbumTemplate({
 			title: 'Test',
 			id: 1,
-			photos: []
+			photos: images()
 		});
 	};
 }

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

@@ -0,0 +1,102 @@
+import {
+	defineView as vw,
+	defineElement as el,
+	patchRefStyleMap,
+	patchNodeStyle
+} from '../../utils/domvm.js';
+import { injectStyle, styled } from '../../services/style.js';
+
+import { Icon } from './icon.js';
+import { AttachmentImageView } from './attachmentImage.js';
+
+export function AlbumPhotoTemplate(doc, isSelected, selectMode) {
+	const photoSelectButtonRef = `pSB${doc._id}`;
+	const photoBackgroundRef = `pBkd${doc._id}`;
+
+	return photoContainer(
+		{
+			onmouseenter: [
+				patchRefStyleMap,
+				{ [photoSelectButtonRef]: 'opacity: 0.7;', [photoBackgroundRef]: 'opacity: 0.7;' }
+			],
+			onmouseleave: [
+				patchRefStyleMap,
+				{ [photoSelectButtonRef]: 'opacity: 0;', [photoBackgroundRef]: 'opacity: 0;' }
+			]
+		},
+		[
+			vw(AttachmentImageView, doc, doc._hash()),
+			photoSelectButton(
+				{
+					_ref: photoSelectButtonRef,
+					css: {
+						// backgroundColor: isSelected ? 'white' : 'transparent',
+						// opacity: isSelected ? 1 : selectMode || _imageHover ? 0.7 : 0,
+					},
+					onmouseenter: [patchNodeStyle, 'opacity: 1;'],
+					onmouseleave: [patchNodeStyle, 'opacity: 0.7;']
+				},
+				[
+					Icon({
+						name: 'check_circle',
+						size: 0.75,
+						fill: '#fff' // isSelected ? '#00C800' : '#fff'
+					})
+				]
+			),
+			photoBackdrop({
+				_ref: photoBackgroundRef,
+				css: {
+					// transform: isSelected ? 'translateZ(-50px)' : null,
+					// opacity: selectMode || _imageHover ? 0.7 : 0,
+				}
+			})
+		]
+	);
+}
+
+const IMAGE_MARGIN = 2;
+
+const CSS_FULL_SIZE = {
+	width: '100%',
+	height: '100%'
+};
+
+const photoContainer = styled({
+	position: 'relative',
+	perspective: '1000px',
+	backgroundColor: '#eee',
+	margin: `${IMAGE_MARGIN}px`,
+	cursor: 'zoom-in'
+});
+
+const image = styled('img', CSS_FULL_SIZE, {
+	position: 'absolute',
+	top: 0,
+	left: 0,
+	transition: 'transform .135s cubic-bezier(0.0,0.0,0.2,1)'
+});
+
+const photoSelectButton = styled({
+	position: 'absolute',
+	top: '4%',
+	left: '4%',
+	zIndex: 2,
+	display: 'flex',
+	transition:
+		'transform .135s cubic-bezier(0.0,0.0,0.2,1), opacity .135s cubic-bezier(0.0,0.0,0.2,1)',
+	borderRadius: '50%',
+	padding: '2px',
+	backgroundColor: 'transparent',
+	opacity: 0,
+	cursor: 'pointer'
+});
+
+const photoBackdrop = styled(CSS_FULL_SIZE, {
+	top: '0px',
+	left: '0px',
+	zIndex: 1,
+	transition:
+		'transform .135s cubic-bezier(0.0,0.0,0.2,1), opacity .135s cubic-bezier(0.0,0.0,0.2,1)',
+	backgroundImage: 'linear-gradient(to bottom,rgba(0,0,0,0.26),transparent 56px,transparent)'
+});

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

@@ -1,34 +1,36 @@
-import { defineView as vw, defineElement as el } from '../../utils/domvm.js';
+import {
+	defineView as vw,
+	defineElement as el,
+	patchRefStyle,
+	patchNodeStyle
+} from '../../utils/domvm.js';
 import { injectStyle, styled } from '../../services/style.js';
 
 import { Icon } from './icon.js';
-import { AttachmentImageView } from './attachmentImage.js';
+import { AlbumPhotoTemplate } from './albumPhotoTemplate.js';
-
-function setRefStyle(ref, style, evt, node, vm) {
-	vm.refs[ref].patch({ style });
-}
 
 export function AlbumTemplate(params) {
 	const { id, title, photos } = params;
+	const albumSelectButtonRef = `albSel${id}`;
 
 	return Album(
 		{
-			onmouseenter: [setRefStyle, 'selectButton', 'opacity: 0.7;'],
+			onmouseenter: [patchRefStyle, albumSelectButtonRef, 'opacity: 0.7;'],
-			onmouseleave: [setRefStyle, 'selectButton', 'opacity: 0;']
+			onmouseleave: [patchRefStyle, albumSelectButtonRef, 'opacity: 0;']
 		},
 		[
 			albumTitle([
 				title,
 				albumSelectButton(
 					{
-						_ref: 'selectButton',
+						_ref: albumSelectButtonRef,
-						onmouseenter: [setRefStyle, 'selectButton', 'opacity: 1;'],
+						onmouseenter: [patchNodeStyle, 'opacity: 1;'],
-						onmouseleave: [setRefStyle, 'selectButton', 'opacity: 0.7;']
+						onmouseleave: [patchNodeStyle, 'opacity: 0.7;']
 					},
 					[Icon({ name: 'check_circle', size: 0.25 })]
 				)
 			]),
-			albumContent()
+			albumContent(photos.map(AlbumPhotoTemplate))
 		]
 	);
 }

packages/gallery/src/utils/domvm.js

@@ -7,3 +7,15 @@ export function subscribeToRender(vm, subscribables, subscriptions) {
 
 	vm.config({ hooks: { willUnmount: () => subList.forEach(s => s()) } });
 }
+
+export function patchRefStyle(ref, style, evt, node, vm) {
+	vm.refs[ref].patch({ style });
+}
+
+export function patchRefStyleMap(refStylemap, ...args) {
+	Object.entries(refStylemap).forEach(([r, s]) => patchRefStyle(r, s, ...args));
+}
+
+export function patchNodeStyle(style, evt, node) {
+	node.patch({ style });
+}