Skip to content
Permalink
Browse files

Merge pull request #9575 from Gamboster/ref/receiveAndSpecificAmountUI

Ref: New design for Receive and Specific Amount views
  • Loading branch information...
gabrielbazan7 committed Mar 14, 2019
2 parents 361e0c1 + 80d8018 commit b3e2ae9b6d563af68aeff9fbd5cc7a5d5c350890
Binary file not shown.
@@ -206,7 +206,9 @@ export class BackupGamePage {
this.confirm()
.then(async () => {
this.onGoingProcessProvider.clear();
const finishText = this.translate.instant('Your recovery phrase is verified');
const finishText = this.translate.instant(
'Your recovery phrase is verified'
);
const finishComment = this.translate.instant(
'Be sure to store your recovery phrase in a safe and secure place'
);
@@ -40,7 +40,7 @@ export class BackupKeyPage {
private actionSheetProvider: ActionSheetProvider
) {
this.walletId = this.navParams.data.walletId;
this.fromOnboarding = this.navParams.data.fromOnboarding
this.fromOnboarding = this.navParams.data.fromOnboarding;
this.wallet = this.profileProvider.getWallet(this.walletId);
this.credentialsEncrypted = this.wallet.isPrivKeyEncrypted();
}
@@ -16,34 +16,33 @@

<ion-content no-bounce>
<div class="wrapper">
<div *ngIf="wallet" class="receive-content">
<div class="title-container">
<span class="title">{{'Payment Request' | translate}}</span>
<ion-icon (click)="showPaymentRequestInfo()">
<img src="assets/img/icon-info-blue.svg">
</ion-icon>
</div>
<div class="address-container">
<div class="text-address ellipsis">
<div class="address-text ellipsis">
<span>{{ address }}</span>
</div>
</div>
</div>
</div>

<div class="qr-container">
<div class="lines-background"></div>
<div class="card qr-card">
<div class="qr-card-header">
<span class="qr-card-title">{{'Payment Request' | translate}}</span>
<ion-icon (click)="showPaymentRequestInfo()">
<img src="assets/img/icon-info-blue.svg">
</ion-icon>
</div>
<img class="copy-icon" copy-to-clipboard="{{ qrAddress }}" src="assets/img/paste-clipboard.svg" width="18" />
<div>
<div class="qr-card-amount">
<span>{{amountUnitStr}}</span>
<br>
<small>({{altAmountStr}})</small>
</div>
<ngx-qrcode (click)="showFullInfo()" *ngIf="address" hide-toast="true" copy-to-clipboard="{{ qrAddress }}" qrc-value="{{qrAddress}}"
qrc-class="aclass" qrc-errorCorrectionLevel="M"></ngx-qrcode>
</div>
</div>
</div>

<div *ngIf="wallet" class="receive-content">
<div class="address-container">
<div class="text-address ellipsis">
<img src="assets/img/icon-bitcoin-small.svg" alt="" width="12" />
<span class="address-divider"></span>
<div class="address-text ellipsis">
<span>{{ address }}</span>
</div>
<ngx-qrcode (click)="showFullInfo()" *ngIf="address" hide-toast="true" copy-to-clipboard="{{ qrAddress }}" qrc-value="{{qrAddress}}" qrc-class="aclass" qrc-errorCorrectionLevel="M"></ngx-qrcode>
</div>
</div>
</div>
@@ -1,31 +1,36 @@
page-custom-amount {
.scroll-content {
background-color: rgb(251, 251, 251);
background-color: white;
margin-top: 0rem;
.wrapper {
display: flex;
flex-direction: column;
background-color: rgb(251, 251, 251);
background-color: white;
}
}

.qr-container {
height: 100%;
position: relative;
.lines-background {
background: url(../assets/img/curved-lines-background.png) center center
no-repeat #ececec;
opacity: 0.1;
background-size: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.qr-card {
.qr-card-header {
display: flex;
justify-content: center;
align-items: center;
height: 5rem;
border-bottom: 1px solid rgb(229, 229, 229);
.qr-card-title {
font-weight: bold;
}
ion-icon {
position: absolute;
right: 2rem;
width: 2rem;
}
@media (max-height: 530px) {
width: 60%;
}
.copy-icon {
position: absolute;
top: 1.5rem;
right: 1.5rem;
}
.qr-card-amount {
text-align: center;
@@ -40,26 +45,48 @@ page-custom-amount {
}
}
.receive-content {
.title-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 5rem;
padding-left: 15px;
padding-right: 15px;
.title {
font-size: 18px;
font-weight: 500;
}
ion-icon {
width: 2rem;
}
}
.address-container {
bottom: 0;
background-color: rgb(248, 248, 248);
border-top: 1px solid rgb(229, 229, 229);
color: rgb(80, 80, 80);
width: 100%;
padding: 15px;
text-align: center;
font-size: 15px;
.text-address.ellipsis img {
vertical-align: middle;
display: flex;
justify-content: center;
.text-address {
width: 80%;
background: color($colors, light);
color: color($colors, light-grey);
padding: 1.5rem 1rem;
border-radius: 3px;
&.ellipsis img {
vertical-align: middle;
}
.address-text {
width: 70%;
max-width: 300px;
vertical-align: middle;
display: inline-block;
opacity: 1;
transition: opacity 500ms ease;
}
}
}
.address-text {
width: 70%;
max-width: 300px;
vertical-align: middle;
display: inline-block;
opacity: 1;
transition: opacity 500ms ease;
}
}
}
@@ -42,23 +42,19 @@
</div>
</div>

<div class="qr-container" *ngIf="wallet && wallet.isComplete() && !wallet.needsBackup">
<div class="card qr-card" [ngClass]="{'qr-code-bounce': playAnimation}" *ngIf="wallets[0] && address">
<ngx-qrcode (click)="showFullAddr()" *ngIf="address" copy-to-clipboard="{{ address }}" hide-toast="true" qrc-value="{{address}}" qrc-class="aclass" qrc-errorCorrectionLevel="M"></ngx-qrcode>
</div>
</div>

<div *ngIf="wallets[0]" class="receive-content">
<div class="title">
{{'Address' | translate}}
</div>
<div *ngIf="wallet && wallet.isComplete() && !wallet.needsBackup" class="address-container">
<div class="text-address ellipsis">
<img src="assets/img/icon-bitcoin-small.svg" alt="BTC" width="12" />
<span class="address-divider"></span>
<img copy-to-clipboard="{{ address }}" src="assets/img/paste-clipboard.svg" width="18" />
<div [ngClass]="{'fade-in-out': playAnimation}" (click)="showFullAddr()" class="address-text ellipsis">
<span copy-to-clipboard="{{ address }}" hide-toast="true">{{ address }}</span>
</div>

<button *ngIf="!(wallet.status && wallet.status.wallet && wallet.status.wallet.singleAddress)" class="new-address-btn" detail-none text-center (click)="setAddress(true)">
<span class="new-address" ion-text color="primary" translate>
<span ion-text color="primary" translate>
<img [hidden]="loading" class="spin-icon" [ngClass]="{'spin-backwards': playAnimation}" src="assets/img/right.svg" width="16" />
<div *ngIf="loading" [ngClass]="{'spin-fast': loading}" class="spinner"></div>
</span>
@@ -67,5 +63,11 @@
</div>
</div>

<div class="qr-container" *ngIf="wallet && wallet.isComplete() && !wallet.needsBackup">
<div class="lines-background"></div>
<div class="card qr-card" [ngClass]="{'qr-code-bounce': playAnimation}" *ngIf="wallets[0] && address">
<ngx-qrcode (click)="showFullAddr()" *ngIf="address" copy-to-clipboard="{{ address }}" hide-toast="true" qrc-value="{{address}}" qrc-class="aclass" qrc-errorCorrectionLevel="M"></ngx-qrcode>
</div>
</div>
</div>
</ion-content>
Oops, something went wrong.

0 comments on commit b3e2ae9

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.