From 40cf5667710a2ede2bbdc0ef3b0ab3de3169ab5e Mon Sep 17 00:00:00 2001
From: Richard Cooper <richard.cooper@bennetts.co.uk>
Date: Wed, 1 Aug 2018 22:46:51 +0100
Subject: [PATCH] Change font presets to new dropdown UI.

---
 src/css/tabs/osd.css |  6 +++++-
 src/js/tabs/osd.js   | 34 +++++++++++++++++++---------------
 src/tabs/osd.html    |  6 +++++-
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/css/tabs/osd.css b/src/css/tabs/osd.css
index d45af866..6084a4f6 100644
--- a/src/css/tabs/osd.css
+++ b/src/css/tabs/osd.css
@@ -402,13 +402,17 @@ button {
   cursor: pointer;
 }
 
-.fontbuttons {
+.fontpresets_wrapper {
   display: inline-block;
   position: absolute;
   right: 1.2em;
   top: .8em;
 }
 
+.fontpresets {
+  border: 1px solid #cccccc;
+}
+
 .tab-osd .switchable-field {
   padding: 3px;
   border: 1px solid transparent;
diff --git a/src/js/tabs/osd.js b/src/js/tabs/osd.js
index 51ff1021..7c84282d 100755
--- a/src/js/tabs/osd.js
+++ b/src/js/tabs/osd.js
@@ -910,7 +910,7 @@ OSD.constants = {
     { file: "default", name: "Default" },
     { file: "bold", name: "Bold" },
     { file: "large", name: "Large" },
-    { file: "extra_large", name: "X-Large" },
+    { file: "extra_large", name: "Extra Large" },
     { file: "betaflight", name: "Betaflight" },
     { file: "digital", name: "Digital" },
     { file: "clarity", name: "Clarity" },
@@ -1471,17 +1471,18 @@ TABS.osd.initialize = function (callback) {
     }
 
     $('#content').load("./tabs/osd.html", function () {
-
-        // Generate font type buttons
-        var fontbuttons = $('.fontbuttons');
+        // Generate font type select element
+        var fontselect = $('.fontpresets');
         OSD.constants.FONT_TYPES.forEach(function(e, i) {
-          var button = $('<button>', {
+          var option = $('<option>', {
             "data-font-file": e.file,
+            value: e.file,
             text: e.name
           });
-          fontbuttons.append($(button));
+          fontselect.append($(option));
         });
 
+        var fontbuttons = $('.fontpresets_wrapper');
         fontbuttons.append($('<button>', { class: "load_font_file", i18n: "osdSetupOpenFont" }));
 
         // must invoke before i18n.localizePage() since it adds translation keys for expected logo size
@@ -1975,24 +1976,27 @@ TABS.osd.initialize = function (callback) {
         // init structs once, also clears current font
         FONT.initData();
 
-        var $fontPicker = $('.fontbuttons button');
-        $fontPicker.click(function(e) {
-          if (!$(this).data('font-file')) { return; }
-          $fontPicker.removeClass('active');
-          $(this).addClass('active');
-          $.get('./resources/osd/' + $(this).data('font-file') + '.mcm', function(data) {
+        var $fontpresets = $('.fontpresets')
+        $fontpresets.change(function(e) {
+          var $font = $('.fontpresets option:selected');
+          $.get('./resources/osd/' + $font.data('font-file') + '.mcm', function(data) {
             FONT.parseMCMFontFile(data);
             FONT.preview($preview);
             LogoManager.drawPreview();
             updateOsdView();
           });
         });
-
+        
         // load the first font when we change tabs
-        $fontPicker.first().click();
+        var $font = $('.fontpresets option:selected');
+        $.get('./resources/osd/' + $font.data('font-file') + '.mcm', function(data) {
+          FONT.parseMCMFontFile(data);
+          FONT.preview($preview);
+          LogoManager.drawPreview();
+          updateOsdView();
+        });
 
         $('button.load_font_file').click(function() {
-          $fontPicker.removeClass('active');
           FONT.openFontFile().then(function() {
             FONT.preview($preview);
             LogoManager.drawPreview();
diff --git a/src/tabs/osd.html b/src/tabs/osd.html
index 05d55bd0..a494bc02 100644
--- a/src/tabs/osd.html
+++ b/src/tabs/osd.html
@@ -124,7 +124,11 @@
                         <h1 class="tab_title" i18n="osdSetupFontPresets" />
                         <!-- Font preview and list -->
                         <div class="content_wrapper font-preview"></div>
-                        <div class="fontbuttons"></div>
+                        <div class="fontpresets_wrapper">
+                            <label>Select Font Preset</label>
+                            <select class="fontpresets"></select>
+                            <span> Or </span>
+                        </div>
                         <!-- Boot logo setup -->
                         <h1 class="tab_title" i18n="osdSetupCustomLogoTitle" />
                         <div id="font-logo-preview-container" class="content_wrapper">