@yuneta/gobj-ui 7.23.86 → 7.23.88

package/src/c_yui_json_graph.js

@@ -47,7 +47,7 @@ import {
     refresh_language,
 } from "@yuneta/gobj-js";
 
-import {yui_toolbar} from "./yui_toolbar.js";
+import {yui_toolbar, yui_toolbar_icon} from "./yui_toolbar.js";
 import {attach_clear} from "./yui_inputs.js";
 import {
     yui_graph_camera_items,
@@ -57,7 +57,6 @@ 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";
@@ -177,7 +176,7 @@ SDATA(data_type_t.DTP_POINTER,  "$container",       0,  null,   "Container eleme
 SDATA(data_type_t.DTP_STRING,   "canvas_id",        0,  "",     "Canvas ID"),
 
 /*---------------- Graph Settings ----------------*/
-SDATA(data_type_t.DTP_STRING,   "wide",             0,  "36px", "Height of header"),
+SDATA(data_type_t.DTP_STRING,   "wide",             0,  "40px", "Height of header. 40px and not 36: it is what an untouched Bulma control measures, so the find box stood 4px taller than every button beside it, and it is what the third graph of the family (C_YUI_TREEDB_GRAPH) uses"),
 SDATA(data_type_t.DTP_STRING,   "layout",           0,  "json-tree", "Layout key (see LAYOUTS)"),
 
 SDATA_END()
@@ -586,7 +585,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'}, [yui_graph_icon('yi-magnifying-glass')]]
+            ['span', {class: 'icon is-left'}, [yui_toolbar_icon('yi-magnifying-glass')]]
         ]]);
     attach_clear($find_control, $find_input);
 
@@ -657,13 +656,20 @@ function make_toolbar(gobj)
         return ['option', attrs, layout_label(key)];
     });
 
