Merge pull request #1674 from googlefonts/issue-1673-migrate-user-set…

…tings-to-application-settings

Add 'User settings' to application-settings

src/fontra/client/core/clipboard-format.js

@@ -0,0 +1,5 @@
+import { ObservableController } from "./observable-object.js";
+
+export const clipboardFormatController = new ObservableController({ format: "glif" });
+
+clipboardFormatController.synchronizeWithLocalStorage("fontra-clipboard-");

src/fontra/client/lang/en.json

@@ -27,8 +27,11 @@
   "action.select-none": "Select None",
   "action.set-contour-start": "Set Start Point",
   "action.undo": "Undo",
+  "application-settings.clipboard.title": "Clipboard",
+  "application-settings.display-language.title": "Display Language",
   "application-settings.server-info.title": "Server info",
   "application-settings.shortcuts.title": "Shortcuts",
+  "application-settings.theme-settings.title": "Theme settings",
   "axes.add": "Add new axis",
   "axes.axis-values": "Axis values",
   "axes.create": "New axis",

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

@@ -26,8 +26,11 @@
   "action.select-none": "取消选择",
   "action.set-contour-start": "设置起点",
   "action.undo": "撤销",
+  "application-settings.clipboard.title": "剪贴板导出格式",
+  "application-settings.display-language.title": "Display Language",
   "application-settings.server-info.title": "服务器信息",
   "application-settings.shortcuts.title": "Shortcuts",
+  "application-settings.theme-settings.title": "主题设置",
   "axes.add": "添加新参数轴",
   "axes.axis-values": "参数轴数值",
   "axes.create": "新建参数轴",

src/fontra/views/applicationsettings/applicationsettings.html

@@ -6,6 +6,8 @@
     <link href="/css/tooltip.css" rel="stylesheet" />
     <title>Fontra Application Settings</title>
     <script type="module" src="/web-components/modal-dialog.js"></script>
