resource now use dblclick to rename; download

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>

css/ui/generic.css

@@ -236,3 +236,112 @@ select > option:checked::after {
 	mask-repeat: no-repeat;
 	background-color: var(--c-text);
 }
+
+/**
+ * Generic list
+ */
+
+.list {
+	height: 200px;
+
+	overflow-y: auto;
+
+	background-color: var(--c-primary);
+
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+}
+
+.list > *:first-child {
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+}
+
+.list .list-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	height: 25px;
+	padding-left: 5px;
+	padding-right: 5px;
+
+	cursor: pointer;
+
+	color: var(--c-text);
+
+	transition-duration: 50ms;
+}
+
+.list .list-item.active {
+	background-color: var(--c-active);
+}
+.list .list-item.active:hover,
+.list .list-item:hover {
+	background-color: var(--c-hover);
+}
+.list .list-item.active:active,
+.list .list-item:active {
+	background-color: var(--c-hover);
+	filter: brightness(120%);
+}
+
+.list .list-item > .title {
+	flex: 1;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+
+	background-color: transparent;
+
+	border: 0;
+	color: var(--c-text);
+}
+
+.list .list-item > .actions {
+	display: flex;
+	align-self: stretch;
+}
+
+.list .actions > button {
+	display: flex;
+	align-items: stretch;
+
+	padding: 0;
+
+	width: 25px;
+	aspect-ratio: 1;
+
+	background-color: transparent;
+	border: 0;
+	cursor: pointer;
+}
+
+.list .list-item > .actions > *:hover > * {
+	margin: 2px;
+}
+
+.list .actions > button > *:first-child {
+	flex: 1;
+	margin: 3px;
+
+	-webkit-mask-size: contain;
+	mask-size: contain;
+	background-color: var(--c-text);
+}
+
+/* Generic buttons */
+.list .actions > .delete-btn > *:first-child {
+	-webkit-mask-image: url("/res/icons/trash.svg");
+	mask-image: url("/res/icons/trash.svg");
+}
+
+.list .actions > .rename-btn > *:first-child {
+	-webkit-mask-image: url("/res/icons/edit.svg");
+	mask-image: url("/res/icons/edit.svg");
+}
+
+.list .actions > .download-btn > *:first-child {
+	-webkit-mask-image: url("/res/icons/download.svg");
+	mask-image: url("/res/icons/download.svg");
+}

css/ui/tool/stamp.css

@@ -28,8 +28,6 @@
 .resource-manager > .resource-list {
 	height: 200px;
 
-	background-color: #ffffff66;
-
 	border-top-left-radius: 5px;
 	border-top-right-radius: 5px;
 
@@ -37,80 +35,6 @@
 	overflow-x: hidden;
 }
 
-.resource-manager > .resource-list > * {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	cursor: pointer;
-	white-space: nowrap;
-}
-
-.resource-manager > .resource-list > * > .resource-title {
-	overflow: hidden;
-	margin: 5px;
-	text-overflow: ellipsis;
-}
-
-.resource-manager > .resource-list > * > .actions {
-	display: flex;
-	align-items: center;
-}
-
-.resource-manager .actions > button {
-	display: flex;
-	align-items: stretch;
-
-	padding: 0;
-
-	width: 30px;
-	aspect-ratio: 1;
-
-	background-color: transparent;
-	border: 0;
-	cursor: pointer;
-}
-
-.resource-manager .actions > button:hover {
-	background-color: rgba(255, 255, 255, 0.5);
-}
-
-.resource-manager .actions > button:active {
-	background-color: rgba(255, 255, 255, 0.7);
-}
-
-.resource-manager .actions > button > *:first-child {
-	flex: 1;
-	margin: 3px;
-
-	-webkit-mask-size: contain;
-	mask-size: contain;
-	background-color: var(--c-primary);
-}
-
-.resource-manager .actions > .rename-btn > *:first-child {
-	-webkit-mask-image: url("/res/icons/edit.svg");
-	mask-image: url("/res/icons/edit.svg");
-}
-
-.resource-manager .actions > .delete-btn > *:first-child {
-	-webkit-mask-image: url("/res/icons/trash.svg");
-	mask-image: url("/res/icons/trash.svg");
-}
-
-.resource-manager > .resource-list > .selected:hover,
-.resource-manager > .resource-list > *:hover {
-	background-color: #fff8;
-}
-.resource-manager > .resource-list > .selected {
-	background-color: #fff6;
-}
-
-.resource-manager > .resource-list.dragging {
-	background-color: #ffffff88;
-	transition-duration: 0.3s;
-}
-
 .resource-manager > .upload-button {
 	display: block;
 	width: 100%;

js/ui/tool/stamp.js

@@ -44,7 +44,7 @@ const stampTool = () =>
 			// Deselect
 			state.selected = null;
 			Array.from(state.ctxmenu.resourceList.children).forEach((child) => {
-				child.classList.remove("selected");
+				child.classList.remove("active");
 			});
 
 			ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height);
