Starting to reapply the layout and effects

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

@@ -43,8 +43,8 @@ export function Icon(params) {
 	const _size = (size || 1) + 1;
 	const [boxBounds, path] = ICON_PATHS[name] || ICON_PATHS.unknown;
 
-	delete otherProps.name;
-	delete otherProps.size;
+	delete attrs.name;
+	delete attrs.size;
 
 	return sv(
 		`svg.icon.${name}`,

packages/gallery/src/interface/gallery.js

@@ -7,6 +7,7 @@ import { ThumbnailTemplate } from './thumbnail.js';
 import { AlbumView } from './album.js';
 import { Dropzone } from './components/dropzone.js';
 import { Overlay } from './components/overlay.js';
+import { Icon } from './components/icon.js';
 import { router, routeChanged } from '../services/router.js';
 import { injectStyle, styled } from '../services/style.js';
 
@@ -15,7 +16,7 @@ export function GalleryView(vm) {
 		images: {
 			data: ImageType.find(
 				{
-					importing: { $exists: false }
+					['sizes.thumbnail']: { $exists: true }
 				},
 				true
 			),
@@ -31,8 +32,12 @@ export function GalleryView(vm) {
 	let laCleanup = null;
 	const title = prop('');
 
-	function uploadImages(files) {
-		Array.from(files).forEach(ImageType.upload);
+	function uploadImages(evt, files) {
+		Array.from(files || evt.currentTarget.files).forEach(ImageType.upload);
+
+		if (evt.currentTarget) {
+			evt.currentTarget.value = null;
+		}
 	}
 
 	function deleteImage(i) {
@@ -65,18 +70,49 @@ export function GalleryView(vm) {
 		});
 	});
 
-	function renderDropzone() {
+	function renderWelcomePane() {
+		return [Overlay([el('h1', 'Hi')])];
+	}
+
+	function renderDropPane() {
 		return [
-			el('a', { href: router.href('images') }, 'Images'),
-			el('a', { href: router.href('albums') }, 'Albums'),
-			el('h1', title),
-			...(title() === 'Images'
+			Overlay([
+				Icon({
+					name: 'upload',
+					size: 4
+				}),
+				el('h1', 'Drop pictures here to upload to your gallery')
+			])
+		];
+	}
+
+	function renderMain() {
+		return [
+			header([
+				el('div', { style: 'font-size: 20pt' }, 'Gallery'),
+				headerRight(
+					{
+						css: { visibility: /* selectMode */ true ? 'visible' : 'hidden' }
+					},
+					[
+						el('button', [el('label', { for: 'uploadButton' }, 'Upload')]),
+						el('input', {
+							id: 'uploadButton',
+							name: 'uploadButton',
+							type: 'file',
+							multiple: true,
+							accept: '.png,.jpg,.jpeg', // no love for gifs yet
+							onchange: uploadImages,
+							class: injectStyle({ display: 'none' })
+						})
+					]
+				)
+			]),
+			...(data().length
 				? data().map(i => {
 						return ThumbnailTemplate(i, deleteImage, i._hash());
 				  })
-				: data().map(a => {
-						return vw(AlbumView, a, a._hash());
-				  }))
+				: [renderWelcomePane()])
 		];
 	}
 
@@ -85,24 +121,15 @@ export function GalleryView(vm) {
 			return Overlay([el('h1', 'Loading...')]);
 		}
 
-		return el('.gallery', { class: slate }, [
-			header([
-				el('div', { style: 'font-size: 20pt' }, 'Gallery'),
-				headerRight(
-					{
-						css: { visibility: /* selectMode */ true ? 'visible' : 'hidden' }
-					},
-					[el('button', { onclick: addAlbum }, 'Add Album')]
-				)
-			]),
+		return el('.gallery', { class: fill }, [
 			vw(
 				Dropzone,
 				{
-					className: slate,
-					activeClassName: 'dropHover',
+					className: fill,
 					dropEffect: 'copy',
 					ondrop: uploadImages,
-					content: renderDropzone
+					content: renderMain,
+					hoverContent: renderDropPane
 				},
 				'dz'
 			)
@@ -123,9 +150,8 @@ const headerRight = styled({
 	alignItems: 'center'
 });
 
-const slate = injectStyle({
+const fill = injectStyle({
 	display: 'flex',
 	flex: 1,
 	flexDirection: 'column'
-	// overflow: 'hidden',
 });