Replace all 4 instances of jBox-style modal dialog boxes with HTML dialog element

locales/en/messages.json

@@ -5320,6 +5320,10 @@
         "message": "Font",
         "description": "Content of the selector for the OSD Font in the preview"
     },
+    "osdSetupFontManagerTitle": {
+        "message": "OSD Font Manager",
+        "description": "Dialog title"
+    },
     "osdSetupFontTypeDefault": {
         "message": "Default",
         "description": "Font Default"

src/css/main.less

@@ -41,6 +41,13 @@ a.disabled {
     cursor: default;
     color: #999;
 }
+.html-dialog {
+    border-color: var(--primary-500);
+    padding: 0px;
+}
+.html-dialog-content {
+    padding: 15px 15px;
+}
 .background_paper {
     background-color: var(--surface-200);
     background-image:

src/css/tabs/cli.less

@@ -75,18 +75,17 @@
         color: white;
     }
 }
-.jBox-container {
-    textarea#preview {
-        background-color: rgba(0, 0, 0, 0.75);
-        width: 100%;
-        resize: none;
-        overflow-y: scroll;
-        overflow-x: hidden;
-        font-family: monospace;
-        color: white;
-        padding: 5px;
-        margin-bottom: 5px;
-    }
+textarea#preview {
+    background-color: rgba(0, 0, 0, 0.75);
+    width: 100%;
+    resize: none;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    font-family: monospace;
+    color: white;
+    box-sizing: border-box;
+    padding: 5px;
+    margin-bottom: 5px;
 }
 .cli-textcomplete-dropdown {
     border: 1px solid var(--surface-500);

src/css/tabs/osd.less

@@ -2,17 +2,16 @@
     --context-menu-z-index: 10001;
 
     .info {
-        margin: 10px 0 0 0;
-        position: relative;
+        display: grid;
+        grid-template-areas: "area";
         width: 100%;
+        margin-bottom: 10px;
         .progressLabel {
-            position: absolute;
+            grid-area: area;
             width: 100%;
             height: 26px;
-            top: 0;
-            left: 0;
+            line-height: 26px;
             text-align: center;
-            line-height: 24px;
             color: white;
             font-weight: bold;
             a {
@@ -23,6 +22,7 @@
             }
         }
         .progress {
+            grid-area: area;
             width: 100%;
             height: 26px;
             border-radius: 5px;
@@ -68,12 +68,6 @@
         width: 18px;
         height: 18px;
     }
-    ul {
-        li {
-            list-style: circle;
-            margin-left: 30px;
-        }
-    }
     .options {
         position: relative;
         margin-bottom: 10px;
@@ -382,21 +376,23 @@
             font-weight: normal;
         }
     }
-    .grid-col {
-        margin: 0px;
+    #font-logo {
+        display: flex;
+        margin-bottom: 2em;
     }
     #font-logo-preview-container {
         background: rgba(0, 255, 0, 0.4);
         margin-bottom: 10px;
-        box-sizing: border-box;
+        padding: 10px;
     }
     #font-logo-preview {
         background: rgba(0, 255, 0, 1);
         line-height: 0;
         margin: auto;
     }
     #font-logo-info {
-        font-size: 125%;
+        flex: 1;
+        margin-left: 2em;
         line-height: 150%;
         h3 {
             margin-bottom: 0.2em;
@@ -431,11 +427,11 @@
         font-size: 9pt !important;
         cursor: pointer;
     }
