Merge pull request #273 from LiskHQ/272-offline-prgress-overlay

Make offline progress bar overlay - Closes #272

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')

src/components/main/main.js

@@ -1,5 +1,3 @@
-import './main.less';
-
 /**
  * The main component, used as parent for transaction, forging and delgate tabs.
  *

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"')

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

src/index.less

@@ -49,12 +49,61 @@ body {
 
   .offline .offline-hide {
     opacity: 0.5;
+    pointer-events: none;
   }
 
   md-input-container {
-    overflow-x: hidden;
+    overflow-x: initial;
     label:not(.md-no-float):not(.md-container-ignore), .md-placeholder {
       box-sizing: content-box;
     }
   }
+
+  .absolutely-positioned-loading {
+    position: absolute;
+    margin: 24px 12px;
+    width: 100%;
+    z-index: 10;
+  }
+}
+
+md-toast.lsk-toast-success {
+  .md-toast-content {
+    background-color: #7cb342;
+  }
+}
+
+md-toast.lsk-toast-error {
+  .md-toast-content {
+    background-color: #c62828;
+  }
+}
+
+md-menu-item md-checkbox {
+  margin: 0;
+  padding: 8px;
+}
+
+md-tabs.main-tabs {
+  margin: 0 0 -8px 0;
+  md-tabs-wrapper {
+    margin: 0 8px;
+
+    &.md-stretch-tabs md-pagination-wrapper {
+      width: auto;
+      display: block;
+    }
+    md-ink-bar {
+      bottom: auto;
+      top: 0;
+    }
+  }
+  .md-tab {
+    background: #f4f4f4;
+    box-shadow: inset 0px -1px 1px -1px rgba(0, 0, 0, 0.12);
+    &.md-active {
+      background: white;
+      box-shadow: 0px -2px 1px 0px rgba(0,0,0,0.54);
+    }
+  }
 }

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)