anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Adds address component

Browse source
This commit is contained in:
Sam Cheng Hung 2018-07-19 20:21:58 +08:00
commit 22e93b823c
5 changed files with 74 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/sass/components/address.scss Normal file
View file

@ -0,0 +1,27 @@
.address {
background-color: #F8F8F8;
border: 0.5px solid #EDEBEB;
border-radius: 3px;
padding: 9px;
text-align: center;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
&.expanded {
white-space: pre-wrap;
word-break: break-all;
}
.prefix {
color: #000000;
}
.mid {
color: #919191;
}
.suffix {
color: #000000;
}
}

1
src/sass/components/components.scss
View file

@ -2,3 +2,4 @@
@import "content-frame";
@import "item";
@import "ion-content";
@import "address";

13
src/sass/components/item.scss
View file

@ -11,7 +11,7 @@
}
.item-content {
&.item-content-compact {
&.item-content-avatar {
min-height: 69px;
padding: 13px 11px 13px 68px;
@ -32,8 +32,17 @@
}
}
&.item-content-compact {
min-height: 0;
padding: 13px 11px;
}
.highlight {
color: #FAB915;
color: #FAB915
}
+ .item-content {
padding-top: 0;
}
}
}

32
www/css/main.css
View file

@ -15117,11 +15117,11 @@ log-options #check-bar .checkbox-icon {
.item.item-gutterless {
padding: 0; }
.item .item-content.item-content-compact {
.item .item-content.item-content-avatar {
min-height: 69px;
padding: 13px 11px 13px 68px; }
.item .item-content.item-content-compact > img:first-child,
.item .item-content.item-content-compact > i:first-child {
.item .item-content.item-content-avatar > img:first-child,
.item .item-content.item-content-avatar > i:first-child {
position: absolute;
max-width: 40px;
max-height: 40px;
@ -15133,9 +15133,16 @@ log-options #check-bar .checkbox-icon {
padding: 0;
transform: translate(0, -50%); }
.item .item-content.item-content-compact {
min-height: 0;
padding: 13px 11px; }
.item .item-content .highlight {
color: #FAB915; }
.item .item-content + .item-content {
padding-top: 0; }
/*
* Extends Ionic v1 ion-content
*/
@ -15145,6 +15152,25 @@ ion-content.bg-neutral {
ion-content.padded-bottom-cta {
bottom: 92px; }
.address {
background-color: #F8F8F8;
border: 0.5px solid #EDEBEB;
border-radius: 3px;
padding: 9px;
text-align: center;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis; }
.address.expanded {
white-space: pre-wrap;
word-break: break-all; }
.address .prefix {
color: #000000; }
.address .mid {
color: #919191; }
.address .suffix {
color: #000000; }
/* This is for rules that don't yet have a home.
* Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/
*/

9
www/views/review.html
View file

@ -20,7 +20,7 @@
<div class="card">
<div class="item item-compact">From:</div>
<div class="item item-gutterless item-complex item-avatar">
<div class="item-content item-content-compact">
<div class="item-content item-content-avatar">
<i class="icon big-icon-svg theme-circle theme-circle-services">
<div class="bg icon-wallet"
ng-style="{'background-color': '#eeb640'}"
@ -34,7 +34,7 @@
<div class="card">
<div class="item item-compact">From:</div>
<div class="item item-gutterless item-complex item-avatar">
<div class="item-content item-content-compact">
<div class="item-content item-content-avatar">
<i class="icon big-icon-svg theme-circle theme-circle-services">
<div class="bg icon-wallet"
ng-style="{'background-color': '#535353'}"></div>
@ -47,11 +47,14 @@
<div class="card">
<div class="item item-compact">To:</div>
<div class="item item-gutterless item-complex item-avatar">
<div class="item-content item-content-compact">
<div class="item-content item-content-avatar">
<img src="img/contact-placeholder.svg" class="bg">
<h2>Satoshi Nakamoto</h2>
<p>128.67</p>
</div>
<div class="item-content item-content-compact" ng-init="addressExpanded = false">
<div class="address" ng-class="{ 'expanded': addressExpanded }" ng-click="addressExpanded = !addressExpanded"><span class="prefix">qz9cq</span><span class="mid">q5pryv9hnqwa8q8mccmynk9uf4vlu5nxer</span><span class="suffix">pzmc</span></div>
</div>
</div>
</div>
</div>