fix firefox toolbar button layout

teamapps-org · Apr 9, 2024 · 4512dba · 4512dba
1 parent c6589d5
commit 4512dba
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 23 deletions.
diff --git a/teamapps-client/ts/modules/tool-container/AbstractUiToolContainer.ts b/teamapps-client/ts/modules/tool-container/AbstractUiToolContainer.ts
@@ -84,6 +84,11 @@ export abstract class AbstractUiToolContainer<C extends AbstractUiToolContainerC
 				jumpDirection = (hasTextCellElementOverflow || $button.offsetHeight > maxHeight || $button.offsetWidth > width || childOverflow) ? 1 : -1;
 				width = width + (jumpSize * jumpDirection);
 				$button.style.width = width + "px";
+
+				if (isFirefox) { // for some reason, firefox does not reflow here, even when calling $button.offsetHeight. So we need to do it the ugly way.
+					$buttonWrapper.remove();
+					this.$sizeTestingContainer.appendChild($buttonWrapper);
+				}
 			}
 			if ($button.offsetHeight > maxHeight || $button.offsetWidth > width) {
 				width += 2;
@@ -103,4 +108,7 @@ export abstract class AbstractUiToolContainer<C extends AbstractUiToolContainerC
 
 }
 
+const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
+
+
 AbstractUiToolContainer.initialize();
diff --git a/...ded/src/test/java/org/teamapps/server/jetty/embedded/TeamAppsJettyEmbeddedServerTest.java b/...ded/src/test/java/org/teamapps/server/jetty/embedded/TeamAppsJettyEmbeddedServerTest.java
@@ -20,11 +20,11 @@
 package org.teamapps.server.jetty.embedded;
 
 import org.teamapps.icon.material.MaterialIcon;
-import org.teamapps.ux.component.dummy.DummyComponent;
-import org.teamapps.ux.component.field.Button;
+import org.teamapps.ux.component.panel.Panel;
 import org.teamapps.ux.component.rootpanel.RootPanel;
-import org.teamapps.ux.component.template.BaseTemplateRecord;
-import org.teamapps.ux.component.window.Window;
+import org.teamapps.ux.component.toolbar.Toolbar;
+import org.teamapps.ux.component.toolbar.ToolbarButton;
+import org.teamapps.ux.component.toolbar.ToolbarButtonGroup;
 import org.teamapps.ux.session.SessionContext;
 
 import java.util.List;
@@ -41,25 +41,17 @@ public static void main(String[] args) throws Exception {
 
 					RootPanel rootPanel = sessionContext.addRootPanel();
 
-					Window window = new Window();
-					window.setTitle("Window");
-					window.enableAutoHeight();
-					window.setModal(true);
-					window.setCloseable(true);
-					window.setCloseOnEscape(true);
-					window.setCloseOnClickOutside(true);
-
-					window.onClosed.addListener(() -> {
-						System.out.println("closed.");
-					});
-
-					window.setContent(new DummyComponent());
-
-					Button<BaseTemplateRecord> button = Button.create("show");
-					button.onClicked.addListener((eventData, disposable) -> {
-						window.show();
-					});
-					rootPanel.setContent(button);
+					Panel panel = new Panel();
+					Toolbar toolbar = new Toolbar();
+					ToolbarButtonGroup buttonGroup = new ToolbarButtonGroup();
+					buttonGroup.addButton(ToolbarButton.create(MaterialIcon.MENU, "One", "One"));
+					buttonGroup.addButton(ToolbarButton.create(MaterialIcon.MENU, "Two Words", "Two Words"));
+					buttonGroup.addButton(ToolbarButton.create(MaterialIcon.MENU, "Three short words", "three short words"));
+					buttonGroup.addButton(ToolbarButton.create(MaterialIcon.MENU, "Four words for you", "Four words for you"));
+					toolbar.addButtonGroup(buttonGroup);
+					panel.setToolbar(toolbar);
+
+					rootPanel.setContent(panel);
 
 				})
 				.setPort(8082)