Add appbar fade on focus view.

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

@@ -9,7 +9,7 @@ import { CLICKABLE } from '../styles.js';
 let seq = 0;
 
 export function AppBarView(vm, params, key, opts) {
-	const stateStack = container([], arr => arr.length);
+	const stateStack = container([], arr => arr.length && arr[0]._seq);
 	const companionScrollTop = prop(0);
 
 	const currentState = computed(stack => stack[0] || {}, [stateStack]);
@@ -51,9 +51,16 @@ export function AppBarView(vm, params, key, opts) {
 		}
 	}
 
+	function replaceState(newState) {
+		companionScrollTop(0);
+		stateStack._.shift();
+		stateStack.unshift(Object.assign({ _seq: seq++ }, newState));
+	}
+
 	opts.appbar = {
 		pushState,
 		popState,
+		replaceState,
 		companionScrollTop
 	};
 
@@ -88,7 +95,8 @@ const appBarContainer = styled({
 	zIndex: 1000,
 	display: 'flex',
 	alignItems: 'center',
-	width: '100%'
+	width: '100%',
+	transition: 'opacity .13s cubic-bezier(0.0,0.0,0.2,1)'
 });
 
 const upButtonContainer = styled(

packages/gallery/src/interface/focus.js

@@ -25,6 +25,8 @@ export function FocusView(vm, params, key, { appbar, appbarView }) {
 	const { body } = document;
 	const nextLink = prop();
 	const prevLink = prop();
+	const mouseActive = prop(true);
+	let mouseMoveTimeout = null;
 
 	const imageStyle = computed(
 		({ width: iw, height: ih }, { width: vw, height: vh }) => {
@@ -49,6 +51,17 @@ export function FocusView(vm, params, key, { appbar, appbarView }) {
 		},
 		[doc, fullViewportSize]
 	);
+	const appbarState = computed(
+		mA => ({
+			title: '',
+			actions: renderAppBarButtons,
+			style: { position: 'fixed', opacity: mA ? 1 : 0 },
+			up: {
+				navigateTo: 'home'
+			}
+		}),
+		[mouseActive]
+	);
 
 	function navBack() {
 		appbar.popState('home');
@@ -61,6 +74,25 @@ export function FocusView(vm, params, key, { appbar, appbarView }) {
 		}
 	}
 
+	const mouseLeave = () => {
+		mouseActive(false);
+	};
+
+	const mouseMove = () => {
+		if (mouseMoveTimeout !== null) {
+			clearTimeout(mouseMoveTimeout);
+		}
+		mouseMoveTimeout = setTimeout(mouseLeave, 3000);
+		mouseActive(true);
+	};
+
+	const mouseClick = () => {
+		if (mouseMoveTimeout !== null) {
+			clearTimeout(mouseMoveTimeout);
+		}
+		mouseActive(!mouseActive());
+	};
+
 	function renderAppBarButtons() {
 		return [
 			trashButtonContainer(
@@ -78,10 +110,13 @@ export function FocusView(vm, params, key, { appbar, appbarView }) {
 	}
 
 	// Set the appbar title.
+
 	appbar.pushState({
 		title: '',
 		actions: renderAppBarButtons,
-		style: { position: 'fixed' },
+		style: {
+			position: 'fixed'
+		},
 		up: {
 			navigateTo: 'home'
 		}
@@ -94,6 +129,7 @@ export function FocusView(vm, params, key, { appbar, appbarView }) {
 			doc,
 			nextLink,
 			prevLink,
+			() => appbarState.subscribe(appbar.replaceState),
 			// Look for our image and set it.
 			() =>
 				id.subscribe(async _id => {
@@ -128,31 +164,39 @@ export function FocusView(vm, params, key, { appbar, appbarView }) {
 			return Overlay('Loading...');
 		}
 
-		return focusContainer({ class: 'focus' }, [
-			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
-			])
-		]);
+		return focusContainer(
+			{
+				class: 'focus',
+				onmousemove: mouseMove,
+				onmouseleave: mouseLeave,
+				onclick: mouseClick
+			},
+			[
+				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
+				])
+			]
+		);
 	};
 }