From 7530991f99ec4533dbf7ac563d220c3154a919e0 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Tue, 30 May 2017 11:47:01 +0200 Subject: [PATCH 1/2] Make offline progress bar overlay - Closes #272 --- src/components/header/header.pug | 4 ++-- src/components/main/main.pug | 2 +- src/components/top/top.pug | 2 +- src/index.less | 8 ++++++++ src/index.pug | 2 +- 5 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/header/header.pug b/src/components/header/header.pug index 8f83b1465..1787ea0fa 100644 --- 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 index 092375f58..d3e89eb36 100644 --- 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 index 02e844056..c16f199fc 100644 --- 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 index 0fbb1ee22..fca25c25a 100644 --- 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 index bfc84c9bf..8a46cee4e 100644 --- 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) From 51391663f8044c1c117d0fc4dfa6bc6662d72e04 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Tue, 30 May 2017 11:50:18 +0200 Subject: [PATCH 2/2] Styles refactoring move all top-level styles to one file - index.less --- src/components/main/main.js | 2 -- src/components/main/main.less | 45 ----------------------------------- src/index.less | 43 ++++++++++++++++++++++++++++++++- 3 files changed, 42 insertions(+), 48 deletions(-) delete mode 100644 src/components/main/main.less diff --git a/src/components/main/main.js b/src/components/main/main.js index 423706521..5b80a2efc 100644 --- a/src/components/main/main.js +++ b/src/components/main/main.js @@ -1,5 +1,3 @@ -import './main.less'; - /** * The main component, used as parent for transaction, forging and delgate tabs. * diff --git a/src/components/main/main.less b/src/components/main/main.less deleted file mode 100644 index 92a6056a0..000000000 --- a/src/components/main/main.less +++ /dev/null @@ -1,45 +0,0 @@ -md-toast.lsk-toast-success { - .md-toast-content { - background-color: #7cb342; - } -} - -md-toast.lsk-toast-error { - .md-toast-content { - background-color: #c62828; - } -} - - -html body md-input-container { - overflow-x: initial; -} - -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); - } - } -} diff --git a/src/index.less b/src/index.less index fca25c25a..f3e3451c7 100644 --- a/src/index.less +++ b/src/index.less @@ -53,7 +53,7 @@ body { } md-input-container { - overflow-x: hidden; + overflow-x: initial; label:not(.md-no-float):not(.md-container-ignore), .md-placeholder { box-sizing: content-box; } @@ -66,3 +66,44 @@ body { 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); + } + } +}