Allow the backbutton to be configurable. Make it an X for selection.

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'
 		});
 	}
 

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
 								})
 							]

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'