change appearance of progress bars

ssbc · Dec 12, 2023 · f6f62a8 · f6f62a8
1 parent cc01c74
commit f6f62a8
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 3 deletions.
diff --git a/android/tinySSB/app/src/main/assets/web/img/chnk-icon.svg b/android/tinySSB/app/src/main/assets/web/img/chnk-icon.svg
diff --git a/android/tinySSB/app/src/main/assets/web/img/goset-icon.svg b/android/tinySSB/app/src/main/assets/web/img/goset-icon.svg
diff --git a/android/tinySSB/app/src/main/assets/web/tremola.css b/android/tinySSB/app/src/main/assets/web/tremola.css
@@ -446,6 +446,14 @@ input:checked + .slider:before {
  background: #7fd9eb;
 }
 
+#connection-overlay-progressbar-goset::-webkit-progress-value {
+  background: #2ecc71;
+}
+
+#connection-overlay-progressbar-chnk::-webkit-progress-value {
+  background: #f2a641;
+}
+
 .connection-overlay-progressbar-label {
   position: absolute;
   top: 50%;

diff --git a/android/tinySSB/app/src/main/assets/web/tremola.html b/android/tinySSB/app/src/main/assets/web/tremola.html
@@ -264,15 +264,15 @@
         <div id='connection-overlay-progressbar-label-want' class="connection-overlay-progressbar-label"></div>
       </div>
       <div style="position: relative; margin-bottom: 10px;">
-        <img src='img/receive.png' alt="Icon" class="progress-icon">
+        <img src='img/chnk-icon.svg' alt="Icon" class="progress-icon">
         <progress id='connection-overlay-progressbar-chnk' class='connection-overlay-progressbar' value="0" max="100"></progress>
         <div id='connection-overlay-progressbar-label-chnk' class="connection-overlay-progressbar-label"></div>
       </div>
     </div>
 
     <div id='goset-progress-container' style="display: none;">
       <div style="position: relative; margin-bottom: 10px;">
-        <img src='img/fountain.png' alt="Icon" class="progress-icon">
+        <img src='img/goset-icon.svg' alt="Icon" class="progress-icon">
         <progress id='connection-overlay-progressbar-goset' class='connection-overlay-progressbar' value="0" max="100"></progress>
         <div id='connection-overlay-progressbar-label-goset' class="connection-overlay-progressbar-label"></div>
       </div>

diff --git a/android/tinySSB/app/src/main/assets/web/tremola_ui.js b/android/tinySSB/app/src/main/assets/web/tremola_ui.js
@@ -459,7 +459,7 @@ function refresh_goset_progressbar(curr, max) {
     var delta = max - curr
 
     document.getElementById('connection-overlay-progressbar-goset').value = (curr / max) * 100
-    document.getElementById('connection-overlay-progressbar-label-goset').textContent = delta + " key" + (delta > 1 ? "s" : "") + " left"
+    document.getElementById('connection-overlay-progressbar-label-goset').textContent = "GoSet - " + delta + " key" + (delta > 1 ? "s" : "") + " left"
     if (delta > 0) {
         console.log("display progress")
         document.getElementById('goset-progress-container').style.display = "initial"