nicer layout

2 files changed, 14 insertions, 18 deletions

diff --git a/fractiform.js b/fractiform.js
index 22270a0..3d61a37 100644
--- a/fractiform.js
+++ b/fractiform.js
@@ -781,14 +781,14 @@ function get_widget_by_id(id) {
 function get_widget_name(widget_div) {
 	let names = widget_div.getElementsByClassName('widget-name');
 	console.assert(names.length === 1, 'there should be exactly one widget-name input per widget');
-	return names[0].value;
+	return names[0].innerText;
 }
 
 
 function get_widget_names() {
 	let s = new Set();
 	for (const w of document.getElementsByClassName('widget-name')) {
-		s.add(w.value);
+		s.add(w.innerText);
 	}
 	return s;
 }
@@ -831,8 +831,8 @@ function add_widget(func) {
 			title.title = info.description;
 		}
 		title.appendChild(document.createTextNode(info.name + ' '));
-		let name_input = document.createElement('input');
-		name_input.placeholder = 'Name';
+		let name_input = document.createElement('div');
+		name_input.contentEditable = true;
 		name_input.classList.add('widget-name');
 		
 		// generate unique name
@@ -843,7 +843,7 @@ function add_widget(func) {
 				break;
 			}
 		}
-		name_input.value = func + i;
+		name_input.innerText = func + i;
 		
 		title.appendChild(name_input);
 		root.appendChild(title);
@@ -942,7 +942,7 @@ function add_widget(func) {
 	}
 	
 	root.addEventListener('click', (e) => {
-		if (e.target.tagName === 'INPUT' || e.target.isContentEditable || e.target.tagName === 'SELECT')
+		if (e.target.tagName === 'INPUT' || e.target.isContentEditable || e.target.tagName === 'SELECT' || e.target.tagName === 'OPTION')
 			return;
 		set_display_output_and_update_shader(get_widget_name(root));
 		e.preventDefault();
@@ -1105,7 +1105,6 @@ ${this.code.join('')}
 			const args = new Map();
 			const input_types = new Map();
 			for (let [input, value] of widget.inputs) {
-				console.log(input,value);
 				value = this.compute_input(value);
 				if (value.error) {
 					widget.output = value;
@@ -1317,7 +1316,7 @@ function import_widgets(string) {
 			return {error: `bad import string (widget type '${widget.func}' does not exist)`};
 		}
 		let element = add_widget(widget.func);
-		element.getElementsByClassName('widget-name')[0].value = name;
+		element.getElementsByClassName('widget-name')[0].innerText = name;
 		function assign_value(container, value) {
 			let element = container.getElementsByTagName('input')[0];
 			if (element === undefined) {
@@ -1421,7 +1420,7 @@ function update_widget_choices() {
 		let name = widget_info.get(id).name;
 		let choice = choices[i];
 		let shown = name.toLowerCase().indexOf(search_term) !== -1;
-		// TODO
+		choice.display = shown ? 'block' : 'none';
 	});
 }
 
diff --git a/index.html b/index.html
index 3e6ae23..4530521 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
 		padding: 0;
 		color: white;
 		overflow: hidden;
+		line-height: 1;
 	}
 	
 	
@@ -94,15 +95,14 @@
 		height: 100%;
 		flex-grow: 0;
 		flex-shrink: 0;
-		flex-basis: 20em;
-		padding: 0.2em;
+		flex-basis: 30%;
 	}
 	input, button {
-		vertical-align: middle;
 		display: inline-block;
 		border: 2px solid var(--ui-border);
 		background-color: transparent;
 		color: white;
+		padding: 0;
 	}
 	#ui input[type=color] {
 		padding: 0;
@@ -110,7 +110,7 @@
 	.in select {
 		width: 5em;
 	}
-	.entry {
+	.entry, .widget-name {
 		min-width: 1em;
 		border-bottom: 2px solid #fff4;
 		cursor: text;
@@ -137,9 +137,9 @@
 	.widget {
 		display: block;
 		border-bottom: 2px solid #777;
-		padding: 0.5em 0;
 		position: relative;
 		cursor: pointer;
+		padding: 0.1em 0;
 	}
 	.widget:hover {
 		background: #fff3;
@@ -149,16 +149,13 @@
 	}
 	.widget-title {
 		font-weight: bold;
-		margin: 1em 0.3em;
-	}
-	.widget-name {
-		width: 6em;
 	}
 	.widget-delete {
 		border: 0;
 	}
 	.widget-delete img {
 		width: 1.5em;
+		vertical-align: bottom;
 	}
 	.widget-delete:hover, .widget-delete:active {
 		background-color: transparent;