[animgraph] Improved bone picked for Blend per bone node

bin/style.css

@@ -4143,7 +4143,9 @@ hide-popover hide-content {
 }
 :root {
   --hover-highlight: rgba(114, 180, 255, 0.5);
+  --hover: #444;
   --basic-shadow: 2px 2px 3px rgba(0, 0, 0, 0.75);
+  --sublte-shadow: 1px 1px 3px rgba(0, 0, 0, 0.33);
   --basic-border: 1px solid #353535;
   --basic-border-radius: 5px;
   --basic-padding: 0.2em;
@@ -4156,9 +4158,22 @@ button-2 {
   display: flex;
   border: var(--basic-border);
   border-radius: var(--basic-border-radius);
-  padding: var(--basic-padding);
+  box-sizing: border-box;
+  padding-left: calc(var(--basic-padding) * 2);
+  padding-right: calc(var(--basic-padding) * 2);
+  padding-top: var(--basic-padding);
+  padding-bottom: var(--basic-padding);
   background-color: var(--bg-2);
 }
+button-2 value {
+  flex-grow: 1;
+}
+button-2:hover {
+  background-color: var(--hover);
+}
+button-2:active {
+  box-shadow: inset var(--sublte-shadow);
+}
 /** GenericGraphEditor**/
 graph-editor-root {
   width: 100%;

bin/style.less

@@ -4898,7 +4898,11 @@ hide-popover {
 
 :root {
 	--hover-highlight: rgba(114, 180, 255, 0.5);
+	--hover: #444;
+
 	--basic-shadow: 2px 2px 3px rgba(0,0,0,.75);
+	--sublte-shadow: 1px 1px 3px rgba(0,0,0,.33);
+
 	--basic-border: 1px solid #353535;
 	--basic-border-radius: 5px;
 	--basic-padding: 0.2em;
@@ -4914,8 +4918,25 @@ button-2 {
 	display: flex;
 	border: var(--basic-border);
 	border-radius: var(--basic-border-radius);
-	padding: var(--basic-padding);
+	box-sizing: border-box;
+	padding-left: calc(var(--basic-padding) * 2);
+	padding-right: calc(var(--basic-padding) * 2);
+	padding-top: var(--basic-padding);
+	padding-bottom: var(--basic-padding);
+
 	background-color: var(--bg-2);
+
+	value {
+		flex-grow: 1;
+	}
+
+	&:hover {
+		background-color: var(--hover);
+	}
+
+	&:active {
+		box-shadow: inset var(--sublte-shadow);
+	}
 }
 
 /** GenericGraphEditor**/

hide/comp/ContextMenu.hx

@@ -60,6 +60,11 @@ typedef MenuOptions = {
 
     ?placementHeight: Int,
 
+    /**
+        If true, the sub-menus will be inlined (like they are when the search is active)
+    **/
+    ?flat: Bool,
+
 }
 
 class ContextMenu {
@@ -325,7 +330,7 @@ class ContextMenu {
 
         menu.innerHTML = "";
 
-        if (filter == "") {
+        if (filter == "" && !options.flat) {
             flatItems = [];
             selected = -1;
 

hrt/animgraph/nodes/BlendPerBone.hx

@@ -53,7 +53,9 @@ class BlendPerBone extends AnimNode {
 	override function getPropertiesHTML(width:Float):Array<hide.Element> {
 		var arr =  super.getPropertiesHTML(width);
 
-		var button = new hide.comp.Button({hasDropdown: true});
+		var wrapper = new hide.Element("<div></div>");
+
+		var button = new hide.comp.Button(wrapper, {hasDropdown: true});
 		button.label = targetBone;
 
 		button.onClick = () -> {
@@ -92,11 +94,11 @@ class BlendPerBone extends AnimNode {
 				});
 			}
 
-			hide.comp.ContextMenu.createDropdown(button.element.get(0), menu);
+			hide.comp.ContextMenu.createDropdown(button.element.get(0), menu, {flat: true});
 		};
 
-		button.element.height(16);
-		arr.push(button.element);
+		wrapper.height(24);
+		arr.push(wrapper);
 		return arr;
 	}
 	#end