From 4d3b231164e601816a68bc6de4eca24ef3392703 Mon Sep 17 00:00:00 2001
From: Jordan Irwin <antumdeluge@gmail.com>
Date: Wed, 1 May 2024 01:43:33 -0700
Subject: [PATCH] Add support for left/right aligned tabs

---
 src/js/css/main.css                           | 28 ++++++++++++++++---
 .../stendhal/ui/toolkit/TabPanelComponent.ts  | 11 +++++++-
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/js/css/main.css b/src/js/css/main.css
index 5d3d68a0b10..b1cd853d05e 100644
--- 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
index 692d9fbc30a..5923444b713 100644
--- 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);
 		}
 	}