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

Added content-frame, item and ion-content components, added dummy wallet interfaces

Browse source
This commit is contained in:
Sam Cheng Hung 2018-07-19 17:41:02 +08:00
commit a2f6277e7e
9 changed files with 179 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1 +1,4 @@
@import "header";
@import "content-frame";
@import "item";
@import "ion-content";

11
src/sass/components/content-frame.scss Normal file
View file

@ -0,0 +1,11 @@
.content-frame {
&.negative-top {
margin-top: -20px;
.card {
&:first-child {
margin-top: 0;
}
}
}
}

13
src/sass/components/ion-content.scss Normal file
View file

@ -0,0 +1,13 @@
/*
* Extends Ionic v1 ion-content
*/
ion-content {
&.bg-neutral {
background-color: #F2F2F2;
}
&.padded-bottom-cta {
bottom: 92px;
}
}

39
src/sass/components/item.scss Normal file
View file

@ -0,0 +1,39 @@
/*
* Extends Ionic v1 item
*/
.item {
&.item-compact {
padding: 11px 13px;
}
&.item-gutterless {
padding: 0;
}
.item-content {
&.item-content-compact {
min-height: 69px;
padding: 13px 11px 13px 68px;
> img,
> i {
&:first-child {
position: absolute;
max-width: 40px;
max-height: 40px;
width: 100%;
height: 100%;
border-radius: 50%;
left: 13px;
top: 50%;
padding: 0;
transform: translate(0,-50%);
}
}
}
.highlight {
color: #FAB915;
}
}
}

7
src/sass/icons.scss
View file

@ -88,6 +88,13 @@
background-image: url('../img/icon-faucet.svg');
background-size: 70%;
}
&.icon-wallet {
background-color: #FAB915;
background-image: url('../img/icon-wallet.svg');
border: none;
box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset;
}
}
}

8
src/sass/views/review.scss Normal file
View file

@ -0,0 +1,8 @@
#view-review {
background-color: #494949;
slide-to-accept, slide-to-accept-success {
margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
}
}

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

@ -48,3 +48,4 @@
@import "includes/logOptions";
@import "includes/checkBar";
@import "cashScan";
@import "review";

55
www/css/main.css
View file

@ -10037,6 +10037,11 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
.big-icon-svg.theme-circle > .bg.icon-faucet {
background-image: url("../img/icon-faucet.svg");
background-size: 70%; }
.big-icon-svg.theme-circle > .bg.icon-wallet {
background-color: #FAB915;
background-image: url("../img/icon-wallet.svg");
border: none;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3) inset; }
.big-icon-svg.theme-circle-services > .bg {
border: 1px solid #191919; }
.big-icon-svg.theme-circle-community > .bg {
@ -15062,6 +15067,14 @@ log-options #check-bar .checkbox-icon {
#cash-scan a {
cursor: pointer; }
#view-review {
background-color: #494949; }
#view-review slide-to-accept, #view-review slide-to-accept-success {
margin-bottom: constant(safe-area-inset-bottom);
/* iOS 11.0 */
margin-bottom: env(safe-area-inset-bottom);
/* iOS 11.2 */ }
.gravatar {
border-radius: 3px;
display: inline-block; }
@ -15090,6 +15103,48 @@ log-options #check-bar .checkbox-icon {
.header .content p + p {
margin-top: 8px; }
.content-frame.negative-top {
margin-top: -20px; }
.content-frame.negative-top .card:first-child {
margin-top: 0; }
/*
* Extends Ionic v1 item
*/
.item.item-compact {
padding: 11px 13px; }
.item.item-gutterless {
padding: 0; }
.item .item-content.item-content-compact {
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 {
position: absolute;
max-width: 40px;
max-height: 40px;
width: 100%;
height: 100%;
border-radius: 50%;
left: 13px;
top: 50%;
padding: 0;
transform: translate(0, -50%); }
.item .item-content .highlight {
color: #FAB915; }
/*
* Extends Ionic v1 ion-content
*/
ion-content.bg-neutral {
background-color: #F2F2F2; }
ion-content.padded-bottom-cta {
bottom: 92px; }
/* This is for rules that don't yet have a home.
* Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/
*/

44
www/views/review.html
View file

@ -1,4 +1,4 @@
<ion-view id="view-confirm" hide-tabs>
<ion-view id="view-review" hide-tabs>
<ion-nav-bar class="bar-royal">
<ion-nav-title>
{{'Review'|translate}}
@ -7,7 +7,7 @@
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="add-bottom-for-cta">
<ion-content class="padded-bottom-cta bg-neutral">
<div class="header">
<h1 class="title" translate>You are sending</h1>
<div class="content" translate>
@ -15,6 +15,46 @@
<p>0.014 BCH</p>
</div>
</div>
<div class="content-frame negative-top">
<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">
<i class="icon big-icon-svg theme-circle theme-circle-services">
<div class="bg icon-wallet"
ng-style="{'background-color': '#eeb640'}"
></div>
</i>
<h2>Personal Wallet <span class="highlight" ng-style="{'color': '#eeb640'}">(BCH)</span></h2>
<p>128.67</p>
</div>
</div>
</div>
<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">
<i class="icon big-icon-svg theme-circle theme-circle-services">
<div class="bg icon-wallet"
ng-style="{'background-color': '#535353'}"></div>
</i>
<h2>Personal Wallet <span class="highlight" ng-style="{'color': '#535353'}">(BTC)</span></h2>
<p>128.67</p>
</div>
</div>
</div>
<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">
<img src="img/contact-placeholder.svg" class="bg">
<h2>Satoshi Nakamoto</h2>
<p>128.67</p>
</div>
</div>
</div>
</div>
</ion-content>
<click-to-accept
ng-click="approve(tx, wallet, statusChangeHandler)"