From ff79fcd1ca21d15737f4ab276f8d2bff1a5b4ed2 Mon Sep 17 00:00:00 2001 From: Skylar Ittner Date: Mon, 26 Sep 2016 18:24:29 -0600 Subject: [PATCH] Status bar color now changes to match displayed content/context Some minor CSS tweaks and improvements --- www/css/main.css | 13 ++++++++- www/js/auth.js | 4 ++- www/js/location.js | 1 + www/js/main.js | 56 +++++++++++++++++++++++++------------ www/js/user.js | 2 ++ www/screens/home.html | 2 ++ www/screens/login.html | 3 ++ www/screens/munzeelink.html | 2 ++ 8 files changed, 63 insertions(+), 20 deletions(-) diff --git a/www/css/main.css b/www/css/main.css index 669a18e..930021d 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -177,7 +177,7 @@ body { #energybar { width: 0%; - background: green; + background: rgba(0, 128, 0, 1.0); } #energybar-label { @@ -386,12 +386,23 @@ body { #munzeeoauth { position: absolute; top: 0px; + padding-top: 15px; left: 0px; width: 100%; height: 100%; border: 0px; } +#munzeeoauth-header-grad { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 20px; + background: -webkit-linear-gradient(to bottom, #009444 0%, #ffffff 100%); + background: linear-gradient(to bottom, #009444 0%, rgba(255,255,255,0) 100%); +} + #shopmessage { position: fixed; z-index: 9999; diff --git a/www/js/auth.js b/www/js/auth.js index fd8aaed..ab7abed 100644 --- a/www/js/auth.js +++ b/www/js/auth.js @@ -42,7 +42,7 @@ function logout() { localStorage.setItem("password", ''); username = null; password = null; - $('#content-zone').load("screens/login.html"); + openscreen('login'); } else { navigator.notification.alert("Server did not properly acknowledge logout. You might have problems for the next few hours if you switch accounts.", null, "Error", 'Dismiss'); } @@ -78,6 +78,7 @@ function loginOK() { localStorage.setItem("username", username); localStorage.setItem("password", password); navigator.splashscreen.hide(); + updateStatusBarColor(); checkUserHasTeamOpenChooserIfNot(username); } @@ -145,6 +146,7 @@ function dosignup() { } function dologin() { + updateStatusBarColor(); if (authOpInProgress) { return; } diff --git a/www/js/location.js b/www/js/location.js index 4162eb1..60d02c7 100644 --- a/www/js/location.js +++ b/www/js/location.js @@ -179,6 +179,7 @@ function hideLoading() { if (lockGot && terrainGot && gpsaccuracy < requiredaccuracy && $('#loading').css('display') !== 'none') { $('#loading').fadeOut('slow', function () { $('#loading').css('display', 'none'); + updateStatusBarColor(); }); } } diff --git a/www/js/main.js b/www/js/main.js index bc08e2d..2341b77 100644 --- a/www/js/main.js +++ b/www/js/main.js @@ -36,7 +36,6 @@ $(document).ready(function () { }); function onDeviceReady() { - StatusBar.backgroundColorByHexString("#324150"); openscreen("login"); if (navigator.network.connection.type === Connection.NONE) { navigator.notification.alert("You need an Internet connection to continue.", function () { @@ -82,10 +81,12 @@ function compareVersions(a, b) { function serverProblemsDialog(errmsg) { + StatusBar.backgroundColorByHexString("#324150"); window.location = "servererror.html?errmsg=" + errmsg; } function clientProblemsDialog(errmsg) { + StatusBar.backgroundColorByHexString("#324150"); window.location = "clienterror.html?errmsg=" + errmsg; } @@ -105,23 +106,40 @@ function mkApiUrl(action, server) { } } -function changeStatusBarColorForScreen(screenname) { - StatusBar.backgroundColorByHexString("#324150"); // Splash background color - /*switch (screenname) { - case 'login': - case 'signup': - case 'chooseteam': - StatusBar.backgroundColorByHexString("#060606"); - break; - case 'menu': - StatusBar.backgroundColorByHexString("#060606"); - break; - case 'home': - StatusBar.backgroundColorByHexString("#008000"); - break; - default: - StatusBar.backgroundColorByHexString("#324150"); // Splash background color - }*/ +/** + * Update the status bar color depending on context. + * @returns {undefined} + */ +function updateStatusBarColor() { + if (currentscreen == 'munzeelink') { + StatusBar.backgroundColorByHexString("#009444"); + return; + } + if (currentscreen == 'login') { + if ($('#loading').css('display') == 'none') { + StatusBar.backgroundColorByHexString("#060606"); + } else { + StatusBar.backgroundColorByHexString("#324150"); + } + return; + } + if (currentscreen == 'chooseteam' || currentscreen == 'signup') { + StatusBar.backgroundColorByHexString("#060606"); + return; + } + if (currentscreen == 'home') { + if ($('#loading').css('display') != 'none') { + StatusBar.backgroundColorByHexString("#324150"); + } else { + if ($('#overlay-main').css('display') == 'block') { + StatusBar.backgroundColorByHexString("#060606"); + } else { + StatusBar.backgroundColorByHexString("#008000"); + } + } + return; + } + StatusBar.backgroundColorByHexString("#324150"); } /** @@ -147,6 +165,7 @@ function openscreen(screenname, effect) { $('#content-zone').load("screens/" + screenname + ".html"); } currentscreen = screenname; + updateStatusBarColor(); } /** @@ -250,6 +269,7 @@ function closeMain() { $('#overlay-main').slideDown(100, function () { $('#overlay-main').css('display', 'none'); $('#main-content').html(""); + updateStatusBarColor(); }); } diff --git a/www/js/user.js b/www/js/user.js index b29c37e..985d365 100644 --- a/www/js/user.js +++ b/www/js/user.js @@ -121,6 +121,7 @@ function openProfile(user) { $('#main-content').load("screens/profile.html", null, function (x) { $('#overlay-main').css('display', 'block'); loadProfile(user); + updateStatusBarColor(); }); } @@ -139,5 +140,6 @@ function openMenu(topage) { if (topage !== '') { $('#' + topage + '-tab').tab('show'); } + updateStatusBarColor(); }); } diff --git a/www/screens/home.html b/www/screens/home.html index d7920f0..93358df 100644 --- a/www/screens/home.html +++ b/www/screens/home.html @@ -127,6 +127,8 @@ $('#found-box-2').click(function (e) { $('#found-box').fadeOut('fast'); }); + + updateStatusBarColor(); diff --git a/www/screens/login.html b/www/screens/login.html index 07c3e74..c0eafef 100644 --- a/www/screens/login.html +++ b/www/screens/login.html @@ -117,12 +117,15 @@ dologin(); } else { $('#loading').css('display', 'none'); + updateStatusBarColor(); } }).fail(function () { $('#loading').css('display', 'none'); + updateStatusBarColor(); }); } else { $('#loading').css('display', 'none'); + updateStatusBarColor(); } navigator.splashscreen.hide(); \ No newline at end of file diff --git a/www/screens/munzeelink.html b/www/screens/munzeelink.html index b53a8b2..0aa32aa 100644 --- a/www/screens/munzeelink.html +++ b/www/screens/munzeelink.html @@ -17,6 +17,8 @@ --> +
+