Added fade transition between pages

manager/index.html

@@ -34,7 +34,7 @@
         <img class="link" onClick="signal('onLinkClicked', 'https://discord.gg/pCfCykAdrw')" src="./icons/discord.svg" />
         <img class="link" onClick="signal('onLinkClicked', 'https://www.youtube.com/@DCSOlympus')" src="./icons/youtube.svg" />
     </div>
-    <div id="loader" class="manager-page hide">
+    <div id="loader" class="manager-page hide" style="opacity: 100%;">
         <div style="font-weight: bold;">Loading, please wait...</div>
         <div class="loading-bar" style="width: 400px; height: 15px;"></div>
         <div class="loading-message" style="font-size: 14px; color: var(--lightgray)"></div>

manager/javascripts/manager.js

@@ -61,8 +61,7 @@ class Manager {
         }
 
         if (!this.options.configLoaded) {
-            /* Hide the loading page */
-            document.getElementById("loader").classList.add("hide");
+            this.hideLoadingPage();
 
             /* Show page to select basic vs expert mode */
             this.welcomePage = new ManagerPage(this, "./ejs/welcome.ejs");
@@ -115,7 +114,7 @@ class Manager {
                 this.options.editEnabled = this.options.instances.find(instance => instance.installed);
 
                 /* Hide the loading page */
-                document.getElementById("loader").classList.add("hide");
+                this.hideLoadingPage();
 
                 this.options.singleInstance = this.options.instances.length === 1;
 
@@ -363,7 +362,12 @@ class Manager {
     }
 
     onCancelClicked() {
-        location.reload();
+        this.activePage.hide();
+        if (this.options.mode === "basic") 
+            this.menuPage.show(true);
+        else
+            this.instancesPage.show(true);
+        this.updateInstances();
     }
 
     onGameMasterPasswordChanged(value) {
@@ -594,6 +598,14 @@ class Manager {
             style.setProperty('--percent', `${percent}%`);
         }
     }
+
+    hideLoadingPage() {
+        /* Hide the loading page */
+        document.getElementById("loader").style.opacity = "0%";
+        window.setTimeout(() => {
+            document.getElementById("loader").classList.add("hide");
+        }, 200);        
+    }
 }
 
 module.exports = Manager;

manager/javascripts/managerpage.js

@@ -29,8 +29,6 @@ class ManagerPage {
             }
         });
 
-        this.element.classList.remove("hide");
-
         this.previousPage = ignorePreviousPage ? this.previousPage : this.manager.activePage;
         this.manager.activePage = this;
 
@@ -39,11 +37,23 @@ class ManagerPage {
     }
 
     hide() {
-        this.element.classList.add("hide");
+        this.element.style.opacity = "0%";
+        window.setTimeout(() => {
+            this.element.classList.add("hide");
+        }, 200);        
     }
 
