Sort and translate font name at OSD tab (betaflight#3621)

* Translate font name in OSD tab

* minor changes

* minor changes 2

Author: HThuren

locales/en/messages.json

@@ -5058,10 +5058,50 @@
         "message": "OSD Profile {{profileNumber}}",
         "description": "Content of the selector for the OSD Profile in the preview"
     },
-    "osdSetupPreviewSelectFontElement": {
-        "message": "Font {{fontName}}",
+    "osdSetupPreviewSelectFont": {
+        "message": "Font",
         "description": "Content of the selector for the OSD Font in the preview"
     },
+    "osdSetupFontTypeDefault": {
+        "message": "Default",
+        "description": "Font Default"
+    },
+    "osdSetupFontTypeBold": {
+        "message": "Bold",
+        "description": "Font Bold"
+    },
+    "osdSetupFontTypeLarge": {
+        "message": "Large",
+        "description": "Font Large"
+    },
+    "osdSetupFontTypeLargeExtra": {
+        "message": "Large Extra",
+        "description": "Font Large Extra"
+    },
+    "osdSetupFontTypeBetaflight": {
+        "message": "Betaflight",
+        "description": "Font Betaflight"
+    },
+    "osdSetupFontTypeDigital": {
+        "message": "Digital",
+        "description": "Font Digital"
+    },
+    "osdSetupFontTypeClarity": {
+        "message": "Clarity",
+        "description": "Font Clarity"
+    },
+    "osdSetupFontTypeVision": {
+        "message": "Vision",
+        "description": "Font Vision"
+    },
+    "osdSetupFontTypeImpact": {
+        "message": "Impact",
+        "description": "Font Impact"
+    },
+    "osdSetupFontTypeImpactMini": {
+        "message": "Impact Mini",
+        "description": "Font Impact Mini"
+    },
     "osdSetupPreviewCheckZoom": {
         "message": "Zoom",
         "description": "Check to select a bigger display of the OSD preview in small screens"

src/js/tabs/osd.js

@@ -1830,16 +1830,16 @@ OSD.constants = {
 
     },
     FONT_TYPES: [
-        { file: "default", name: "Default" },
-        { file: "bold", name: "Bold" },
-        { file: "large", name: "Large" },
-        { file: "extra_large", name: "Extra Large" },
-        { file: "betaflight", name: "Betaflight" },
-        { file: "digital", name: "Digital" },
-        { file: "clarity", name: "Clarity" },
-        { file: "vision", name: "Vision" },
-        { file: "impact", name: "Impact" },
-        { file: "impact_mini", name: "Impact Mini" },
+        { file: "default", name: "osdSetupFontTypeDefault" },
+        { file: "bold", name: "osdSetupFontTypeBold" },
+        { file: "large", name: "osdSetupFontTypeLarge" },
+        { file: "extra_large", name: "osdSetupFontTypeLargeExtra" },
+        { file: "betaflight", name: "osdSetupFontTypeBetaflight" },
+        { file: "digital", name: "osdSetupFontTypeDigital" },
+        { file: "clarity", name: "osdSetupFontTypeClarity" },
+        { file: "vision", name: "osdSetupFontTypeVision" },
+        { file: "impact", name: "osdSetupFontTypeImpact" },
+        { file: "impact_mini", name: "osdSetupFontTypeImpactMini" },
     ],
 };
 
@@ -2666,11 +2666,14 @@ osd.initialize = function(callback) {
             const option = $('<option>', {
                 "data-font-file": e.file,
                 value: e.file,
-                text: e.name,
+                text: i18n.getMessage(e.name),
             });
             fontPresetsElement.append($(option));
         });
 
+        // Sort the element, if need to group, do it by lexical sort, ie. by naming of (the translated) selection text
+        fontPresetsElement.sortSelect(i18n.getMessage("osdSetupFontTypeDefault"));
+
         const fontbuttons = $('.fontpresets_wrapper');
         fontbuttons.append($('<button>', { class: "load_font_file", i18n: "osdSetupOpenFont" }));
 
@@ -3040,10 +3043,12 @@ osd.initialize = function(callback) {
 
                         // Standard fonts
                         OSD.constants.FONT_TYPES.forEach(function(e) {
-                            const optionText = i18n.getMessage('osdSetupPreviewSelectFontElement', {fontName : e.name});
-                            osdFontSelectorElement.append(new Option(optionText, e.file));
+                            osdFontSelectorElement.append(new Option(i18n.getMessage(e.name), e.file));
                         });
 
+                        // Sort the element, if need to group, do it by lexical sort, ie. by naming of (the translated) selection text
+                        osdFontSelectorElement.sortSelect(i18n.getMessage("osdSetupFontTypeDefault"));
+
                         osdFontSelectorElement.change(function() {
                             // Change the font selected in the Font Manager, in this way it is easier to flash if the user likes it
                             osdFontPresetsSelectorElement.val(this.value).change();

src/tabs/osd.html

@@ -43,6 +43,7 @@ <h1 class="tab_title">
                                    <select class="osdprofile-selector">
                                        <!--  Populated at runtime -->
                                    </select>
+                                   <label id="osdprofile-selector-font" i18n="osdSetupPreviewSelectFont"></label>
                                    <select class="osdfont-selector">
                                        <!-- Populated at runtime -->
                                    </select>