www.spaceplanner.app

commit c9cf0ffd619243558127c5059072a38fd978f831
parent ddc4f00658d554abdbea1fbffcef9a332d6e201c
Author: Jacob R. Edwards <jacob@jacobedwards.org>
Date:   Sun, 13 Oct 2024 20:42:58 -0700

Make floorplan metadata editing button more clear

I'v positioned it right next to the metadata and added another
button of the same icon where it used to be to open the floorplan
editor. May change a bit in the future but this prepared the code
for future changes better anyway.

Diffstat:
M
files/floorplans/main.css
 | 
18
+++++++++++++++---
M
files/floorplans/main.js
 | 
24
++++++++++++++----------

2 files changed, 29 insertions(+), 13 deletions(-)
diff --git a/files/floorplans/main.css b/files/floorplans/main.css
@@ -1,5 +1,5 @@
-#floorplans:not(.grid) > li {
-	min-width: 10em;
+.floorplan > header > input[type="button"] {
+	float: right;
 }
 
 #floorplans.grid {
@@ -61,9 +61,21 @@
 	max-width: 32rem;
 }
 
+.name_div {
+	display: flex;
+	align-items: center;
+	margin-bottom: .25em;
+}
+
+.name_div > input[type="image"] {
+	border: none;
+}
+
 .fp_name {
 	font-size: large;
 	margin-bottom: .25em;
+	display: inline;
+	
 }
 
 .fp_address {
@@ -82,7 +94,7 @@
 
 /* Maybe I should give these elements two classes: fp_metadata and
  * one of the following: */
-input.fp_name, input.fp_synopsis, input.fp_address {
+input.fp_synopsis, input.fp_address {
 	display: block;
 	max-width: 60%;
 }
diff --git a/files/floorplans/main.js b/files/floorplans/main.js
@@ -44,7 +44,7 @@ function gridview() {
 function commit_editable_floorplan_func(element, data) {
 	return function () {
 		let patches = []
-		let fields = Array.from(element.querySelectorAll("header > input"))
+		let fields = Array.from(element.querySelectorAll('input.fp_name, input.fp_address, input.fp_synopsis'))
 		let updated = false
 		let newdata = {}
 		for (let i in fields) {
@@ -135,7 +135,11 @@ function editable_floorplan_func(element, data) {
 				input = ui.input(editables[i], memo)
 				input.setAttribute("class", c)
 				if (prev) {
-					prev.after(input)
+					if (prev.classList.contains("fp_name")) {
+						parent.append(input)
+					} else {
+						prev.after(input)
+					}
 				} else {
 					parent.append(input)
 				}
@@ -214,14 +218,8 @@ function create_floorplan(floorplan) {
 	root.classList.add("class", "floorplan")
 
 	let aside = document.createElement("aside")
-
 	if (floorplan) {
-		aside.append(
-			ui.toggle(
-				{ button: ui.button("Edit", "Edit floorplan", "create"), func: editable_floorplan_func(root, floorplan) },
-				{ button: ui.button("Save", "Save floorplan", "save"), func: commit_editable_floorplan_func(root, floorplan) },
-			)
-		)
+		aside.append(ui.button("Edit", "Open floorplan editor", "create", { handlers: { click: function() { document.location.href = `./floorplan/?id=${floorplan.id}` } } }))
 		aside.append(ui.button("Copy", "Copy floorplan", "copy", { handlers: { click: function() { copy_floorplan(floorplan) } } }))
 		aside.append(ui.button("Delete", "Delete floorplan", "trash", { handlers: { click: ask_delete_floorplan_func(root, floorplan) } }))
 	} else {
@@ -245,7 +243,13 @@ function create_floorplan(floorplan) {
 		if (!floorplan.name) {
 			throw new Error("Expected floorplan name")
 		}
-		header.append(create_field.name(floorplan.name, floorplan.id))
+		let nameDiv = header.appendChild(document.createElement("div"))
+		nameDiv.classList.add("name_div")
+		nameDiv.append(create_field.name(floorplan.name, floorplan.id))
+		nameDiv.append(ui.toggle(
+			{ button: ui.button("Edit", "Edit floorplan metadata", "create"), func: editable_floorplan_func(root, floorplan) },
+			{ button: ui.button("Save", "Save floorplan metadata", "save"), func: commit_editable_floorplan_func(root, floorplan) },
+		))
 
 		if (floorplan.address) {
 			header.append(create_field.address(floorplan.address))