+    .font-preview {
+        padding-bottom: 1.25rem;
+    }
     .fontpresets_wrapper {
-        display: inline-block;
-        position: absolute;
-        right: 1.2em;
-        top: 0.8em;
+        padding: 1rem 0;
     }
     .fontpresets {
         background: var(--surface-200);

src/js/main.js

@@ -1,6 +1,5 @@
 import "./jqueryPlugins";
 import $ from "jquery";
-import "jbox";
 import "../components/init.js";
 import { gui_log } from "./gui_log.js";
 // same, msp seems to be everywhere used from global scope

src/js/tabs/cli.js

@@ -8,11 +8,11 @@ import { reinitializeConnection } from "../serial_backend";
 import CONFIGURATOR from "../data_storage";
 import CliAutoComplete from "../CliAutoComplete";
 import { gui_log } from "../gui_log";
-import jBox from "jbox";
 import $ from "jquery";
 import { serial } from "../serial";
 import FileSystem from "../FileSystem";
 import { ispConnected } from "../utils/connection";
+import { initializeModalDialog } from "../utils/initializeModalDialog";
 
 const cli = {
     lineDelayMs: 5,
@@ -151,20 +151,16 @@ cli.initialize = function (callback) {
 
         function previewCommands(result, fileName) {
             if (!self.GUI.snippetPreviewWindow) {
-                self.GUI.snippetPreviewWindow = new jBox("Modal", {
-                    id: "snippetPreviewWindow",
-                    width: "auto",
-                    height: "auto",
-                    closeButton: "title",
-                    animation: false,
-                    isolateScroll: false,
-                    title: i18n.getMessage("cliConfirmSnippetDialogTitle", { fileName: fileName }),
-                    content: $("#snippetpreviewcontent"),
-                    onCreated: () => $("#snippetpreviewcontent a.confirm").click(() => executeSnippet(fileName)),
-                });
+                self.GUI.snippetPreviewWindow = initializeModalDialog(
+                    null,
+                    "#snippetpreviewdialog",
+                    "cliConfirmSnippetDialogTitle",
+                    { fileName: fileName },
+                );
+                $("#snippetpreviewcontent a.confirm").click(() => executeSnippet(fileName));
             }
             previewArea.val(result);
-            self.GUI.snippetPreviewWindow.open();
+            self.GUI.snippetPreviewWindow.showModal();
         }
 
         const file = await FileSystem.pickOpenFile(i18n.getMessage("fileSystemPickerFiles", { typeof: "TXT" }), ".txt");
@@ -530,10 +526,6 @@ cli.supportWarningDialog = function (onAccept) {
 };
 
 cli.cleanup = function (callback) {
-    if (TABS.cli.GUI.snippetPreviewWindow) {
-        TABS.cli.GUI.snippetPreviewWindow.destroy();
-        TABS.cli.GUI.snippetPreviewWindow = null;
-    }
     if (!(CONFIGURATOR.connectionValid && CONFIGURATOR.cliValid && CONFIGURATOR.cliActive)) {
         if (callback) {
             callback();

src/js/tabs/osd.js

@@ -16,6 +16,7 @@ import debounce from "lodash.debounce";
 import $ from "jquery";
 import FileSystem from "../FileSystem";
 import { have_sensor } from "../sensor_helpers";
+import { initializeModalDialog } from "../utils/initializeModalDialog";
 
 const FONT = {};
 const SYM = {};
@@ -3254,16 +3255,8 @@ osd.initialize = function (callback) {
             $(".display-layout .preview").css("zoom", previewZoom);
         }
 
-        // Open modal window
-        OSD.GUI.fontManager = new jBox("Modal", {
-            width: 750,
-            height: 455,
-            closeButton: "title",
-            animation: false,
-            attach: $("#fontmanager"),
-            title: "OSD Font Manager",
-            content: $("#fontmanagercontent"),
-        });
+        // Enable font manager dialog
+        OSD.GUI.fontManager = initializeModalDialog("#fontmanager", "#fontmanagerdialog", "osdSetupFontManagerTitle");
 
         $(".elements-container div.cf_tip").attr("title", i18n.getMessage("osdSectionHelpElements"));
         $(".videomode-container div.cf_tip").attr("title", i18n.getMessage("osdSectionHelpVideoMode"));
@@ -4093,10 +4086,6 @@ osd.initialize = function (callback) {
 };
 
 osd.cleanup = function (callback) {
-    if (OSD.GUI.fontManager) {
-        OSD.GUI.fontManager.destroy();
-    }
-
     // unbind "global" events
     $(document).unbind("keypress");
     $(document).off("click", "span.progressLabel a");

src/js/tabs/power.js

@@ -5,8 +5,8 @@ import { mspHelper } from "../msp/MSPHelper";
 import FC from "../fc";
 import MSP from "../msp";
 import MSPCodes from "../msp/MSPCodes";
-import jBox from "jbox";
 import $ from "jquery";
+import { initializeModalDialog } from "../utils/initializeModalDialog";
 
 const power = {
     supported: false,
@@ -20,13 +20,6 @@ power.initialize = function (callback) {
         GUI.active_tab = "power";
     }
 
-    if (GUI.calibrationManager) {
-        GUI.calibrationManager.destroy();
-    }
-    if (GUI.calibrationManagerConfirmation) {
-        GUI.calibrationManagerConfirmation.destroy();
-    }
-
     function load_status() {
         MSP.send_message(MSPCodes.MSP_STATUS, false, false, load_voltage_meters);
     }
@@ -223,9 +216,6 @@ power.initialize = function (callback) {
         }
         $(".tab-power").addClass("supported");
 
-        $("#calibrationmanagercontent").hide();
-        $("#calibrationmanagerconfirmcontent").hide();
-
         // battery
         const templateBatteryState = $("#tab-power-templates .battery-state .battery-state");
         const destinationBatteryState = $(".tab-power .battery-state");
@@ -347,33 +337,21 @@ power.initialize = function (callback) {
 
         //calibration manager
         let calibrationconfirmed = false;
-        GUI.calibrationManager = new jBox("Modal", {
-            width: 400,
-            height: 230,
-            closeButton: "title",
-            animation: false,
-            attach: $("#calibrationmanager"),
-            title: i18n.getMessage("powerCalibrationManagerTitle"),
-            content: $("#calibrationmanagercontent"),
-            onCloseComplete: function () {
-                if (!calibrationconfirmed) {
-                    TABS.power.initialize();
-                }
-            },
-        });
-
-        GUI.calibrationManagerConfirmation = new jBox("Modal", {
-            width: 400,
-            height: 230,
-            closeButton: "title",
-            animation: false,
-            attach: $("#calibrate"),
-            title: i18n.getMessage("powerCalibrationManagerConfirmationTitle"),
-            content: $("#calibrationmanagerconfirmcontent"),
-            onCloseComplete: function () {
-                GUI.calibrationManager.close();
-            },
-        });
+        GUI.calibrationManager = initializeModalDialog(
+            "#calibrationmanager",
+            "#calibrationmanagerdialog",
+            "powerCalibrationManagerTitle",
+            null,
+            () => calibrationconfirmed || TABS.power.initialize(),
+        );
+
+        GUI.calibrationManagerConfirmation = initializeModalDialog(
+            "#calibrate",
+            "#calibrationmanagerconfirmdialog",
+            "powerCalibrationManagerConfirmationTitle",
+            null,
+            () => GUI.calibrationManager.close(),
+        );
 
         $("a.calibrationmanager").click(function () {
             if (FC.BATTERY_CONFIG.voltageMeterSource == 1 && FC.BATTERY_STATE.voltage > 0.1) {
@@ -564,13 +542,6 @@ power.initialize = function (callback) {
 
 power.cleanup = function (callback) {
     if (callback) callback();
-
-    if (GUI.calibrationManager) {
-        GUI.calibrationManager.destroy();
-    }
-    if (GUI.calibrationManagerConfirmation) {
-        GUI.calibrationManagerConfirmation.destroy();
-    }
 };
 
 TABS.power = power;