Make offline progress bar overlay - Closes #272

LiskArchive · May 30, 2017 · 7530991 · 7530991
1 parent c891c96
commit 7530991
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 5 deletions.
diff --git a/src/components/header/header.pug b/src/components/header/header.pug
@@ -1,9 +1,9 @@
 md-content.header(layout='row', layout-align='center center', layout-padding)
   img.logo(src=require('../../assets/images/LISK-nano.png'))
   div(flex)
-  md-button.md-raised.md-primary.send-button(data-show-send-modal, ng-if='$root.logged') Send
+  md-button.md-raised.md-primary.send-button.offline-hide(data-show-send-modal, ng-if='$root.logged' ng-disabled='!$root.peers.online') Send
   md-button.md-raised.md-secondary.logout-button(ng-click='$root.logout()', ng-if='$root.logged') Logout
-  md-menu.top-menu(ng-if='$root.logged', md-position-mode='target-right target', md-offset='14 0')
+  md-menu.top-menu.offline-hide(ng-if='$root.logged', md-position-mode='target-right target', md-offset='14 0')
     md-button.md-icon-button(ng-click='$mdOpenMenu()')
       i.material-icons more_vert
     md-menu-content(width='2')

diff --git a/src/components/main/main.pug b/src/components/main/main.pug
@@ -1,5 +1,5 @@
 top
-md-tabs.main-tabs(md-stretch-tabs='always')
+md-tabs.main-tabs.offline-hide(md-stretch-tabs='always')
   md-tab(data-ui-sref='main.transactions', md-active='$ctrl.activeTab === "main.transactions"')
     md-tab-label Transactions
   md-tab(data-ui-sref='main.voting', md-active='$ctrl.activeTab === "main.voting"')

diff --git a/src/components/top/top.pug b/src/components/top/top.pug
@@ -7,7 +7,7 @@ md-content(layout='column', layout-gt-xs='row')
       span.md-title.title Delegate
       .address.value {{ $ctrl.account.get().username }}
       small.username {{ $ctrl.account.get().address }}
-  md-card.peer(flex-gt-xs=33)
+  md-card.peer.offline-hide(flex-gt-xs=33)
     md-card-content(layout='column', layout-align='center center')
       span.status
         i.material-icons.offline(ng-show='!$ctrl.peers.online') error

diff --git a/src/index.less b/src/index.less
@@ -49,6 +49,7 @@ body {
 
   .offline .offline-hide {
     opacity: 0.5;
+    pointer-events: none;
   }
 
   md-input-container {
@@ -57,4 +58,11 @@ body {
       box-sizing: content-box;
     }
   }
+
+  .absolutely-positioned-loading {
+    position: absolute;
+    margin: 24px 12px;
+    width: 100%;
+    z-index: 10;
+  }
 }
diff --git a/src/index.pug b/src/index.pug
@@ -11,7 +11,7 @@ html
     div.body-wrapper
       md-content(id="main", flex='100', flex-gt-sm='80', flex-offset-gt-sm='10')
         header
-        div(layout='row', layout-align='space-around', ng-show='prelogged')
+        div.absolutely-positioned-loading(layout='row', layout-align='space-around', ng-show='prelogged')
           md-progress-circular.md-warn(md-mode='indeterminate', md-diameter='80')
         div(ng-class='{ online: $root.peers.online, offline: !$root.peers.online }')
           div(data-ui-view)