From b09a99e9442a432498a2e4fa33f35b303295beeb Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Sun, 21 Jul 2024 12:36:29 +0200 Subject: [PATCH 1/7] Make panel title more accurate --- src/fontra/client/lang/en.json | 2 +- src/fontra/client/lang/zh-CN.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/fontra/client/lang/en.json b/src/fontra/client/lang/en.json index ec5182dd3..6fd16e93c 100644 --- a/src/fontra/client/lang/en.json +++ b/src/fontra/client/lang/en.json @@ -115,7 +115,7 @@ "sidebar.referencefont.customcharacter": "Custom character", "sidebar.referencefont.info": "Drop one or more .ttf, .otf, .woff or .woff2 files in the field below", "sidebar.referencefont.language": "Language", - "sidebar.related-glyphs": "Related Glyphs", + "sidebar.related-glyphs": "Related Glyphs & Characters", "sidebar.selection-info": "Selection Info", "sidebar.selection-info.advance-width": "Advance width", "sidebar.selection-info.component": "Component #%0", diff --git a/src/fontra/client/lang/zh-CN.json b/src/fontra/client/lang/zh-CN.json index 0cf432935..07f4a01b1 100644 --- a/src/fontra/client/lang/zh-CN.json +++ b/src/fontra/client/lang/zh-CN.json @@ -115,7 +115,7 @@ "sidebar.referencefont.customcharacter": "自定义字符", "sidebar.referencefont.info": "将一个或多个.ttf、.otf、.woff或.woff2字体文件拖放到下面的方框内", "sidebar.referencefont.language": "语言", - "sidebar.related-glyphs": "Related Glyphs", + "sidebar.related-glyphs": "Related Glyphs & Characters", "sidebar.selection-info": "选区信息", "sidebar.selection-info.advance-width": "步进宽度", "sidebar.selection-info.component": "组件 #%0", From cc8f66bd4b26d5ffe168867835067e1a2c82473d Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Sun, 21 Jul 2024 13:01:37 +0200 Subject: [PATCH 2/7] Hide accordion item if it has no contents --- .../views/editor/panel-related-glyphs.js | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/src/fontra/views/editor/panel-related-glyphs.js b/src/fontra/views/editor/panel-related-glyphs.js index 96871de24..7dabc843e 100644 --- a/src/fontra/views/editor/panel-related-glyphs.js +++ b/src/fontra/views/editor/panel-related-glyphs.js @@ -69,35 +69,30 @@ export default class RelatedGlyphPanel extends Panel { open: true, content: html.div({ class: "related-glyphs-accordion-item" }, []), getRelatedGlyphsFunc: getRelatedGlyphsByExtension, - noGlyphsString: "No alternate glyphs were found", }, { label: "Components used by this glyph", open: true, content: html.div({ class: "related-glyphs-accordion-item" }, []), getRelatedGlyphsFunc: getComponentGlyphs, - noGlyphsString: "No component glyphs were found", }, { label: "Glyphs using this glyph as a component", open: true, content: html.div({ class: "related-glyphs-accordion-item" }, []), getRelatedGlyphsFunc: getUsedByGlyphs, - noGlyphsString: "No glyphs were found that use this glyph", }, { label: "Character decomposition", open: true, content: html.div({ class: "related-glyphs-accordion-item" }, []), getRelatedGlyphsFunc: getUnicodeDecomposed, - noGlyphsString: "No decomposition information was found", }, { label: "Characters that decompose with this character", open: true, content: html.div({ class: "related-glyphs-accordion-item" }, []), getRelatedGlyphsFunc: getUnicodeUsedBy, - noGlyphsString: "No characters were found that use this character", }, ]; @@ -145,6 +140,8 @@ export default class RelatedGlyphPanel extends Panel { async _updateAccordionItem(item, glyphName, codePoint) { const element = item.content; + const parent = findParentWithClass(element, "ui-accordion-item"); + element.innerHTML = ""; if (glyphName) { element.appendChild(html.span({ class: "placeholder-label" }, ["(loading)"])); @@ -153,7 +150,9 @@ export default class RelatedGlyphPanel extends Panel { glyphName, codePoint ); - element.innerHTML = ""; + + const documentFragment = document.createDocumentFragment(); + if (relatedGlyphs?.length) { for (const { glyphName, codePoints } of relatedGlyphs) { const glyphCell = new GlyphCell( @@ -168,12 +167,13 @@ export default class RelatedGlyphPanel extends Panel { this.handleContextMenu(event, glyphCell, item) ); - element.appendChild(glyphCell); + documentFragment.appendChild(glyphCell); } + element.innerHTML = ""; + element.appendChild(documentFragment); + parent.hidden = false; } else { - element.appendChild( - html.span({ class: "placeholder-label" }, [item.noGlyphsString]) - ); + parent.hidden = true; } } } @@ -309,4 +309,12 @@ function addCharInfo(fontController, glyphNames) { }); } +function findParentWithClass(element, parentClass) { + let parent = element; + do { + parent = parent.parentElement; + } while (parent && !parent.classList.contains(parentClass)); + return parent; +} + customElements.define("panel-related-glyph", RelatedGlyphPanel); From e2ff097f44052669c4fa8f35566f1a621918bc90 Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Sun, 21 Jul 2024 13:37:37 +0200 Subject: [PATCH 3/7] Show placeholder message when no related glyphs were found --- .../views/editor/panel-related-glyphs.js | 30 +++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/src/fontra/views/editor/panel-related-glyphs.js b/src/fontra/views/editor/panel-related-glyphs.js index 7dabc843e..d26110ae5 100644 --- a/src/fontra/views/editor/panel-related-glyphs.js +++ b/src/fontra/views/editor/panel-related-glyphs.js @@ -26,6 +26,11 @@ export default class RelatedGlyphPanel extends Panel { padding: 1em 1em 0 1em; text-wrap: wrap; } + + .no-related-glyphs { + color: #AAA; + padding-top: 1em; + } `; constructor(editorController) { @@ -131,8 +136,21 @@ export default class RelatedGlyphPanel extends Panel { ? `Related glyphs for ${displayGlyphString}` : `Related glyphs (no glyph selected)`; + const results = []; + for (const item of this.accordion.items) { - this._updateAccordionItem(item, glyphName, codePoint); // No await + this._updateAccordionItem(item, glyphName, codePoint).then((hasResult) => { + results.push(hasResult); + if (results.length === this.accordion.items.length) { + if (!results.some((hasResult) => hasResult)) { + this.relatedGlyphsHeaderElement.appendChild( + html.div({ class: "no-related-glyphs" }, [ + "(No related glyphs were found)", + ]) + ); + } + } + }); } this.accordion.hidden = !glyphName; @@ -143,6 +161,7 @@ export default class RelatedGlyphPanel extends Panel { const parent = findParentWithClass(element, "ui-accordion-item"); element.innerHTML = ""; + let hideAccordionItem = true; if (glyphName) { element.appendChild(html.span({ class: "placeholder-label" }, ["(loading)"])); const relatedGlyphs = await item.getRelatedGlyphsFunc( @@ -151,9 +170,8 @@ export default class RelatedGlyphPanel extends Panel { codePoint ); - const documentFragment = document.createDocumentFragment(); - if (relatedGlyphs?.length) { + const documentFragment = document.createDocumentFragment(); for (const { glyphName, codePoints } of relatedGlyphs) { const glyphCell = new GlyphCell( this.fontController, @@ -171,11 +189,13 @@ export default class RelatedGlyphPanel extends Panel { } element.innerHTML = ""; element.appendChild(documentFragment); - parent.hidden = false; + hideAccordionItem = false; } else { - parent.hidden = true; + element.innerHTML = ""; } } + parent.hidden = hideAccordionItem; + return !hideAccordionItem; } handleDoubleClick(event, glyphCell) { From 47ecce13ecbe9dc2e3739136324dcbbf607fb3b6 Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Sun, 21 Jul 2024 13:38:19 +0200 Subject: [PATCH 4/7] Improve fallbaclk text --- src/fontra/views/editor/panel-related-glyphs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fontra/views/editor/panel-related-glyphs.js b/src/fontra/views/editor/panel-related-glyphs.js index d26110ae5..5fe9856da 100644 --- a/src/fontra/views/editor/panel-related-glyphs.js +++ b/src/fontra/views/editor/panel-related-glyphs.js @@ -145,7 +145,7 @@ export default class RelatedGlyphPanel extends Panel { if (!results.some((hasResult) => hasResult)) { this.relatedGlyphsHeaderElement.appendChild( html.div({ class: "no-related-glyphs" }, [ - "(No related glyphs were found)", + "(No related glyphs or characters were found)", ]) ); } From 1717bba60ef4b94332b1c0ffa6696f9799ce3b9f Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Sun, 21 Jul 2024 13:40:27 +0200 Subject: [PATCH 5/7] CSS tweak for Safari --- src/fontra/client/web-components/glyph-cell.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/fontra/client/web-components/glyph-cell.js b/src/fontra/client/web-components/glyph-cell.js index 58ce81018..e97870043 100644 --- a/src/fontra/client/web-components/glyph-cell.js +++ b/src/fontra/client/web-components/glyph-cell.js @@ -58,6 +58,7 @@ export class GlyphCell extends UnlitElement { text-overflow: ellipsis; text-wrap: nowrap; text-align: center; + word-break: keep-all; } .glyph-status-color { From ba9f6cfc2a7d3b1bb42565282ab2ac0cc5577ef7 Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Sun, 21 Jul 2024 17:47:03 +0200 Subject: [PATCH 6/7] Fiddle with fallback strings --- src/fontra/views/editor/panel-related-glyphs.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/fontra/views/editor/panel-related-glyphs.js b/src/fontra/views/editor/panel-related-glyphs.js index 5fe9856da..b7a4e33b0 100644 --- a/src/fontra/views/editor/panel-related-glyphs.js +++ b/src/fontra/views/editor/panel-related-glyphs.js @@ -133,8 +133,8 @@ export default class RelatedGlyphPanel extends Panel { character && character != glyphName ? `“${character}”, ${glyphName}` : glyphName; this.relatedGlyphsHeaderElement.innerHTML = glyphName - ? `Related glyphs for ${displayGlyphString}` - : `Related glyphs (no glyph selected)`; + ? `Related glyphs & characters for ${displayGlyphString}` + : `Related glyphs & characters`; const results = []; @@ -145,7 +145,9 @@ export default class RelatedGlyphPanel extends Panel { if (!results.some((hasResult) => hasResult)) { this.relatedGlyphsHeaderElement.appendChild( html.div({ class: "no-related-glyphs" }, [ - "(No related glyphs or characters were found)", + glyphName + ? "(No related glyphs or characters were found)" + : "(No glyph selected)", ]) ); } From 181eaa51876fe3d72b9b47d3ad01c39f46fb4ba4 Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Sun, 21 Jul 2024 19:48:39 +0200 Subject: [PATCH 7/7] Reset scroll position --- src/fontra/views/editor/panel-related-glyphs.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/fontra/views/editor/panel-related-glyphs.js b/src/fontra/views/editor/panel-related-glyphs.js index b7a4e33b0..8b31f74e7 100644 --- a/src/fontra/views/editor/panel-related-glyphs.js +++ b/src/fontra/views/editor/panel-related-glyphs.js @@ -191,6 +191,13 @@ export default class RelatedGlyphPanel extends Panel { } element.innerHTML = ""; element.appendChild(documentFragment); + + // At least in Chrome, we need to reset the scroll position, but it doesn't + // work if we do it right away, only after the next event iteration. + setTimeout(() => { + element.scrollTop = 0; + }, 0); + hideAccordionItem = false; } else { element.innerHTML = "";