@@ -71,20 +71,20 @@ const stampTool = () =>
 					const resourceWrapper = resource && resource.dom.wrapper;
 
 					const wasSelected =
-						resourceWrapper && resourceWrapper.classList.contains("selected");
+						resourceWrapper && resourceWrapper.classList.contains("active");
 
 					Array.from(state.ctxmenu.resourceList.children).forEach((child) => {
-						child.classList.remove("selected");
+						child.classList.remove("active");
 					});
 
 					// Select
 					if (!wasSelected) {
-						resourceWrapper && resourceWrapper.classList.add("selected");
+						resourceWrapper && resourceWrapper.classList.add("active");
 						state.selected = resource;
 					}
 					// If already selected, clear selection
 					else {
-						resourceWrapper.classList.remove("selected");
+						resourceWrapper.classList.remove("active");
 						state.selected = null;
 					}
 
@@ -136,16 +136,35 @@ const stampTool = () =>
 							);
 							const resourceWrapper = document.createElement("div");
 							resourceWrapper.id = `resource-${resource.id}`;
-							resourceWrapper.classList.add("resource");
+							resourceWrapper.classList.add("resource", "list-item");
-							const resourceTitle = document.createElement("span");
+							const resourceTitle = document.createElement("input");
-							resourceTitle.textContent = resource.name;
+							resourceTitle.value = resource.name;
-							resourceTitle.classList.add("resource-title");
+							resourceTitle.title = resource.name;
+							resourceTitle.style.pointerEvents = "none";
+							resourceTitle.addEventListener("change", () => {
+								resource.name = resourceTitle.value;
+								resourceTitle.title = resourceTitle.value;
+
+								syncResources();
+							});
+
+							resourceTitle.addEventListener("blur", () => {
+								resourceTitle.style.pointerEvents = "none";
+							});
+							resourceTitle.classList.add("resource-title", "title");
+
 							resourceWrapper.appendChild(resourceTitle);
 
 							resourceWrapper.addEventListener("click", () =>
 								state.selectResource(resource)
 							);
 
+							resourceWrapper.addEventListener("dblclick", () => {
+								resourceTitle.style.pointerEvents = "auto";
+								resourceTitle.focus();
+								resourceTitle.select();
+							});
+
 							resourceWrapper.addEventListener("mouseover", () => {
 								state.ctxmenu.previewPane.style.display = "block";
 								state.ctxmenu.previewPane.style.backgroundImage = `url(${resource.image.src})`;
@@ -158,24 +177,25 @@ const stampTool = () =>
 							const actionArray = document.createElement("div");
 							actionArray.classList.add("actions");
 
-							const renameButton = document.createElement("button");
+							const saveButton = document.createElement("button");
-							renameButton.addEventListener(
+							saveButton.addEventListener(
 								"click",
 								(evn) => {
-									evn.stopPropagation();
+									const canvas = document.createElement("canvas");
-									const name = prompt("Rename your resource:", resource.name);
+									canvas.width = resource.image.width;
-									if (name) {
+									canvas.height = resource.image.height;
-										resource.name = name;
+									canvas.getContext("2d").drawImage(resource.image, 0, 0);
-										resourceTitle.textContent = name;
 
-										syncResources();
+									downloadCanvas({
-									}
+										canvas,
+										filename: `openOutpaint - resource '${resource.name}'.png`,
+									});
 								},
 								{passive: false}
 							);
-							renameButton.title = "Rename Resource";
+							saveButton.title = "Download Resource";
-							renameButton.appendChild(document.createElement("div"));
+							saveButton.appendChild(document.createElement("div"));
-							renameButton.classList.add("rename-btn");
+							saveButton.classList.add("download-btn");
 
 							const trashButton = document.createElement("button");
 							trashButton.addEventListener(
@@ -191,7 +211,7 @@ const stampTool = () =>
 							trashButton.appendChild(document.createElement("div"));
 							trashButton.classList.add("delete-btn");
 
-							actionArray.appendChild(renameButton);
+							actionArray.appendChild(saveButton);
 							actionArray.appendChild(trashButton);
 							resourceWrapper.appendChild(actionArray);
 							state.ctxmenu.resourceList.appendChild(resourceWrapper);
@@ -340,7 +360,7 @@ const stampTool = () =>
 					const resourceManager = document.createElement("div");
 					resourceManager.classList.add("resource-manager");
 					const resourceList = document.createElement("div");
-					resourceList.classList.add("resource-list");
+					resourceList.classList.add("list");
 
 					const previewPane = document.createElement("div");
 					previewPane.classList.add("preview-pane");

res/icons/download.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+  stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+  <polyline points="7 10 12 15 17 10"></polyline>
+  <line x1="12" y1="15" x2="12" y2="3"></line>
+
+</svg>