From cfdc78ab4ca766ffbb3ed0cf24c9615a2ab10c41 Mon Sep 17 00:00:00 2001 From: Timothy Farrell Date: Sun, 3 Dec 2017 14:15:36 -0600 Subject: [PATCH] Basic button positions and styles --- packages/gallery/src/interface/allImages.js | 3 +- .../components/albumPhotoTemplate.js | 102 ++++++++++++++++++ .../src/interface/components/albumTemplate.js | 26 ++--- packages/gallery/src/utils/domvm.js | 12 +++ 4 files changed, 129 insertions(+), 14 deletions(-) create mode 100644 packages/gallery/src/interface/components/albumPhotoTemplate.js diff --git a/packages/gallery/src/interface/allImages.js b/packages/gallery/src/interface/allImages.js index 22995a1..48d3c9d 100644 --- a/packages/gallery/src/interface/allImages.js +++ b/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() }); }; } diff --git a/packages/gallery/src/interface/components/albumPhotoTemplate.js b/packages/gallery/src/interface/components/albumPhotoTemplate.js new file mode 100644 index 0000000..b0ee90f --- /dev/null +++ b/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)' +}); diff --git a/packages/gallery/src/interface/components/albumTemplate.js b/packages/gallery/src/interface/components/albumTemplate.js index 490cc73..debe956 100644 --- a/packages/gallery/src/interface/components/albumTemplate.js +++ b/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'; - -function setRefStyle(ref, style, evt, node, vm) { - vm.refs[ref].patch({ style }); -} +import { AlbumPhotoTemplate } from './albumPhotoTemplate.js'; export function AlbumTemplate(params) { const { id, title, photos } = params; + const albumSelectButtonRef = `albSel${id}`; return Album( { - onmouseenter: [setRefStyle, 'selectButton', 'opacity: 0.7;'], - onmouseleave: [setRefStyle, 'selectButton', 'opacity: 0;'] + onmouseenter: [patchRefStyle, albumSelectButtonRef, 'opacity: 0.7;'], + onmouseleave: [patchRefStyle, albumSelectButtonRef, 'opacity: 0;'] }, [ albumTitle([ title, albumSelectButton( { - _ref: 'selectButton', - onmouseenter: [setRefStyle, 'selectButton', 'opacity: 1;'], - onmouseleave: [setRefStyle, 'selectButton', 'opacity: 0.7;'] + _ref: albumSelectButtonRef, + onmouseenter: [patchNodeStyle, 'opacity: 1;'], + onmouseleave: [patchNodeStyle, 'opacity: 0.7;'] }, [Icon({ name: 'check_circle', size: 0.25 })] ) ]), - albumContent() + albumContent(photos.map(AlbumPhotoTemplate)) ] ); } diff --git a/packages/gallery/src/utils/domvm.js b/packages/gallery/src/utils/domvm.js index de52c59..6eeeed8 100644 --- a/packages/gallery/src/utils/domvm.js +++ b/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 }); +}