@yuneta/gobj-ui 7.23.85 → 7.23.86

package/README.md

@@ -850,6 +850,16 @@ both keys, either — a G6 `trigger` is a CHORD, not a list of alternatives:
 `Shortcut.match()` compares the keys held to the keys bound as a SET, so
 `['Control', 'Meta']` would mean both at once.
 
+**One glyph size for the whole row** (`7.23.86`): `YUI_GRAPH_ICON_SIZE` in
+`yui_graph_camera.js`, with a `yui_graph_icon()` that builds the `<i>`. It is
+in **`rem` and not `em`** for a reason worth keeping: in `em` the same
+`1.5em` drew 24px inside a plain button, 18px inside an `is-small` chip of
+the legend, and a labelled button left its icon at the inherited 16px — three
+sizes in two strips that are read as one thing. The legend under the toolbar
+follows it: topic name at `1rem`, count at `.875rem` (the one deliberate step
+down), glyphs at the shared size, and `align-items: stretch` so a chip's star
+and crosshair are as tall as its body.
+
 `C_G6_NODES_TREE` floats a vertical toolbar over the canvas:
 
 | control | what it does |

package/dist/gobj-ui.cjs.js

@@ -10560,6 +10560,30 @@ function getPointPosition(count, index, margin = .2) {
 *          All Rights Reserved.
 ***********************************************************************/
 /************************************************************
+*   ONE size for every glyph of a graph's toolbar ROW, in
+*   `rem` and not `em`.
+*
+*   In `em` the same declaration draws three different icons:
+*   `1.5em` is 24px inside a plain button, 18px inside an
+*   `is-small` one, and a labelled button left its icon at the
+*   inherited 16px -- so one row held 16px, 18px and 24px
+*   glyphs and looked like three toolbars pushed together.
+*   `rem` is measured against the page, so a chip that is
+*   deliberately shorter than a button still carries the same
+*   glyph.
+*
+*   20px against the row's 16px text: an icon-only button is
+*   legible at half its 40px height, and beside a label the
+*   glyph reads as a marker rather than as a second word.
+************************************************************/
+var YUI_GRAPH_ICON_SIZE = "1.25rem";
+function yui_graph_icon(icon_class, extra_style) {
+	return ["i", {
+		class: icon_class,
+		style: `font-size:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;` + (extra_style || "")
+	}];
+}
+/************************************************************
 *   One icon button that fires `event_name`.
 ************************************************************/
 function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
@@ -10577,10 +10601,7 @@ function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
 			"aria-label": (0, i18next.t)(label_key),
 			"data-i18n-aria-label": label_key
 		},
