mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #7091 from gabrielbazan7/ref/amountview01
ref amount view
This commit is contained in:
Gabriel Edgardo Bazán
GitHub
commit
c8f8228dbd
|
|
@ -6,25 +6,51 @@
|
|||
|
||||
</ion-header>
|
||||
|
||||
<!-- TODO send max -->
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-label padding>Recipient</ion-label>
|
||||
<ion-card>
|
||||
<ion-item>
|
||||
<ion-icon name="contact" item-left></ion-icon>
|
||||
<span>{{ toAddress }}</span>
|
||||
<span translate>Recipient</span>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-icon *ngIf="recipientType == 'wallet'" item-left>
|
||||
<img src="assets/img/icon-wallet.svg" [ngClass]="{'wallet-background-color-default': !toColor}" [ngStyle]="{'background-color': color}"
|
||||
class="icon-wallet">
|
||||
</ion-icon>
|
||||
<ion-icon *ngIf="recipientType == 'contact'" item-left>
|
||||
<img src="assets/img/contact-placeholder.svg" class="icon-contact">
|
||||
<!-- TODO add gravatar -->
|
||||
</ion-icon>
|
||||
<ion-icon *ngIf="!recipientType" item-left>
|
||||
<img src="assets/img/contact-placeholder.svg" class="icon-contact">
|
||||
</ion-icon>
|
||||
<span>{{ name || toAddress }}</span>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-card>
|
||||
<div>
|
||||
<div padding>
|
||||
<div>
|
||||
<span>Amount</span>
|
||||
<div [ngClass]="{'amount-pane-recipient': !customAmount && !nextStep,
|
||||
'amount-pane-no-recipient': customAmount || nextStep}">
|
||||
|
||||
<div class="amount-bar">
|
||||
<div class="title">
|
||||
<span translate>Amount</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ amountStr || "0.00" }}</span>
|
||||
</div>
|
||||
<div [hidden]="!globalResult">
|
||||
= {{globalResult|| "0.00" }}
|
||||
|
||||
<div class="amount">
|
||||
<div class="amount__editable" [ngClass]="{'amount__editable--minimize': smallFont, 'amount__editable--standard': !smallFont, 'amount__editable--placeholder': !amount}">
|
||||
<span class="amount__number">{{amountStr || "0.00" }}</span>
|
||||
<a *ngIf="unit" class="amount__currency-toggle" (click)="changeUnit()">{{unit}}</a>
|
||||
</div>
|
||||
<div [ngClass]="{'amount__results--minimize': smallFont, 'amount__results--standard': !smallFont, 'amount__results--placeholder': amountResult}"
|
||||
(click)="changeAlternativeUnit()">
|
||||
<div class="amount__result" [hidden]="!globalResult">{{globalResult}} {{unit}}</div>
|
||||
<div class="amount__result-equiv" [hidden]="!alternativeAmount">≈ {{alternativeAmount || '0.00'}} {{alternativeUnit}}</div>
|
||||
<div class="amount__result-equiv" [hidden]="alternativeAmount"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="keypad">
|
||||
|
|
|
|||
|
|
@ -45,4 +45,184 @@ page-amount {
|
|||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
&.icon-wallet {
|
||||
width: 35px !important;
|
||||
background-color: color($colors, primary);
|
||||
}
|
||||
&.icon-contact {
|
||||
width: 35px !important;
|
||||
}
|
||||
}
|
||||
.amount-pane-recipient {
|
||||
position: absolute;
|
||||
top: 125px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
|
||||
.amount-bar {
|
||||
padding: 24px 0;
|
||||
font-size: 18px;
|
||||
@media(max-height: 480px) {
|
||||
padding: 0px;
|
||||
}
|
||||
@media(max-width: 320px) {
|
||||
padding: 0px;
|
||||
}
|
||||
.title {
|
||||
float: left;
|
||||
padding-top: 10px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
@media(max-height: 480px) {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
@media(max-height: 480px) {
|
||||
padding-top: 3px;
|
||||
}
|
||||
}
|
||||
.amount {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
position: absolute;
|
||||
bottom: 254px;
|
||||
top: 66px;
|
||||
.light {
|
||||
color: black;
|
||||
}
|
||||
@media(max-height: 480px) {
|
||||
top: 45px;
|
||||
}
|
||||
@media(max-width: 320px) {
|
||||
bottom: 276px;
|
||||
top: 60px;
|
||||
& > div {
|
||||
display: inline-block;
|
||||
}
|
||||
& > div:first-child {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.amount-pane-no-recipient {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
|
||||
.amount-bar {
|
||||
padding: 24px 0;
|
||||
font-size: 18px;
|
||||
.title {
|
||||
padding-top: 10px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
.limits {
|
||||
margin-top: 10px;
|
||||
color: black;
|
||||
font-size: 12px;
|
||||
}
|
||||
.select {
|
||||
margin: 10px 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.amount {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
position: absolute;
|
||||
bottom: 254px;
|
||||
top: 66px;
|
||||
.light {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
.amount {
|
||||
.icon-toggle {
|
||||
font-size: 1.2em;
|
||||
width: auto;
|
||||
margin: 0.8em auto;
|
||||
border: 1px solid grey;
|
||||
color: black;
|
||||
border-radius: 3px;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
@media(max-height: 280px) {
|
||||
margin: 0.1em auto;
|
||||
}
|
||||
}
|
||||
&__editable {
|
||||
&--minimize {
|
||||
font-size: 22px;
|
||||
}
|
||||
&--standard {
|
||||
font-size: 42px;
|
||||
@media(max-height: 480px) {
|
||||
font-size: 26px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
&--placeholder {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
&__number {
|
||||
color: black;
|
||||
}
|
||||
&__currency-toggle {
|
||||
border: 1px solid grey;
|
||||
color: black;
|
||||
border-radius: 3px;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
font-size: .6em;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
line-height: 1;
|
||||
@media(max-width: 320px) {
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
&__results {
|
||||
&--minimize {
|
||||
font-size: 12px;
|
||||
}
|
||||
&--standard {
|
||||
font-size: 18px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
&--placeholder {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
&__result {
|
||||
color: black;
|
||||
font-size: .9em;
|
||||
//margin-bottom: -.9em; TODO matias
|
||||
line-height: 1;
|
||||
@media(max-height: 480px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&__result-equiv {
|
||||
color: grey;
|
||||
font-size: 1.2em;
|
||||
@media(max-height: 480px) {
|
||||
margin-top: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ export class AmountPage {
|
|||
public amount: number;
|
||||
public showSendMax: boolean = false;
|
||||
public useSendMax: boolean;
|
||||
public alternativeAmount: number;
|
||||
|
||||
private LENGTH_EXPRESSION_LIMIT = 19;
|
||||
private SMALL_FONT_SIZE_LIMIT = 10;
|
||||
|
|
@ -92,9 +93,6 @@ export class AmountPage {
|
|||
this.email = this.navParams.data.email;
|
||||
this.color = this.navParams.data.color;
|
||||
this.amount = this.navParams.data.amount;
|
||||
}
|
||||
|
||||
ionViewDidEnter() {
|
||||
this.setAvailableUnits();
|
||||
this.updateUnitUI();
|
||||
//this.showMenu = $ionicHistory.backView() && ($ionicHistory.backView().stateName == 'tabs.send' || $ionicHistory.backView().stateName == 'tabs.bitpayCard'); TODO
|
||||
|
|
@ -241,19 +239,18 @@ export class AmountPage {
|
|||
if (_.isNumber(result)) {
|
||||
this.globalResult = this.isExpression(this.amountStr) ? '= ' + this.processResult(result) : '';
|
||||
|
||||
// TODO this.globalResult is always undefinded - Need: processResult()
|
||||
/* if (this.availableUnits[this.unitIndex].isFiat) {
|
||||
if (this.availableUnits[this.unitIndex].isFiat) {
|
||||
|
||||
var a = this.fromFiat(result);
|
||||
if (a) {
|
||||
this.alternativeAmount = txFormatService.formatAmount(a * unitToSatoshi, true);
|
||||
this.alternativeAmount = this.txFormatProvider.formatAmount(a * this.unitToSatoshi, true);
|
||||
} else {
|
||||
this.alternativeAmount = 'N/A'; //TODO
|
||||
this.alternativeAmount = null;
|
||||
this.allowSend = false;
|
||||
}
|
||||
} else {
|
||||
this.alternativeAmount = $filter('formatFiatAmount')(toFiat(result));
|
||||
} */
|
||||
this.alternativeAmount = this.filter.formatFiatAmount((this.toFiat(result)));
|
||||
}
|
||||
this.globalResult = result.toString();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue