From 1a97b6b763a5ad07548eae2962e1858eece6d9ab Mon Sep 17 00:00:00 2001
From: DJ2LS <dj2ls@proton.me>
Date: Thu, 20 Apr 2023 11:54:47 +0200
Subject: [PATCH] updated responsiveness

---
 gui/preload-main.js | 34 +++++++++----------
 gui/src/index.html  | 80 +++++++++++++++++----------------------------
 2 files changed, 47 insertions(+), 67 deletions(-)

diff --git a/gui/preload-main.js b/gui/preload-main.js
index 58382528..bed53386 100644
--- a/gui/preload-main.js
+++ b/gui/preload-main.js
@@ -1944,24 +1944,24 @@ ipcRenderer.on("action-update-tnc-state", (event, arg) => {
   // PTT STATE
   switch (arg.ptt_state) {
     case "True":
-      document.getElementById("ptt_state").className = "btn btn-sm btn-danger";
+      document.getElementById("ptt_state").className = "btn btn-sm btn-danger me-1";
       break;
     case "False":
-      document.getElementById("ptt_state").className = "btn btn-sm btn-success";
+      document.getElementById("ptt_state").className = "btn btn-sm btn-success me-1";
       break;
     default:
       document.getElementById("ptt_state").className =
-        "btn btn-sm btn-secondary";
+        "btn btn-sm btn-secondary me-1";
       break;
   }
 
   // AUDIO RECORDING
   if (arg.audio_recording == "True") {
     document.getElementById("startStopRecording").textContent =
-      "Stop recording";
+      "Stop Rec";
   } else {
     document.getElementById("startStopRecording").textContent =
-      "Start recording";
+      "Record";
   }
   //CHANNEL CODEC2 BUSY STATE
   if (arg.is_codec2_traffic == "True") {
@@ -1989,17 +1989,17 @@ ipcRenderer.on("action-update-tnc-state", (event, arg) => {
   // BUSY STATE
   switch (arg.busy_state) {
     case "BUSY":
-      document.getElementById("busy_state").className = "btn btn-sm btn-danger";
+      document.getElementById("busy_state").className = "btn btn-sm btn-danger me-1";
       //Seems to be no longer user accessible
       //document.getElementById("startTransmission").disabled = true;
       break;
     case "IDLE":
       document.getElementById("busy_state").className =
-        "btn btn-sm btn-success";
+        "btn btn-sm btn-success me-1";
       break;
     default:
       document.getElementById("busy_state").className =
-        "btn btn-sm btn-secondary";
+        "btn btn-sm btn-secondary me-1";
       //Seems to be no longer user accessible
       //document.getElementById("startTransmission").disabled = true;
       break;
@@ -2008,13 +2008,13 @@ ipcRenderer.on("action-update-tnc-state", (event, arg) => {
   // ARQ STATE
   switch (arg.arq_state) {
     case "True":
-      document.getElementById("arq_state").className = "btn btn-sm btn-warning";
+      document.getElementById("arq_state").className = "btn btn-sm btn-warning me-1";
       //Seems to be no longer user accessible
       //document.getElementById("startTransmission").disabled = false;
       break;
     default:
       document.getElementById("arq_state").className =
-        "btn btn-sm btn-secondary";
+        "btn btn-sm btn-secondary me-1";
       //Seems to be no longer user accessible
       //document.getElementById("startTransmission").disabled = false;
       break;
@@ -2024,17 +2024,17 @@ ipcRenderer.on("action-update-tnc-state", (event, arg) => {
   switch (arg.arq_session) {
     case "True":
       document.getElementById("arq_session").className =
-        "btn btn-sm btn-warning";
+        "btn btn-sm btn-warning me-1";
       break;
     default:
       document.getElementById("arq_session").className =
-        "btn btn-sm btn-secondary";
+        "btn btn-sm btn-secondary me-1";
       break;
   }
 
   if (arg.arq_state == "True" || arg.arq_session == "True") {
     document.getElementById("spnConnectedWith").className =
-      "bi bi-chat-fill text-success";
+      "bi bi-chat-fill text-success me-1";
   } else {
     document.getElementById("spnConnectedWith").className = "bi bi-chat-fill";
   }
@@ -2042,24 +2042,24 @@ ipcRenderer.on("action-update-tnc-state", (event, arg) => {
   // HAMLIB STATUS
   if (arg.hamlib_status == "connected") {
     document.getElementById("rigctld_state").className =
-      "btn btn-success btn-sm";
+      "btn btn-success btn-sm me-1";
   } else {
     document.getElementById("rigctld_state").className =
-      "btn btn-secondary btn-sm";
+      "btn btn-secondary btn-sm me-1";
   }
 
   // BEACON
   switch (arg.beacon_state) {
     case "True":
       document.getElementById("startBeacon").className =
-        "btn btn-sm btn-success";
+        "btn btn-sm btn-success ms-1";
       if (document.getElementById("beaconInterval").disabled == false) {
         document.getElementById("beaconInterval").disabled = true;
       }
       break;
     default:
       document.getElementById("startBeacon").className =
-        "btn btn-sm btn-outline-secondary";
+        "btn btn-sm btn-outline-secondary ms-1";
       if (document.getElementById("beaconInterval").disabled == true) {
         document.getElementById("beaconInterval").disabled = false;
       }
diff --git a/gui/src/index.html b/gui/src/index.html
index fbfada41..fe51e722 100644
--- a/gui/src/index.html
+++ b/gui/src/index.html
@@ -283,7 +283,7 @@
 	 -->
     </nav>
 
-    <div id="blurdiv" style="-webkit-filter: blur(0px); filter: blur(0px)">
+    <div id="blurdiv" style="-webkit-filter: blur(0px); filter: blur(0px);">
       <!--beginn of blur div -->
       <!-------------------------------- MAIN AREA ---------------->
       <!-------------------------------- INFO TOASTS ---------------->
@@ -306,7 +306,7 @@
               <div class="card-header p-1">
                 <div class="container">
                   <div class="row">
-                    <div class="col-auto">
+                    <div class="col-1">
                       <i class="bi bi-volume-up" style="font-size: 1.2rem"></i>
                     </div>
                     <div class="col-10">
@@ -362,13 +362,13 @@
               <div class="card-header p-1">
                 <div class="container">
                   <div class="row">
-                    <div class="col-auto">
+                    <div class="col-1">
                       <i class="bi bi-projector" style="font-size: 1.2rem"></i>
                     </div>
-                    <div class="col-3">
+                    <div class="col-4">
                       <strong class="fs-5">Rig control</strong>
                     </div>
-                    <div class="col-7">
+                    <div class="col-6">
                       <div
                         class="btn-group btn-group-sm"
                         role="group"
@@ -530,7 +530,7 @@
               <div class="card-header p-1">
                 <div class="container">
                   <div class="row">
-                    <div class="col-auto">
+                    <div class="col-1">
                       <i class="bi bi-house-door" style="font-size: 1.2rem"></i>
                     </div>
                     <div class="col-10">
@@ -639,16 +639,16 @@
               <div class="card-header p-1 d-flex">
                 <div class="container">
                   <div class="row">
-                    <div class="col-auto">
+                    <div class="col-1">
                       <i
                         class="bi bi-cloud-download"
                         style="font-size: 1.2rem"
                       ></i>
                     </div>
-                    <div class="col-2">
+                    <div class="col-3">
                       <strong class="fs-5">Updater</strong>
                     </div>
-                    <div class="col-8">
+                    <div class="col-7">
                       <div class="progress w-100 ms-1 m-1">
                         <div
                           class="progress-bar"
@@ -729,10 +729,10 @@
                     <div class="col-1">
                       <i class="bi bi-volume-up" style="font-size: 1.2rem"></i>
                     </div>
-                    <div class="col-4">
+                    <div class="col-5">
                       <strong class="fs-5">Audio level</strong>
                     </div>
-                    <div class="col-6">
+                    <div class="col-5">
                       <button
                         type="button"
                         id="audioModalButton"
@@ -886,7 +886,7 @@
               <div class="card-header p-1">
                 <div class="container">
                   <div class="row">
-                    <div class="col-auto">
+                    <div class="col-1">
                       <i class="bi bi-broadcast" style="font-size: 1.2rem"></i>
                     </div>
                     <div class="col-10">
@@ -969,39 +969,23 @@
                         ></i>
                       </button>
                       -->
-                    </div>
-                  </div>
-                  <div class="col-md-auto">
-                    <div
-                      class="input-group input-group-sm mb-0"
-                      data-bs-placement="bottom"
-                      data-bs-toggle="tooltip"
-                      data-bs-trigger="hover"
-                      data-bs-html="false"
-                      title="Send a CQ to the world"
-                    >
+
                       <button
-                        class="btn btn-sm btn-outline-secondary"
+                        class="btn btn-sm btn-outline-secondary ms-1"
                         id="sendCQ"
                         type="button"
+                                              title="Send a CQ to the world"
+
                       >
                         Call CQ
                       </button>
-                    </div>
-                  </div>
-                  <div class="col-md-auto">
-                    <div
-                      class="input-group input-group-sm"
-                      data-bs-placement="bottom"
-                      data-bs-toggle="tooltip"
-                      data-bs-trigger="hover"
-                      data-bs-html="false"
-                      title="Toggle beacon mode. The interval can be set in settings. While sending a beacon, you can receive ping requests and open a datachannel. If a datachannel is opened, the beacon pauses."
-                    >
+
                       <button
                         type="button"
                         id="startBeacon"
-                        class="btn btn-sm btn-outline-secondary"
+                        class="btn btn-sm btn-outline-secondary ms-1"
+                        title="Toggle beacon mode. The interval can be set in settings. While sending a beacon, you can receive ping requests and open a datachannel. If a datachannel is opened, the beacon pauses."
+
                       >
                         <i class="bi bi-soundwave"></i> Toggle beacon
                       </button>
@@ -1433,7 +1417,7 @@
           <div class="btn-toolbar" role="toolbar" style="margin-left: 2px">
             <div class="btn-group btn-group-sm me-1" role="group">
               <button
-                class="btn btn-sm btn-secondary"
+                class="btn btn-sm btn-secondary me-1"
                 id="ptt_state"
                 type="button"
                 data-bs-placement="top"
@@ -1444,10 +1428,9 @@
               >
                 <i class="bi bi-broadcast-pin" style="font-size: 0.8rem"></i>
               </button>
-            </div>
-            <div class="btn-group btn-group-sm me-1" role="group">
+
               <button
-                class="btn btn-sm btn-secondary"
+                class="btn btn-sm btn-secondary me-1"
                 id="busy_state"
                 type="button"
                 data-bs-placement="top"
@@ -1458,10 +1441,9 @@
               >
                 <i class="bi bi-cpu" style="font-size: 0.8rem"></i>
               </button>
-            </div>
-            <div class="btn-group btn-group-sm me-1" role="group">
+
               <button
-                class="btn btn-sm btn-secondary"
+                class="btn btn-sm btn-secondary me-1"
                 id="arq_session"
                 type="button"
                 data-bs-placement="top"
@@ -1472,10 +1454,9 @@
               >
                 <i class="bi bi-arrow-left-right" style="font-size: 0.8rem"></i>
               </button>
-            </div>
-            <div class="btn-group btn-group-sm me-1" role="group">
+
               <button
-                class="btn btn-sm btn-secondary"
+                class="btn btn-sm btn-secondary me-1"
                 id="arq_state"
                 type="button"
                 data-bs-placement="top"
@@ -1489,10 +1470,9 @@
                   style="font-size: 0.8rem"
                 ></i>
               </button>
-            </div>
-            <div class="btn-group btn-group-sm me-1" role="group">
+
               <button
-                class="btn btn-sm btn-secondary"
+                class="btn btn-sm btn-secondary me-1"
                 id="rigctld_state"
                 type="button"
                 data-bs-placement="top"
@@ -1690,7 +1670,7 @@
         </div>
         <div class="col-lg-4">
           <div style="margin-right: 2px">
-            <div class="progress w-100" style="height: 30px; min-width: 300px">
+            <div class="progress w-100" style="height: 30px; min-width: 200px">
               <div
                 class="progress-bar progress-bar-striped bg-primary force-gpu"
                 id="transmission_progress"