2.0 - Styling update bar

quead · quead · commit e4f261ddc700 · 2017-09-20T18:12:10.000+03:00
diff --git a/dist/assets/css/main.css b/dist/assets/css/main.css
@@ -548,6 +548,22 @@ a:active {
   border-radius: 30px;
 }
 
+.update-bar {
+  position: fixed;
+  z-index: 999;
+  background-color: #0097ef;
+  color: white;
+  bottom: 0;
+  font-size: 14px;
+  padding: 5px 15px;
+  width: 100%;
+  display: none;
+}
+
+.update-bar.active {
+  display: block;
+}
+
 .current-video-all {
   padding: 0px 10px;
   display: inline-block;
@@ -664,10 +680,12 @@ a:active {
 }
 
 .player-buttons button:not(#play-song):hover {
+  color: var(--c-primary);
   text-shadow: 0 0 10px var(--c-primary);
 }
 
 .player-buttons button:not(#play-song):active {
+  color: var(--c-primary);
   transform: scale(1.2);
 }
 
@@ -2180,6 +2198,10 @@ iframe {
   border: 1px solid var(--c-primary-active);
 }
 
+#app-container.light-mode .player-buttons button {
+  color: var(--c-primary);
+}
+
 #app-container.light-mode .app-feed:before {
   display: none;
 }
diff --git a/dist/index.html b/dist/index.html
@@ -10,7 +10,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />        
     </head>
     <body class="application app-win">
-        <div class="updates" style="position: fixed; top: 0; z-index: 999; background-color: red; color: white">
+        <div class="update-bar">
             <div id="output"></div>
         </div>
         <app-yt>
@@ -22,28 +22,34 @@
         <script>
             const AutoUpdater = require( "nw-autoupdater" ),
                 updater = new AutoUpdater( require( "./package.json" ) ),
-                output =  document.querySelector( "#output" );
+                output =  document.querySelector( "#output" ),
+                updateBar = document.getElementsByClassName("update-bar")[0].classList;                
                 
             async function main(){
                 try {
-                // Update copy is running to replace app with the update
-                if ( updater.isSwapRequest() ) {
-                    output.innerHTML += `\nSwapping...`;
-                    await updater.swap();
-                    output.innerHTML += `\nDone...`;
-                    await updater.restart();
-                    return;
-                }
-                // Download/unpack update if any available
-                const rManifest = await updater.readRemoteManifest();
-                const needsUpdate = await updater.checkNewVersion( rManifest );
-                if ( !needsUpdate ) {
-                    output.innerHTML += `\nIs up to date...`;
-                    return;
-                }
-                if ( !confirm( "New release is available. Do you want to upgrade?" ) ) {
-                    return;
+                    // Update copy is running to replace app with the update
+                    if ( updater.isSwapRequest() ) {
+                        output.innerHTML += `\nSwapping...`;
+                        await updater.swap();
+                        output.innerHTML += `\nDone...`;
+                        await updater.restart();
+                        return;
+                    }
+                    // Download/unpack update if any available
+                    const rManifest = await updater.readRemoteManifest();
+                    const needsUpdate = await updater.checkNewVersion( rManifest );
+                    if ( !needsUpdate ) {
+                        output.innerHTML += `\nis up to date...`;
+                        updateBar.add('active'); 
+                    } else {
+                        output.innerHTML = `There is new update`;
+                        updateBar.add('active'); 
+                    }
+                } catch ( e ) {
+                    console.error( e );
                 }
+            }
+            function updateApp() {
                 // Subscribe for progress events
                 updater.on( "download", ( downloadSize, totalSize ) => {
                     output.innerHTML = `Downloading...`;
@@ -53,13 +59,10 @@
                     output.innerHTML = `Installing...\n`;
                     console.log( "install progress", Math.floor( installFiles / totalFiles * 100 ), "%" );
                 });
-                const updateFile = await updater.download( rManifest );
-                await updater.unpack( updateFile );
+                const updateFile = updater.download( rManifest );
+                updater.unpack( updateFile );
                 alert( `The application will automatically restart to finish installing the update` );
-                await updater.restartToSwap();
-                } catch ( e ) {
-                console.error( e );
-                }
+                updater.restartToSwap();
             }
             output.innerHTML = `Application v${nw.App.manifest.version}\n`;
             main();
diff --git a/dist/inline.bundle.js.map b/dist/inline.bundle.js.map
diff --git a/scss/_common.scss b/scss/_common.scss
@@ -282,4 +282,19 @@
             border-radius: 30px;
         }
     }
+}
+
+.update-bar {
+    position: fixed;
+    z-index: 999;
+    background-color: #0097ef;
+    color: white;
+    bottom: 0;
+    font-size: 14px;
+    padding: 5px 15px;
+    width: 100%;
+    display: none;
+    &.active {
+        display: block;
+    }
 }
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -548,6 +548,22 @@ a:active {
   border-radius: 30px;
 }
 
+.update-bar {
+  position: fixed;
+  z-index: 999;
+  background-color: #0097ef;
+  color: white;
+  bottom: 0;
+  font-size: 14px;
+  padding: 5px 15px;
+  width: 100%;
+  display: none;
+}
+
+.update-bar.active {
+  display: block;
+}
+
 .current-video-all {
   padding: 0px 10px;
   display: inline-block;
diff --git a/src/index.html b/src/index.html
