First draft of 'Font overview'

src/fontra/client/lang/de.js

@@ -26,6 +26,7 @@ export const strings = {
   "action.delete-glyph": "Glyph entfernen",
   "action.delete-selection": "Auswahl entfernen",
   "action.edit-anchor": "Anker bearbeiten",
+  "action.edit-background-image": "Hintergrund-Bild bearbeiten",
   "action.edit-guideline": "Hilfslinie bearbeiten",
   "action.export-as.designspace": "Designspace + UFO (*.designspace)",
   "action.export-as.fontra": "Fontra (*.fontra)",
@@ -103,6 +104,7 @@ export const strings = {
   "axes.undo.edit": "Achse %0 bearbeiten",
   "background-image.labels.colorize": "Färbung",
   "background-image.labels.opacity": "Transparenz",
+  "backgroundImage.labels.color": "Farbe",
   "canvas.clean-view-and-hand-tool": "Ungehinderte Sicht und Hand Werkzeug",
   "cross-axis-mapping.axis-participates":
     "Wenn markiert, dann ist diese Achse teil des Mappings",
@@ -205,6 +207,8 @@ export const strings = {
   "font-info.vendorid": "Hersteller ID",
   "font-info.version.major": "Hauptversionsnummer",
   "font-info.version.minor": "Nebenversionsnummer",
+  "font-overview.title": "Font overview",
+  "glyph-overview.title": "Glyph overview",
   "guideline.labels.angle": "Neigung",
   "guideline.labels.locked": "Gesperrt",
   "guideline.labels.name": "Name",
@@ -238,6 +242,7 @@ export const strings = {
   "menubar.view.select-previous-glyph": "Vorheriger Glyph",
   "menubar.view.select-previous-source": "Vorherige Source",
   "menubar.view.select-previous-source-layer": "Select previous source layer",
+  "menubar.window": "Window",
   "message.cancel-editing": "Jemand anderes hat vor dir etwas geändert.",
   "message.edit-has-been-reverted": "Die Änderung wurde rückgängig gemacht.",
   "message.glyph-could-not-be-saved": "Glyph konnte nicht gespeichert werden.",
@@ -288,6 +293,7 @@ export const strings = {
   "sidebar.designspace-navigation.glyph-axes": "Glyph-Achsen",
   "sidebar.designspace-navigation.glyph-axes.edit": "Glyph-Achsen bearbeiten",
   "sidebar.designspace-navigation.glyph-axes.reset": "Glyph-Achsen zurücksetzen",
+  "sidebar.designspace-navigation.glyph-source-layers": "Source layers",
   "sidebar.designspace-navigation.glyph-sources": "Glyph-Sourcen",
   "sidebar.designspace-navigation.glyph-sources.name": "Source Name",
   "sidebar.designspace-navigation.glyph-sources.status": "Status",
@@ -301,6 +307,7 @@ export const strings = {
     "Auch den dazugehörigen Layer %0 entfernen",
   "sidebar.designspace-navigation.warning.delete-source":
     "Bist du sicher, dass du Source %0 entfernen willst?",
+  "sidebar.font-overview.font-source": "Font source",
   "sidebar.glyph-note": "Glyph-Notiz",
   "sidebar.glyph-note.glyph-note-for-glyph": "Glyph-Notiz für %0",
   "sidebar.glyph-note.no-glyph-selected": "(keine Glyphe ausgewählt)",

src/fontra/client/lang/en.js

@@ -26,6 +26,7 @@ export const strings = {
   "action.delete-glyph": "Delete Glyph",
   "action.delete-selection": "Delete Selection",
   "action.edit-anchor": "Edit Anchor",
+  "action.edit-background-image": "Edit Background Image",
   "action.edit-guideline": "Edit Guideline",
   "action.export-as.designspace": "Designspace + UFO (*.designspace)",
   "action.export-as.fontra": "Fontra (*.fontra)",
@@ -103,6 +104,7 @@ export const strings = {
   "axes.undo.edit": "edit axis %0",
   "background-image.labels.colorize": "Colorize",
   "background-image.labels.opacity": "Opacity",
+  "backgroundImage.labels.color": "Color",
   "canvas.clean-view-and-hand-tool": "Clean View and Hand Tool",
   "cross-axis-mapping.axis-participates":
     "When checked, this axis participates in the mapping",
@@ -202,6 +204,8 @@ export const strings = {
   "font-info.vendorid": "Vendor ID",
   "font-info.version.major": "Version Major",
   "font-info.version.minor": "Version Minor",
+  "font-overview.title": "Font overview",
+  "glyph-overview.title": "Glyph overview",
   "guideline.labels.angle": "Angle",
   "guideline.labels.locked": "Locked",
   "guideline.labels.name": "Name",
@@ -233,6 +237,7 @@ export const strings = {
   "menubar.view.select-previous-glyph": "Select previous glyph",
   "menubar.view.select-previous-source": "Select previous source",
   "menubar.view.select-previous-source-layer": "Select previous source layer",
+  "menubar.window": "Window",
   "message.cancel-editing": "Someone else made an edit just before you.",
   "message.edit-has-been-reverted": "The edit has been reverted.",
   "message.glyph-could-not-be-saved": "The glyph could not be saved.",
@@ -281,6 +286,7 @@ export const strings = {
   "sidebar.designspace-navigation.glyph-axes": "Glyph axes",
   "sidebar.designspace-navigation.glyph-axes.edit": "Edit glyph axes",
   "sidebar.designspace-navigation.glyph-axes.reset": "Reset glyph axes",
+  "sidebar.designspace-navigation.glyph-source-layers": "Source layers",
   "sidebar.designspace-navigation.glyph-sources": "Glyph sources",
   "sidebar.designspace-navigation.glyph-sources.name": "source name",
   "sidebar.designspace-navigation.glyph-sources.status": "status",
@@ -293,6 +299,7 @@ export const strings = {
     "Also delete associated layer %0",
   "sidebar.designspace-navigation.warning.delete-source":
     "Are you sure you want to delete source %0?",
+  "sidebar.font-overview.font-source": "Font source",
   "sidebar.glyph-note": "Glyph Note",
   "sidebar.glyph-note.glyph-note-for-glyph": "Glyph Note for %0",
   "sidebar.glyph-note.no-glyph-selected": "(No glyph selected)",

src/fontra/client/lang/fr.js

@@ -26,6 +26,7 @@ export const strings = {
   "action.delete-glyph": "Supprimer le glyphe",
   "action.delete-selection": "Supprimer la sélection",
   "action.edit-anchor": "Éditer l'ancre",
+  "action.edit-background-image": "Éditer l'image d'arrière plan",
   "action.edit-guideline": "Éditer le guide",
   "action.export-as.designspace": "Designspace + UFO (*.designspace)",
   "action.export-as.fontra": "Fontra (*.fontra)",
@@ -103,6 +104,7 @@ export const strings = {
   "axes.undo.edit": "éditer l'axe %0",
   "background-image.labels.colorize": "Coloriser",
   "background-image.labels.opacity": "Transparence",
+  "backgroundImage.labels.color": "Coleur",
   "canvas.clean-view-and-hand-tool": "Prévisualisation et outil de déplacement",
   "cross-axis-mapping.axis-participates": "Si coché, l'axe participera au mapping",
   "cross-axis-mapping.delete": "Delete cross-axis mapping",
@@ -203,6 +205,8 @@ export const strings = {
   "font-info.vendorid": "Identifiant du vendeur",
   "font-info.version.major": "Version Major",
   "font-info.version.minor": "Version Minor",
+  "font-overview.title": "Font overview",
+  "glyph-overview.title": "Glyph overview",
   "guideline.labels.angle": "Angle",
   "guideline.labels.locked": "Vérouillé",
   "guideline.labels.name": "Nom",
@@ -238,6 +242,7 @@ export const strings = {
   "menubar.view.select-previous-glyph": "Sélectionner le glyphe précédente",
   "menubar.view.select-previous-source": "Sélectionner la source précédente",
   "menubar.view.select-previous-source-layer": "Select previous source layer",
+  "menubar.window": "Window",
   "message.cancel-editing": "Quelqu'un d'autre a édité juste avant vous",
   "message.edit-has-been-reverted": "L'édition a été annulé",
   "message.glyph-could-not-be-saved": "Le glyphe n'a pas pu être enregistré",
@@ -292,6 +297,7 @@ export const strings = {
   "sidebar.designspace-navigation.glyph-axes": "Axes du glyphe",
   "sidebar.designspace-navigation.glyph-axes.edit": "Éditer les axes du glyphe",
   "sidebar.designspace-navigation.glyph-axes.reset": "Réinitialiser les axes du glyphe",
+  "sidebar.designspace-navigation.glyph-source-layers": "Source layers",
   "sidebar.designspace-navigation.glyph-sources": "Sources du glyphe",
   "sidebar.designspace-navigation.glyph-sources.name": "nom de la source",
   "sidebar.designspace-navigation.glyph-sources.status": "statut",
@@ -305,6 +311,7 @@ export const strings = {
     "Also delete associated layer %0",
   "sidebar.designspace-navigation.warning.delete-source":
     "Êtes-vous sûr de vouloir supprimer la source %0",
+  "sidebar.font-overview.font-source": "Font source",
   "sidebar.glyph-note": "Note du glyphe",
   "sidebar.glyph-note.glyph-note-for-glyph": "Note du glyphe %0",
   "sidebar.glyph-note.no-glyph-selected": "(aucun glyphe sélectionné)",

src/fontra/client/lang/ja.js

@@ -26,6 +26,7 @@ export const strings = {
   "action.delete-glyph": "グリフを削除",
   "action.delete-selection": "選択範囲を削除",
   "action.edit-anchor": "アンカーを編集",
+  "action.edit-background-image": "背景画像を編集",
   "action.edit-guideline": "ガイドラインを編集",
   "action.export-as.designspace": "Designspace + UFO (*.designspace)",
   "action.export-as.fontra": "Fontra (*.fontra)",
@@ -103,6 +104,7 @@ export const strings = {
   "axes.undo.edit": "補完軸%0を編集",
   "background-image.labels.colorize": "彩色",
   "background-image.labels.opacity": "透明度",
+  "backgroundImage.labels.color": "カラー",
   "canvas.clean-view-and-hand-tool": "塗りのプレビューと手のひらツール",
   "cross-axis-mapping.axis-participates":
     "チェックすると、この補完軸がマッピング内で有効になります",
@@ -204,6 +206,8 @@ export const strings = {
   "font-info.vendorid": "ベンダーID",
   "font-info.version.major": "メジャーバージョン",
   "font-info.version.minor": "マイナーバージョン",
+  "font-overview.title": "Font overview",
+  "glyph-overview.title": "Glyph overview",
   "guideline.labels.angle": "角度",
   "guideline.labels.locked": "ロック",
   "guideline.labels.name": "ガイド名",
@@ -236,6 +240,7 @@ export const strings = {
   "menubar.view.select-previous-glyph": "前のグリフを選択",
   "menubar.view.select-previous-source": "前のソースを選択",
   "menubar.view.select-previous-source-layer": "前のソースレイヤーを選択",
+  "menubar.window": "Window",
   "message.cancel-editing": "他のユーザーがあなたの直前に操作を行いました。",
   "message.edit-has-been-reverted": "このグリフは前の状態に戻されました。",
   "message.glyph-could-not-be-saved": "このグリフは保存されません。",
@@ -285,6 +290,7 @@ export const strings = {
   "sidebar.designspace-navigation.glyph-axes": "グリフの補完軸",
   "sidebar.designspace-navigation.glyph-axes.edit": "グリフの補完軸を編集",
   "sidebar.designspace-navigation.glyph-axes.reset": "グリフの補完軸をリセット",
+  "sidebar.designspace-navigation.glyph-source-layers": "Source layers",
   "sidebar.designspace-navigation.glyph-sources": "グリフソース",
   "sidebar.designspace-navigation.glyph-sources.name": "ソース名",
   "sidebar.designspace-navigation.glyph-sources.status": "ステータス",
@@ -296,6 +302,7 @@ export const strings = {
   "sidebar.designspace-navigation.warning.delete-associated-layer":
     "同様にレイヤー%0も削除",
   "sidebar.designspace-navigation.warning.delete-source": "ソース%0を削除しますか？",
+  "sidebar.font-overview.font-source": "Font source",
   "sidebar.glyph-note": "グリフノート",
   "sidebar.glyph-note.glyph-note-for-glyph": "%0のグリフノート",
   "sidebar.glyph-note.no-glyph-selected": "（グリフが選択されていません）",

src/fontra/client/lang/nl.js

@@ -26,6 +26,7 @@ export const strings = {
   "action.delete-glyph": "Verwijder glyph",
   "action.delete-selection": "Verwijder selectie",
   "action.edit-anchor": "Edit Anchor",
+  "action.edit-background-image": "Edit Background Image",
   "action.edit-guideline": "Edit Guideline",
   "action.export-as.designspace": "Designspace + UFO (*.designspace)",
   "action.export-as.fontra": "Fontra (*.fontra)",
@@ -103,6 +104,7 @@ export const strings = {
   "axes.undo.edit": "edit axis %0",
   "background-image.labels.colorize": "Colorize",
   "background-image.labels.opacity": "Opacity",
+  "backgroundImage.labels.color": "Color",
   "canvas.clean-view-and-hand-tool": "Schone weergave en Hand gereedschap",
   "cross-axis-mapping.axis-participates":
     "When checked, this axis participates in the mapping",
@@ -202,6 +204,8 @@ export const strings = {
   "font-info.vendorid": "Vendor ID",
   "font-info.version.major": "Versie major",
   "font-info.version.minor": "Versie minor",
+  "font-overview.title": "Font overview",
+  "glyph-overview.title": "Glyph overview",
   "guideline.labels.angle": "Angle",
   "guideline.labels.locked": "Locked",
   "guideline.labels.name": "Naam",
@@ -237,6 +241,7 @@ export const strings = {
   "menubar.view.select-previous-glyph": "Select previous glyph",
   "menubar.view.select-previous-source": "Selecteer de vorige source",
   "menubar.view.select-previous-source-layer": "Select previous source layer",
+  "menubar.window": "Window",
   "message.cancel-editing": "Someone else made an edit just before you.",
   "message.edit-has-been-reverted": "The edit has been reverted.",
   "message.glyph-could-not-be-saved": "The glyph could not be saved.",
@@ -285,6 +290,7 @@ export const strings = {
   "sidebar.designspace-navigation.glyph-axes": "Glyph assen",
   "sidebar.designspace-navigation.glyph-axes.edit": "Wijzig glyph assen",
   "sidebar.designspace-navigation.glyph-axes.reset": "Reset glyph assen",
+  "sidebar.designspace-navigation.glyph-source-layers": "Source layers",
   "sidebar.designspace-navigation.glyph-sources": "Glyph sources",
   "sidebar.designspace-navigation.glyph-sources.name": "sourcenaam",
   "sidebar.designspace-navigation.glyph-sources.status": "status",
@@ -297,6 +303,7 @@ export const strings = {
     "Also delete associated layer %0",
   "sidebar.designspace-navigation.warning.delete-source":
     "Are you sure you want to delete source %0?",
+  "sidebar.font-overview.font-source": "Font source",
   "sidebar.glyph-note": "Glyph notitie",
   "sidebar.glyph-note.glyph-note-for-glyph": "Glyph Note for %0",
   "sidebar.glyph-note.no-glyph-selected": "(No glyph selected)",

src/fontra/client/lang/zh-CN.js

@@ -26,6 +26,7 @@ export const strings = {
   "action.delete-glyph": "删除字形",
   "action.delete-selection": "删除选中",
   "action.edit-anchor": "编辑锚点",
+  "action.edit-background-image": "编辑背景图片",
   "action.edit-guideline": "编辑参考线",
   "action.export-as.designspace": "Designspace + UFO (*.designspace)",
   "action.export-as.fontra": "Fontra (*.fontra)",
@@ -103,6 +104,7 @@ export const strings = {
   "axes.undo.edit": "编辑参数轴 %0",
   "background-image.labels.colorize": "填色",
   "background-image.labels.opacity": "透明度",
+  "backgroundImage.labels.color": "颜色",
   "canvas.clean-view-and-hand-tool": "预览与拖拽工具",
   "cross-axis-mapping.axis-participates": "选中后，该参数轴参与映射",
   "cross-axis-mapping.delete": "删除跨轴映射",
@@ -138,7 +140,7 @@ export const strings = {
   "dialog.cant-edit-glyph.content.locked-glyph": "该字形已被锁定。",
   "dialog.cant-edit-glyph.title": "无法编辑字形 “%0”",
   "dialog.create": "创建",
-  "dialog.create-new-glyph.body": '如果你想%1创建一个新的字形 "%0"，请点击 "创建"。',
+  "dialog.create-new-glyph.body": '如果你想创建一个新的字形 "%0"%1，请点击 "创建"。',
   "dialog.create-new-glyph.body.2": '为字符 "%0" (%1)',
   "dialog.create-new-glyph.title": '创建新字形 "%0"？',
   "dialog.delete": "删除",
@@ -193,6 +195,8 @@ export const strings = {
   "font-info.vendorid": "供应商 ID",
   "font-info.version.major": "主要版本号",
   "font-info.version.minor": "次要版本号",
+  "font-overview.title": "Font overview",
+  "glyph-overview.title": "字形概览",
   "guideline.labels.angle": "角度",
   "guideline.labels.locked": "已锁定",
   "guideline.labels.name": "名称",
@@ -224,6 +228,7 @@ export const strings = {
   "menubar.view.select-previous-glyph": "选择上一个字形",
   "menubar.view.select-previous-source": "选择上一个源",
   "menubar.view.select-previous-source-layer": "选择上一个源图层",
+  "menubar.window": "Window",
   "message.cancel-editing": "有人在你之前做了编辑。",
   "message.edit-has-been-reverted": "编辑将被复原。",
   "message.glyph-could-not-be-saved": "该字形无法被保存。",
@@ -270,6 +275,7 @@ export const strings = {
   "sidebar.designspace-navigation.glyph-axes": "字形参数轴",
   "sidebar.designspace-navigation.glyph-axes.edit": "编辑字形参数轴",
   "sidebar.designspace-navigation.glyph-axes.reset": "重置字形参数轴",
+  "sidebar.designspace-navigation.glyph-source-layers": "源图层",
   "sidebar.designspace-navigation.glyph-sources": "字形源",
   "sidebar.designspace-navigation.glyph-sources.name": "源名称",
   "sidebar.designspace-navigation.glyph-sources.status": "状态",
@@ -281,6 +287,7 @@ export const strings = {
   "sidebar.designspace-navigation.warning.delete-associated-layer":
     "并删除关联的图层 %0",
   "sidebar.designspace-navigation.warning.delete-source": "你确定要删除源 “%0” 吗？",
+  "sidebar.font-overview.font-source": "Font source",
   "sidebar.glyph-note": "字形备忘",
   "sidebar.glyph-note.glyph-note-for-glyph": "0% 的字形备忘",
   "sidebar.glyph-note.no-glyph-selected": "（无选中字形）",

src/fontra/views/fontinfo/panel-sources.js

@@ -620,7 +620,7 @@ class SourceBox extends HTMLElement {
 
 customElements.define("source-box", SourceBox);
 
-function sortedSourceIdentifiers(sources, fontAxes) {
+export function sortedSourceIdentifiers(sources, fontAxes) {
   const sortFunc = (identifierA, identifierB) => {
     for (const axis of fontAxes) {
       const valueA = sources[identifierA].location[axis.name];

src/fontra/views/fontoverview/fontoverview.css

@@ -4,7 +4,7 @@ body {
 
 .main-container {
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: 340px 1fr;
   padding: 0em;
   box-sizing: border-box;
   gap: 0em;
@@ -16,20 +16,50 @@ body {
   display: grid;
   align-content: start;
   gap: 1em;
-  padding: 2em 1em 2em 2em;
+  padding: 1em 1em 1em 1em;
   background-color: var(--ui-element-background-color);
 }
 
-.sidebar-shadow-box {
+.font-overview-sidebar-shadow-box {
   box-shadow: 0px 0px 8px #0006;
 }
 
+.font-overview-sidebar {
+  display: grid;
+  gap: 1em;
+}
+
 .font-overview-panel {
   display: grid;
   padding: 2em 2em 2em 1em;
   outline: none;
+  grid-gap: 1em;
+}
+
+.glyph-cells-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+  gap: 1em;
 }
 
 #panel-container {
   overflow: auto;
 }
+
+.font-source-selector {
+  display: grid;
+  grid-template-columns: max-content auto;
+  align-items: center;
+  gap: 0.666em;
+  padding-bottom: 1em;
+}
+
+.font-overview-section-header {
+  font-weight: bold;
+}
+
+/* .glyph-cell-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1em;
+} */

src/fontra/views/fontoverview/fontoverview.html

@@ -7,12 +7,13 @@
     <link href="/css/tooltip.css" rel="stylesheet" />
     <title>Fontra Font Overview</title>
     <script type="module" src="/web-components/modal-dialog.js"></script>
+    <script type="module" src="/web-components/glyphs-search.js"></script>
     <script type="module" src="/core/theme-settings.js"></script>
   </head>
   <body>
     <modal-dialog></modal-dialog>
     <div class="main-container">
-      <div id="sidebar-container" class="sidebar-shadow-box"></div>
+      <div id="sidebar-container" class="font-overview-sidebar-shadow-box"></div>
       <div id="panel-container"></div>
     </div>
   </body>