From 9769458499d632e49022abefe57da292f5bff879 Mon Sep 17 00:00:00 2001
From: Daniel Scalzi <d_scalzi@yahoo.com>
Date: Thu, 21 Jun 2018 20:54:07 -0400
Subject: [PATCH] Fixes for the overlay on the settings UI.

The background of the settings UI is set to transparent when the overlay is toggled.
The color of the frame bar has been adjusted to what it should actually be.
---
 app/assets/css/launcher.css       |  5 +++--
 app/assets/js/scripts/overlay.js  | 31 +++++++++++++++++++++++--------
 app/assets/js/scripts/uibinder.js |  7 +++++--
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index 3e7d263..2fec6a4 100644
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@@ -61,7 +61,7 @@ body, button {
     display: flex;
     flex-direction: column;
     transition: background-color 1s ease;
-    /*background-color: rgba(1, 2, 1, 0.5);*/
+    /*background-color: rgba(0, 0, 0, 0.5);*/
     -webkit-user-select: none;
 }
 
@@ -883,7 +883,8 @@ body, button {
     position: relative;
     height: 100%;
     display: flex;
-    background: rgba(0, 0, 0, 0.50);
+    background-color: rgba(0, 0, 0, 0.50);
+    transition: background-color 0.25s cubic-bezier(.02, .01, .47, 1);
 }
 
 /* Drop shadow displayed when content is scrolled out of view. */
diff --git a/app/assets/js/scripts/overlay.js b/app/assets/js/scripts/overlay.js
index 450f8cd..b967657 100644
--- a/app/assets/js/scripts/overlay.js
+++ b/app/assets/js/scripts/overlay.js
@@ -30,18 +30,33 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
         } else {
             $('#overlayDismiss').hide()
         }
-        $('#overlayContainer').fadeIn(250)
+        $('#overlayContainer').fadeIn({
+            duration: 250,
+            start: () => {
+                if(getCurrentView() === VIEWS.settings){
+                    document.getElementById('settingsContainer').style.backgroundColor = 'transparent'
+                }
+            }
+        })
     } else {
         document.getElementById('main').removeAttribute('overlay')
         // Make things tabbable.
         $("#main *").removeAttr('tabindex')
-        $('#overlayContainer').fadeOut(250, () => {
-            $('#' + content).parent().children().hide()
-            $('#' + content).show()
-            if(dismissable){
-                $('#overlayDismiss').show()
-            } else {
-                $('#overlayDismiss').hide()
+        $('#overlayContainer').fadeOut({
+            duration: 250,
+            start: () => {
+                if(getCurrentView() === VIEWS.settings){
+                    document.getElementById('settingsContainer').style.backgroundColor = 'rgba(0, 0, 0, 0.50)'
+                }
+            },
+            complete: () => {
+                $('#' + content).parent().children().hide()
+                $('#' + content).show()
+                if(dismissable){
+                    $('#overlayDismiss').show()
+                } else {
+                    $('#overlayDismiss').hide()
+                }
             }
         })
     }
diff --git a/app/assets/js/scripts/uibinder.js b/app/assets/js/scripts/uibinder.js
index a914f75..064dcca 100644
--- a/app/assets/js/scripts/uibinder.js
+++ b/app/assets/js/scripts/uibinder.js
@@ -20,7 +20,7 @@ const VIEWS = {
 }
 
 // The currently shown view container.
-let currentView = VIEWS.landing
+let currentView
 
 /**
  * Switch launcher views.
@@ -63,7 +63,7 @@ function showMainUI(){
     updateSelectedServer(AssetGuard.getServerById(ConfigManager.getSelectedServer()).name)
     refreshServerStatus()
     setTimeout(() => {
-        document.getElementById('frameBar').style.backgroundColor = 'rgba(1, 2, 1, 0.5)'
+        document.getElementById('frameBar').style.backgroundColor = 'rgba(0, 0, 0, 0.5)'
         document.body.style.backgroundImage = `url('assets/images/backgrounds/${document.body.getAttribute('bkid')}.jpg')`
         $('#main').show()
 
@@ -82,11 +82,14 @@ function showMainUI(){
         }
 
         if(ConfigManager.isFirstLaunch()){
+            currentView = VIEWS.welcome
             $(VIEWS.welcome).fadeIn(1000)
         } else {
             if(isLoggedIn){
+                currentView = VIEWS.landing
                 $(VIEWS.landing).fadeIn(1000)
             } else {
+                currentView = VIEWS.login
                 $(VIEWS.login).fadeIn(1000)
             }
         }