mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #7961 from cmgustavo/v4-51
[v4] Fix ionic variables for use on md and ios mode. Fix wallet selector
This commit is contained in:
Gabriel Edgardo Bazán
GitHub
commit
f29d4272c9
|
|
@ -94,7 +94,7 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<ion-list *ngIf="walletsBtc && walletsBtc[0]">
|
||||
<div *ngIf="walletsBtc && walletsBtc[0]">
|
||||
<ion-list-header color="light">
|
||||
<div class="title" item-start>
|
||||
<img src="assets/img/icon-bitcoin.svg" alt="Bitcoin Wallets" width="18" />
|
||||
|
|
@ -144,9 +144,9 @@
|
|||
</p>
|
||||
</button>
|
||||
</ion-list>
|
||||
</ion-list>
|
||||
</div>
|
||||
|
||||
<ion-list *ngIf="walletsBch && walletsBch[0]">
|
||||
<div *ngIf="walletsBch && walletsBch[0]">
|
||||
<ion-list-header color="light">
|
||||
<div class="title" item-start>
|
||||
<img src="assets/img/bitcoin-cash-logo.svg" alt="Bitcoin Cash Wallets" width="22" />
|
||||
|
|
@ -196,20 +196,18 @@
|
|||
</p>
|
||||
</button>
|
||||
</ion-list>
|
||||
</ion-list>
|
||||
</div>
|
||||
|
||||
<ion-list *ngIf="homeIntegrations && homeIntegrations.length>0">
|
||||
<ion-item-divider color="light">
|
||||
<ion-row>
|
||||
<ion-col class="title">
|
||||
<span translate>Services</span>
|
||||
</ion-col>
|
||||
<ion-col text-right (click)="hideHomeIntegrations = !hideHomeIntegrations">
|
||||
<ion-icon *ngIf="hideHomeIntegrations" name="arrow-down"></ion-icon>
|
||||
<ion-icon *ngIf="!hideHomeIntegrations" name="arrow-up"></ion-icon>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-item-divider>
|
||||
<ion-list-header color="light" (click)="hideHomeIntegrations = !hideHomeIntegrations">
|
||||
<div item-start translate>Services</div>
|
||||
<div item-end>
|
||||
<button ion-button clear color="grey" icon-only>
|
||||
<ion-icon *ngIf="hideHomeIntegrations" name="arrow-dropdown"></ion-icon>
|
||||
<ion-icon *ngIf="!hideHomeIntegrations" name="arrow-dropup"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
</ion-list-header>
|
||||
<div *ngIf="!hideHomeIntegrations">
|
||||
<button ion-item *ngFor="let service of homeIntegrations" (click)="goTo(service.page)">
|
||||
<ion-icon item-start>
|
||||
|
|
|
|||
|
|
@ -3,17 +3,19 @@
|
|||
<div class="wallet-selector slider" [ngClass]="{'opened': showSlideEffect, 'closed': !showSlideEffect }" [hidden]="!showWalletsSelector">
|
||||
<div class="back-button">
|
||||
<ion-icon (click)="backdropDismiss()" name="arrow-round-back"></ion-icon>
|
||||
<h6 *ngIf="title">{{ title }}</h6>
|
||||
</div>
|
||||
<div class="destination-title" *ngIf="title">{{ title }}</div>
|
||||
<!--<div *ngFor="let wallet of wallets" (click)="selectWallet(wallet)">{{wallet.name}}</div>-->
|
||||
<div *ngIf="walletsBtc && walletsBtc[0]">
|
||||
<div class="title">
|
||||
<img src="assets/img/icon-bitcoin.svg" alt="Bitcoin Wallets" width="18" />
|
||||
<span translate>Bitcoin Wallets</span>
|
||||
</div>
|
||||
<ion-list-header color="light">
|
||||
<div class="title">
|
||||
<img src="assets/img/icon-bitcoin.svg" alt="Bitcoin Wallets" width="16" />
|
||||
<span translate>Bitcoin Wallets</span>
|
||||
</div>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-list>
|
||||
<button ion-item *ngFor="let wallet of walletsBtc" class="wallet-button" (click)="selectWallet(wallet)">
|
||||
<button ion-item detail-none *ngFor="let wallet of walletsBtc" class="wallet-button" (click)="selectWallet(wallet)">
|
||||
<ion-icon item-start>
|
||||
<img *ngIf="wallet.network == 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet-testnet.svg"
|
||||
class="icon-wallet" />
|
||||
|
|
@ -47,13 +49,15 @@
|
|||
</div>
|
||||
|
||||
<div *ngIf="walletsBch && walletsBch[0]">
|
||||
<div class="title">
|
||||
<img src="assets/img/bitcoin-cash-logo.svg" alt="Bitcoin Cash Wallets" width="22" />
|
||||
<span translate>Bitcoin Cash Wallets</span>
|
||||
</div>
|
||||
<ion-list-header color="light">
|
||||
<div class="title">
|
||||
<img src="assets/img/bitcoin-cash-logo.svg" alt="Bitcoin Cash Wallets" width="22" />
|
||||
<span translate>Bitcoin Cash Wallets</span>
|
||||
</div>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-list>
|
||||
<button ion-item *ngFor="let wallet of walletsBch" class="wallet-button" (click)="selectWallet(wallet)">
|
||||
<button ion-item detail-none *ngFor="let wallet of walletsBch" class="wallet-button" (click)="selectWallet(wallet)">
|
||||
<ion-icon item-start>
|
||||
<img *ngIf="wallet.network == 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet-testnet.svg"
|
||||
class="icon-wallet" />
|
||||
|
|
@ -85,4 +89,4 @@
|
|||
</button>
|
||||
</ion-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,26 +15,7 @@ wallet-selector {
|
|||
width: calc(100% + 1px);
|
||||
overflow-y: scroll;
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
box-shadow: 0px 2px 13px 3px rgba(0, 0, 0, 0.3);
|
||||
.back-button {
|
||||
display: inline-block;
|
||||
margin: 1rem 0 2rem 0;
|
||||
ion-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
color: color($colors, dark);
|
||||
font-weight: 700;
|
||||
height: 3rem;
|
||||
>img {
|
||||
width: 22px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.error {
|
||||
color: color($colors, danger);
|
||||
}
|
||||
|
|
@ -46,6 +27,28 @@ wallet-selector {
|
|||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
>img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.destination-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
margin: 10px 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.back-button {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid color($colors, light);
|
||||
ion-icon {
|
||||
padding: 1.5rem 20px 1.5rem 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.slider {
|
||||
/* only transition on transform properties which are hardware accelerated = way better performances */
|
||||
-webkit-transition:-webkit-transform .2s ease;
|
||||
|
|
|
|||
|
|
@ -9,57 +9,65 @@
|
|||
<div *ngIf="hasBtcWallets || hasBchWallets">
|
||||
<ion-searchbar placeholder="Search or enter bitcoin address" [(ngModel)]="search" (ngModelChange)="findContact(search)"></ion-searchbar>
|
||||
|
||||
<ion-list *ngIf="filteredContactsList && filteredContactsList[0]">
|
||||
<div *ngIf="filteredContactsList && filteredContactsList[0]">
|
||||
<ion-list-header color="light">
|
||||
<span translate>Transfer to Contact</span>
|
||||
</ion-list-header>
|
||||
<button ion-item *ngFor="let item of filteredContactsList" (click)="goToAmount(item)">
|
||||
<ion-icon item-start>
|
||||
<gravatar [name]="item.name" [width]="30" [email]="item.email"></gravatar>
|
||||
</ion-icon>
|
||||
<h2>{{item.name}}</h2>
|
||||
</button>
|
||||
<button ion-item class="show-more" *ngIf="contactsShowMore" (click)="showMore()">
|
||||
<h2 translate>Show all</h2>
|
||||
</button>
|
||||
</ion-list>
|
||||
<ion-list *ngIf="walletBtcList && walletBtcList[0]">
|
||||
<ion-list>
|
||||
<button ion-item *ngFor="let item of filteredContactsList" (click)="goToAmount(item)">
|
||||
<ion-icon item-start>
|
||||
<gravatar [name]="item.name" [width]="30" [email]="item.email"></gravatar>
|
||||
</ion-icon>
|
||||
<h2>{{item.name}}</h2>
|
||||
</button>
|
||||
<button ion-item class="show-more" *ngIf="contactsShowMore" (click)="showMore()">
|
||||
<h2 translate>Show all</h2>
|
||||
</button>
|
||||
</ion-list>
|
||||
</div>
|
||||
|
||||
<div *ngIf="walletBtcList && walletBtcList[0]">
|
||||
<ion-list-header class="title" color="light">
|
||||
<img src="assets/img/icon-bitcoin.svg" alt="Bitcoin Wallets" width="16" />
|
||||
<span translate>Transfer to Bitcoin Wallet</span>
|
||||
</ion-list-header>
|
||||
|
||||
<button ion-item *ngFor="let wallet of walletBtcList" (click)="goToAmount(wallet)">
|
||||
<ion-icon item-start>
|
||||
<img *ngIf="wallet.network == 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet-testnet.svg"
|
||||
class="icon-wallet" />
|
||||
<img *ngIf="wallet.network != 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet.svg"
|
||||
class="icon-wallet" />
|
||||
</ion-icon>
|
||||
<h2>{{wallet.name}}
|
||||
<span *ngIf="wallet.m > 1">{{wallet.m}}-{{wallet.n}}</span>
|
||||
</h2>
|
||||
</button>
|
||||
</ion-list>
|
||||
<ion-list>
|
||||
<button ion-item *ngFor="let wallet of walletBtcList" (click)="goToAmount(wallet)">
|
||||
<ion-icon item-start>
|
||||
<img *ngIf="wallet.network == 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet-testnet.svg"
|
||||
class="icon-wallet" />
|
||||
<img *ngIf="wallet.network != 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet.svg"
|
||||
class="icon-wallet" />
|
||||
</ion-icon>
|
||||
<h2>{{wallet.name}}
|
||||
<span *ngIf="wallet.m > 1">{{wallet.m}}-{{wallet.n}}</span>
|
||||
</h2>
|
||||
</button>
|
||||
</ion-list>
|
||||
</div>
|
||||
|
||||
<ion-list *ngIf="walletBchList && walletBchList[0]">
|
||||
<div *ngIf="walletBchList && walletBchList[0]">
|
||||
<ion-list-header class="title" color="light">
|
||||
<img src="assets/img/bitcoin-cash-logo.svg" alt="Bitcoin Cash Wallets" width="22" />
|
||||
<span translate>Transfer to Bitcoin Cash Wallet</span>
|
||||
</ion-list-header>
|
||||
|
||||
<button ion-item *ngFor="let wallet of walletBchList" (click)="goToAmount(wallet)">
|
||||
<ion-icon item-start>
|
||||
<img *ngIf="wallet.network == 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet-testnet.svg"
|
||||
class="icon-wallet" />
|
||||
<img *ngIf="wallet.network != 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet.svg"
|
||||
class="icon-wallet" />
|
||||
</ion-icon>
|
||||
<h2>{{wallet.name}}
|
||||
<span *ngIf="wallet.m > 1">{{wallet.m}}-{{wallet.n}}</span>
|
||||
</h2>
|
||||
</button>
|
||||
</ion-list>
|
||||
<ion-list>
|
||||
<button ion-item *ngFor="let wallet of walletBchList" (click)="goToAmount(wallet)">
|
||||
<ion-icon item-start>
|
||||
<img *ngIf="wallet.network == 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet-testnet.svg"
|
||||
class="icon-wallet" />
|
||||
<img *ngIf="wallet.network != 'testnet'" [ngStyle]="{'background-color': wallet.color}" src="assets/img/icon-wallet.svg"
|
||||
class="icon-wallet" />
|
||||
</ion-icon>
|
||||
<h2>{{wallet.name}}
|
||||
<span *ngIf="wallet.m > 1">{{wallet.m}}-{{wallet.n}}</span>
|
||||
</h2>
|
||||
<p></p>
|
||||
</button>
|
||||
</ion-list>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!hasBtcWallets && !hasBchWallets" class="no-wallet-message">
|
||||
<span translate>To get started, you'll need to create a bitcoin wallet and get some bitcoin.</span>
|
||||
|
|
|
|||
|
|
@ -59,13 +59,26 @@ $onboarding-color: #fff;
|
|||
// --------------------------------------------------
|
||||
// iOS only Sass variables can go here
|
||||
|
||||
$item-ios-divider-background: white;
|
||||
$item-ios-divider-background: color($colors, light);
|
||||
$list-ios-border-color: color($colors, light);
|
||||
$list-ios-header-font-size: 1.3rem;
|
||||
$searchbar-ios-background-color: color($colors, light);;
|
||||
$searchbar-ios-padding-vertical: 16px;
|
||||
$searchbar-ios-padding-horizontal: 16px;
|
||||
$list-ios-margin-bottom: 0;
|
||||
|
||||
|
||||
// App Material Design Variables
|
||||
// --------------------------------------------------
|
||||
// Material Design only Sass variables can go here
|
||||
|
||||
$item-md-divider-background: color($colors, light);
|
||||
$list-md-border-color: color($colors, light);
|
||||
$searchbar-md-padding-start: 8px;
|
||||
$searchbar-md-padding-end: 8px;
|
||||
$searchbar-md-padding-top: 16px;
|
||||
$list-md-header-margin-bottom: 0;
|
||||
$list-md-margin-bottom: 0;
|
||||
|
||||
// App Windows Variables
|
||||
// --------------------------------------------------
|
||||
|
|
|
|||
Loading…
Reference in New Issue