Merge pull request #587 from TriliumNext/feature/editor-type-radios

Replace the editor type combo box with radio buttons
TriliumNext · Nov 15, 2024 · 40c9ef6 · 40c9ef6
2 parents a8b87a1 + 8731b8a
commit 40c9ef6
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 15 deletions.
diff --git a/src/public/app/widgets/type_widgets/options/text_notes/editor.js b/src/public/app/widgets/type_widgets/options/text_notes/editor.js
@@ -6,25 +6,37 @@ const TPL = `
 <div class="options-section">
     <h4>${t("editing.editor_type.label")}</h4>
     
-    <select class="editor-type-select form-select">
-        <option value="ckeditor-balloon">${t("editing.editor_type.floating")}</option>
-        <option value="ckeditor-classic">${t("editing.editor_type.fixed")}</option>
-    </select>
+    <div>
+        <label>
+            <input type="radio" name="editor-type" value="ckeditor-balloon" />
+            <strong>${t("editing.editor_type.floating.title")}</strong>
+            - ${t("editing.editor_type.floating.description")}
+        </label>
+    </div>
+
+    <div>
+        <label>
+            <input type="radio" name="editor-type" value="ckeditor-classic" />
+            <strong>${t("editing.editor_type.fixed.title")}</strong>
+            - ${t("editing.editor_type.fixed.description")}
+        </label>
+    </div>
+
 </div>`;
 
 export default class EditorOptions extends OptionsWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$body = $("body");
-        this.$editorType = this.$widget.find(".editor-type-select");
-        this.$editorType.on('change', async () => {
-            const newEditorType = this.$editorType.val();
+        this.$widget.find(`input[name="editor-type"]`).on('change', async () => {
+            const newEditorType = this.$widget.find(`input[name="editor-type"]:checked`).val();
             await this.updateOption('textNoteEditorType', newEditorType);
             utils.reloadFrontendApp("editor type change");
         });
     }
 
     async optionsLoaded(options) {
-        this.$editorType.val(options.textNoteEditorType);
+        this.$widget.find(`input[name="editor-type"][value="${options.textNoteEditorType}"]`)
+                    .prop("checked", "true");
     }
 }
diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json
@@ -1522,8 +1522,14 @@
   "editing": {
     "editor_type": {
       "label": "Formatting toolbar",
-      "floating": "Floating (editing tools appear near the cursor)",
-      "fixed": "Fixed (editing tools appear in the \"Formatting\" ribbon tab)"
+      "floating": {
+        "title": "Floating",
+        "description": "editing tools appear near the cursor;"
+      },
+      "fixed": {
+        "title": "Fixed",
+        "description": "editing tools appear in the \"Formatting\" ribbon tab."
+      }
     }
   }
 }
diff --git a/src/public/translations/es/translation.json b/src/public/translations/es/translation.json
@@ -1518,8 +1518,14 @@
   "editing": {
     "editor_type": {
       "label": "Barra de herramientas de formato",
-      "floating": "Flotante (las herramientas de edición aparecen cerca del cursor)",
-      "fixed": "Fijo (las herramientas de edición aparecen en la pestaña de la cinta \"Formato\")"
+      "floating": {
+        "title": "Flotante",
+        "description": "las herramientas de edición aparecen cerca del cursor;"
+      },
+      "fixed": {
+        "title": "Fijo",
+        "description": "las herramientas de edición aparecen en la pestaña de la cinta \"Formato\")."
+      }
     }
   }
 }
diff --git a/src/public/translations/ro/translation.json b/src/public/translations/ro/translation.json
@@ -1514,9 +1514,15 @@
   },
   "editing": {
     "editor_type": {
-      "fixed": "Editor cu bară fixă (uneltele de editare vor apărea în tab-ul „Formatare” din panglică)",
-      "floating": "Editor cu bară flotantă (uneltele de editare vor apărea lângă cursor)",
-      "label": "Bară de formatare"
+      "label": "Bară de formatare",
+      "floating": {
+        "title": "Editor cu bară flotantă",
+        "description": "uneltele de editare vor apărea lângă cursor."
+      },
+      "fixed": {
+        "title": "Editor cu bară fixă",
+        "description": "uneltele de editare vor apărea în tab-ul „Formatare” din panglică;"
+      }
     }
   },
   "editor": {