+    <script type="module" src="/web-components/grouped-settings.js"></script>
+    <script type="module" src="/core/theme-settings.js"></script>
     <style>
       body {
         overflow: scroll;

src/fontra/views/applicationsettings/applicationsettings.js

@@ -1,6 +1,9 @@
 import * as html from "../core/html-utils.js";
+import { ClipboardPanel } from "./panel-clipboard.js";
+import { DisplayLanguagePanel } from "./panel-display-language.js";
 import { ServerInfoPanel } from "./panel-server-info.js";
 import { ShortCutsPanel } from "./panel-shortcuts.js";
+import { ThemeSettingsPanel } from "./panel-theme-settings.js";
 import { ensureLanguageHasLoaded, translate } from "/core/localization.js";
 import { message } from "/web-components/modal-dialog.js";
 
@@ -19,10 +22,13 @@ export class ApplicationSettingsController {
 
     for (const panelClass of [
       ShortCutsPanel,
-      ServerInfoPanel,
       // TODO: Add more panels here:
       // EditorAppearancePanel,
       // ExtensionsPanel,
+      ThemeSettingsPanel,
+      DisplayLanguagePanel,
+      ClipboardPanel,
+      ServerInfoPanel,
     ]) {
       const headerElement = html.div(
         {

src/fontra/views/applicationsettings/panel-clipboard.js

@@ -0,0 +1,51 @@
+import { clipboardFormatController } from "../core/clipboard-format.js";
+import * as html from "../core/html-utils.js";
+import { addStyleSheet } from "../core/html-utils.js";
+import { translate } from "../core/localization.js";
+import { BaseInfoPanel } from "./panel-base.js";
+
+addStyleSheet(`
+  .fontra-ui-clipboard-panel-card {
+    background-color: var(--ui-element-background-color);
+    border-radius: 0.5em;
+    padding: 1em;
+  }
+  `);
+
+export class ClipboardPanel extends BaseInfoPanel {
+  static title = "application-settings.clipboard.title";
+  static id = "clipboard-panel";
+
+  async setupUI() {
+    this.panelElement.innerHTML = "";
+    this.panelElement.style = "gap: 1em;";
+
+    for (const cardContent of this.cards()) {
+      const container = html.createDomElement("grouped-settings", {
+        class: "fontra-ui-clipboard-panel-card",
+      });
+      container.items = [cardContent];
+      this.panelElement.appendChild(container);
+    }
+  }
+
+  cards() {
+    return [
+      {
+        displayName: translate("sidebar.user-settings.clipboard"),
+        controller: clipboardFormatController,
+        descriptions: [
+          {
+            key: "format",
+            ui: "radio",
+            options: [
+              { key: "glif", displayName: "GLIF (RoboFont)" },
+              { key: "svg", displayName: "SVG" },
+              { key: "fontra-json", displayName: "JSON (Fontra)" },
+            ],
+          },
+        ],
+      },
+    ];
+  }
+}

src/fontra/views/applicationsettings/panel-display-language.js

@@ -0,0 +1,49 @@
+import * as html from "../core/html-utils.js";
+import { addStyleSheet } from "../core/html-utils.js";
+import { languageController } from "../core/localization.js";
+import { BaseInfoPanel } from "./panel-base.js";
+
+addStyleSheet(`
+  .fontra-ui-display-language-panel-card {
+    background-color: var(--ui-element-background-color);
+    border-radius: 0.5em;
+    padding: 1em;
+  }
+  `);
+
+export class DisplayLanguagePanel extends BaseInfoPanel {
+  static title = "application-settings.display-language.title";
+  static id = "display-language-panel";
+
+  async setupUI() {
+    this.panelElement.innerHTML = "";
+    this.panelElement.style = "gap: 1em;";
+
+    for (const cardContent of this.cards()) {
+      const container = html.createDomElement("grouped-settings", {
+        class: "fontra-ui-display-language-panel-card",
+      });
+      container.items = [cardContent];
+      this.panelElement.appendChild(container);
+    }
+  }
+
+  cards() {
+    return [
+      {
+        displayName: "Display Language",
+        controller: languageController,
+        descriptions: [
+          {
+            key: "language",
+            ui: "radio",
+            options: [
+              { key: "en", displayName: "English" },
+              { key: "zh-CN", displayName: "Simplified Chinese" },
+            ],
+          },
+        ],
+      },
+    ];
+  }
+}

src/fontra/views/applicationsettings/panel-theme-settings.js

@@ -0,0 +1,61 @@
+import * as html from "../core/html-utils.js";
+import { addStyleSheet } from "../core/html-utils.js";
+import { translate } from "../core/localization.js";
+import { themeController } from "../core/theme-settings.js";
+import { BaseInfoPanel } from "./panel-base.js";
+
+addStyleSheet(`
+  .fontra-ui-theme-settings-panel-card {
+    background-color: var(--ui-element-background-color);
+    border-radius: 0.5em;
+    padding: 1em;
+  }
+  `);
+
+export class ThemeSettingsPanel extends BaseInfoPanel {
+  static title = "application-settings.theme-settings.title";
+  static id = "theme-settings-panel";
+
+  async setupUI() {
+    this.panelElement.innerHTML = "";
+    this.panelElement.style = "gap: 1em;";
+
+    for (const cardContent of this.cards()) {
+      const container = html.createDomElement("grouped-settings", {
+        class: "fontra-ui-theme-settings-panel-card",
+      });
+      container.items = [cardContent];
+      this.panelElement.appendChild(container);
+    }
+  }
+
+  cards() {
+    return [
+      {
+        displayName: translate("sidebar.user-settings.theme"),
+        controller: themeController,
+        descriptions: [
+          {
+            key: "theme",
+            ui: "radio",
+            options: [
+              {
+                key: "automatic",
+                displayName: translate("sidebar.user-settings.theme.auto"),
+              },
+              {
+                key: "light",
+                displayName: translate("sidebar.user-settings.theme.light"),
+              },
+              {
+                key: "dark",
+                displayName: translate("sidebar.user-settings.theme.dark"),
+              },
+            ],
+          },
+        ],
+      },
+      // TODO: There might come more in future, like font size, colors etc.
+    ];
+  }
+}

src/fontra/views/editor/editor.js

@@ -86,6 +86,7 @@ import TextEntryPanel from "./panel-text-entry.js";
 import TransformationPanel from "./panel-transformation.js";
 import UserSettingsPanel from "./panel-user-settings.js";
 import Panel from "./panel.js";
+import { clipboardFormatController } from "/core/clipboard-format.js";
 import { ensureLanguageHasLoaded, translate } from "/core/localization.js";
 
 const MIN_CANVAS_SPACE = 200;
@@ -128,9 +129,6 @@ export class EditorController {
       async (...args) => await this.editListenerCallback(...args)
     );
 
-    this.clipboardFormatController = new ObservableController({ format: "glif" });
-    this.clipboardFormatController.synchronizeWithLocalStorage("fontra-clipboard-");
-
     this.experimentalFeaturesController = new ObservableController({
       scalingEditBehavior: false,
       quadPenTool: false,
@@ -612,7 +610,13 @@ export class EditorController {
         title: "Fontra",
         bold: true,
         getItems: () => {
-          const menuItems = ["shortcuts", "server-info"];
+          const menuItems = [
+            "shortcuts",
+            "theme-settings",
+            "display-language",
+            "clipboard",
+            "server-info",
+          ];
           return menuItems.map((panelID) => ({
             title: translate(`application-settings.${panelID}.title`),
             enabled: () => true,
@@ -1649,7 +1653,7 @@ export class EditorController {
 
     const mapping = { "svg": svgString, "glif": glifString, "fontra-json": jsonString };
     const plainTextString =
-      mapping[this.clipboardFormatController.model.format] || glifString;
+      mapping[clipboardFormatController.model.format] || glifString;
 
     localStorage.setItem("clipboardSelection.text-plain", plainTextString);
     localStorage.setItem("clipboardSelection.glyph", jsonString);

src/fontra/views/editor/panel-user-settings.js

@@ -1,5 +1,6 @@
 import { loaderSpinner } from "../core/loader-spinner.js";
 import Panel from "./panel.js";
+import { clipboardFormatController } from "/core/clipboard-format.js";
 import * as html from "/core/html-utils.js";
 import { languageController, translate } from "/core/localization.js";
 import { themeController } from "/core/theme-settings.js";
@@ -58,7 +59,7 @@ export default class UserSettingsPanel extends Panel {
 
     items.push({
       displayName: translate("sidebar.user-settings.clipboard"),
-      controller: this.editorController.clipboardFormatController,
+      controller: clipboardFormatController,
       descriptions: [
         {
           key: "format",