From 92a719e9845fc8452fd0aaed60bf1016d20632e5 Mon Sep 17 00:00:00 2001
From: Isaiah Odhner <isaiahodhner@gmail.com>
Date: Thu, 3 Nov 2016 02:02:05 +0000
Subject: [PATCH] Improve storage manager

---
 layout.css            | 14 +++++++++++---
 src/manage-storage.js | 30 ++++++++++++++++++------------
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/layout.css b/layout.css
index daa5190..495df3b 100644
--- a/layout.css
+++ b/layout.css
@@ -251,6 +251,7 @@ html, body, .jspaint {
 }
 .jspaint-dialogue-window .jspaint-window-content > form > .jspaint-button-group {
 	flex-flow: row;
+	justify-content: flex-end;
 }
 .jspaint-dialogue-window .jspaint-window-content > form > div:first-child {
 	padding: 5px;
@@ -291,10 +292,17 @@ html, body, .jspaint {
 	overflow: auto;
 	display: block;
 }
-.storage-manager img {
-	max-width: 60px;
-	max-height: 60px;
+.storage-manager a > img {
+	max-width: 100px;
+	max-height: 100px;
+	vertical-align: middle;
+	margin: 5px;
 }
+.storage-manager a > span,
+.storage-manager a > img,
+.storage-manager p {
+	margin: 5px;
+} 
 
 ::before, ::after {
 	pointer-events: none;
diff --git a/src/manage-storage.js b/src/manage-storage.js
index 935bca3..d9f822c 100644
--- a/src/manage-storage.js
+++ b/src/manage-storage.js
@@ -38,37 +38,43 @@ function manage_storage(){
 	if($storage_manager){
 		$storage_manager.close();
 	}
-	$storage_manager = $Window().title("Manage Storage").addClass("storage-manager");
+	$storage_manager = $FormWindow().title("Manage Storage").addClass("storage-manager jspaint-dialogue-window");
 	// @TODO: remove all button (with confirmation)
-	// @TODO: move this text to the bottom?
-	$storage_manager.$content.html(
-		"<p>Any images you've saved to your computer with <b>File > Save</b> will not be affected.</p>"
+	var $table = $(E("table")).appendTo($storage_manager.$main);
+	var $message = $(E("p")).appendTo($storage_manager.$main).html(
+		"Any images you've saved to your computer with <b>File > Save</b> will not be affected."
 	);
-	var $table = $(E("table")).appendTo($storage_manager.$content);
+	$storage_manager.$Button("Close", function(){
+		$storage_manager.close();
+	});
 	
-	var addRowFor = function(k, imgSrc){
+	var addRow = function(k, imgSrc){
 		var $tr = $(E("tr")).appendTo($table);
 		
 		var $img = $(E("img")).attr({src: imgSrc});
 		var $remove = $(E("button")).addClass("jspaint-button jspaint-dialogue-button").text("Remove");
-		var $a = $(E("a")).attr({href: "#" + k.replace("image#", "local:"), target: "__blank"}).text(k.replace("image#", "local:"));
-		
-		$(E("td")).append($a).appendTo($tr);
-		$(E("td")).append($img).appendTo($tr);
+		var href = "#" + k.replace("image#", "local:");
+		var $link = $(E("a")).attr({href: href, target: "__blank"});
+		$link.append($img);
+		$link.append($(E("span")).text("View"));
+		$(E("td")).append($link).appendTo($tr);
 		$(E("td")).append($remove).appendTo($tr);
 		
 		$remove.click(function(){
 			localStorage.removeItem(k);
 			$tr.remove();
+			if($table.find("tr").length == 0){
+				$message.html("<p>All cleaned up!</p>");
+			}
 		});
 	};
 	
 	for(var k in localStorage){
 		if(k.match(/^image#/)){
 			var v = localStorage[k];
-			addRowFor(k, v[0] === '"' ? JSON.parse(v) : v);
+			addRow(k, v[0] === '"' ? JSON.parse(v) : v);
 		}
 	}
-	$storage_manager.width(500);
+	$storage_manager.width(450);
 	$storage_manager.center();
 }