Update Overlay Improvement

programmingKyle · programmingKyle · commit 10ed279e2526 · 2024-05-11T18:43:28.000-04:00
- Bit more descriptive of what is actually going on.
diff --git a/src/autoUpdater.js b/src/autoUpdater.js
@@ -2,6 +2,8 @@ const updateOverlay_el = document.getElementById('updateOverlay');
 const startUpdateButton_el = document.getElementById('startUpdateButton');
 const quitUpdateButton_el = document.getElementById('quitUpdateButton');
 const updateControlDiv_el = document.getElementById('updateControlDiv');
+const downloadingText_el = document.getElementById('downloadingText');
+const pleaseWaitText_el = document.getElementById('pleaseWaitText');
 
 api.autoUpdaterCallback((status) => {
     if (status === 'Update Available'){
@@ -12,6 +14,8 @@ api.autoUpdaterCallback((status) => {
     }
     if (status === 'Update Downloaded'){
         updateControlDiv_el.style.display = 'grid';
+        downloadingText_el.textContent = 'Download Complete!';
+        pleaseWaitText_el.style.display = 'none';
     }
 });
 
diff --git a/src/index.css b/src/index.css
@@ -101,6 +101,17 @@ p {
   z-index: 2;
 }
 
+.centered-container {
+  background: #313131;
+  padding: 20px;
+  border-radius: 3px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  display: grid;
+  width: 50%;
+  grid-gap: 5px;
+}
+
 .centered-container {
   width: 500px;
   background: #313131;
diff --git a/src/index.html b/src/index.html
@@ -8,15 +8,16 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
   </head>
   <body>
-    <div id="updateOverlay" class="overlay" style="display: none;">
-      <div class="stop-container" style="text-align: center;">
-        <div style="display: grid">
-          <h2>Update Available!</h2>
+    <div id="updateOverlay" class="overlay" style="text-align: center; display: none">
+      <div class="centered-container">
+        <div style="display: grid; grid-gap: 5px;">
+          <h2 id="downloadingText">Downloading Update</h2>
+          <p id="pleaseWaitText" style="display: grid; text-align: center;">Please wait...</p>
         </div>
         <div id="updateControlDiv" style="display: none; grid-template-columns: 1fr 1fr; grid-gap: 5px;">
-          <button id="startUpdateButton" class="input-button">Update & Restart</button>
-          <button id="quitUpdateButton" class="input-button">Update & Quit</button>
-        </div>
+          <button id="startUpdateButton" class="input-button">Restart Application</button>
+          <button id="quitUpdateButton" class="input-button">Quit</button>
+        </div>  
       </div>
     </div>
 
