www.spaceplanner.app

commit 5fecdafb3b8e608ef6411412cbc7d58b8e28476a
parent c2c9661bc4f1197ab8d1bf937b12ffba9a93ab0e
Author: Jacob R. Edwards <jacob@jacobedwards.org>
Date:   Sat, 19 Oct 2024 00:13:29 -0700

Put some tools in a dropdown menu

The toolbar was getting far too big and cluttered. I'm not entirely
in love with how I'v done this, but it is an improvement.  I looked
at some libraries (with w2ui chief among them) to do toolbars, but
they didn't seem to be able to do what I wanted. I'll look into it
more later.

The selection bit has to be improved opon too.

Diffstat:
M
files/floorplans/floorplan/main.css
 | 
51
+++++++++++++++++++++++++++++++++++++++++++++++++++
M
files/floorplans/floorplan/main.js
 | 
30
+++++++++++++++++++++++-------

2 files changed, 74 insertions(+), 7 deletions(-)
diff --git a/files/floorplans/floorplan/main.css b/files/floorplans/floorplan/main.css
@@ -165,3 +165,54 @@ input.invalid {
 #demo_footer > a {
 	color: orange;
 }
+
+.toolgroup {
+	display: inline-block;
+	position: relative;
+}
+
+.toolgroup > button {
+	background-color: #FEFEFE;
+	border: thin solid lightgrey;
+	border-radius: .2em;
+	padding: .5em 1em;
+}
+
+.toolgroup > button:hover {
+	background-color: #F5F5F5;
+}
+
+.toolgroup > ul {
+	display: none;
+	list-style: none;
+	position: absolute;
+	background-color: #f9f9f9;
+	border: thin solid black;
+	width: fit-content;
+	min-width: 10em;
+	padding-left: 0;
+	width: 8em;
+	z-index: 1;
+}
+
+.toolgroup > ul > li:not(:first-child) {
+	border-top: thin solid lightgrey;
+}
+
+.toolgroup > ul > li {
+	padding: .5em;
+}
+
+.toolgroup > ul > li > input[type="button"] {
+	font-size: larger;
+	width: 100%;
+	height: 100%;
+}
+
+.toolgroup > ul > li > input[type="button"]:focus {
+	background: rgba(0,0,0,.05);
+}
+
+.toolgroup:hover ul {
+	display: block;
+}
diff --git a/files/floorplans/floorplan/main.js b/files/floorplans/floorplan/main.js
@@ -18,7 +18,7 @@ const buttons = {
 }
 
 const params = {
-	longpress: 250,
+	longpress: 350,
 	threshold: 650
 }
 
@@ -201,12 +201,19 @@ function run(editor) {
 		}
 	}})
 
-	toolbar.append(item(ui.button("Fit to view", "Fit the floor plan into view", null, {
+	const newGroup = function(name) {
+		return toolbar.appendChild(item(toolGroup(name))).querySelector("ul")
+	}
+
+	let tg = newGroup("More...")
+
+	tg.append(item(addFurn))
+	tg.append(item(ui.button("Fit to view", "Fit the floor plan into view", null, {
 		handlers: { click: function() {
 			editor.fitToView()
 		}}
 	})))
-	toolbar.append(item(
+	tg.append(item(
 		selector(editor.modes, function(mode) {
 			if (mode === "View") {
 				editor.draw.unselect()
@@ -217,21 +224,21 @@ function run(editor) {
 			{ current: editor.mode, text: "Mode:" }
 		)
 	))
-	toolbar.append(undoRedo)
-	toolbar.append(item(addFurn))
-	toolbar.append(item(checkToggle("Angle snap", {
+	tg.append(item(checkToggle("Angle snap", {
 			title: "Snap points to 45° angle",
 			off: function() { State.snapAngle = false },
 			on: function() { State.snapAngle = true },
 			value: State.snapAngle
 	})))
-	toolbar.append(item(checkToggle("Point snap", {
+	tg.append(item(checkToggle("Point snap", {
 			title: "Snap points to other points",
 			off: function() { State.snapPoints = false },
 			on: function() { State.snapPoints = true },
 			value: State.snapPoints
 	})))
 
+	toolbar.append(undoRedo)
+
 	if (debug) {
 		toolbar.append(item(
 			selector(editor.units.systems, function(system) { editor.useUnits(system) },
@@ -1813,3 +1820,12 @@ function fetchError(err) {
 		status(err)
 	}
 }
+
+function toolGroup(name) {
+	let g = document.createElement("div")
+	g.classList.add("toolgroup")
+	let n = g.appendChild(document.createElement("button"))
+	n.textContent = name
+	g.append(document.createElement("ul"))
+	return g
+}