@yuneta/gobj-ui 7.23.82 → 7.23.83

package/README.md

@@ -1364,10 +1364,13 @@ screen every card is a smudge. Since `7.23.82` a record has **three views**
   popover's own scope: this node, the topic, every node), remembered as the
   topic's default and saved per node in `__graphs__` as `node_shape`.
 
-In the view's toolbar (`C_YUI_TREEDB_GRAPH`), next to the fold pair: a
-`nodes` select (`full` / `compact` / `shape`, persisted as `node_mode`; a
-change lays the graph out again, because a figure and a card do not take the
-same room) and a labels toggle (`node_labels`, the name under each figure,
+In the view's toolbar (`C_YUI_TREEDB_GRAPH`), next to the fold pair: three
+push buttons in one group — a card, a line, a figure — the pressed one being
+the view that is on (`full` / `compact` / `shape`, persisted as `node_mode`;
+a change lays the graph out again, because a figure and a card do not take
+the same room; buttons and not a select since `7.23.83`, because a view is
+picked at a glance and a closed list says nothing until it is opened) and a
+labels toggle (`node_labels`, the name under each figure,
 enabled in the `shape` view only — nothing moves, the label hangs outside the
 figure and the layout measures the figure).
 

package/dist/gobj-ui.cjs.js

@@ -61911,68 +61911,64 @@ function option_label(name) {
 *  its context menu (the child's business).
 ************************************************************/
 function node_shape_items(gobj, wide) {
-	let options = NODE_MODES.map((mode) => [
-		"option",
+	return [[
+		"div",
 		{
-			value: mode,
-			"data-i18n": NODE_MODE_LABELS[mode]
+			class: "GRAPH_NODE_MODE buttons has-addons",
+			style: "margin:0 0 0 .5rem; flex:0 0 auto; flex-wrap:nowrap;"
 		},
-		(0, i18next.t)(NODE_MODE_LABELS[mode])
-	]);
-	return [
-		[
-			"span",
-			{
-				class: "GRAPH_NODE_MODE_LABEL is-hidden-mobile",
-				style: "padding-left:10px; padding-right:5px;",
-				i18n: "nodes"
-			},
-			"nodes"
-		],
-		[
-			"div",
-			{ class: "select" },
-			[[
-				"select",
+		NODE_MODES.map((mode) => {
+			let key = NODE_MODE_LABELS[mode];
+			return [
+				"button",
 				{
-					class: "GRAPH_NODE_MODE_SELECT",
-					title: (0, i18next.t)("nodes"),
-					"data-i18n-title": "nodes",
-					"aria-label": (0, i18next.t)("nodes"),
-					"data-i18n-aria-label": "nodes"
-				},
-				options
-			]],
-			{ change: (evt) => {
-				evt.stopPropagation();
-				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_NODE_MODE", { node_mode: evt.target.value }, gobj);
-			} }
-		],
-		[
-			"button",
-			{
-				class: "GRAPH_NODE_LABELS button",
-				type: "button",
-				style: {
-					height: wide,
-					width: "2.5em"
+					class: "GRAPH_NODE_MODE_BTN button",
+					type: "button",
+					"data-mode": mode,
+					style: {
+						height: wide,
+						width: "2.5em"
+					},
+					title: (0, i18next.t)(key),
+					"data-i18n-title": key,
+					"aria-label": (0, i18next.t)(key),
+					"data-i18n-aria-label": key,
+					"aria-pressed": "false"
 				},
-				title: (0, i18next.t)("node labels"),
-				"data-i18n-title": "node labels",
-				"aria-label": (0, i18next.t)("node labels"),
-				"data-i18n-aria-label": "node labels",
-				"aria-pressed": "false"
+				["i", {
+					style: "font-size:1.5em; color:inherit;",
+					class: NODE_MODE_ICONS[mode]
+				}],
+				{ click: (evt) => {
+					evt.stopPropagation();
+					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
+				} }
+			];
+		})
+	], [
+		"button",
+		{
+			class: "GRAPH_NODE_LABELS button",
+			type: "button",
+			style: {
+				height: wide,
+				width: "2.5em"
 			},
-			["i", {
-				style: "font-size:1.5em; color:inherit;",
-				class: "yi-font"
-			}],
-			{ click: (evt) => {
-				evt.stopPropagation();
-				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
-			} }
-		]
-	];
+			title: (0, i18next.t)("node labels"),
+			"data-i18n-title": "node labels",
+			"aria-label": (0, i18next.t)("node labels"),
+			"data-i18n-aria-label": "node labels",
+			"aria-pressed": "false"
+		},
+		["i", {
+			style: "font-size:1.5em; color:inherit;",
+			class: "yi-font"
+		}],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
+		} }
+	]];
 }
 var NODE_MODES = [
 	"expanded",
@@ -61984,13 +61980,21 @@ var NODE_MODE_LABELS = {
 	compact: "compact",
 	shape: "shape"
 };
+var NODE_MODE_ICONS = {
+	expanded: "yi-square",
+	compact: "yi-bars",
+	shape: "yi-hexagon-nodes"
+};
 function refresh_node_shape_buttons(gobj, $root) {
 	if (!$root) return;
 	let mode = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "node_mode");
 	if (!NODE_MODES.includes(mode)) mode = "expanded";
 	let labels = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "node_labels");
-	let $mode = $root.querySelector(".GRAPH_NODE_MODE_SELECT");
-	if ($mode) $mode.value = mode;
+	for (let $btn of $root.querySelectorAll(".GRAPH_NODE_MODE_BTN")) {
+		let on = $btn.getAttribute("data-mode") === mode;
+		$btn.classList.toggle("pressed_state", on);
+		$btn.setAttribute("aria-pressed", on ? "true" : "false");
+	}
 	set_pressed_state($root, ".GRAPH_NODE_LABELS", labels);
 	let $labels = $root.querySelector(".GRAPH_NODE_LABELS");
 	if ($labels) {

package/dist/gobj-ui.es.js

@@ -61906,68 +61906,64 @@ function option_label(name) {
 *  its context menu (the child's business).
 ************************************************************/
 function node_shape_items(gobj, wide) {
-	let options = NODE_MODES.map((mode) => [
-		"option",
+	return [[
+		"div",
 		{
-			value: mode,
-			"data-i18n": NODE_MODE_LABELS[mode]
+			class: "GRAPH_NODE_MODE buttons has-addons",
+			style: "margin:0 0 0 .5rem; flex:0 0 auto; flex-wrap:nowrap;"
 		},
-		t(NODE_MODE_LABELS[mode])
-	]);
-	return [
-		[
-			"span",
-			{
-				class: "GRAPH_NODE_MODE_LABEL is-hidden-mobile",
-				style: "padding-left:10px; padding-right:5px;",
-				i18n: "nodes"
-			},
-			"nodes"
-		],
-		[
-			"div",
-			{ class: "select" },
-			[[
-				"select",
+		NODE_MODES.map((mode) => {
+			let key = NODE_MODE_LABELS[mode];
+			return [
+				"button",
 				{
-					class: "GRAPH_NODE_MODE_SELECT",
-					title: t("nodes"),
-					"data-i18n-title": "nodes",
-					"aria-label": t("nodes"),
-					"data-i18n-aria-label": "nodes"
-				},
-				options
-			]],
-			{ change: (evt) => {
-				evt.stopPropagation();
-				gobj_send_event(gobj, "EV_SET_NODE_MODE", { node_mode: evt.target.value }, gobj);
-			} }
-		],
-		[
-			"button",
-			{
-				class: "GRAPH_NODE_LABELS button",
-				type: "button",
-				style: {
-					height: wide,
-					width: "2.5em"
+					class: "GRAPH_NODE_MODE_BTN button",
+					type: "button",
+					"data-mode": mode,
+					style: {
+						height: wide,
+						width: "2.5em"
+					},
+					title: t(key),
+					"data-i18n-title": key,
+					"aria-label": t(key),
+					"data-i18n-aria-label": key,
+					"aria-pressed": "false"
 				},
-				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: NODE_MODE_ICONS[mode]
+				}],
+				{ click: (evt) => {
+					evt.stopPropagation();
+					gobj_send_event(gobj, "EV_SET_NODE_MODE", { node_mode: mode }, gobj);
+				} }
+			];
+		})
+	], [
+		"button",
+		{
+			class: "GRAPH_NODE_LABELS button",
+			type: "button",
+			style: {
+				height: wide,
+				width: "2.5em"
 			},
-			["i", {
-				style: "font-size:1.5em; color:inherit;",
-				class: "yi-font"
-			}],
-			{ click: (evt) => {
-				evt.stopPropagation();
-				gobj_send_event(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
-			} }
-		]
-	];
+			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"
+		}],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			gobj_send_event(gobj, "EV_TOGGLE_NODE_LABELS", {}, gobj);
+		} }
+	]];
 }
 var NODE_MODES = [
 	"expanded",
@@ -61979,13 +61975,21 @@ var NODE_MODE_LABELS = {
 	compact: "compact",
 	shape: "shape"
 };
+var NODE_MODE_ICONS = {
+	expanded: "yi-square",
+	compact: "yi-bars",
+	shape: "yi-hexagon-nodes"
+};
 function refresh_node_shape_buttons(gobj, $root) {
 	if (!$root) return;
 	let mode = gobj_read_str_attr(gobj, "node_mode");
 	if (!NODE_MODES.includes(mode)) mode = "expanded";
 	let labels = gobj_read_bool_attr(gobj, "node_labels");
-	let $mode = $root.querySelector(".GRAPH_NODE_MODE_SELECT");
-	if ($mode) $mode.value = mode;
+	for (let $btn of $root.querySelectorAll(".GRAPH_NODE_MODE_BTN")) {
+		let on = $btn.getAttribute("data-mode") === mode;
+		$btn.classList.toggle("pressed_state", on);
+		$btn.setAttribute("aria-pressed", on ? "true" : "false");
+	}
 	set_pressed_state($root, ".GRAPH_NODE_LABELS", labels);
 	let $labels = $root.querySelector(".GRAPH_NODE_LABELS");
 	if ($labels) {

package/package.json

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

package/src/c_yui_treedb_graph.js

@@ -547,26 +547,31 @@ function option_label(name)
  ************************************************************/
 function node_shape_items(gobj, wide)
 {
-    /*  `value` explicit on every option, as on the two selects
-     *  above: a translated <option> without one answers with its
-     *  TEXT, and the mode the child is told is a word it does not
-     *  know.  */
-    let options = NODE_MODES.map((mode) =>
-        ['option', {value: mode, 'data-i18n': NODE_MODE_LABELS[mode]}, t(NODE_MODE_LABELS[mode])]
-    );
-    return [
-        ['span', {class: 'GRAPH_NODE_MODE_LABEL is-hidden-mobile',
-                  style: 'padding-left:10px; padding-right:5px;', i18n: 'nodes'}, 'nodes'],
-        ['div', {class: 'select'}, [
-            ['select', {class: 'GRAPH_NODE_MODE_SELECT',
-                        title: t('nodes'), 'data-i18n-title': 'nodes',
-                        'aria-label': t('nodes'), 'data-i18n-aria-label': 'nodes'}, options]
-        ], {
-            change: (evt) => {
-                evt.stopPropagation();
-                gobj_send_event(gobj, "EV_SET_NODE_MODE", {node_mode: evt.target.value}, gobj);
+    /*  Three push buttons in one group, not a select: a view is
+     *  picked at a glance and in one press, and the pressed one
+     *  SAYS which view is on -- a closed list says nothing until it
+     *  is opened. Icons, because a card, a line and a figure draw
+     *  themselves better than three words.  */
+    let mode_buttons = NODE_MODES.map((mode) => {
+        let key = NODE_MODE_LABELS[mode];
+        return ['button', {class: 'GRAPH_NODE_MODE_BTN button', type: 'button',
+                           'data-mode': mode,
+                           style: {height: wide, width: '2.5em'},
+                           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]}],
+            {
+                click: (evt) => {
+                    evt.stopPropagation();
+                    gobj_send_event(gobj, "EV_SET_NODE_MODE", {node_mode: mode}, gobj);
+                }
             }
-        }],
+        ];
+    });
+    return [
+        ['div', {class: 'GRAPH_NODE_MODE buttons has-addons',
+                 style: 'margin:0 0 0 .5rem; flex:0 0 auto; flex-wrap:nowrap;'}, mode_buttons],
         ['button', {class: 'GRAPH_NODE_LABELS button', type: 'button',
                     style: {height: wide, width: '2.5em'},
                     title: t('node labels'), 'data-i18n-title': 'node labels',
@@ -583,17 +588,23 @@ function node_shape_items(gobj, wide)
     ];
 }
 
-/*  The three views of a record, and the label of each in the
- *  select. The values are the child's `node_mode`.  */
+/*  The three views of a record: the child's `node_mode`, the i18n
+ *  key of each, and the glyph -- a card, a line, a figure.  */
 const NODE_MODES = ['expanded', 'compact', 'shape'];
 const NODE_MODE_LABELS = {
     expanded: 'full',
     compact:  'compact',
     shape:    'shape',
 };
+const NODE_MODE_ICONS = {
+    expanded: 'yi-square',
+    compact:  'yi-bars',
+    shape:    'yi-hexagon-nodes',
+};
 
-/*  The select and the labels toggle, from the attrs. The toggle
- *  only means something on figures, so it is disabled elsewhere.
+/*  The pressed view and the labels toggle, from the attrs. The
+ *  toggle only means something on figures, so it is disabled
+ *  elsewhere.
  *  `$root` is whatever holds the toolbar: the toolbar itself before
  *  the view is mounted, the view's container after.  */
 function refresh_node_shape_buttons(gobj, $root)
@@ -606,9 +617,10 @@ function refresh_node_shape_buttons(gobj, $root)
         mode = 'expanded';
     }
     let labels = gobj_read_bool_attr(gobj, "node_labels");
-    let $mode = $root.querySelector('.GRAPH_NODE_MODE_SELECT');
-    if($mode) {
-        $mode.value = mode;
+    for(let $btn of $root.querySelectorAll('.GRAPH_NODE_MODE_BTN')) {
+        let on = ($btn.getAttribute('data-mode') === mode);
+        $btn.classList.toggle('pressed_state', on);
+        $btn.setAttribute('aria-pressed', on? 'true' : 'false');
     }
     set_pressed_state($root, '.GRAPH_NODE_LABELS', labels);
     let $labels = $root.querySelector('.GRAPH_NODE_LABELS');