Replaced jbox dialogues.

Author: mikeller

_locales/en/messages.json

@@ -23,6 +23,9 @@
     "autoConnect": {
         "message": "Auto-Connect"
     },
+    "close": {
+        "message": "Close"
+    },
     "autoConnectEnabled": {
         "message": "Auto-Connect: Enabled - Configurator automatically tries to connect when new port is detected"
     },
@@ -41,6 +44,9 @@
     "configuratorUpdateNotice": {
         "message": "You are using an outdated version of the <b>Betaflight Configurator</b>.<br>Version <b>$1</b> is available online, please visit <a href=\"$2\" target=\"_blank\">the release page</a> to download and install the latest version with fixes and improvements.<br>Please close the configurator window before updating."
     },
+    "configuratorUpdateWebsite": {
+        "message": "Go to Release Website"
+    },
     "deviceRebooting": {
         "message": "Device - <span style=\"color: red\">Rebooting</span>"
     },

js/gui.js

@@ -321,15 +321,5 @@ GUI_control.prototype.content_ready = function (callback) {
     if (callback) callback();
 }
 
-GUI_control.prototype.show_modal = function (title, message) {
-    var popup = new jBox('Modal', {
-        title: title,
-        content: message,
-        closeButton: 'title'
-    });
-
-    popup.open();
-}
-
 // initialize object into GUI variable
 var GUI = new GUI_control();

js/serial_backend.js

@@ -238,15 +238,29 @@ function onOpen(openInfo) {
                             });
                         });
                     } else {
-                        GUI.show_modal(chrome.i18n.getMessage('warningTitle'),
-                            chrome.i18n.getMessage('firmwareTypeNotSupported'));
+                        var dialog = $('.dialogConnectWarning')[0];
+
+                        $('.dialogConnectWarning-content').html(chrome.i18n.getMessage('firmwareTypeNotSupported'));
+
+                        $('.dialogConnectWarning-closebtn').click(function() {
+                            dialog.close();
+                        });
+
+                        dialog.showModal();
 
                         connectCli();
                     }
                 });
             } else {
-                GUI.show_modal(chrome.i18n.getMessage('warningTitle'),
-                    chrome.i18n.getMessage('firmwareVersionNotSupported', [CONFIGURATOR.apiVersionAccepted]));
+                var dialog = $('.dialogConnectWarning')[0];
+
+                $('.dialogConnectWarning-content').html(chrome.i18n.getMessage('firmwareVersionNotSupported', [CONFIGURATOR.apiVersionAccepted]));
+
+                $('.dialogConnectWarning-closebtn').click(function() {
+                    dialog.close();
+                });
+
+                dialog.showModal();
 
                 connectCli();
             }

main.css

@@ -1302,6 +1302,26 @@ dialog {
     box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.35);
 }
 
+.regular-button {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    margin-right: 10px;
+    background-color: #ffbb00;
+    border-radius: 3px;
+    border: 1px solid #dba718;
+    color: #000;
+    font-family: 'open_sansbold', Arial;
+    font-size: 12px;
+    text-shadow: 0px 1px rgba(255, 255, 255, 0.25);
+    display: inline-block;
+    cursor: pointer;
+    transition: all ease 0.2s;
+    padding: 0px;
+    padding-left: 9px;
+    padding-right: 9px;
+    line-height: 28px;
+}
+
 .small {
     width: auto;
     position: relative;

main.html

@@ -294,5 +294,27 @@
         </div>
     </div>
 </div>
+
+    <dialog class="dialogConfiguratorUpdate">
+        <h3 i18n="noticeTitle"></h3>
+        <div class="content">
+            <div class="dialogConfiguratorUpdate-content" style="margin-top: 10px"></div>
+        </div>
+        <div class="buttons">
+            <a href="#" class="dialogConfiguratorUpdate-websitebtn regular-button" i18n="configuratorUpdateWebsite"></a>
+            <a href="#" class="dialogConfiguratorUpdate-closebtn regular-button" i18n="close"></a>
+        </div>
+    </dialog>
+
+    <dialog class="dialogConnectWarning">
+        <h3 i18n="warningTitle"></h3>
+        <div class="content">
+            <div class="dialogConnectWarning-content" style="margin-top: 10px"></div>
+        </div>
+        <div class="buttons">
+            <a href="#" class="dialogConnectWarning-closebtn regular-button" i18n="close"></a>
+        </div>
+    </dialog>
+
 </body>
 </html>

main.js

@@ -377,8 +377,23 @@ function notifyOutdatedVersion(releaseData) {
         });
 
         if (versions.length > 0 && semver.lt(getManifestVersion(), versions[0].tag_name)) {
-            GUI.show_modal(chrome.i18n.getMessage('noticeTitle'), chrome.i18n.getMessage('configuratorUpdateNotice', [versions[0].tag_name, versions[0].html_url]));
             GUI.log(chrome.i18n.getMessage('configuratorUpdateNotice', [versions[0].tag_name, versions[0].html_url]));
+
+            var dialog = $('.dialogConfiguratorUpdate')[0];
+
+            $('.dialogConfiguratorUpdate-content').html(chrome.i18n.getMessage('configuratorUpdateNotice', [versions[0].tag_name, versions[0].html_url]));
+
+            $('.dialogConfiguratorUpdate-closebtn').click(function() {
+                dialog.close();
+            });
+
+            $('.dialogConfiguratorUpdate-websitebtn').click(function() {
+                dialog.close();
+
+                window.open(versions[0].html_url);
+            });
+
+            dialog.showModal();
         }
     });
 }