From b4f5b46335f758ecd027967178e15d26af717439 Mon Sep 17 00:00:00 2001
From: timman2er <timgreven@live.nl>
Date: Wed, 26 Sep 2018 23:06:28 +0200
Subject: [PATCH] (rebase) change firmware flasher to button and change name

---
 locales/en/messages.json |  3 ++
 src/css/main.css         | 87 +++++++++++++++++++++++++++++++++++++++-
 src/js/main.js           |  9 ++++-
 src/js/serial_backend.js |  5 +++
 src/main.html            |  6 +++
 5 files changed, 108 insertions(+), 2 deletions(-)

diff --git a/locales/en/messages.json b/locales/en/messages.json
index 5a1fb045..0a1b8429 100644
--- a/locales/en/messages.json
+++ b/locales/en/messages.json
@@ -3834,5 +3834,8 @@
     },
     "modeCameraChangeMode": {
         "message": "CAMERA CHANGE MODE"
+    },
+    "flashTab": {
+        "message": "Update Firmware"
     }
 }
diff --git a/src/css/main.css b/src/css/main.css
index e490b0d4..34203e5c 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -119,7 +119,7 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .headerbar {
-    height:110px;
+    height:115px;
     width:100%;
     background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.15));
 }
@@ -1458,6 +1458,18 @@ dialog {
     margin-left: 20px;
 }
 
+/* firmware update button */
+.open_firmware_flasher {
+    position: relative;
+    float: right;
+    left: 0px;
+    top: 19px;
+    height: 70px;
+    width: 60px;
+    margin-right: 20px;
+    margin-left: 20px;
+}
+
 .connect_b {
     float: left;
 }
@@ -1504,6 +1516,67 @@ dialog {
     background-color: #f21212;
 }
 
+.firmware_b {
+    float: left;
+}
+
+.firmware_b a {
+    height: 50px;
+    width: 50px;
+    border-radius: 100px;
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35);
+    float: left;
+    margin-left: 5px;
+    margin-bottom: 7px;
+    transition: none;
+}
+
+.firmware_b a.connect.disabled {
+    background-color: #808080;
+    pointer-events: none;
+    cursor: default;
+ }
+
+.firmware_b a.connect {
+    background-color: #ffbb00;
+    border: 1px solid #dba718;
+    background-image: url(../images/icons/cf_icon_flasher_white.svg);
+    background-repeat: no-repeat;
+    background-size: 30px;
+    background-position: center 10px;
+    transition: none;
+}
+
+.firmware_b a.connect:hover {
+    background-color: #ffcc3f;
+}
+
+.firmware_b a.connect.active {
+    background-color: #e60000;
+    border: 1px solid #fe0000;
+    background-image: url(../images/icons/cf_icon_flasher_white.svg);
+    transition: none;
+}
+
+.firmware_b a.connect.active:hover {
+    background-color: #f21212;
+}
+
+.firmware_b a.connect.active {
+    background-color: #e60000;
+    border: 1px solid #fe0000;
+    background-image: url(../images/icons/cf_icon_flasher_white.svg);
+    transition: none;
+}
+
+.firmware_b a.connect.active:hover {
+    background-color: #f21212;
+}
+
+.tab_firmware_flasher {
+    display:none;
+}
+
 .connect_state {
     float: left;
     height: 20px;
@@ -1516,6 +1589,18 @@ dialog {
     margin-top: -1px;
 }
 
+.flash_state {
+    float: left;
+    height: 20px;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    font-size: 12px;
+    font-family: 'open_sansregular', Arial;
+    text-shadow: 0px 1px rgba(0, 0, 0, 0.25);
+    margin-top: -1px;
+}
+
 /* fixing padding for all Tabs*/
 .tab-setup, .tab-landing, .tab-adjustments, .tab-auxiliary, .tab-cli, .tab-configuration, .tab-failsafe, .tab-firmware_flasher,
     .tab-gps, .tab-help, .tab-led-strip, .tab-logging, .tab-modes, .tab-motors, .tab-pid_tuning, .tab-ports, .tab-receiver,
diff --git a/src/js/main.js b/src/js/main.js
index 32291d3d..01f6e2df 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -78,6 +78,7 @@ function setupAnalytics(result) {
     }
 
     $('.connect_b a.connect').removeClass('disabled');
+    $('.firmware_b a.connect').removeClass('disabled');
 }
 
 //Process to execute to real start the app
@@ -149,7 +150,13 @@ function startProcess() {
                 return;
             }
 
-            if (GUI.allowedTabs.indexOf(tab) < 0) {
+            if (GUI.allowedTabs.indexOf(tab) < 0 && tabName == "Firmware Flasher") {
+                if (GUI.connected_to || GUI.connecting_to) {
+                    $('a.connect').click();
+                } else {
+                    self.disconnect();
+                }
+            } else if (GUI.allowedTabs.indexOf(tab) < 0) {
                 GUI.log(i18n.getMessage('tabSwitchUpgradeRequired', [tabName]));
                 return;
             }
diff --git a/src/js/serial_backend.js b/src/js/serial_backend.js
index 512c1b2c..51be9461 100755
--- a/src/js/serial_backend.js
+++ b/src/js/serial_backend.js
@@ -82,6 +82,11 @@ function initializeSerialBackend() {
        }
     });
 
+    $('div.open_firmware_flasher a.connect').click(function () {
+        $('#tabs ul.mode-disconnected .tab_firmware_flasher a').click();
+        $('div.open_firmware_flasher a.flash_state').text(i18n.getMessage('flashTab'));
+    });
+
     // auto-connect
     chrome.storage.local.get('auto_connect', function (result) {
         if (result.auto_connect === 'undefined' || result.auto_connect) {
diff --git a/src/main.html b/src/main.html
index 7bb742b5..7d827737 100755
--- a/src/main.html
+++ b/src/main.html
@@ -129,6 +129,12 @@
                 </div>
                 <a class="connect_state" i18n="connect"></a>
             </div>
+            <div class="open_firmware_flasher">
+                <div class="firmware_b">
+                    <a class="connect disabled" href="#"></a>
+                </div>
+                <a class="flash_state" i18n="flashTab"></a>
+            </div>
             <div id="portsinput">
                 <div class="dropdown dropdown-dark">
                     <select class="dropdown-select" id="port" i18n_title="firmwareFlasherManualPort">