diff --git a/packages/gallery/src/interface/allImages.js b/packages/gallery/src/interface/allImages.js index d22f76a..58208ca 100644 --- a/packages/gallery/src/interface/allImages.js +++ b/packages/gallery/src/interface/allImages.js @@ -132,7 +132,8 @@ export function AllImagesView(vm, params, key, { appbar }) { appbar.pushState({ title: appBarTitle, buttons: renderAppBarButtons, - selectMode: hasSelectedIDs() + selectMode: hasSelectedIDs(), + backButton: 'x' }); } diff --git a/packages/gallery/src/interface/components/appbar.js b/packages/gallery/src/interface/components/appbar.js index 8f1b78a..24a5fbe 100644 --- a/packages/gallery/src/interface/components/appbar.js +++ b/packages/gallery/src/interface/components/appbar.js @@ -3,22 +3,24 @@ import { prop, computed, container } from 'frptools'; import { Icon } from './icon.js'; import { defineElement as el, subscribeToRender } from '../../utils/domvm.js'; import { injectStyle, styled } from '../../services/style.js'; -import { pick } from '../../utils/conversion.js'; import { CLICKABLE } from '../styles.js'; let seq = 0; -const getSeq = pick('_seq'); export function AppBarView(vm, params, key, opts) { + let previousState = { _seq: seq }; const stateStack = container([], arr => arr.length); const companionScrollTop = prop(0); - const previousState = prop({ _seq: seq }, getSeq); const currentState = computed(stack => stack[0] || {}, [stateStack]); const title = computed(state => state.title || '', [currentState]); const renderButtons = computed(state => state.buttons, [currentState]); - const hasBackButton = computed(stack => stack.length > 1, [stateStack]); - const stateChange = computed(c => ({ newState: c, oldState: previousState() }), [currentState]); + const backButton = computed( + (state, stack) => + stack.length > 1 ? (state.backButton !== undefined ? state.backButton : 'arrow_left') : null, + [currentState, stateStack] + ); + const stateChange = computed(c => ({ newState: c, oldState: previousState }), [currentState]); const boxShadowStyle = computed( t => (t === 0 ? 'none' : `0px ${Math.min(t / 10, 3)}px 3px rgba(0, 0, 0, .2)`), @@ -30,12 +32,12 @@ export function AppBarView(vm, params, key, opts) { } function pushState(newState) { - previousState(currentState()); + previousState = currentState(); stateStack.unshift(Object.assign({ _seq: seq++ }, newState)); } function popState() { - previousState(currentState()); + previousState = currentState(); stateStack.shift(); } @@ -46,7 +48,7 @@ export function AppBarView(vm, params, key, opts) { subscribe: stateChange.subscribe }; - subscribeToRender(vm, [boxShadowStyle, renderButtons, hasBackButton, title]); + subscribeToRender(vm, [boxShadowStyle, renderButtons, backButton, title]); return (vm, params) => { const _buttons = renderButtons() || (() => {}); @@ -56,14 +58,14 @@ export function AppBarView(vm, params, key, opts) { css: { boxShadow: boxShadowStyle() } }, [ - hasBackButton() + backButton() !== null ? backButtonContainer( { onclick: popState }, [ Icon({ - name: 'arrow_left', + name: backButton(), size: 0.75 }) ] diff --git a/packages/gallery/src/interface/components/icon.js b/packages/gallery/src/interface/components/icon.js index 6f38046..a85fab4 100644 --- a/packages/gallery/src/interface/components/icon.js +++ b/packages/gallery/src/interface/components/icon.js @@ -29,6 +29,10 @@ const ICON_PATHS = { '22 32', 'M19.768 15.661l-13.25 13.25q-0.339 0.339-0.804 0.339t-0.804-0.339l-2.964-2.964q-0.339-0.339-0.339-0.804t0.339-0.804l9.482-9.482-9.482-9.482q-0.339-0.339-0.339-0.804t0.339-0.804l2.964-2.964q0.339-0.339 0.804-0.339t0.804 0.339l13.25 13.25q0.339 0.339 0.339 0.804t-0.339 0.804z' ], + x: [ + '24 24', + 'M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z' + ], unknown: [ '32 32', 'M12 6c2.203 0 3.984 1.781 3.984 3.984 0 2.484-3 2.766-3 5.016h-1.969c0-3.234 3-3 3-5.016 0-1.078-0.938-1.969-2.016-1.969s-2.016 0.891-2.016 1.969h-1.969c0-2.203 1.781-3.984 3.984-3.984zM12 20.016c4.406 0 8.016-3.609 8.016-8.016s-3.609-8.016-8.016-8.016-8.016 3.609-8.016 8.016 3.609 8.016 8.016 8.016zM12 2.016c5.531 0 9.984 4.453 9.984 9.984s-4.453 9.984-9.984 9.984-9.984-4.453-9.984-9.984 4.453-9.984 9.984-9.984zM11.016 18v-2.016h1.969v2.016h-1.969z'