From f20976c34142927ba86e86153953decf56684a1f Mon Sep 17 00:00:00 2001 From: Ian Harrigan Date: Tue, 27 Feb 2024 14:51:18 +0100 Subject: [PATCH] better menus / menu pickers --- haxe/ui/_module/styles/default/menus.css | 9 +++++++ haxe/ui/_module/styles/default/pickers.css | 25 ++++++++++++++++---- haxe/ui/components/pickers/ItemPicker.hx | 10 +++++++- haxe/ui/components/pickers/MenuItemPicker.hx | 9 +++++-- haxe/ui/containers/menus/Menu.hx | 7 +++--- haxe/ui/containers/menus/MenuBar.hx | 1 + 6 files changed, 51 insertions(+), 10 deletions(-) diff --git a/haxe/ui/_module/styles/default/menus.css b/haxe/ui/_module/styles/default/menus.css index 413d728e4..80c02459a 100644 --- 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 index 60b3b0ffa..798204ac3 100644 --- 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 index 27cee78f0..19869e979 100644 --- 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 index 540c35b03..a76e22b6f 100644 --- 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 index dd1bb16a7..aabaef4d5 100644 --- 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 index fd10d5e74..f038342b5 100644 --- 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];