-		["i", {
-			style: "font-size:1.5em; color:inherit;" + (extra_style || ""),
-			class: icon
-		}],
+		yui_graph_icon(icon, extra_style),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			(0, _yuneta_gobj_js.gobj_send_event)(gobj, event_name, { evt }, gobj);
@@ -11673,7 +11694,7 @@ function make_toolbar$5(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_graph_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -18115,7 +18136,7 @@ function make_find_items(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_graph_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -62082,10 +62103,7 @@ function node_shape_items(gobj, wide) {
 					"data-i18n-aria-label": key,
 					"aria-pressed": "false"
 				},
-				["i", {
-					style: "font-size:1.5em; color:inherit;",
-					class: NODE_MODE_ICONS[mode]
-				}],
+				yui_graph_icon(NODE_MODE_ICONS[mode]),
 				{ click: (evt) => {
 					evt.stopPropagation();
 					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
@@ -62107,10 +62125,7 @@ function node_shape_items(gobj, wide) {
 			"data-i18n-aria-label": "node labels",
 			"aria-pressed": "false"
 		},
-		["i", {
-			style: "font-size:1.5em; color:inherit;",
-			class: "yi-font"
-		}],
+		yui_graph_icon("yi-font"),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
@@ -62204,7 +62219,7 @@ function make_toolbar(gobj) {
 		[
 			"button",
 			{ class: "GRAPH_REFRESH button" },
-			[["i", { class: "yi-arrows-rotate" }], [
+			[yui_graph_icon("yi-arrows-rotate"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62229,7 +62244,7 @@ function make_toolbar(gobj) {
 				"data-i18n-title": "raw json",
 				"data-i18n-aria-label": "raw json"
 			},
-			[["i", { class: "yi-eye" }], [
+			[yui_graph_icon("yi-eye"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62274,7 +62289,7 @@ function make_toolbar(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_graph_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -63243,9 +63258,9 @@ function ac_set_operation_mode(gobj, event, kw, src) {
 *  card's graph icon travels — as EV_TOPIC_SELECTED, which the host turns
 *  into the URL, so what you are looking at stays linkable.
 ************************************************************/
-var LEGEND_GLYPH_STYLE = "font-size:1.5em; line-height:1; color:inherit;";
-var LEGEND_NAME_STYLE = "font-size:1.2em; line-height:1.2;";
-var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:1em;";
+var LEGEND_GLYPH_STYLE = `font-size:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;`;
+var LEGEND_NAME_STYLE = "font-size:1rem; line-height:1.2;";
+var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:.875rem;";
 function refresh_legend(gobj) {
 	let priv = gobj.priv;
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
@@ -63418,7 +63433,7 @@ function refresh_legend(gobj) {
 			"div",
 			{
 				class: "GRAPH_LEGEND_CHIP buttons has-addons",
-				style: "margin:0; flex:0 0 auto; flex-wrap:nowrap;"
+				style: "margin:0; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
 			},
 			[$body].concat(extras.map((spec) => (0, _yuneta_gobj_js.createElement2)(spec)))
 		]);

package/dist/gobj-ui.es.js

@@ -10555,6 +10555,30 @@ function getPointPosition(count, index, margin = .2) {
 *          All Rights Reserved.
 ***********************************************************************/
 /************************************************************
+*   ONE size for every glyph of a graph's toolbar ROW, in
+*   `rem` and not `em`.
+*
+*   In `em` the same declaration draws three different icons:
+*   `1.5em` is 24px inside a plain button, 18px inside an
+*   `is-small` one, and a labelled button left its icon at the
+*   inherited 16px -- so one row held 16px, 18px and 24px
+*   glyphs and looked like three toolbars pushed together.
+*   `rem` is measured against the page, so a chip that is
+*   deliberately shorter than a button still carries the same
+*   glyph.
+*
+*   20px against the row's 16px text: an icon-only button is
+*   legible at half its 40px height, and beside a label the
+*   glyph reads as a marker rather than as a second word.
+************************************************************/
+var YUI_GRAPH_ICON_SIZE = "1.25rem";
+function yui_graph_icon(icon_class, extra_style) {
+	return ["i", {
+		class: icon_class,
+		style: `font-size:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;` + (extra_style || "")
+	}];
+}
+/************************************************************
 *   One icon button that fires `event_name`.
 ************************************************************/
 function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
@@ -10572,10 +10596,7 @@ function camera_button(gobj, icon, event_name, label_key, wide, extra_style) {
 			"aria-label": t(label_key),
 			"data-i18n-aria-label": label_key
 		},
-		["i", {
-			style: "font-size:1.5em; color:inherit;" + (extra_style || ""),
-			class: icon
-		}],
+		yui_graph_icon(icon, extra_style),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			gobj_send_event(gobj, event_name, { evt }, gobj);
@@ -11668,7 +11689,7 @@ function make_toolbar$5(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_graph_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -18110,7 +18131,7 @@ function make_find_items(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_graph_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -62077,10 +62098,7 @@ function node_shape_items(gobj, wide) {
 					"data-i18n-aria-label": key,
 					"aria-pressed": "false"
 				},
-				["i", {
-					style: "font-size:1.5em; color:inherit;",
-					class: NODE_MODE_ICONS[mode]
-				}],
+				yui_graph_icon(NODE_MODE_ICONS[mode]),
 				{ click: (evt) => {
 					evt.stopPropagation();
 					gobj_send_event(gobj, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
@@ -62102,10 +62120,7 @@ function node_shape_items(gobj, wide) {
 			"data-i18n-aria-label": "node labels",
 			"aria-pressed": "false"
 		},
-		["i", {
-			style: "font-size:1.5em; color:inherit;",
-			class: "yi-font"
-		}],
+		yui_graph_icon("yi-font"),
 		{ click: (evt) => {
 			evt.stopPropagation();
 			gobj_send_event(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
@@ -62199,7 +62214,7 @@ function make_toolbar(gobj) {
 		[
 			"button",
 			{ class: "GRAPH_REFRESH button" },
-			[["i", { class: "yi-arrows-rotate" }], [
+			[yui_graph_icon("yi-arrows-rotate"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62224,7 +62239,7 @@ function make_toolbar(gobj) {
 				"data-i18n-title": "raw json",
 				"data-i18n-aria-label": "raw json"
 			},
-			[["i", { class: "yi-eye" }], [
+			[yui_graph_icon("yi-eye"), [
 				"span",
 				{
 					class: "is-hidden-mobile",
@@ -62269,7 +62284,7 @@ function make_toolbar(gobj) {
 		[$find_input, [
 			"span",
 			{ class: "icon is-left" },
-			[["i", { class: "yi-magnifying-glass" }]]
+			[yui_graph_icon("yi-magnifying-glass")]
 		]]
 	]);
 	attach_clear($find_control, $find_input);
@@ -63238,9 +63253,9 @@ function ac_set_operation_mode(gobj, event, kw, src) {
 *  card's graph icon travels — as EV_TOPIC_SELECTED, which the host turns
 *  into the URL, so what you are looking at stays linkable.
 ************************************************************/
-var LEGEND_GLYPH_STYLE = "font-size:1.5em; line-height:1; color:inherit;";
-var LEGEND_NAME_STYLE = "font-size:1.2em; line-height:1.2;";
-var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:1em;";
+var LEGEND_GLYPH_STYLE = `font-size:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;`;
+var LEGEND_NAME_STYLE = "font-size:1rem; line-height:1.2;";
+var LEGEND_COUNT_STYLE = "margin-left:.4rem; font-size:.875rem;";
 function refresh_legend(gobj) {
 	let priv = gobj.priv;
 	let $container = gobj_read_attr(gobj, "$container");
@@ -63413,7 +63428,7 @@ function refresh_legend(gobj) {
 			"div",
 			{
 				class: "GRAPH_LEGEND_CHIP buttons has-addons",
-				style: "margin:0; flex:0 0 auto; flex-wrap:nowrap;"
+				style: "margin:0; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
 			},
 			[$body].concat(extras.map((spec) => createElement2(spec)))
 		]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.85",
+  "version": "7.23.86",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_gobj_tree_js.js

@@ -62,6 +62,7 @@ import {
     yui_graph_update_anchor,
     yui_graph_center_on,
     yui_graph_fold_items,
+    yui_graph_icon,
     yui_graph_refresh_item,
     yui_graph_update_zoom,
 } from "./yui_graph_camera.js";
@@ -906,7 +907,7 @@ function make_find_items(gobj)
                  style: 'margin-left:.5rem; margin-right:.5rem; ' +
                         'max-width:12rem; min-width:7rem;'}, [
             $find_input,
-            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
+            ['span', {class: 'icon is-left'}, [yui_graph_icon('yi-magnifying-glass')]]
         ]]);
     attach_clear($find_control, $find_input);
 

package/src/c_yui_json_graph.js

@@ -57,6 +57,7 @@ import {
     yui_graph_place_at,
     yui_graph_viewport_of,
     yui_graph_fold_items,
+    yui_graph_icon,
     yui_graph_refresh_item,
     yui_graph_update_zoom,
 } from "./yui_graph_camera.js";
@@ -585,7 +586,7 @@ function make_toolbar(gobj)
         ['div', {class: 'JSON_GRAPH_FIND control has-icons-left',
                  style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
             $find_input,
-            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
+            ['span', {class: 'icon is-left'}, [yui_graph_icon('yi-magnifying-glass')]]
         ]]);
     attach_clear($find_control, $find_input);
 

package/src/c_yui_treedb_graph.js

@@ -82,7 +82,11 @@ import {
 import {yui_toolbar} from "./yui_toolbar.js";
 import {attach_clear} from "./yui_inputs.js";
 import {register_c_g6_nodes_tree} from "./c_g6_nodes_tree.js";
-import {yui_graph_fold_items} from "./yui_graph_camera.js";
+import {
+    yui_graph_fold_items,
+    yui_graph_icon,
+    YUI_GRAPH_ICON_SIZE,
+} from "./yui_graph_camera.js";
 import {
     removeChildElements,
     disableElements,
@@ -574,7 +578,7 @@ function node_shape_items(gobj, wide)
                            title: t(key), 'data-i18n-title': key,
                            'aria-label': t(key), 'data-i18n-aria-label': key,
                            'aria-pressed': 'false'},
-            ['i', {style: 'font-size:1.5em; color:inherit;', class: NODE_MODE_ICONS[mode]}],
+            yui_graph_icon(NODE_MODE_ICONS[mode]),
             {
                 click: (evt) => {
                     evt.stopPropagation();
@@ -591,7 +595,7 @@ function node_shape_items(gobj, wide)
                     title: t('node labels'), 'data-i18n-title': 'node labels',
                     'aria-label': t('node labels'), 'data-i18n-aria-label': 'node labels',
                     'aria-pressed': 'false'},
-            ['i', {style: 'font-size:1.5em; color:inherit;', class: 'yi-font'}],
+            yui_graph_icon('yi-font'),
             {
                 click: (evt) => {
                     evt.stopPropagation();
@@ -693,7 +697,7 @@ function make_toolbar(gobj)
         }],
 
         ['button', {class: 'GRAPH_REFRESH button'}, [
-            ['i', {class: 'yi-arrows-rotate'}],
+            yui_graph_icon('yi-arrows-rotate'),
             ['span', {class: 'is-hidden-mobile', style: 'padding-left:5px;', i18n: 'refresh'}, 'refresh']
         ], {
             click: (evt) => {
@@ -718,7 +722,7 @@ function make_toolbar(gobj)
         ['button', {class: 'button ml-2 TREEDB_JSON_BTN',
                     title: t('raw json'), 'aria-label': t('raw json'),
                     'data-i18n-title': 'raw json', 'data-i18n-aria-label': 'raw json'}, [
-            ['i', {class: 'yi-eye'}],
+            yui_graph_icon('yi-eye'),
             ['span', {class: 'is-hidden-mobile', style: 'padding-left:5px;', i18n: 'raw json'}, 'raw json']
         ], {
             click: (evt) => {
@@ -775,7 +779,7 @@ function make_toolbar(gobj)
         ['div', {class: 'GRAPH_FIND control has-icons-left',
                  style: 'margin-right:.5rem; max-width:12rem; min-width:7rem;'}, [
             $find_input,
-            ['span', {class: 'icon is-left'}, [['i', {class: 'yi-magnifying-glass'}]]]
+            ['span', {class: 'icon is-left'}, [yui_graph_icon('yi-magnifying-glass')]]
         ]]);
     attach_clear($find_control, $find_input);
 
@@ -2453,19 +2457,20 @@ function ac_set_operation_mode(gobj, event, kw, src)
  *  card's graph icon travels — as EV_TOPIC_SELECTED, which the host turns
  *  into the URL, so what you are looking at stays linkable.
  ************************************************************/
-/*  The glyphs of a chip's small buttons: `is-small` sets a 0.75rem
- *  font and a star or a crosshair at that size is a speck. The BUTTON
- *  stays small so the strip keeps its height; the glyph inside grows.  */
-const LEGEND_GLYPH_STYLE = 'font-size:1.5em; line-height:1; color:inherit;';
-
-/*  And the same for what a chip SAYS. The legend is a layer control --
- *  a gadget somebody uses, not a footnote somebody glances at -- and a
- *  topic name is the thing it is read for, so 0.75rem is the wrong
- *  size for it. The button stays `is-small` because the strip has to
- *  hold a chip per topic on one row; the name and the count come back
- *  up inside it, exactly as the glyphs did.  */
-const LEGEND_NAME_STYLE  = 'font-size:1.2em; line-height:1.2;';
-const LEGEND_COUNT_STYLE = 'margin-left:.4rem; font-size:1em;';
+/*  The legend is the strip UNDER the toolbar, and the two are read as
+ *  one thing: what they say has to be the same size, or the lower one
+ *  reads as a footnote to the upper. `is-small` earns its place in the
+ *  PADDING -- a chip per topic has to fit on one row -- and nowhere
+ *  else, so the text and the glyphs are given back in `rem`, which is
+ *  measured against the page instead of against the 0.75rem the class
+ *  sets. In `em` they were 18px and 14.4px against the toolbar's 24px
+ *  and 16px: three sizes in two strips.
+ *
+ *  The count is the one deliberate step down: it is the number beside
+ *  the name, not the name.  */
+const LEGEND_GLYPH_STYLE = `font-size:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;`;
+const LEGEND_NAME_STYLE  = 'font-size:1rem; line-height:1.2;';
+const LEGEND_COUNT_STYLE = 'margin-left:.4rem; font-size:.875rem;';
 
 /*  The focused chip is HIGHLIGHTED, not pressed. The body of a chip is
  *  the show/hide toggle, and that is what its `aria-pressed` says;
@@ -2653,8 +2658,15 @@ function refresh_legend(gobj)
         }
 
         let $chip = createElement2(
+            /*  `align-items: stretch`: Bulma's `.buttons` centres its
+             *  children, so the star and the crosshair -- a glyph and
+             *  nothing else -- stood 20px tall beside a 30px chip body
+             *  that carries a swatch, a name and a count. In a
+             *  `has-addons` group that reads as three buttons of three
+             *  heights welded together.  */
             ['div', {class: 'GRAPH_LEGEND_CHIP buttons has-addons',
-                     style: 'margin:0; flex:0 0 auto; flex-wrap:nowrap;'},
+                     style: 'margin:0; flex:0 0 auto; flex-wrap:nowrap; ' +
+                            'align-items:stretch;'},
              [$body].concat(extras.map((spec) => createElement2(spec)))]
         );
         $legend.appendChild($chip);

package/src/yui_graph_camera.js

@@ -42,6 +42,35 @@ import {t} from "i18next";
 import {set_pressed_state} from "./lib_graph.js";
 
 
+/************************************************************
+ *   ONE size for every glyph of a graph's toolbar ROW, in
+ *   `rem` and not `em`.
+ *
+ *   In `em` the same declaration draws three different icons:
+ *   `1.5em` is 24px inside a plain button, 18px inside an
+ *   `is-small` one, and a labelled button left its icon at the
+ *   inherited 16px -- so one row held 16px, 18px and 24px
+ *   glyphs and looked like three toolbars pushed together.
+ *   `rem` is measured against the page, so a chip that is
+ *   deliberately shorter than a button still carries the same
+ *   glyph.
+ *
+ *   20px against the row's 16px text: an icon-only button is
+ *   legible at half its 40px height, and beside a label the
+ *   glyph reads as a marker rather than as a second word.
+ ************************************************************/
+export const YUI_GRAPH_ICON_SIZE = "1.25rem";
+
+/*  The `<i>` spec of a toolbar glyph, at that one size.  */
+export function yui_graph_icon(icon_class, extra_style)
+{
+    return ['i', {
+        class: icon_class,
+        style: `font-size:${YUI_GRAPH_ICON_SIZE}; line-height:1; color:inherit;` +
+               (extra_style || ''),
+    }];
+}
+
 /************************************************************
  *   One icon button that fires `event_name`.
  ************************************************************/
@@ -51,8 +80,7 @@ function camera_button(gobj, icon, event_name, label_key, wide, extra_style)
                        style: {height: wide, width: '2.5em'},
                        title: t(label_key), 'data-i18n-title': label_key,
                        'aria-label': t(label_key), 'data-i18n-aria-label': label_key},
-        ['i', {style: 'font-size:1.5em; color:inherit;' + (extra_style || ''),
-               class: icon}],
+        yui_graph_icon(icon, extra_style),
         {
             click: (evt) => {
                 evt.stopPropagation();