-    render(str) {
+    render(str) { 
         this.element.innerHTML = str;
+        this.element.style.opacity = "0%";
+
+        window.setTimeout(() => {
+            this.element.classList.remove("hide");
+        }, 200)
+
+        window.setTimeout(() => {
+            this.element.style.opacity = "100%";
+        }, 300)
 
         /* Connect all the collapsable buttons */
         let buttons = document.querySelectorAll(".button.collapse");

manager/javascripts/popup.js

@@ -1,8 +1,7 @@
 // TODO: we can probably refactor this to be a bit cleaner
 
 function showInfoPopup(message, onCloseCallback) {
-    document.getElementById("grayout").classList.remove("hide");
-    document.getElementById("popup").classList.remove("hide");
+    showPopup();
     document.getElementById("popup").querySelector(".error").classList.add("hide");
     document.getElementById("popup").querySelector(".wait").classList.add("hide");
     document.getElementById("popup").querySelector(".confirm").classList.remove("hide");
@@ -20,8 +19,7 @@ function showInfoPopup(message, onCloseCallback) {
 
 
 function showErrorPopup(message, onCloseCallback) {
-    document.getElementById("grayout").classList.remove("hide");
-    document.getElementById("popup").classList.remove("hide");
+    showPopup();
     document.getElementById("popup").querySelector(".error").classList.remove("hide");
     document.getElementById("popup").querySelector(".wait").classList.add("hide");
     document.getElementById("popup").querySelector(".confirm").classList.add("hide");
@@ -38,8 +36,7 @@ function showErrorPopup(message, onCloseCallback) {
 }
 
 function showWaitPopup(message) {
-    document.getElementById("grayout").classList.remove("hide");
-    document.getElementById("popup").classList.remove("hide");
+    showPopup();
     document.getElementById("popup").querySelector(".error").classList.add("hide");
     document.getElementById("popup").querySelector(".wait").classList.remove("hide");
     document.getElementById("popup").querySelector(".confirm").classList.add("hide");
@@ -49,8 +46,7 @@ function showWaitPopup(message) {
 }
 
 function showWaitLoadingPopup(message) {
-    document.getElementById("grayout").classList.remove("hide");
-    document.getElementById("popup").classList.remove("hide");
+    showPopup();
     document.getElementById("popup").querySelector(".error").classList.add("hide");
     document.getElementById("popup").querySelector(".wait").classList.remove("hide");
     document.getElementById("popup").querySelector(".confirm").classList.add("hide");
@@ -60,8 +56,7 @@ function showWaitLoadingPopup(message) {
 }
 
 function showConfirmPopup(message, onAcceptCallback, onCloseCallback) {
-    document.getElementById("grayout").classList.remove("hide");
-    document.getElementById("popup").classList.remove("hide");
+    showPopup();
     document.getElementById("popup").querySelector(".error").classList.add("hide");
     document.getElementById("popup").querySelector(".wait").classList.add("hide");
     document.getElementById("popup").querySelector(".confirm").classList.remove("hide");
@@ -85,9 +80,24 @@ function showConfirmPopup(message, onAcceptCallback, onCloseCallback) {
     document.getElementById("popup").querySelector(".content").innerHTML = message;
 }
 
+function showPopup() {
+    document.getElementById("grayout").classList.remove("hide");
+    document.getElementById("popup").classList.remove("hide");
+
+    window.setTimeout(() => {
+        document.getElementById("grayout").style.opacity = "100%";
+        document.getElementById("popup").style.opacity = "100%";
+    }, 100);
+}
+
 function hidePopup() {
-    document.getElementById("grayout").classList.add("hide");
-    document.getElementById("popup").classList.add("hide");
+    document.getElementById("grayout").style.opacity = "0%";
+    document.getElementById("popup").style.opacity = "0%";
+
+    window.setTimeout(() => {
+        document.getElementById("grayout").classList.add("hide");
+        document.getElementById("popup").classList.add("hide");
+    }, 200);
 }
 
 function setPopupLoadingProgress(message, percent) {

manager/stylesheets/style.css

@@ -275,9 +275,10 @@ input {
     left: 0px;
     width: 100%;
     height: 100%;
-    background-color: black;
-    opacity: 30%;
+    background-color: rgba(0, 0, 0, 0.30);
     z-index: 999;
+    transition: opacity 0.2s linear;
+    opacity: 0%; /* By default has 0% opacity to allow for fade transition */
 }
 
 #popup {
@@ -295,6 +296,8 @@ input {
     padding: 20px 40px;
     align-items: start;
     z-index: 999;
+    transition: opacity 0.2s linear;
+    opacity: 0%; /* By default has 0% opacity to allow for fade transition */
 }
 
 #popup img {
@@ -331,6 +334,8 @@ input {
 .manager-page {
     min-width: 1200px;
     overflow-y: auto;
+    transition: opacity 0.2s linear;
+    opacity: 0%; /* By default has 0% opacity to allow for fade transition */
 }
 
 .input-group {