better menus / menu pickers

haxeui · Feb 27, 2024 · f20976c · f20976c
1 parent 292271e
commit f20976c
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 10 deletions.
diff --git a/haxe/ui/_module/styles/default/menus.css b/haxe/ui/_module/styles/default/menus.css
@@ -78,6 +78,15 @@
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
     border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    padding: 4px;
+}
+
+.menu.primary-menu.rounded {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 0px;
     padding: 4px;
 }
 

diff --git a/haxe/ui/_module/styles/default/pickers.css b/haxe/ui/_module/styles/default/pickers.css
@@ -44,6 +44,10 @@
     vertical-align: center;
 }
 
+.item-picker.no-trigger-icon .item-picker-trigger-icon {
+    hidden: true;
+}
+
 .item-picker-container.position-down {
     padding: 1px;
     border: 1px solid $accent-color;
@@ -52,6 +56,14 @@
     filter: box-shadow(2, 2, #000000, 0.15, 6);
 }
 
+.item-picker-container.rounded.position-down {
+    border-top-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    padding: 4px;
+    background-color: $secondary-background-color;
+}
+
 .item-picker-container.position-up {
     padding: 1px;
     border: 1px solid $accent-color;
@@ -172,11 +184,16 @@
     border: none;
     padding: none;
     border-radius: none;
+    filter: none;
+}
+
+.menu.menuitempicker.secondary-menu {
+    border-color: $accent-color;
 }
 
 .menuitempicker-panel #primaryPickerMenu .menuitem {
-    border-top-left-radius: 0px;
-    border-top-right-radius: 0px;
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
+    __border-top-left-radius: 0px;
+    __border-top-right-radius: 0px;
+    __border-bottom-left-radius: 0px;
+    __border-bottom-right-radius: 0px;
 }
diff --git a/haxe/ui/components/pickers/ItemPicker.hx b/haxe/ui/components/pickers/ItemPicker.hx
@@ -246,6 +246,10 @@ class ItemPickerBuilder extends CompositeBuilder {
 
         pausePanelEvents();
         picker.addClass("selected", true, true);
+        if (picker.hasClass("rounded")) {
+            panelContainer.addClass("rounded");
+        }
+        panelContainer.styleNames = picker.styleNames;
         handler.onPanelShown();
         panelContainer.addClass(picker.cssName + "-panel", true, true);
         panelContainer.opacity = 0;
@@ -333,7 +337,11 @@ class ItemPickerBuilder extends CompositeBuilder {
             panelContainer.addComponent(_panelFiller);
         }
 
-        _panelFiller.width = panelWidth - picker.width;
+        var offset:Float = 0;
+        if (panelContainer.style != null && panelContainer.style.borderRadiusTopRight != null) {
+            offset = panelContainer.style.borderRadiusTopRight;
+        }
+        _panelFiller.width = panelWidth - picker.width - offset + 1;
         if (_panelFiller.width > 0) {
             _panelFiller.show();
         } else {

diff --git a/haxe/ui/components/pickers/MenuItemPicker.hx b/haxe/ui/components/pickers/MenuItemPicker.hx
@@ -83,11 +83,16 @@ private class Builder extends ItemPickerBuilder {
         super.create();
         menu = new Menu();
         menu.id = "primaryPickerMenu";
+        menu.styleNames = picker.styleNames;
         menuPicker.addComponent(menu);
     }
 
     public override function addComponent(child:Component):Component {
         if (child.id != "primaryPickerMenu" && ((child is Menu) || (child is MenuItem) || (child is MenuSeparator))) {
+            if ((child is Menu)) {
+                child.addClasses(["menuitempicker", "secondary-menu"]);
+                child.styleNames = picker.styleNames;
+            }
             menu.addComponent(child);
             return child;
         }
@@ -122,10 +127,10 @@ private class Handler extends ItemPickerHandler {
         var useText = false;
         if (menuEvent.menuItem.userData != null) {
             if (menuEvent.menuItem.userData.useIcon != null) {
-                useIcon = menuEvent.menuItem.userData.useIcon == "true";
+                useIcon = Std.string(menuEvent.menuItem.userData.useIcon) == "true";
             }
             if (menuEvent.menuItem.userData.useText != null) {
-                useText = menuEvent.menuItem.userData.useText == "true";
+                useText = Std.string(menuEvent.menuItem.userData.useText) == "true";
             }
         }
         if (useIcon) {

diff --git a/haxe/ui/containers/menus/Menu.hx b/haxe/ui/containers/menus/Menu.hx
@@ -1,7 +1,5 @@
 package haxe.ui.containers.menus;
 
-import haxe.ui.util.Timer;
-import haxe.ui.util.Variant;
 import haxe.ui.behaviours.DataBehaviour;
 import haxe.ui.behaviours.DefaultBehaviour;
 import haxe.ui.components.Button;
@@ -15,6 +13,8 @@ import haxe.ui.events.MouseEvent;
 import haxe.ui.events.UIEvent;
 import haxe.ui.geom.Size;
 import haxe.ui.layouts.VerticalLayout;
+import haxe.ui.util.Timer;
+import haxe.ui.util.Variant;
 
 #if (haxe_ver >= 4.2)
 import Std.isOfType;
@@ -288,7 +288,8 @@ class MenuEvents extends haxe.ui.events.Events {
         var offsetY:Float = 0;
         if (subMenu.style != null) {
             if (subMenu.style.paddingLeft > 1) {
-                offsetX = subMenu.style.paddingLeft - 1;
+                //offsetX = subMenu.style.paddingLeft - 1;
+                offsetX = subMenu.style.paddingLeft / 2;
             } else {
                 offsetX = 0;
             }

diff --git a/haxe/ui/containers/menus/MenuBar.hx b/haxe/ui/containers/menus/MenuBar.hx
@@ -124,6 +124,7 @@ private class Events extends haxe.ui.events.Events {
     private function showMenu(index:Int) {
         var builder:Builder = cast(_menubar._compositeBuilder, Builder);
         var menu:Menu = builder._menus[index];
+        menu.addClass("primary-menu");
         var hasChildren = (menu.childComponents.length > 0);
 
         var target:Button = builder._buttons[index];