add section to panel view

googlefonts · Dec 17, 2024 · 0b6c116 · 0b6c116
1 parent 0c41855
commit 0b6c116
Show file tree

Hide file tree

Showing 11 changed files with 305 additions and 368 deletions.
diff --git a/src/fontra/client/web-components/ui-accordion.js b/src/fontra/client/web-components/ui-accordion.js
@@ -5,14 +5,12 @@ import { enumerate } from "/core/utils.js";
 export class Accordion extends UnlitElement {
   static styles = `
   .ui-accordion-contents {
-    padding: 1em;
     display: grid;
     grid-template-rows: auto;
     align-content: start;
     gap: 0.5em;
     text-wrap: wrap;
     width: 100%;
-    height: 100%;
     box-sizing: border-box;
   }
 

diff --git a/src/fontra/client/web-components/ui-form.js b/src/fontra/client/web-components/ui-form.js
@@ -14,8 +14,6 @@ export class Form extends SimpleElement {
   static styles = `
     :host {
       --label-column-width: 32%;
-      padding: 1em;
-      overflow: hidden auto;
     }
 
     .ui-form {

diff --git a/src/fontra/views/editor/panel-designspace-navigation.js b/src/fontra/views/editor/panel-designspace-navigation.js
@@ -42,8 +42,29 @@ export default class DesignspaceNavigationPanel extends Panel {
   identifier = "designspace-navigation";
   iconPath = "/images/sliders.svg";
 
+  static stylesAccordion = `
+    .interpolation-error-icon {
+      display: inline-block;
+      height: 1.35em;
+      width: 1.35em;
+      color: var(--fontra-light-red-color);
+      transform: translate(0, 0.3em);
+      margin-right: 0.25em;
+    }
+  `;
+
   constructor(editorController) {
     super(editorController);
+
+    this.accordion = new Accordion();
+    this.accordion.appendStyle(DesignspaceNavigationPanel.stylesAccordion);
+    this.accordion.items = this.getAccordionItems();
+    this.contentElement.appendChild(
+      this.getPanelSection({
+        children: [this.accordion],
+      })
+    );
+
     this.fontController = this.editorController.fontController;
     this.sceneSettingsController = this.editorController.sceneSettingsController;
     this.sceneSettings = this.editorController.sceneSettingsController.model;
@@ -97,19 +118,8 @@ export default class DesignspaceNavigationPanel extends Panel {
     }
   }
 
-  getContentElement() {
-    const accordion = new Accordion();
-    accordion.appendStyle(`
-      .interpolation-error-icon {
-        display: inline-block;
-        height: 1.35em;
-        width: 1.35em;
-        color: var(--fontra-light-red-color);
-        transform: translate(0, 0.3em);
-        margin-right: 0.25em;
-      }
-    `);
-    accordion.items = [
+  getAccordionItems() {
+    return [
       {
         id: "font-axes-accordion-item",
         label: translate("sidebar.designspace-navigation.font-axes"),
@@ -209,28 +219,26 @@ export default class DesignspaceNavigationPanel extends Panel {
         ),
       },
     ];
-
-    return accordion;
   }
 
   get fontAxesElement() {
-    return this.contentElement.querySelector("#font-axes");
+    return this.accordion.querySelector("#font-axes");
   }
 
   get glyphAxesElement() {
-    return this.contentElement.querySelector("#glyph-axes");
+    return this.accordion.querySelector("#glyph-axes");
   }
 
   get glyphAxesAccordionItem() {
-    return this.contentElement.querySelector("#glyph-axes-accordion-item");
+    return this.accordion.querySelector("#glyph-axes-accordion-item");
   }
 
   get glyphSourcesAccordionItem() {
-    return this.contentElement.querySelector("#glyph-sources-accordion-item");
+    return this.accordion.querySelector("#glyph-sources-accordion-item");
   }
 
   get glyphLayersAccordionItem() {
-    return this.contentElement.querySelector("#glyph-layers-accordion-item");
+    return this.accordion.querySelector("#glyph-layers-accordion-item");
   }
 
   setup() {
@@ -366,7 +374,7 @@ export default class DesignspaceNavigationPanel extends Panel {
 
     const columnDescriptions = this._setupSourceListColumnDescriptions();
 
-    this.sourcesList = this.contentElement.querySelector("#sources-list");
+    this.sourcesList = this.accordion.querySelector("#sources-list");
     this.sourcesList.appendStyle(`
       .clickable-icon-header {
         transition: 150ms;
@@ -381,7 +389,7 @@ export default class DesignspaceNavigationPanel extends Panel {
     this.sourcesList.showHeader = true;
     this.sourcesList.columnDescriptions = columnDescriptions;
 
-    this.addRemoveSourceButtons = this.contentElement.querySelector(
+    this.addRemoveSourceButtons = this.accordion.querySelector(
       "#sources-list-add-remove-buttons"
     );
 
@@ -414,7 +422,7 @@ export default class DesignspaceNavigationPanel extends Panel {
       this.editSourceProperties(sourceIndex);
     });
 
-    this.sourceLayersList = this.contentElement.querySelector("#layers-list");
+    this.sourceLayersList = this.accordion.querySelector("#layers-list");
     this.sourceLayersList.columnDescriptions = [{ key: "shortName" }];
     this.sourceLayersList.addEventListener("listSelectionChanged", (event) => {
       const sourceItem = this.sourcesList.getSelectedItem();
@@ -625,12 +633,12 @@ export default class DesignspaceNavigationPanel extends Panel {
   _updateResetAllAxesButtonState() {
     let button;
     const fontAxesSourceSpace = mapAxesFromUserSpaceToSourceSpace(this.fontAxes);
-    button = this.contentElement.querySelector("#reset-font-axes-button");
+    button = this.accordion.querySelector("#reset-font-axes-button");
     button.disabled = isLocationAtDefault(
       this.sceneSettings.fontLocationSourceMapped,
       fontAxesSourceSpace
     );
-    button = this.contentElement.querySelector("#reset-glyph-axes-button");
+    button = this.accordion.querySelector("#reset-glyph-axes-button");
     button.disabled = isLocationAtDefault(
       this.sceneSettings.glyphLocation,
       this.glyphAxesElement.axes
@@ -1418,7 +1426,7 @@ export default class DesignspaceNavigationPanel extends Panel {
   }
 
   async _updateInterpolationErrorInfo() {
-    const infoElement = this.contentElement.querySelector("#interpolation-error-info");
+    const infoElement = this.accordion.querySelector("#interpolation-error-info");
     const varGlyphController =
       await this.sceneModel.getSelectedVariableGlyphController();
     const glyphController = await this.sceneModel.getSelectedStaticGlyphController();

diff --git a/src/fontra/views/editor/panel-glyph-note.js b/src/fontra/views/editor/panel-glyph-note.js
@@ -7,17 +7,7 @@ export default class GlyphNotePanel extends Panel {
   identifier = "glyph-note";
   iconPath = "/tabler-icons/notes.svg";
 
-  static styles = `
-    .sidebar-glyph-note {
-      box-sizing: border-box;
-      height: 100%;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      gap: 0.5em;
-      padding: 1em;
-    }
-
+  static stylesContent = `
     #glyph-note-textarea {
       background-color: var(--text-input-background-color);
       color: var(--text-input-foreground-color);
@@ -37,10 +27,12 @@ export default class GlyphNotePanel extends Panel {
     }
 
     .glyph-note-header {
-      overflow-x: unset;
-      text-align: left;
-      text-wrap: wrap;
-      word-break: break-word;
+      margin-bottom: 0.5em;
+    }
+
+    .glyph-note-content {
+      display: flex;
+      flex-direction: column;
     }
   `;
 
@@ -50,6 +42,24 @@ export default class GlyphNotePanel extends Panel {
     this.fontController = this.editorController.fontController;
     this.sceneController = this.editorController.sceneController;
 
+    this.appendStyle(GlyphNotePanel.stylesContent);
+    this.contentElement.appendChild(
+      this.getPanelSection({
+        children: [
+          html.div({ class: "glyph-note-header", id: "glyph-note-header" }, [
+            translate("sidebar.glyph-note"),
+          ]),
+          html.div({ class: "glyph-note-content" }, [
+            html.createDomElement("textarea", {
+              rows: 1,
+              wrap: "off",
+              id: "glyph-note-textarea",
+            }),
+          ]),
+        ],
+      })
+    );
+
     this.setupGlyphNoteElement();
 
     this.sceneController.sceneSettingsController.addKeyListener(
@@ -62,24 +72,6 @@ export default class GlyphNotePanel extends Panel {
     });
   }
 
-  getContentElement() {
-    return html.div(
-      {
-        class: "sidebar-glyph-note",
-      },
-      [
-        html.div({ class: "glyph-note-header", id: "glyph-note-header" }, [
-          translate("sidebar.glyph-note"),
-        ]),
-        html.createDomElement("textarea", {
-          rows: 1,
-          wrap: "off",
-          id: "glyph-note-textarea",
-        }),
-      ]
-    );
-  }
-
   setupGlyphNoteElement() {
     this.glyphNoteElement = this.contentElement.querySelector("#glyph-note-textarea");
     this.glyphNoteHeaderElement =

diff --git a/src/fontra/views/editor/panel-glyph-search.js b/src/fontra/views/editor/panel-glyph-search.js
@@ -5,19 +5,19 @@ export default class GlyphSearchPanel extends Panel {
   identifier = "glyph-search";
   iconPath = "/images/magnifyingglass.svg";
 
-  static styles = `
-    .glyph-search {
-      box-sizing: border-box;
-      height: 100%;
-      width: 100%;
-      display: grid;
-      gap: 1em;
-      padding: 1em;
-    }
-  `;
-
   constructor(editorController) {
     super(editorController);
+
+    this.contentElement.appendChild(
+      this.getPanelSection({
+        children: [
+          html.createDomElement("glyphs-search", {
+            id: "glyphs-search",
+          }),
+        ],
+      })
+    );
+
     this.glyphsSearch = this.contentElement.querySelector("#glyphs-search");
     this.glyphsSearch.addEventListener("selectedGlyphNameChanged", (event) =>
       this.glyphNameChangedCallback(event.detail)
@@ -59,19 +59,6 @@ export default class GlyphSearchPanel extends Panel {
     this.editorController.sceneSettings.selectedGlyph = selectedGlyphState;
   }
 
-  getContentElement() {
-    return html.div(
-      {
-        class: "glyph-search",
-      },
-      [
-        html.createDomElement("glyphs-search", {
-          id: "glyphs-search",
-        }),
-      ]
-    );
-  }
-
   async toggle(on, focus) {
     if (on && focus) {
       const glyphsSearch = this.contentElement.querySelector("#glyphs-search");