add translation for all appearance options

src/public/app/widgets/type_widgets/options/appearance/max_content_width.js

@@ -1,22 +1,23 @@
 import OptionsWidget from "../options_widget.js";
 import utils from "../../../../services/utils.js";
+import { t } from "../../../../services/i18n.js";
 
 const TPL = `
 <div class="options-section">
-    <h4>Content Width</h4>
+    <h4>${t("max_content_width.title")}</h4>
     
-    <p>Trilium by default limits max content width to improve readability for maximized screens on wide screens.</p>
+    <p>${t("max_content_width.default_description")}</p>
     
     <div class="form-group row">
         <div class="col-4">
-            <label>Max content width in pixels</label>
+            <label>${t("max_content_width.max_width_label")}</label>
             <input type="number" min="200" step="10" class="max-content-width form-control options-number-input">
         </div>
     </div>
     
     <p>
-        To apply content width changes, click on 
+        ${t("max_content_width.apply_changes_description")}
-        <button class="btn btn-micro reload-frontend-button">reload frontend</button>
+        <button class="btn btn-micro reload-frontend-button">${t("max_content_width.reload_button")}</button>
     </p>
 </div>`;
 
@@ -29,7 +30,7 @@ export default class MaxContentWidthOptions extends OptionsWidget {
         this.$maxContentWidth.on('change', async () =>
             this.updateOption('maxContentWidth', this.$maxContentWidth.val()))
 
-        this.$widget.find(".reload-frontend-button").on("click", () => utils.reloadFrontendApp("changes from appearance options"));
+        this.$widget.find(".reload-frontend-button").on("click", () => utils.reloadFrontendApp(t("max_content_width.reload_description")));
     }
 
     async optionsLoaded(options) {

src/public/app/widgets/type_widgets/options/appearance/native_title_bar.js

@@ -1,12 +1,13 @@
 import OptionsWidget from "../options_widget.js";
+import { t } from "../../../../services/i18n.js";
 
 const TPL = `
 <div class="options-section">
-    <h4>Native Title Bar (requires app restart)</h4>
+    <h4>${t("native_title_bar.title")}</h4>
     
     <select class="native-title-bar-select form-control">
-        <option value="show">enabled</option>
+        <option value="show">${t("native_title_bar.enabled")}</option>
-        <option value="hide">disabled</option>
+        <option value="hide">${t("native_title_bar.disabled")}</option>
     </select>
 </div>`;
 

src/public/app/widgets/type_widgets/options/appearance/ribbon.js

@@ -1,16 +1,17 @@
+import { t } from "../../../../services/i18n.js";
 import OptionsWidget from "../options_widget.js";
 
 const TPL = `
 <div class="options-section">
-    <h4>Ribbon widgets</h4>
+    <h4>${t('ribbon.widgets')}</h4>
     <label>
         <input type="checkbox" class="promoted-attributes-open-in-ribbon">
-        Promoted Attributes ribbon tab will automatically open if promoted attributes are present on the note
+        ${t('ribbon.promoted_attributes_message')}
     </label>
     
     <label>
         <input type="checkbox" class="edited-notes-open-in-ribbon">
-        Edited Notes ribbon tab will automatically open on day notes
+        ${t('ribbon.edited_notes_message')}
     </label>
 </div>`;
 

src/public/app/widgets/type_widgets/options/appearance/theme.js

@@ -1,19 +1,20 @@
 import OptionsWidget from "../options_widget.js";
 import server from "../../../../services/server.js";
 import utils from "../../../../services/utils.js";
+import { t } from "../../../../services/i18n.js";
 
 const TPL = `
 <div class="options-section">
-    <h4>Theme</h4>
+    <h4>${t("theme.title")}</h4>
     
     <div class="form-group row">
         <div class="col-6">
-            <label>Theme</label>
+            <label>${t("theme.theme_label")}</label>
             <select class="theme-select form-control"></select>
         </div>
         
         <div class="col-6">
-            <label>Override theme fonts</label>
+            <label>${t("theme.override_theme_fonts_label")}</label>
             <input type="checkbox" class="override-theme-fonts form-control">
         </div>
     </div>
@@ -38,8 +39,8 @@ export default class ThemeOptions extends OptionsWidget {
 
     async optionsLoaded(options) {
         const themes = [
-            { val: 'light', title: 'Light' },
+            { val: 'light', title: t('theme.light_theme') },
-            { val: 'dark', title: 'Dark' }
+            { val: 'dark', title: t('theme.dark_theme') }
         ].concat(await server.get('options/user-themes'));
 
         this.$themeSelect.empty();

src/public/app/widgets/type_widgets/options/appearance/zoom_factor.js

@@ -1,13 +1,14 @@
 import appContext from "../../../../components/app_context.js";
 import OptionsWidget from "../options_widget.js";
 import utils from "../../../../services/utils.js";
+import { t } from "../../../../services/i18n.js";
 
 const TPL = `
 <div class="options-section">
-    <h4>Zoom Factor (desktop build only)</h4>
+    <h4>${t("zoom_factor.title")}</h4>
 
     <input type="number" class="zoom-factor-select form-control options-number-input" min="0.3" max="2.0" step="0.1"/>
-    <p>Zooming can be controlled with CTRL+- and CTRL+= shortcuts as well.</p>
+    <p>${t("zoom_factor.description")}</p>
 </div>`;
 
 export default class ZoomFactorOptions extends OptionsWidget {

src/public/translations/cn/translation.json

@@ -985,9 +985,38 @@
         "note_tree_font": "笔记树字体",
         "note_detail_font": "笔记详情字体",
         "monospace_font": "等宽（代码）字体",
-        "note_tree_and_detail_font_sizing": "请注意，树状字体和详细字体的大小相对于主字体大小设置。",
+        "note_tree_and_detail_font_sizing": "请注意，笔记树字体和详细字体的大小相对于主字体大小设置。",
         "not_all_fonts_available": "并非所有列出的字体都可能在您的系统上可用。",
         "apply_font_changes": "要应用字体更改，请点击",
         "reload_frontend": "重新加载前端"
+    },
+    "max_content_width": {
+        "title": "内容宽度",
+        "default_description": "Trilium默认会限制内容的最大宽度以提高在宽屏中全屏时的可读性。",
+        "max_width_label": "内容最大宽度(像素)",
+        "apply_changes_description": "要应用内容宽度更改，请点击",
+        "reload_button": "重新加载前端",
+        "reload_description": "来自外观选项的更改"
+    },
+    "native_title_bar": {
+        "title": "原生标题栏（需要重新启动应用）",
+        "enabled": "启用",
+        "disabled": "禁用"
+    },
+    "ribbon": {
+        "widgets": "功能选项组件",
+        "promoted_attributes_message": "如果笔记中存在升级属性，则自动打开升级属性选项卡",
+        "edited_notes_message": "日记笔记自动打开编辑过的笔记选项"
+    },
+    "theme": {
+        "title": "主题",
+        "theme_label": "主题",
+        "override_theme_fonts_label": "覆盖主题字体",
+        "light_theme": "浅色",
+        "dark_theme": "深色"
+    },
+    "zoom_factor": {
+        "title": "缩放系数（仅桌面客户端有效）",
+        "description": "缩放也可以通过 CTRL+- 和 CTRL+= 快捷键进行控制。"
     }
 }

src/public/translations/en/translation.json

@@ -990,5 +990,34 @@
         "not_all_fonts_available": "Not all listed fonts may be available on your system.",
         "apply_font_changes": "To apply font changes, click on",
         "reload_frontend": "reload frontend"
+    },
+    "max_content_width": {
+        "title": "Content Width",
+        "default_description": "Trilium by default limits max content width to improve readability for maximized screens on wide screens.",
+        "max_width_label": "Max content width in pixels",
+        "apply_changes_description": "To apply content width changes, click on",
+        "reload_button": "reload frontend",
+        "reload_description": "changes from appearance options"
+    },
+    "native_title_bar": {
+        "title": "Native Title Bar (requires app restart)",
+        "enabled": "enabled",
+        "disabled": "disabled"
+    },
+    "ribbon": {
+        "widgets": "Ribbon widgets",
+        "promoted_attributes_message": "Promoted Attributes ribbon tab will automatically open if promoted attributes are present on the note",
+        "edited_notes_message": "Edited Notes ribbon tab will automatically open on day notes"
+    },
+    "theme": {
+        "title": "Theme",
+        "theme_label": "Theme",
+        "override_theme_fonts_label": "Override theme fonts",
+        "light_theme": "Light",
+        "dark_theme": "Dark"
+    },
+    "zoom_factor": {
+        "title": "Zoom Factor (desktop build only)",
+        "description": "Zooming can be controlled with CTRL+- and CTRL+= shortcuts as well."
     }
 }