Add support for left/right aligned tabs

arianne · May 1, 2024 · 4d3b231 · 4d3b231
1 parent 090bf94
commit 4d3b231
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/src/js/css/main.css b/src/js/css/main.css
@@ -71,13 +71,20 @@ ul.uniform {
 	flex: 1;
 }
 
-.tabpanel {
+.tabpanel, .tabpanel-h {
 	display: flex;
-	flex-direction: column;
 	overflow-y: auto;
 	overflow-x: hidden;
 }
 
+.tabpanel {
+	flex-direction: column;
+}
+
+.tabpanel-h {
+	flex-direction: row;
+}
+
 .tabpanel-content {
 	display: flex;
 	flex-direction: column;
@@ -87,6 +94,11 @@ ul.uniform {
 	flex: 1;
 }
 
+.tabpanel-tabs-h {
+	display: flex;
+	flex-direction: column;
+}
+
 .tabpanel-tabs button {
 	background: var(--background-url);
 	color: var(--text-color-inactive);
@@ -96,12 +108,20 @@ ul.uniform {
 	color: var(--text-color);
 }
 
+.tabpanel-tabs-top button {
+	border-bottom: 0;
+}
+
 .tabpanel-tabs-bottom button {
 	border-top: 0;
 }
 
-.tabpanel-tabs-top button {
-	border-bottom: 0;
+.tabpanel-tabs-left button {
+	border-right: 0;
+}
+
+.tabpanel-tabs-right button {
+	border-left: 0;
 }
 
 

diff --git a/src/js/stendhal/ui/toolkit/TabPanelComponent.ts b/src/js/stendhal/ui/toolkit/TabPanelComponent.ts
@@ -45,8 +45,17 @@ export class TabPanelComponent extends Panel {
 			tabs.classList.add("tabpanel-tabs-bottom");
 			// move to end of elements list
 			this.componentElement.appendChild(tabs);
+		} else if (Layout.LEFT.equals(layout)) {
+			this.componentElement.className = "tabpanel-h";
+			tabs.classList.add("tabpanel-tabs-h");
+			tabs.classList.add("tabpanel-tabs-left");
+		} else if (Layout.RIGHT.equals(layout)) {
+			this.componentElement.className = "tabpanel-h";
+			tabs.classList.add("tabpanel-tabs-h");
+			tabs.classList.add("tabpanel-tabs-right");
+			// move to end of elements list
+			this.componentElement.appendChild(tabs);
 		} else {
-			// currently only supports positioning tabs at top & bottom
 			console.warn("unsupported layout:", layout);
 		}
 	}