Model: rework animation selector

bin/style.css

@@ -826,6 +826,26 @@ input[type=checkbox]:checked:after {
   margin-left: 2px;
   margin-right: 2px;
 }
+.tb-group > *.select > .icon {
+  padding-left: 3px;
+}
+.tb-group > *.select .header {
+  display: inline-block;
+  background-color: #282828;
+  border-radius: 2px;
+  min-width: 250px;
+  padding: 2px;
+  margin: 5px;
+  cursor: pointer;
+}
+.tb-group > *.select .header .label {
+  min-width: 220px;
+}
+.tb-group > *.select .dropdown {
+  position: absolute;
+  top: 30px;
+  left: 20px;
+}
 .hide-button,
 .hide-toggle {
   display: inline-flex;

bin/style.less

@@ -892,6 +892,34 @@ input[type=checkbox] {
 			margin-left: 2px;
 			margin-right: 2px;
 		}
+
+		&.select {
+			@select-width: 250px;
+
+			>.icon {
+				padding-left: 3px;
+			}
+
+			.header {
+				display: inline-block;
+				background-color: @color-menu-bg;
+				border-radius: 2px;
+				min-width: @select-width;
+				padding: 2px;
+				margin: 5px;
+				cursor: pointer;
+
+				.label {
+					min-width: @select-width - 30px;
+				}
+			}
+
+			.dropdown {
+				position: absolute;
+				top: 30px;
+				left: 20px;
+			}
+		}
 	}
 
 }

hide/comp/Toolbar.hx

@@ -31,7 +31,7 @@ typedef ToolToggle = {
 
 typedef ToolSelect<T> = {
 	var element : Element;
-	function setContent( elements : Array<{ label : String, value : T }> ) : Void;
+	dynamic function setContent( elements : Array<{ label : String, value : T }> ) : Void;
 	dynamic function onSelect( v : T ) : Void;
 }
 
@@ -153,20 +153,54 @@ class Toolbar extends Component {
 	}
 
 	public function addSelect<T>( icon : String, ?label : String ) : ToolSelect<T> {
-		var e = new Element('<div class="select" title="${label==null ? "" : label}"><div class="icon ico ico-$icon"/><select/></div>');
-		var content : Array<{ label : String, value : T }> = [];
-		var select = e.find("select");
+		var e = new Element('
+			<div class="select" title="${label==null ? "" : label}">
+				<div class="icon ico ico-$icon"></div>
+				<div class="header">
+					<span class="label"></span>
+					<div class="icon ico ico-caret-right"></div>
+				</div>
+				<div class="dropdown"/>
+			</div>
+		');
+
+		var header = e.find(".header");
+		var label = header.find(".label");
+		var items: Array<ContextMenu.MenuItem> = [];
 		var tool : ToolSelect<T> = {
 			element : e,
-			setContent : function(c) {
-				select.html("");
-				content = c;
-				for( i in 0...content.length )
-					new Element('<option value="$i">${content[i].label}</option>').appendTo(select);
-			},
+			setContent : function(_) {},
 			onSelect : function(_) {},
 		};
-		select.change(function(_) tool.onSelect(content[Std.parseInt(select.val())].value));
+
+		tool.setContent = function(c) {
+			for( i in 0...c.length ) {
+				items.push({
+					label: c[i].label,
+					click: () -> {
+						label.text(c[i].label);
+						tool.onSelect(c[i].value);
+					}
+				});
+			}
+		};
+
+		header.click(function(_) {
+			var icon = header.find(".icon");
+			var visible = icon.hasClass('ico-caret-down');
+			visible = !visible;
+			icon.toggleClass("ico-caret-right", !visible);
+			icon.toggleClass("ico-caret-down", visible);
+
+			if (visible) {
+				var menu = ContextMenu.createDropdown(e.find(".dropdown").get(0), items, { search: ContextMenu.SearchMode.Visible });
+				menu.onClose = () -> {
+					icon.toggleClass("ico-caret-right", true);
+					icon.toggleClass("ico-caret-down", false);
+				};
+			}
+		});
+
 		e.appendTo(curGroup);
 		return tool;
 	}

hide/view/Model.hx

@@ -925,12 +925,12 @@ class Model extends FileView {
 			}];
 			content.unshift({ label : "-- no anim --", value : null });
 			sel.setContent(content);
-			sel.element.find("select").val(""+selIdx);
+			sel.element.find(".label").text(content[selIdx].label);
 			sel.onSelect = function(file:String) {
 				if (scene.editor.view.modified && !js.Browser.window.confirm("Current animation has been modified, change animation without saving?"))
 				{
 					var idx = anims.indexOf(currentAnimation.file)+1;
-					sel.element.find("select").val(""+idx);
+					sel.element.find(".label").text(content[idx].label);
 					return;
 				}