@yuneta/gobj-ui 7.23.0 → 7.23.1

package/README.md

@@ -446,8 +446,16 @@ many matched, and **expand-all / collapse-all** (`EV_EXPAND_ALL` /
 `EV_COLLAPSE_ALL`) that fold every card but the root, marking each cut with
 `▸ N` so the shape stays legible and you can see where the rest went. Since
 `7.23.0` each card that HAS a branch also carries its own handle in its header
-(`▾` open, `▸ N` folded, `EV_TOGGLE_FOLD {path}`); a leaf gets a spacer instead,
-because a handle that does nothing is worse than none.
+(`EV_TOGGLE_FOLD {path}`); a leaf gets a spacer of the same width instead,
+because a handle that does nothing is worse than none and the labels should
+stay on one axis.
+
+That handle is the **same filled chip the gobj tree draws** (`+N` folded, `−`
+open — see `render_toggle_html` in `c_yui_gobj_tree_js.js`), and it is a chip
+for a reason: `7.23.0` shipped it as a bare `▾` and on a phone it was
+invisible. At the zoom that fits a document on screen a glyph is a couple of
+pixels of ink; a filled chip is still a visible blob and reads as something you
+press. `+N` also carries the count of what is hidden.
 
 The handle is delegated from the canvas mount in the **capture** phase, over
 `pointerdown`/`pointerup`/`mousedown`/`click`: the card is an `innerHTML`

package/dist/gobj-ui.cjs.js

