Rudimentary toolbar component

2 files changed, 56 insertions, 0 deletions

diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index 5f7fa2a1b..3008bc67d 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -96,6 +96,27 @@ h3 {
 	border-left:		1px solid #aaa;
 }
 
+/* toolbar ------------------------------------------------------------------ */
+
+.zen_toolbar {
+	display:		flex;
+	margin-top:		0.5em;
+	margin-bottom:	0.6em;
+}
+
+.zen_toolbar > div {
+	display:		flex;
+	align-items:	center;
+}
+
+.zen_toolbar > div:last-child {
+	margin-left:	auto;
+}
+
+.zen_toolbar > div > div {
+	padding-right:	0.7em;
+}
+
 /* modal -------------------------------------------------------------------- */
 
 .zen_modal {
diff --git a/src/zenserver/frontend/html/zen.js b/src/zenserver/frontend/html/zen.js
index bae915258..89a66d525 100644
--- a/src/zenserver/frontend/html/zen.js
+++ b/src/zenserver/frontend/html/zen.js
@@ -206,6 +206,30 @@ class Modal
 
 
 ////////////////////////////////////////////////////////////////////////////////
+class Toolbar extends Component
+{
+	static Side = class extends Component
+	{
+		add(name, tag="div")	{ return this.tag(tag).text(name); }
+		sep()					{ return this.tag().text("|"); }
+	}
+
+	constructor(parent)
+	{
+		var root = parent.tag().classify("zen_toolbar");
+		super(root);
+
+		this._left = new Toolbar.Side(root.tag())
+		this._right = new Toolbar.Side(root.tag())
+	}
+
+	left()		{ return this._left; }
+	right()		{ return this._right; }
+}
+
+
+
+////////////////////////////////////////////////////////////////////////////////
 class Sectormatron extends Component
 {
 	constructor(parent, depth=1)
@@ -550,6 +574,17 @@ class Test extends Page
 				.option("cancel", () => void(0));
 		});
 
+		// toolbar
+		pt_section.add_section("toolbar");
+		var toolbar0 = new Toolbar(pt_section);
+		for (const side of [toolbar0.left(), toolbar0.right()])
+		{
+			side.add("tb_item0");
+			side.add("tb_item1");
+			side.sep();
+			side.add("tb_item2");
+		}
+
 		// error
 		throw Error("deliberate error");
 	}