From 1ed5804e4dd2f85549abcb8dfd8981dab3f6868c Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Wed, 14 Jun 2017 19:15:50 -0700
Subject: Multiple loading style improvements

- When seeking network, show a full screen loading indication + message.
- Network menu is still accessible "over" this indication.
- Top Menu-Droppo components now slide *under* the menu bar like they should.
- Loading indication opacity increased to increase message legibility.
---
 ui/app/app.js | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

(limited to 'ui/app/app.js')

diff --git a/ui/app/app.js b/ui/app/app.js
index 53dbc3354..17a0f8ef3 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -21,7 +21,7 @@ const generateLostAccountsNotice = require('../lib/lost-accounts-notice')
 const ConfigScreen = require('./config')
 const Import = require('./accounts/import')
 const InfoScreen = require('./info')
-const LoadingIndicator = require('./components/loading')
+const Loading = require('./components/loading')
 const SandwichExpando = require('sandwich-expando')
 const MenuDroppo = require('menu-droppo')
 const DropMenuItem = require('./components/drop-menu-item')
@@ -64,7 +64,9 @@ function mapStateToProps (state) {
 
 App.prototype.render = function () {
   var props = this.props
-  const { isLoading, loadingMessage, transForward } = props
+  const { isLoading, loadingMessage, transForward, network } = props
+  const isLoadingNetwork = network === 'loading'
+
   log.debug('Main ui render function')
 
   return (
@@ -77,13 +79,16 @@ App.prototype.render = function () {
       },
     }, [
 
-      h(LoadingIndicator, { isLoading, loadingMessage }),
-
       // app bar
       this.renderAppBar(),
       this.renderNetworkDropdown(),
       this.renderDropdown(),
 
+      h(Loading, {
+        isLoading: isLoading || isLoadingNetwork,
+        loadingMessage: loadingMessage || 'Searching for Network',
+      }),
+
       // panel content
       h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), {
         style: {
@@ -124,7 +129,7 @@ App.prototype.renderAppBar = function () {
           background: props.isUnlocked ? 'white' : 'none',
           height: '36px',
           position: 'relative',
-          zIndex: 10,
+          zIndex: 12,
         },
       }, [
 
@@ -221,7 +226,7 @@ App.prototype.renderNetworkDropdown = function () {
     onClickOutside: (event) => {
       this.setState({ isNetworkMenuOpen: !isOpen })
     },
-    zIndex: 1,
+    zIndex: 11,
     style: {
       position: 'absolute',
       left: 0,
@@ -300,7 +305,7 @@ App.prototype.renderDropdown = function () {
 
   return h(MenuDroppo, {
     isOpen: isOpen,
-    zIndex: 1,
+    zIndex: 11,
     onClickOutside: (event) => {
       this.setState({ isMainMenuOpen: !isOpen })
     },
-- 
cgit 


From a80945e73075b8c0dc43a68ba73da65d7074e098 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Wed, 14 Jun 2017 19:36:37 -0700
Subject: Hide message on normal loading

---
 ui/app/app.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'ui/app/app.js')

diff --git a/ui/app/app.js b/ui/app/app.js
index 17a0f8ef3..d444a8349 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -66,6 +66,8 @@ App.prototype.render = function () {
   var props = this.props
   const { isLoading, loadingMessage, transForward, network } = props
   const isLoadingNetwork = network === 'loading'
+  const loadMessage = loadingMessage || isLoadingNetwork ?
+    'Searching for Network' : null
 
   log.debug('Main ui render function')
 
@@ -86,7 +88,7 @@ App.prototype.render = function () {
 
       h(Loading, {
         isLoading: isLoading || isLoadingNetwork,
-        loadingMessage: loadingMessage || 'Searching for Network',
+        loadingMessage: loadMessage,
       }),
 
       // panel content
-- 
cgit