[hide] Added Hide Gym to list and prototype new UI elements

bin/app.html

@@ -74,6 +74,7 @@
 		<separator></separator>
 		<menu label="About" component="hide.view.About"></menu>
 		<menu label="Debug" class="debug"></menu>
+		<menu label="Editor Gym" component="hide.view.Gym"></menu>
 	</menu>
 	<menu label="Database" class="database">
 		<menu label="View" class="dbView"></menu>

bin/style.css

@@ -1614,6 +1614,29 @@ input[type=checkbox]:checked:after {
 .fx-animpanel .events .event:hover {
   stroke: white;
 }
+.fx-animpanel .events .event-key {
+  stroke: #ffffff;
+  stroke-width: 1px;
+  fill: black;
+}
+.fx-animpanel .events .event-label div {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+.fx-animpanel .events .event-label div .event-label {
+  box-sizing: border-box;
+  display: block;
+  flex-grow: 0;
+  border-radius: 3px;
+  background-color: rgba(33, 33, 33, 0.75);
+  padding: 0px 0.25em;
+  border: 1px solid #666;
+  font-size: 8pt;
+  color: white;
+}
 .fx-animpanel .events text {
   pointer-events: none;
 }
@@ -4004,10 +4027,26 @@ hide-popover hide-content {
 .context-menu2 menu * {
   box-sizing: border-box;
 }
+.context-menu2 menu separator {
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+.context-menu2 menu separator h1 {
+  font-weight: normal;
+  margin: 0em 0.5em;
+  font-size: 9pt;
+  color: #888;
+}
+.context-menu2 menu separator hr {
+  margin-top: 0.8em;
+}
 .context-menu2 menu hr {
+  flex-grow: 1;
   border: 0;
   height: 1px;
   background-image: linear-gradient(to right, rgba(44, 44, 44, 0), #646464, rgba(44, 44, 44));
+  pointer-events: none;
 }
 .context-menu2 menu:not(:has(:hover, .highlight)) .open {
   background-color: #555555;
@@ -4370,25 +4409,37 @@ fancy-button.fancy-normal {
 fancy-button.fancy-big {
   --size: 36px;
 }
+fancy-toolbar {
+  display: flex;
+  flex-direction: row;
+}
 fancy-button {
+  position: relative;
   --size: 28px;
   border: 1px solid var(--fancy-border-color);
-  aspect-ratio: 1 / 1;
   text-align: center;
   height: var(--size);
-  display: flex;
+  min-width: var(--size);
+  display: inline-flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-evenly;
   user-select: none;
+  color: #DDD;
   gap: 0.5em;
   font-size: calc(var(--size) * 0.5);
   margin-left: -1px;
   --radius: 3px;
 }
-fancy-button:has(.label) {
-  padding-left: 1em;
-  padding-right: 1em;
+fancy-button:has(.label),
+fancy-button.dropdown {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+fancy-button.dropdown::after {
+  font-family: "FontAwesome";
+  content: "\f078";
+  font-size: 0.5em;
 }
 fancy-button .label {
   font-weight: 200;
@@ -4414,7 +4465,10 @@ fancy-button.quieter:hover {
   color: var(--fancy-main-text-color);
 }
 fancy-button.compact {
-  aspect-ratio: unset;
+  min-width: unset;
+}
+fancy-button.compact .ico {
+  font-size: 0.7em;
 }
 fancy-button:first-child,
 :not(fancy-button) + fancy-button {
@@ -4788,3 +4842,22 @@ blend-space-2d-root properties-container .hide-properties dl > div .hide-range i
 .array-sub-buttons .add:hover::before {
   filter: brightness(80%);
 }
+.hide-gym {
+  background-color: #111;
+  padding: 2em;
+  box-sizing: border-box;
+}
+.hide-gym h1 {
+  font-size: 1.1em;
+}
+.hide-gym details {
+  padding: 1em;
+  background-color: #222;
+  border-radius: var(--basic-border-radius);
+}
+.hide-gym details summary {
+  font-size: 1.5em;
+  background-color: #333;
+  padding: var(--basic-padding);
+  border-radius: var(--basic-border-radius);
+}

bin/style.less

@@ -1807,6 +1807,33 @@ input[type=checkbox] {
 			stroke: white;
 		}
 
+		.event-key {
+			stroke: rgba(255,255,255,1.0);
+			stroke-width: 1px;
+			fill: black;
+		}
+
+		.event-label {
+			div {
+				width: 100%;
+				height: 100%;
+				display: flex;
+				flex-direction: row-reverse;
+				align-items: center;
+				.event-label {
+					box-sizing: border-box;
+					display: block;
+					flex-grow: 0;
+					border-radius: 3px;
+					background-color: rgba(33,33,33,0.75);
+					padding:  0px 0.25em;
+					border: 1px solid #666;
+					font-size: 8pt;
+					color: white;
+				}
+			}
+		}
+
 		text {
 			pointer-events: none;
 		}
@@ -4711,10 +4738,27 @@ hide-popover {
 		* {
 			box-sizing: border-box;
 		}
+
+		separator {
+			display: flex;
+			align-items: center;
+			h1 {
+				font-weight: normal;
+				margin: 0em 0.5em;
+				font-size: 9pt;
+				color: #888;
+			}
+			hr {
+				margin-top: 0.8em;
+			}
+			pointer-events: none;
+		}
 		hr {
+			flex-grow: 1;
 			border: 0;
 			height: 1px;
 			background-image: linear-gradient(to right, rgba(44,44,44,0), rgb(100, 100, 100), rgba(44,44,44));
+			pointer-events: none;
 		}
 
 		&:not(:has(:hover, .highlight)) .open {
@@ -5190,26 +5234,41 @@ graph-editor-root {
 	}
 }
 
+fancy-toolbar {
+	display: flex;
+	flex-direction: row;
+}
+
 fancy-button {
+	position: relative;
 	--size: 28px;
 	border: 1px solid var(--fancy-border-color);
 
-	aspect-ratio: 1 / 1;
 
 	text-align: center;
 
 	height: var(--size);
+	min-width: var(--size);
 
-	display: flex;
+	display: inline-flex;
 	flex-direction: row;
 	align-items: center;
 	justify-content: space-evenly;
 
 	user-select: none;
 
-	&:has(.label) {
-		padding-left: 1.0em;
-		padding-right: 1.0em;
+	color: #DDD;
+
+	&:has(.label), &.dropdown {
+		padding-left: 0.5em;
+		padding-right: 0.5em;
+		//aspect-ratio: unset;
+	}
+
+	&.dropdown::after {
+		font-family: "FontAwesome";
+		content: "\f078";
+		font-size: 0.5em;
 	}
 
 	gap: 0.5em;
@@ -5248,7 +5307,10 @@ fancy-button {
 	}
 
 	&.compact {
-		aspect-ratio: unset;
+		min-width: unset;
+		.ico {
+			font-size: 0.7em;
+		}
 	}
 
 	margin-left: -1px;
@@ -5716,4 +5778,29 @@ blend-space-2d-root {
 			}
 		}
 	}
+}
+
+.hide-gym {
+	background-color: #111;
+	padding: 2em;
+	box-sizing: border-box;
+
+	h1 {
+		font-size: 1.1em;
+	}
+
+	details {
+		summary {
+			font-size: 1.5em;
+			background-color: #333;
+			padding: var(--basic-padding);
+			border-radius: var(--basic-border-radius);
+
+		}
+
+		padding: 1em;
+		background-color: #222;
+
+		border-radius: var(--basic-border-radius);
+	}
 }

hide/comp/ContextMenu.hx

@@ -340,8 +340,20 @@ class ContextMenu {
             filteredItems = null;
             for (id => item in items) {
                 if (item.isSeparator) {
-                    var hr = js.Browser.document.createHRElement();
-                    menu.appendChild(hr);
+                    if (item.label != null && item.label.length > 0) {
+                        var separator = js.Browser.document.createElement("separator");
+                        var h1 = js.Browser.document.createElement("h1");
+                        h1.innerText = item.label;
+                        separator.appendChild(h1);
+
+                        var hr = js.Browser.document.createHRElement();
+                        separator.appendChild(hr);
+
+                        menu.appendChild(separator);
+                    } else {
+                        var hr = js.Browser.document.createHRElement();
+                        menu.appendChild(hr);
+                    }
                 } else {
                     //var li = js.Browser.document.createLIElement();
                     var li = createItem(item, id);

hide/view/Gym.hx

@@ -0,0 +1,153 @@
+package hide.view;
+
+class Gym extends hide.ui.View<{}> {
+	override function onDisplay() {
+		element.empty();
+		element.addClass("hide-gym");
+
+		{
+			var toolbar = section(element, "Buttons");
+			toolbar.append(new Element("<h1>Button</h1>"));
+			toolbar.append(new Element('<fancy-button><span class="ico ico-gear"></span></fancy-button>'));
+
+			toolbar.append(new Element("<h1>Selected</h1>"));
+			toolbar.append(new Element('<fancy-button class="selected"><span class="ico ico-gear"></span></fancy-button>'));
+
+			toolbar.append(new Element("<h1>Text button</h1>"));
+
+			toolbar.append(new Element('<fancy-button><span class="label">Options</span></fancy-button>'));
+			toolbar.append(new Element('<fancy-separator></fancy-separator>'));
+			toolbar.append(new Element('<fancy-button class="selected"><span class="label">Options</span></fancy-button>'));
+
+			toolbar.append(new Element("<h1>Icon and text button</h1>"));
+			toolbar.append(new Element('<fancy-button><span class="ico ico-gear"></span><span class="label">Options</span></fancy-button>'));
+			toolbar.append(new Element('<fancy-separator></fancy-separator>'));
+			toolbar.append(new Element('<fancy-button class="selected"><span class="ico ico-gear"></span><span class="label">Options</span></fancy-button>'));
+
+
+			toolbar.append(new Element("<h1>Icon and really long text button</h1>"));
+			toolbar.append(new Element('<fancy-button><span class="ico ico-gear"></span><span class="label">Lorem ispum sit dolor amet</span></fancy-button>'));
+
+			toolbar.append(new Element("<h1>Icon and dropdown aside </h1>"));
+			toolbar.append(new Element('
+				<fancy-toolbar>
+					<fancy-button>
+						<span class="ico ico-eye"></span>
+					</fancy-button>
+					<fancy-button class="compact">
+						<span class="ico ico-chevron-down"></span>
+					</fancy-button>
+
+					<fancy-separator></fancy-separator>
+
+					<fancy-button class="selected">
+						<span class="ico ico-eye"></span>
+					</fancy-button>
+					<fancy-button class="compact">
+						<span class="ico ico-chevron-down"></span>
+					</fancy-button>
+				</fancy-toolbar>
+				'));
+
+			toolbar.append(new Element("<h1>With dropdown</h1>"));
+			toolbar.append(new Element('
+				<fancy-toolbar>
+					<fancy-button class="dropdown">
+						<span class="label">Options</span>
+					</fancy-button>
+					<fancy-separator></fancy-separator>
+					<fancy-button class="dropdown">
+						<span class="ico ico-filter"></span>
+					</fancy-button>
+				</fancy-toolbar>
+			'
+			)
+			);
+
+			toolbar.append(new Element("<h1>Icon text and dropdown aside </h1>"));
+			toolbar.append(new Element('
+				<fancy-toolbar>
+					<fancy-button>
+						<span class="ico ico-gear"></span>
+						<span class="label">Options</span>
+					</fancy-button>
+					<fancy-button class="compact">
+						<span class="ico ico-chevron-down"></span>
+					</fancy-button>
+			'));
+
+
+			toolbar.find(".compact, .dropdown").click((e:js.jquery.Event) -> {
+				hide.comp.ContextMenu.createDropdown(cast e.currentTarget, getContextMenuContent(), {});
+			});
+
+			toolbar.append(new Element("<h1>Toolbar</h1>"));
+			toolbar.append(new Element(
+				'<fancy-toolbar>
+					<fancy-button>
+						<span class="ico ico-home"></span>
+					</fancy-button>
+					<fancy-button>
+						<span class="ico ico-clipboard"></span>
+					</fancy-button>
+					<fancy-button>
+						<span class="ico ico-gear"></span>
+					</fancy-button>
+					<fancy-separator></fancy-separator>
+					<fancy-button class="selected">
+						<span class="ico ico-pencil"></span>
+					</fancy-button>
+					<fancy-button>
+						<span class="ico ico-eraser"></span>
+					</fancy-button>
+					<fancy-button>
+						<span class="ico ico-paint-brush"></span>
+					</fancy-button>
+				</fancy-toolbar>'));
+		}
+	}
+
+	static function section(parent: Element, name: String) : Element {
+		return new Element('<details><summary>$name</summary></details>').appendTo(parent);
+	}
+
+	static function getContextMenuContent() : Array<hide.comp.ContextMenu.MenuItem> {
+
+		var radioState = 0;
+		return [
+			{label: "Label"},
+
+			{isSeparator: true},
+			{label: "Basic"},
+			{label: "Disabled", enabled: false},
+			{label: "Icon", icon: "pencil"},
+			{label: "Checked", checked: true},
+			{label: "Unchecked", checked: false},
+			{label: "Keys", keys: "Ctrl+Z"},
+			{label: "Long Keys", keys: "Ctrl+Shift+Alt+Z"},
+			{label: "Keys Disabled", keys: "Ctrl+D", enabled: false},
+
+			{label: "Radio", isSeparator: true},
+			{label: "Green", radio: () -> radioState == 0, click: () -> radioState = 0, stayOpen: true },
+			{label: "Blue", radio: () -> radioState == 1, click: () -> radioState = 1, stayOpen: true },
+			{label: "Red", radio: () -> radioState == 2, click: () -> radioState = 2, stayOpen: true },
+
+			{label: "Edit", isSeparator: true},
+			{label: "Copy", keys: "Ctrl+C"},
+			{label: "Paste", keys: "Ctrl+V"},
+			{label: "Cut", keys: "Ctrl+X"},
+
+			{label: "Menus", isSeparator: true},
+			{label: "Submenu", menu: [
+				{label: "Submenu item 1"},
+				{label: "Submenu item 2"},
+				{label: "Submenu item 3"},
+			]},
+			{label: "Very long", menu: [
+				for (i in 0...200) {label: 'Item $i'}
+			]}
+		];
+	}
+
+	static var _ = hide.ui.View.register(Gym);
+}