Skip to content
This repository has been archived by the owner on Apr 15, 2019. It is now read-only.

Refine top header #292

Merged
merged 4 commits into from
Jun 1, 2017
+64 −20
Merged

Refine top header #292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b5cc752
Refine the design of main header to: - Make send all funds functional…
reyraa May 31, 2017
ac3a44d
Adapt the tooltip for sending all funds to the new design
reyraa May 31, 2017
b77134e
Merge branch 'development' into 285-286-refine-top-header
reyraa Jun 1, 2017
ccf0da4
Merge branch 'development' into 285-286-refine-top-header
reyraa Jun 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 48 additions & 9 deletions src/components/top/top.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ top {
display: block;
width: 100%;
text-align: center;
padding-top: 12px;
}

.status {
Expand All @@ -27,15 +26,29 @@ top {
color: #F45D4C;
}
}

.value {
font-size: 120%;
font-weight: bold;
background-color: #5f696e;
color: #fff;
border-radius: 3px;
padding: 9px 9px;
.value-wrapper {
width: 100%;
height: 70px;
text-align: center;
background: #eee;
.primary {
font-size: 120%;
font-weight: bold;
color: #5f696e;
padding: 9px 9px;
display: inline-block;
&.full {
height: 51px;
line-height: 51px;
}
}
.secondary {
color: #5f696e;
border-radius: 3px;
font-size: 100%;
}
}


md-select {
margin: 0;
Expand All @@ -46,8 +59,34 @@ top {
.balance-wrapper {
display: inline-block;
line-height: 41px;
position: relative;
overflow: hidden;
&.has-send-modal {
cursor: pointer;

.tooltip {
position: absolute;
z-index: 1;
width: 100%;
text-align: center;
left: 0;
top: 100%;
transition: all ease 200ms;
font-size: 85%;
}

lsk {
position: relative;
transition: all ease 200ms;
z-index: 2;
&:hover {
color: #000;

& + .tooltip {
transform: translateY(-33px);
}
}
}
}
}
}
27 changes: 16 additions & 11 deletions src/components/top/top.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,30 @@ md-content(layout='column', layout-gt-xs='row')
md-card.offline-hide(flex-gt-xs=33)
md-card-content(layout='column', layout-align='center center', ng-if='!$ctrl.account.get().isDelegate')
span.md-title.title Address
.address.value {{ $ctrl.account.get().address }}
div.value-wrapper
.address.value.primary.full {{ $ctrl.account.get().address }}
md-card-content(layout='column', layout-align='center center', ng-if='$ctrl.account.get().isDelegate')
span.md-title.title Delegate
.address.value {{ $ctrl.account.get().username }}
small.username {{ $ctrl.account.get().address }}
div.value-wrapper
.address.value.primary {{ $ctrl.account.get().username }}
small.username.secondary {{ $ctrl.account.get().address }}
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
i.material-icons.online(ng-show='$ctrl.peers.online') check circle
span.md-title.title Peer
div.active-peer.value
span(ng-bind="$ctrl.peers.active.currentPeer")
span(ng-if="$ctrl.peers.active.port && $ctrl.peers.active.port != '8000' ")
span :
span(ng-bind="$ctrl.peers.active.port")
div.value-wrapper
span.primary {{ $ctrl.peers.active.options.name }}
div.active-peer.value.secondary
span(ng-bind="$ctrl.peers.active.currentPeer")
span(ng-if="$ctrl.peers.active.port && $ctrl.peers.active.port != '8000' ")
span :
span(ng-bind="$ctrl.peers.active.port")
md-card.offline-hide(flex-gt-xs=33)
md-card-content(layout='column', layout-align='center center')
span.md-title.title Balance
div(class='balance-wrapper', data-show-send-modal, data-amount='$ctrl.totalSendable', data-ng-class='{"has-send-modal": $ctrl.totalSendable > 0}')
lsk.balance.value(amount='$ctrl.account.get().balance', nocolor, append)
md-tooltip(md-direction='top', md-delay='350', data-ng-if='$ctrl.account.get().balance > 0') Send all funds
div.value-wrapper
div(class='balance-wrapper', data-show-send-modal, data-amount='$ctrl.totalSendable', data-ng-class='{"has-send-modal": $ctrl.totalSendable > 0}')
lsk.balance.value.primary.full(amount='$ctrl.account.get().balance', nocolor, append)
span.tooltip.secondary(data-ng-if='$ctrl.account.get().balance > 0') Click to send all funds