Fixed dataflash indicator in the top row (#4135)

betaflight · Aug 17, 2024 · 91ccf75 · 91ccf75
1 parent c7c8c8c
commit 91ccf75
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/src/css/main.less b/src/css/main.less
@@ -455,22 +455,25 @@ input[type="number"] {
     flex-direction: column;
     gap: 0.5rem;
     padding: 0.5rem;
-    background-color: var(--surface-300);
     border-radius: 0.5rem;
-    li {
-        background-color: var(--surface-600);
-        height: 0.35rem;
-        position: relative;
-        border-radius: 999px;
-        width: 100% !important;
-    }
+    background-color: var(--surface-300);
+
     .notsupported_global {
         display: none;
     }
+
     progress {
+        height: 0.35rem;
+        border-radius: 12px;
+        appearance: none;
+        -webkit-appearance: none;
+        overflow: hidden;
         &::-webkit-progress-bar {
-            height: 8px;
-            background-color: var(--surface-300);
+            background-color: var(--surface-500);
+        }
+        &::-webkit-progress-value {
+            background-color: var(--primary-500);
+            border-radius: 0 12px 12px 0;
         }
     }
 }

diff --git a/src/index.html b/src/index.html
@@ -79,13 +79,12 @@
                 </ul>
             </div>
             <div id="dataflash_wrapper_global">
-                <div class="noflash_global" align="center" i18n="sensorDataFlashNotFound"></div>
+                <div class="noflash_global" i18n="sensorDataFlashNotFound"></div>
                 <ul class="dataflash-contents_global">
-                    <li class="dataflash-free_global">
-                        <div class="legend" i18n="sensorDataFlashFreeSpace"></div>
-                    </li>
+                    <div class="legend" i18n="sensorDataFlashFreeSpace"></div>
+                    <progress class="dataflash-progress_global" value="32" max="100"></progress>
                 </ul>
-                <div id="expertMode" align="center">
+                <div id="expertMode">
                     <label>
                         <input name="expertModeCheckbox" class="togglesmall" type="checkbox"/>
                         <span i18n="expertMode" class="expertModeText"></span>

diff --git a/src/js/update_dataflash_global.js b/src/js/update_dataflash_global.js
@@ -28,11 +28,11 @@ export function update_dataflash_global() {
            display: 'block',
         });
 
-        $(".dataflash-free_global").css({
+        $(".progress-bar__fill").css({
            width: `${100-(FC.DATAFLASH.totalSize - FC.DATAFLASH.usedSize) / FC.DATAFLASH.totalSize * 100}%`,
            display: 'block',
         });
-        $(".dataflash-free_global div").text(`Dataflash: free ${formatFilesize(FC.DATAFLASH.totalSize - FC.DATAFLASH.usedSize)}`);
+        $(".dataflash-contents_global div").text(`Dataflash: free ${formatFilesize(FC.DATAFLASH.totalSize - FC.DATAFLASH.usedSize)}`);
      } else {
         $(".noflash_global").css({
            display: 'block',