diff --git a/packages/gallery/src/interface/allImages.js b/packages/gallery/src/interface/allImages.js index 22fbda2..a3d0406 100644 --- a/packages/gallery/src/interface/allImages.js +++ b/packages/gallery/src/interface/allImages.js @@ -6,7 +6,8 @@ import { defineView, nodeParentWithType, defineView as vw, - defineElement as el + defineElement as el, + injectView as iv } from '../utils/domvm.js'; import { error } from '../services/console.js'; @@ -26,7 +27,7 @@ export function uploadImages(evt, files) { } export function AllImagesView(vm, params, key, context) { - const { appbar } = context; + const { appbar, appbarView } = context; const model = prop({}, pouchDocHash); const images = container([], pouchDocArrayHash); @@ -202,12 +203,13 @@ export function AllImagesView(vm, params, key, context) { return function() { return allImagesContainer( { - class: 'allImages', - onscroll: handleContentScroll + class: 'allImages' }, [ + iv(appbarView), allImagesContent( { + onscroll: handleContentScroll, onclick: { '.photoSelect .icon svg path': toggleSelect, '.photoSelect .icon': toggleSelect, @@ -237,11 +239,10 @@ const uploadButton = styled( CLICKABLE ); -const allImagesContainer = styled( +const allImagesContainer = styled(FILL_STYLE); +const allImagesContent = styled( { - overflow: 'scroll', - marginTop: '58px' + overflow: 'scroll' }, FILL_STYLE ); -const allImagesContent = styled({}); diff --git a/packages/gallery/src/interface/focus.js b/packages/gallery/src/interface/focus.js index 50399c6..70c33ca 100644 --- a/packages/gallery/src/interface/focus.js +++ b/packages/gallery/src/interface/focus.js @@ -5,7 +5,8 @@ import { defineView, nodeParentWithType, fullViewportSize, - defineElement as el + defineElement as el, + injectView as iv } from '../utils/domvm.js'; import { router } from '../services/router.js'; @@ -16,9 +17,9 @@ import { Overlay } from './components/overlay.js'; import { Icon } from './components/icon.js'; import { styled, injectStyle } from '../services/style.js'; import { error } from '../services/console.js'; -import { CLICKABLE } from './styles.js'; +import { CLICKABLE, FILL_STYLE } from './styles.js'; -export function FocusView(vm, params, key, { appbar }) { +export function FocusView(vm, params, key, { appbar, appbarView }) { const id = prop(); const doc = prop(null, pouchDocHash); const { body } = document; @@ -120,26 +121,29 @@ export function FocusView(vm, params, key, { appbar }) { } return focusContainer({ class: 'focus' }, [ - prevLink() - ? prevClickZone({ href: prevLink() }, [ - Icon({ - name: 'chevron_left', - size: 0.75 - }) - ]) - : null, - AttachmentImageView({ - src: _id ? doc().sizes.full : null, - style: imageStyle() - }), - nextLink() - ? nextClickZone({ href: nextLink() }, [ - Icon({ - name: 'chevron_right', - size: 0.75 - }) - ]) - : null + iv(appbarView), + focusContent([ + prevLink() + ? prevClickZone({ href: prevLink() }, [ + Icon({ + name: 'chevron_left', + size: 0.75 + }) + ]) + : null, + AttachmentImageView({ + src: _id ? doc().sizes.full : null, + style: imageStyle() + }), + nextLink() + ? nextClickZone({ href: nextLink() }, [ + Icon({ + name: 'chevron_right', + size: 0.75 + }) + ]) + : null + ]) ]); }; } @@ -169,12 +173,22 @@ const trashButtonContainer = styled( CLICKABLE ); -const focusContainer = styled({ - display: 'flex', +const focusContainer = styled( + { + display: 'flex', + overflow: 'hidden', + flexDirection: 'column', + alignItems: 'center' + }, + FILL_STYLE +); + +const focusContent = styled({ flex: 1, - justifyContent: 'center', - alignItems: 'center', - overflow: 'hidden' + overflow: 'hidden', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center' }); const nextClickZone = styled( diff --git a/packages/gallery/src/interface/gallery.js b/packages/gallery/src/interface/gallery.js index f65bd77..4a151a6 100644 --- a/packages/gallery/src/interface/gallery.js +++ b/packages/gallery/src/interface/gallery.js @@ -5,8 +5,7 @@ import { renderSwitch, defineView as vw, createView as cv, - defineElement as el, - injectView as iv + defineElement as el } from '../utils/domvm.js'; import { ImageType } from '../data/image.js'; import { AlbumType } from '../data/album.js'; @@ -22,10 +21,11 @@ import { FILL_STYLE } from './styles.js'; export function GalleryView(vm) { const context = {}; - const appbar = cv(AppBarView, {}, 'appbar', context); const routeName = prop(); const routeParams = prop(); + context.appbarView = cv(AppBarView, {}, 'appbar', context); + routeChanged.subscribe(function onRouteChange(name, params) { routeName(name); routeParams(params); @@ -34,7 +34,6 @@ export function GalleryView(vm) { function renderMain() { return [ - iv(appbar), content([ renderSwitch( {