+    /*  Bulma's `.select` styles a WRAPPER that holds the control, not
+     *  the control: on the `<select>` itself its `.select select` rule
+     *  never matches, so the box kept the browser's own font -- 13.3px
+     *  in a row where everything else says 16 -- and none of Bulma's
+     *  chrome. The class goes where Bulma looks for it.  */
     let $layout_select = createElement2(
-        ['select', {
-            class: 'JSON_GRAPH_LAYOUT select',
-            style: {height: toolbar_wide, "margin-left": "0.5em"},
-            title: t("layout"), 'data-i18n-title': "layout",
-            'aria-label': t("layout"), 'data-i18n-aria-label': "layout"
-        }, options, {
+        ['div', {class: 'select', style: {"margin-left": "0.5em"}}, [
+            ['select', {
+                class: 'JSON_GRAPH_LAYOUT',
+                style: {height: toolbar_wide},
+                title: t("layout"), 'data-i18n-title': "layout",
+                'aria-label': t("layout"), 'data-i18n-aria-label': "layout"
+            }, options]
+        ], {
             change: (evt) => {
                 evt.stopPropagation();
                 gobj_send_event(gobj, "EV_CHANGE_LAYOUT", {layout: evt.target.value}, gobj);

package/src/c_yui_shell.css

@@ -524,6 +524,16 @@
  *      Circular badge populated by the host-registered provider
  *      via yui_shell_set_avatar_provider().
  *============================================================*/
+/*  The badge is 2rem, and the item's own 0.5rem padding put the
+ *  avatar at 48px in a row of 44px items -- the only thing in the app
+ *  bar that stood taller than the rest. The padding gives way; the
+ *  badge (which is the identity, and the hit target) does not, and the
+ *  item keeps the row's 2.75rem min-height.  */
+.yui-toolbar-item.yui-toolbar-avatar {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+
 .yui-toolbar-avatar .yui-avatar {
     display: inline-flex;
     align-items: center;

package/src/c_yui_treedb_graph.js

@@ -79,14 +79,11 @@ import {
     gobj_stop_children,
 } from "@yuneta/gobj-js";
 
-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,
-    yui_graph_icon,
-    YUI_GRAPH_ICON_SIZE,
-} from "./yui_graph_camera.js";
+import {yui_graph_fold_items} from "./yui_graph_camera.js";
+import {yui_toolbar, yui_toolbar_icon, YUI_TOOLBAR_ICON_SIZE} from "./yui_toolbar.js";
 import {
     removeChildElements,
     disableElements,
@@ -406,7 +403,7 @@ function build_ui(gobj)
             ['div', {class: 'GRAPH_LEGEND is-flex-grow-0',
                      style: 'display:flex; flex-wrap:nowrap; align-items:center; ' +
                             'gap:.35rem; padding:.3rem .5rem; overflow-x:auto; ' +
-                            'min-height:2.2rem;'}, []],
+                            'min-height:2.9rem;'}, []],
             ['div', {class: `GRAPH_BODY is-flex-grow-1 ${padding}`, style: 'height:100%; min-height:0; overflow:hidden;'}, [
                 ['div', {id: priv.canvas_id, class: `GRAPH_CANVAS graph-container`, style: 'height:100%; min-height:0;border: 1px solid var(--bulma-border-weak);border-radius:0.2rem;'}, [
                 ]]
@@ -578,7 +575,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'},
-            yui_graph_icon(NODE_MODE_ICONS[mode]),
+            yui_toolbar_icon(NODE_MODE_ICONS[mode]),
             {
                 click: (evt) => {
                     evt.stopPropagation();
@@ -595,7 +592,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'},
-            yui_graph_icon('yi-font'),
+            yui_toolbar_icon('yi-font'),
             {
                 click: (evt) => {
                     evt.stopPropagation();
@@ -697,7 +694,7 @@ function make_toolbar(gobj)
         }],
 
         ['button', {class: 'GRAPH_REFRESH button'}, [
-            yui_graph_icon('yi-arrows-rotate'),
+            yui_toolbar_icon('yi-arrows-rotate'),
             ['span', {class: 'is-hidden-mobile', style: 'padding-left:5px;', i18n: 'refresh'}, 'refresh']
         ], {
             click: (evt) => {
@@ -722,7 +719,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'}, [
-            yui_graph_icon('yi-eye'),
+            yui_toolbar_icon('yi-eye'),
             ['span', {class: 'is-hidden-mobile', style: 'padding-left:5px;', i18n: 'raw json'}, 'raw json']
         ], {
             click: (evt) => {
@@ -779,7 +776,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'}, [yui_graph_icon('yi-magnifying-glass')]]
+            ['span', {class: 'icon is-left'}, [yui_toolbar_icon('yi-magnifying-glass')]]
         ]]);
     attach_clear($find_control, $find_input);
 
@@ -2458,19 +2455,41 @@ function ac_set_operation_mode(gobj, event, kw, src)
  *  into the URL, so what you are looking at stays linkable.
  ************************************************************/
 /*  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.
+ *  one thing: it is a layer CONTROL, so it is built at the toolbar's
+ *  size and not one step under it. `is-small` was kept for its
+ *  padding, on the argument that a chip per topic has to fit on one
+ *  row -- and the strip SCROLLS sideways (`overflow-x:auto`), so it
+ *  never had to fit anything. It is gone.
  *
  *  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;`;
+ *  the name, not the name. `has-text-grey` is what it used to wear,
+ *  and Bulma's grey on the dark scheme is 3.86:1 -- under the 4.5 that
+ *  small text needs, which is why it read as a smudge. It takes the
+ *  chip's own colour at 80%: 12:1 in dark, 10:1 in light, and still
+ *  visibly secondary.  */
+const LEGEND_GLYPH_STYLE = `font-size:${YUI_TOOLBAR_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;';
+const LEGEND_COUNT_STYLE = 'margin-left:.4rem; font-size:.875rem; opacity:.8;';
+
+/*  The MAIN topic is the trunk the whole tree hangs from, and it was
+ *  the one chip drawn as unavailable: its body was a `<button
+ *  disabled>` (because it cannot be hidden) and Bulma paints that at
+ *  half opacity, with its star a grey `span` beside four bright ones.
+ *  The most important chip of the strip read as the dead one.
+ *
+ *  It is not a button any more -- a control that does nothing should
+ *  not look like a control that is broken. It is a `div` wearing the
+ *  same `.button` skin, at full strength, with the name in bold and
+ *  the star in gold.  */
+const LEGEND_MAIN_NAME_STYLE = LEGEND_NAME_STYLE + ' font-weight:700;';
+/*  `--bulma-warning-on-scheme` and NOT `--bulma-warning`: the raw
+ *  brand colour is the same bright gold in both schemes, which is
+ *  10.4:1 on the dark ground and **1.75:1** on the light one -- a
+ *  star nobody could see in daylight. The `-on-scheme` variant is
+ *  what Bulma keeps for a brand colour used as INK: the same hue,
+ *  darkened to 23% lightness when the scheme is light.  */
+const LEGEND_STAR_MAIN_STYLE = LEGEND_GLYPH_STYLE +
+    ' color:var(--bulma-warning-on-scheme, var(--bulma-warning, #ffdd57));';
 
 /*  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;
@@ -2534,10 +2553,10 @@ function refresh_legend(gobj)
                              `border:1px solid rgba(0,0,0,.25);` +
                              (hidden? 'opacity:.35;' : '')}],
             ['span', {class: 'GRAPH_LEGEND_NAME',
-                      style: LEGEND_NAME_STYLE +
+                      style: (is_main? LEGEND_MAIN_NAME_STYLE : LEGEND_NAME_STYLE) +
                              (hidden? ' text-decoration:line-through; opacity:.6;' : '')},
              topic_name],
-            ['span', {class: 'GRAPH_LEGEND_COUNT has-text-grey',
+            ['span', {class: 'GRAPH_LEGEND_COUNT',
                       style: LEGEND_COUNT_STYLE},
              hidden? `${entry.total}` : `${entry.visible}/${entry.total}`]
         );
@@ -2549,7 +2568,7 @@ function refresh_legend(gobj)
          *  and a `disabled="undefined"` button is a disabled button --
          *  every chip was dead except its star.  */
         let body_attrs = {
-            class: 'GRAPH_LEGEND_ITEM button is-small' +
+            class: 'GRAPH_LEGEND_ITEM button' +
                    (focused? ' GRAPH_LEGEND_FOCUSED' : '') +
                    (is_main? ' GRAPH_LEGEND_MAIN' : ''),
             type: 'button',
@@ -2565,18 +2584,26 @@ function refresh_legend(gobj)
             'aria-label': topic_name,
             'aria-pressed': hidden? 'false' : 'true',
         };
+        /*  The main topic cannot be hidden, so its body is not a toggle
+         *  and must not be drawn as one that is broken: a `div` with the
+         *  same `.button` skin, at full strength. `disabled` on a button
+         *  is Bulma's half opacity, which put the trunk of the tree in
+         *  the strip's weakest chip.  */
+        let $body;
         if(is_main) {
-            body_attrs.disabled = 'disabled';
+            delete body_attrs['aria-pressed'];
+            $body = createElement2(['div', body_attrs, controls]);
+        } else {
+            $body = createElement2(
+                ['button', body_attrs, controls, {
+                    click: (evt) => {
+                        evt.stopPropagation();
+                        gobj_send_event(gobj, "EV_LEGEND_TOPIC",
+                            {topic: topic_name, action: "toggle"}, gobj);
+                    }
+                }]
+            );
         }
-        let $body = createElement2(
-            ['button', body_attrs, controls, {
-                click: (evt) => {
-                    evt.stopPropagation();
-                    gobj_send_event(gobj, "EV_LEGEND_TOPIC",
-                        {topic: topic_name, action: "toggle"}, gobj);
-                }
-            }]
-        );
 
         let extras = [];
 
@@ -2585,13 +2612,13 @@ function refresh_legend(gobj)
          *  is a button too: pressing it hands the choice back to the
          *  graph (deduced again). On a deduced one it is a mark.  */
         if(is_main && state.main_chosen) {
-            extras.push(['button', {class: 'GRAPH_LEGEND_STAR button is-small pressed_state',
-                                    type: 'button', style: 'padding:0 .4rem;',
+            extras.push(['button', {class: 'GRAPH_LEGEND_STAR button pressed_state',
+                                    type: 'button', style: 'padding:0 .5rem;',
                                     title: t('main topic'), 'data-i18n-title': 'main topic',
                                     'aria-label': t('main topic'),
                                     'data-i18n-aria-label': 'main topic',
                                     'aria-pressed': 'true'},
-                         [['span', {style: LEGEND_GLYPH_STYLE}, '★']], {
+                         [['span', {style: LEGEND_STAR_MAIN_STYLE}, '★']], {
                 click: (evt) => {
                     evt.stopPropagation();
                     gobj_send_event(gobj, "EV_LEGEND_TOPIC",
@@ -2599,13 +2626,17 @@ function refresh_legend(gobj)
                 }
             }]);
         } else if(is_main) {
-            extras.push(['span', {class: 'GRAPH_LEGEND_STAR button is-small is-static',
-                                  style: 'padding:0 .4rem;',
+            /*  Deduced, not chosen: a MARK and not a button. Gold and at
+             *  full strength all the same -- `is-static` painted it the
+             *  grey of something switched off, next to four bright
+             *  stars that only offer to become this one.  */
+            extras.push(['span', {class: 'GRAPH_LEGEND_STAR button',
+                                  style: 'padding:0 .5rem; cursor:default;',
                                   title: t('main topic'), 'data-i18n-title': 'main topic'},
-                         [['span', {style: LEGEND_GLYPH_STYLE}, '★']]]);
+                         [['span', {style: LEGEND_STAR_MAIN_STYLE}, '★']]]);
         } else if(!hidden) {
-            extras.push(['button', {class: 'GRAPH_LEGEND_STAR button is-small',
-                                    type: 'button', style: 'padding:0 .4rem;',
+            extras.push(['button', {class: 'GRAPH_LEGEND_STAR button',
+                                    type: 'button', style: 'padding:0 .5rem;',
                                     title: t('main topic'), 'data-i18n-title': 'main topic',
                                     'aria-label': t('main topic'),
                                     'data-i18n-aria-label': 'main topic'},
@@ -2623,9 +2654,9 @@ function refresh_legend(gobj)
          *  the schema hangs from the main one.  */
         if(!hidden && entry.linked && entry.loose > 0) {
             extras.push(['button', {
-                class: 'GRAPH_LEGEND_LOOSE button is-small' +
+                class: 'GRAPH_LEGEND_LOOSE button' +
                        (entry.loose_shown? ' pressed_state' : ''),
-                type: 'button', style: 'padding:0 .45rem;',
+                type: 'button', style: 'padding:0 .55rem;',
                 title: t('loose records'), 'data-i18n-title': 'loose records',
                 'aria-label': t('loose records'),
                 'data-i18n-aria-label': 'loose records',
@@ -2641,9 +2672,9 @@ function refresh_legend(gobj)
 
         if(!hidden) {
             extras.push(['button', {
-                class: 'GRAPH_LEGEND_FOCUS button is-small' +
+                class: 'GRAPH_LEGEND_FOCUS button' +
                        (focused? ' pressed_state' : ''),
-                type: 'button', style: 'padding:0 .4rem;',
+                type: 'button', style: 'padding:0 .5rem;',
                 title: t('highlight topic'), 'data-i18n-title': 'highlight topic',
                 'aria-label': t('highlight topic'),
                 'data-i18n-aria-label': 'highlight topic',

package/src/c_yui_treedb_topic_with_form.js

@@ -91,6 +91,8 @@ import {row_matches} from "./yui_row_search.js";
 
 import {t} from "i18next";
 
+import {yui_toolbar_icon} from "./yui_toolbar.js";
+
 import {plan_treedb_writes, READONLY_FORM_TOOLBAR} from "./treedb_write_plan.js";
 import {yui_file_read, yui_files_manifest, yui_file_id_label} from "./yui_file_field.js";
 import {yui_asset_id} from "./yui_asset.js";
@@ -583,7 +585,7 @@ function build_ui(gobj)
              *  reorder this group as if they were peer actions.  */
             let $edit_button = createElement2(
                 ['button', {id: ``, class: 'button button-edit-record mr-1'}, [
-                    ['i', {class: 'yi-pen'}],
+                    yui_toolbar_icon('yi-pen'),
                     ['span',
                         {
                             class: 'is-hidden-mobile', i18n: 'edit', style: 'padding-left:5px;'
@@ -609,7 +611,7 @@ function build_ui(gobj)
             if(with_new_button) {
                 let $new_button = createElement2(
                     ['button', {id: ``, class: 'button button-new-record mr-1', disabled: true}, [
-                        ['i', {class: 'yi-plus'}],
+                        yui_toolbar_icon('yi-plus'),
                         ['span',
                             {
                                 class: 'is-hidden-mobile', i18n: 'new', style: 'padding-left:5px;'
@@ -629,7 +631,7 @@ function build_ui(gobj)
             if(with_delete_button) {
                 let $delete_button = createElement2(
                     ['button', {id: ``, class: 'button button-delete-record mr-1', disabled: true}, [
-                        ['i', {class: 'yi-trash'}],
+                        yui_toolbar_icon('yi-trash'),
                         ['span',
                             {
                                 class: 'is-hidden-mobile', i18n: 'delete', style: 'padding-left:5px;'
@@ -650,7 +652,7 @@ function build_ui(gobj)
             if(with_copy_button) {
                 let $copy_button = createElement2(
                     ['button', {id: ``, class: 'button button-copy-record mr-1', disabled: true}, [
-                        ['i', {class: 'yi-copy'}],
+                        yui_toolbar_icon('yi-copy'),
                         ['span',
                             {
                                 class: 'is-hidden-mobile', i18n: 'copy', style: 'padding-left:5px;'
@@ -671,7 +673,7 @@ function build_ui(gobj)
             if(with_paste_button) {
                 let $paste_button = createElement2(
                     ['button', {id: ``, class: 'button button-paste-record mr-1', disabled: true}, [
-                        ['i', {class: 'yi-paste'}],
+                        yui_toolbar_icon('yi-paste'),
                         ['span',
                             {
                                 class: 'is-hidden-mobile', i18n: 'paste', style: 'padding-left:5px;'
@@ -727,7 +729,7 @@ function build_ui(gobj)
                     'data-i18n-placeholder': 'search'
                 }],
                 ['span', {class: 'icon is-left'}, [
-                    ['i', {class: 'yi-magnifying-glass'}]
+                    yui_toolbar_icon('yi-magnifying-glass')
                 ]]
             ]]
         );
@@ -754,7 +756,7 @@ function build_ui(gobj)
     if(with_refresh_button) {
         let $refresh = createElement2(
             ['button', {class: 'button mr-1', title: t('refresh'), 'data-i18n-title': 'refresh'}, [
-                ['i', {class: 'yi-arrows-rotate'}],
+                yui_toolbar_icon('yi-arrows-rotate'),
                 ['span', {class: 'is-hidden-mobile', i18n: 'refresh', style: 'padding-left:5px;'}, 'refresh']
             ], {
                 'click': (event) => {
@@ -775,7 +777,7 @@ function build_ui(gobj)
             ['button', {class: 'TREEDB_TABLE_SCHEMA button mr-1',
                         title: t('schema'), 'data-i18n-title': 'schema',
                         'aria-label': t('schema'), 'data-i18n-aria-label': 'schema'}, [
-                ['i', {class: 'yi-hexagon-nodes'}],
+                yui_toolbar_icon('yi-hexagon-nodes'),
                 ['span', {class: 'is-hidden-mobile', i18n: 'schema', style: 'padding-left:5px;'}, 'schema']
             ], {
                 'click': (event) => {
@@ -796,7 +798,7 @@ function build_ui(gobj)
                         title: t('choose the columns to show'),
                         'data-i18n-title': 'choose the columns to show',
                         'aria-label': t('columns'), 'data-i18n-aria-label': 'columns'}, [
-                ['i', {class: 'yi-table'}],
+                yui_toolbar_icon('yi-table'),
                 ['span', {class: 'is-hidden-mobile', i18n: 'columns', style: 'padding-left:5px;'}, 'columns']
             ], {
                 'click': (event) => {
@@ -817,7 +819,7 @@ function build_ui(gobj)
                         title: t('download the rows loaded in this table as csv'),
                         'data-i18n-title': 'download the rows loaded in this table as csv',
                         'aria-label': t('export'), 'data-i18n-aria-label': 'export'}, [
-                ['i', {class: 'yi-download'}],
+                yui_toolbar_icon('yi-download'),
                 ['span', {class: 'is-hidden-mobile', i18n: 'export', style: 'padding-left:5px;'}, 'export']
             ], {
                 'click': (event) => {

package/src/c_yui_treedb_topics.js

@@ -60,6 +60,7 @@ import "./c_yui_treedb_topics.css";
 import {yui_shell_show_error, yui_shell_show_modal, yui_shell_popup_layer} from "./shell_modals.js";
 import {yui_shell_of, yui_shell_set_sub_routes} from "./c_yui_shell.js";
 import {nodes_answer} from "./nodes_answer.js";
+import {yui_toolbar_icon} from "./yui_toolbar.js";
 
 import {t} from "i18next";
 
@@ -273,7 +274,7 @@ function build_ui(gobj)
                     ['button', {class: 'button TREEDB_TOPICS_BACK is-hidden',
                                 title: t('topics'), 'aria-label': t('topics'),
                                 'data-i18n-title': 'topics', 'data-i18n-aria-label': 'topics'}, [
-                        ['span', {class: 'icon'}, [['i', {class: 'yi-arrow-left'}]]],
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-arrow-left')]],
                         ['span', {i18n: 'topics'}, 'topics']
                     ], {
                         click: (evt) => {
@@ -287,7 +288,7 @@ function build_ui(gobj)
                                 title: t('schema graph'), 'aria-label': t('schema graph'),
                                 'data-i18n-title': 'schema graph',
                                 'data-i18n-aria-label': 'schema graph'}, [
-                        ['span', {class: 'icon'}, [['i', {class: 'yi-hexagon-nodes'}]]],
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-hexagon-nodes')]],
                         ['span', {i18n: 'schema'}, 'schema']
                     ], {
                         click: (evt) => {
@@ -305,7 +306,7 @@ function build_ui(gobj)
                     ['div', {class: source_url?
                                 'TREEDB_TOPICS_SOURCE' : 'TREEDB_TOPICS_SOURCE is-hidden',
                              title: source_url, 'aria-label': source_url}, [
-                        ['span', {class: 'icon'}, [['i', {class: 'yi-cloudversify'}]]],
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-cloudversify')]],
                         ['span', {class: 'TREEDB_TOPICS_SOURCE_URL'}, source_url]
                     ]],
                     /*  Inspect the treedb's raw tranger json (whole service,
@@ -315,7 +316,7 @@ function build_ui(gobj)
                                 style: 'margin-left:auto;',
                                 title: t('raw json'), 'aria-label': t('raw json'),
                                 'data-i18n-title': 'raw json', 'data-i18n-aria-label': 'raw json'}, [
-                        ['span', {class: 'icon'}, [['i', {class: 'yi-eye'}]]],
+                        ['span', {class: 'icon'}, [yui_toolbar_icon('yi-eye')]],
                         ['span', {i18n: 'raw json'}, 'raw json']
                     ], {
                         click: (evt) => {

package/src/yui_graph_camera.js

@@ -40,37 +40,11 @@ import {createElement2, gobj_send_event} from "@yuneta/gobj-js";
 import {t} from "i18next";
 
 import {set_pressed_state} from "./lib_graph.js";
+/*  The glyph size is the TOOLBAR's, not the graph's: it is shared with
+ *  the JSON viewer and the treedb topics row, which are not graphs.  */
+import {yui_toolbar_icon} from "./yui_toolbar.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`.
  ************************************************************/
@@ -80,7 +54,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},
-        yui_graph_icon(icon, extra_style),
+        yui_toolbar_icon(icon, extra_style),
         {
             click: (evt) => {
                 evt.stopPropagation();

package/src/yui_toolbar.js

@@ -16,6 +16,41 @@ import {
 
 import "./yui_toolbar.css"; // Must be in index.js ?
 
+
+/************************************************************
+ *  ONE size for every glyph of a view's toolbar, in `rem`.
+ *
+ *  It lives here because it belongs to the TOOLBAR and not to
+ *  any one view: it was born in the graph rows (7.23.86) and the
+ *  JSON viewer beside them still drew 16px, which is the same
+ *  drift one level up.
+ *
+ *  `rem` and not `em` is the whole lesson: `em` is measured
+ *  against the button, so one declaration draws three icons --
+ *  `1.5em` is 24px in a plain button, 18px in an `is-small`
+ *  chip, and a labelled button that declares nothing keeps the
+ *  inherited 16px. `rem` is measured against the page, so a
+ *  chip deliberately shorter than a button still carries the
+ *  same glyph.
+ *
+ *  20px against a 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. The
+ *  app BAR is a different band and keeps its own, bigger size
+ *  (`.yui-toolbar-item .icon`, 1.35rem on 44px items).
+ ************************************************************/
+const YUI_TOOLBAR_ICON_SIZE = "1.25rem";
+
+/*  The `<i>` spec of a toolbar glyph, at that one size.  */
+function yui_toolbar_icon(icon_class, extra_style)
+{
+    return ['i', {
+        class: icon_class,
+        style: `font-size:${YUI_TOOLBAR_ICON_SIZE}; line-height:1; color:inherit;` +
+               (extra_style || ''),
+    }];
+}
+
 function yui_toolbar(attrs={}, items = [])
 {
     /*
@@ -125,4 +160,4 @@ function yui_toolbar(attrs={}, items = [])
     return $toolbar;
 }
 
-export {yui_toolbar};
+export {yui_toolbar, yui_toolbar_icon, YUI_TOOLBAR_ICON_SIZE};