@@ -9940,15 +9940,40 @@ function build_cell_html(key, value, type, dark, matched) {
 *  innerHTML string, so there is no other way to hang a
 *  handler on it.
 *
-*  Folded it shows the glyph AND the count of branches hidden
-*  under it; open, just the glyph.  No word, no title: a word
-*  inside this string could carry no i18n key.
-************************************************************/
-function fold_toggle_html(path, foldable, folded, branches) {
-	if (!foldable) return `<span style="width:1.1em; flex:0 0 auto;"></span>`;
-	let glyph = folded ? "&#9656;" : "&#9662;";
-	let text = folded ? `${glyph} ${branches}` : glyph;
-	return `<span data-fold-path="${(0, _yuneta_gobj_js.escapeHtml)(path)}" style="flex:0 0 auto; cursor:pointer; user-select:none; padding:0 .2em; min-width:1.1em; text-align:left;">${text}</span>`;
+*  A filled CHIP, the same one the gobj tree draws
+*  (`c_yui_gobj_tree_js.js`, render_toggle_html): background,
+*  border, radius, and `+N` / `−` rather than a triangle.  It
+*  shipped once as a bare `▾` and on a phone it was invisible —
+*  a glyph is a couple of pixels of ink at the zoom that fits a
+*  document on screen, while a filled chip stays a visible blob
+*  and reads as something you press.  `+N` also carries the
+*  count of what is hidden, which the open state does not need.
+*
+*  No `title`: it would be a word inside an innerHTML string,
+*  where it could carry no i18n key and would sit in English
+*  forever.  `+3` and `−` need no language.
+************************************************************/
+function fold_toggle_html(path, foldable, folded, branches, colors) {
+	if (!foldable) return `<span style="width:24px; flex:0 0 auto;"></span>`;
+	let label = folded ? "+" + branches : "&#8722;";
+	return `<span data-fold-path="${(0, _yuneta_gobj_js.escapeHtml)(path)}" style="
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 22px;
+        height: 16px;
+        padding: 0 5px;
+        background: ${colors.bg};
+        color: ${colors.border};
+        border: 1px solid ${colors.bg};
+        border-radius: 6px;
+        font-size: 11px;
+        font-weight: 700;
+        line-height: 1;
+        cursor: pointer;
+        user-select: none;
+    ">${label}</span>`;
 }
 /************************************************************
 *  Does this key/value pair match the find term?
@@ -10060,7 +10085,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
         display: flex;
         align-items: center;
         gap: 6px;
-    ">${fold_toggle_html(path, foldable, folded, pending_complex.length)}<span style="flex:1 1 auto; text-align:center;">${(0, _yuneta_gobj_js.escapeHtml)(label)}</span></div>
+    ">${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}<span style="flex:1 1 auto; text-align:center;">${(0, _yuneta_gobj_js.escapeHtml)(label)}</span></div>
     ${content_html}
 </div>`;
 	let node = {

package/dist/gobj-ui.es.js

@@ -9935,15 +9935,40 @@ function build_cell_html(key, value, type, dark, matched) {
 *  innerHTML string, so there is no other way to hang a
 *  handler on it.
 *
-*  Folded it shows the glyph AND the count of branches hidden
-*  under it; open, just the glyph.  No word, no title: a word
-*  inside this string could carry no i18n key.
-************************************************************/
-function fold_toggle_html(path, foldable, folded, branches) {
-	if (!foldable) return `<span style="width:1.1em; flex:0 0 auto;"></span>`;
-	let glyph = folded ? "&#9656;" : "&#9662;";
-	let text = folded ? `${glyph} ${branches}` : glyph;
-	return `<span data-fold-path="${escapeHtml(path)}" style="flex:0 0 auto; cursor:pointer; user-select:none; padding:0 .2em; min-width:1.1em; text-align:left;">${text}</span>`;
+*  A filled CHIP, the same one the gobj tree draws
+*  (`c_yui_gobj_tree_js.js`, render_toggle_html): background,
+*  border, radius, and `+N` / `−` rather than a triangle.  It
+*  shipped once as a bare `▾` and on a phone it was invisible —
+*  a glyph is a couple of pixels of ink at the zoom that fits a
+*  document on screen, while a filled chip stays a visible blob
+*  and reads as something you press.  `+N` also carries the
+*  count of what is hidden, which the open state does not need.
+*
+*  No `title`: it would be a word inside an innerHTML string,
+*  where it could carry no i18n key and would sit in English
+*  forever.  `+3` and `−` need no language.
+************************************************************/
+function fold_toggle_html(path, foldable, folded, branches, colors) {
+	if (!foldable) return `<span style="width:24px; flex:0 0 auto;"></span>`;
+	let label = folded ? "+" + branches : "&#8722;";
+	return `<span data-fold-path="${escapeHtml(path)}" style="
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 22px;
+        height: 16px;
+        padding: 0 5px;
+        background: ${colors.bg};
+        color: ${colors.border};
+        border: 1px solid ${colors.bg};
+        border-radius: 6px;
+        font-size: 11px;
+        font-weight: 700;
+        line-height: 1;
+        cursor: pointer;
+        user-select: none;
+    ">${label}</span>`;
 }
 /************************************************************
 *  Does this key/value pair match the find term?
@@ -10055,7 +10080,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id) {
         display: flex;
         align-items: center;
         gap: 6px;
-    ">${fold_toggle_html(path, foldable, folded, pending_complex.length)}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span></div>
+    ">${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span></div>
     ${content_html}
 </div>`;
 	let node = {

package/package.json

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

package/src/c_yui_json_graph.js

@@ -668,24 +668,47 @@ function build_cell_html(key, value, type, dark, matched)
  *  innerHTML string, so there is no other way to hang a
  *  handler on it.
  *
- *  Folded it shows the glyph AND the count of branches hidden
- *  under it; open, just the glyph.  No word, no title: a word
- *  inside this string could carry no i18n key.
+ *  A filled CHIP, the same one the gobj tree draws
+ *  (`c_yui_gobj_tree_js.js`, render_toggle_html): background,
+ *  border, radius, and `+N` / `−` rather than a triangle.  It
+ *  shipped once as a bare `▾` and on a phone it was invisible —
+ *  a glyph is a couple of pixels of ink at the zoom that fits a
+ *  document on screen, while a filled chip stays a visible blob
+ *  and reads as something you press.  `+N` also carries the
+ *  count of what is hidden, which the open state does not need.
+ *
+ *  No `title`: it would be a word inside an innerHTML string,
+ *  where it could carry no i18n key and would sit in English
+ *  forever.  `+3` and `−` need no language.
  ************************************************************/
-function fold_toggle_html(path, foldable, folded, branches)
+function fold_toggle_html(path, foldable, folded, branches, colors)
 {
     if(!foldable) {
-        /*  A spacer, so the label of a leaf card stays centred on the
-         *  same axis as the label of a foldable one.  */
-        return `<span style="width:1.1em; flex:0 0 auto;"></span>`;
+        /*  A spacer the width of the chip, so the label of a leaf card
+         *  stays on the same axis as the label of a foldable one.  */
+        return `<span style="width:24px; flex:0 0 auto;"></span>`;
     }
 
-    let glyph = folded? "&#9656;": "&#9662;";       /*  right / down  */
-    let text = folded? `${glyph} ${branches}`: glyph;
+    let label = folded? ("+" + branches): "&#8722;";        /*  +N / −  */
 
-    return `<span data-fold-path="${escapeHtml(path)}" ` +
-        `style="flex:0 0 auto; cursor:pointer; user-select:none; ` +
-        `padding:0 .2em; min-width:1.1em; text-align:left;">${text}</span>`;
+    return `<span data-fold-path="${escapeHtml(path)}" style="
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 22px;
+        height: 16px;
+        padding: 0 5px;
+        background: ${colors.bg};
+        color: ${colors.border};
+        border: 1px solid ${colors.bg};
+        border-radius: 6px;
+        font-size: 11px;
+        font-weight: 700;
+        line-height: 1;
+        cursor: pointer;
+        user-select: none;
+    ">${label}</span>`;
 }
 
 /************************************************************
@@ -854,7 +877,7 @@ function build_json_nodes(gobj, path, kw, nodes, edges, parent_id)
         display: flex;
         align-items: center;
         gap: 6px;
-    ">${fold_toggle_html(path, foldable, folded, pending_complex.length)}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span></div>
+    ">${fold_toggle_html(path, foldable, folded, pending_complex.length, colors)}<span style="flex:1 1 auto; text-align:center;">${escapeHtml(label)}</span></div>
     ${content_html}
 </div>`;