Some QOL and styling improvements

daem-on · Aug 1, 2022 · eeed4d8 · eeed4d8
1 parent 0009b97
commit eeed4d8
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 15 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -26,15 +26,15 @@ body, input, button, textarea, label {
 }
 
 input, select {
-	border: 1px solid #aaa;
-	outline: none;
+	/* border: 1px solid #aaa;
+	outline: none; */
 	padding: 0 4px;
 	height: 22px;
 	box-shadow: none;
 }
 
 .hidden {
-	display:none;
+	display: none;
 }
 
 .zoom-in {

diff --git a/css/toolOptionPanel.css b/css/toolOptionPanel.css
@@ -104,6 +104,16 @@
 	width: 100%;
 }
 
+.toolOptionPanel .option-section.vertical {
+	display: flex;
+	flex-direction: column;
+}
+
+.toolOptionPanel .option-section textarea {
+	overflow-wrap: normal;
+	white-space: pre;
+}
+
 .toolOptionPanel .toolOptionResetButton {
 	position: absolute;
 	width: 16px;

diff --git a/src/editTH2.ts b/src/editTH2.ts
@@ -131,6 +131,7 @@ export default {
 		const selection = pg.selection.getSelectedItems();
 		for (const item of selection)
 			item.locked = !item.locked;
+		pg.undo.snapshot("Toggle locked");
 	},
 
 	randomizeRotation: function() {

diff --git a/src/objectSettings/customToolbarInput.ts b/src/objectSettings/customToolbarInput.ts
@@ -21,6 +21,11 @@ export function constructSelect(element: HTMLDivElement, selectedVal: string, im
 		closeAllSelect(this.parentElement);
 		this.parentElement.classList.toggle("open");
 	});
+
+	input.addEventListener("keypress", e => {
+		if (e.key === "Enter") element.classList.remove("open");
+	})
+	input.addEventListener("blur", e => element.classList.remove("open"));
 }
 
 function constructOptionItem(option: HTMLOptionElement, imageRoot?: string) {

diff --git a/src/toolOptionPanel.ts b/src/toolOptionPanel.ts
@@ -2,11 +2,13 @@ import "jquery-ui/ui/widgets/draggable";
 import pg from "../src/init";
 import {constructSelect} from "../src/objectSettings/customToolbarInput";
 
+type ComponentType = "int" | "list" | "float" | "text" | "button" | "boolean" |
+"nullable-boolean" | "title" | "customList" | "textarea";
+
 type component = {
-	type?:	"int" | "list" | "float" | "text" | "button" | "boolean" |
-			"nullable-boolean" | "title" | "customList" | "textarea",
-	min?: any,
-	max?: any,
+	type?: ComponentType
+	min?: number,
+	max?: number,
 	label?: string,
 	options?: string[],
 	optionValuePairs?: [string, string|number][],
@@ -69,14 +71,8 @@ export default {
 				break;
 			case 'float':
 			case 'int':
-				let minAttr = '';
-				if(comp.min != undefined && comp.type == 'int') {
-					minAttr = ` min="${parseInt(comp.min)}"`;
-
-				} else if(comp.min != undefined && comp.type == 'float') {
-					minAttr = ` min="${parseFloat(comp.min)}"`;
-				}
-				$input = jQuery(`<input type="number" data-type="${comp.type}" name="${key}" value="${options[key]}"${minAttr}>`);
+				$input = jQuery(`<input type="number" data-type="${comp.type}" name="${key}" value="${options[key]}">`);
+				$input.attr("min", comp.min);
 
 				break;
 			case 'list':
@@ -122,6 +118,7 @@ export default {
 				break;
 			case 'textarea':
 				$input = jQuery(`<textarea name="${key}">${options[key] ?? ""}</textarea>`);
+				$optionSection.addClass('vertical');
 				break;
 			}