From 8c29b8fa854aa48747b59cb4c2693d48721bacf4 Mon Sep 17 00:00:00 2001
From: Timothy Farrell <tim@thecookiejar.me>
Date: Mon, 8 Jan 2018 21:09:39 -0600
Subject: [PATCH] Add a suitable welcome message

---
 packages/gallery/src/interface/allImages.js   | 30 ++++++++++++++++++-
 .../gallery/src/interface/components/icon.js  |  2 +-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/gallery/src/interface/allImages.js b/packages/gallery/src/interface/allImages.js
index c476686..0d91455 100644
--- a/packages/gallery/src/interface/allImages.js
+++ b/packages/gallery/src/interface/allImages.js
@@ -16,6 +16,7 @@ import { pouchDocArrayHash, pouchDocHash, hashSet, extractID } from '../utils/co
 import { SectionView } from './sectionView.js';
 import { Icon } from './components/icon.js';
 import { AppBar } from './components/appbar.js';
+import { Overlay } from './components/overlay.js';
 import { injectStyle, styled } from '../services/style.js';
 import { CLICKABLE, FILL_STYLE } from './styles.js';
 
@@ -185,6 +186,9 @@ export function AllImagesView(vm, params) {
 	}
 
 	return function() {
+		const _sections = sections();
+		const hasPhotos = !!_sections.length;
+
 		return allImagesContainer(
 			{
 				class: 'allImages'
@@ -207,7 +211,31 @@ export function AllImagesView(vm, params) {
 							'.photoOverlay': photoClick
 						}
 					},
-					sections().map(renderSection)
+					hasPhotos
+						? _sections.map(renderSection)
+						: [
+								Overlay([
+									el('h1', 'Welcome'),
+									el('p', [
+										'To get started, drag some photos from your desktop or click on the ',
+										el(
+											'label',
+											{
+												for: 'uploadButton',
+												style: Object.assign({ verticalAlign: 'top', margin: '0px 3px' }, CLICKABLE)
+											},
+											[
+												Icon({
+													name: 'upload',
+													size: 0.75,
+													title: 'Upload'
+												})
+											]
+										),
+										'button.'
+									])
+								])
+						  ]
 				)
 			]
 		);
diff --git a/packages/gallery/src/interface/components/icon.js b/packages/gallery/src/interface/components/icon.js
index a85fab4..01dd457 100644
--- a/packages/gallery/src/interface/components/icon.js
+++ b/packages/gallery/src/interface/components/icon.js
@@ -10,7 +10,7 @@ const ICON_PATHS = {
 		'M13.714 6.286q-2.643 0-4.875 1.304T5.3 11.126 4 16t1.303 4.876 3.536 3.536 4.872 1.304 4.875-1.304 3.535-3.536T23.43 16t-1.305-4.874T18.59 7.59t-4.876-1.304zM27.43 16q0 3.732-1.84 6.884t-4.99 4.99-6.885 1.84-6.884-1.84-4.99-4.99T0 16t1.84-6.884 4.99-4.99 6.885-1.84 6.884 1.84 4.99 4.99T27.43 16z'
 	],
 	upload: [
-		'32 38',
+		'34 32',
 		'M22.857 15.429q0-0.25-0.161-0.411l-6.286-6.286q-0.161-0.161-0.411-0.161t-0.411 0.161l-6.268 6.268q-0.179 0.214-0.179 0.429 0 0.25 0.161 0.411t0.411 0.161h4v6.286q0 0.232 0.17 0.402t0.402 0.17h3.429q0.232 0 0.402-0.17t0.17-0.402v-6.286h4q0.232 0 0.402-0.17t0.17-0.402zM34.286 20.571q0 2.839-2.009 4.848t-4.848 2.009h-19.429q-3.304 0-5.652-2.348t-2.348-5.652q0-2.321 1.25-4.286t3.357-2.946q-0.036-0.536-0.036-0.768 0-3.786 2.679-6.464t6.464-2.679q2.786 0 5.098 1.554t3.366 4.125q1.268-1.107 2.964-1.107 1.893 0 3.232 1.339t1.339 3.232q0 1.357-0.732 2.464 2.321 0.554 3.813 2.42t1.491 4.259z'
 	],
 	trash: [