Fix styling for import/export views

This commit is contained in:
Gustavo Maximiliano Cortez 2016-10-13 11:45:45 -03:00
parent 5a960d8b14
commit f00574140a
No known key found for this signature in database
GPG Key ID: 15EDAD8D9F2EB1AF
9 changed files with 119 additions and 89 deletions

View File

@ -0,0 +1,15 @@
#export {
.list {
background-color: #fff;
}
.top-tabs.row {
padding: 0;
}
.top-tabs .col {
font-size: 14px;
cursor: pointer;
padding: 10px 5px;
border-bottom-width: 2px;
border-bottom-color: #172565;
}
}

12
src/sass/views/import.scss vendored Normal file
View File

@ -0,0 +1,12 @@
#import {
.top-tabs.row {
padding: 0;
}
.top-tabs .col {
font-size: 14px;
cursor: pointer;
padding: 10px 5px;
border-bottom-width: 2px;
border-bottom-color: #172565;
}
}

View File

@ -14,7 +14,7 @@
background: #fff;
.incomplete {
padding: 50px;
height: 350px;
height: 352px;
.title {
padding: 20px;
font-size: 25px;

View File

@ -17,6 +17,8 @@
@import "zero-state";
@import "onboarding/onboarding";
@import "includes/actionSheet";
@import "export";
@import "import";
@import "includes/walletActivity";
@import "includes/wallets";
@import "includes/modals/modals";

View File

@ -1,4 +1,4 @@
<ion-view>
<ion-view id="export">
<ion-nav-bar class="bar-royal">
<ion-nav-title>{{'Export wallet' | translate}}</ion-nav-title>
<ion-nav-back-button>
@ -6,11 +6,11 @@
</ion-nav-bar>
<ion-content ng-init="file = true">
<div class="row text-center">
<div class="col" ng-click="file = true" ng-style="file && {'border-bottom': '2px solid'}">
<div class="row text-center top-tabs">
<div class="col" ng-click="file = true" ng-style="file && {'border-bottom-style': 'solid'}">
<span class="" translate>File/Text</span>
</div>
<div class="col" ng-click="file = false" ng-style="!file && {'border-bottom': '2px solid'}">
<div class="col" ng-click="file = false" ng-style="!file && {'border-bottom-style': 'solid'}">
<span class="" translate>QR Code</span>
</div>
</div>

View File

@ -1,4 +1,4 @@
<ion-view ng-controller="tabsController" ng-init="importInit()" class="settings">
<ion-view id="import" ng-controller="tabsController" ng-init="importInit()" class="settings">
<ion-nav-bar class="bar-royal">
<ion-nav-title>{{'Import Wallet' | translate}}</ion-nav-title>
<ion-nav-back-button>
@ -6,14 +6,17 @@
</ion-nav-bar>
<ion-content ng-controller="importController" ng-init="phrase = true; init()">
<div class="row text-center">
<div class="col" ng-click="phrase = true; file = hardware = false; showAdv = false" ng-style="phrase && {'border-bottom': '2px solid'}">
<div class="row text-center top-tabs">
<div class="col" ng-click="phrase = true; file = hardware = false; showAdv = false" ng-style="phrase &&
{'border-bottom-style': 'solid'}">
<span translate>Recovery phrase</span>
</div>
<div class="col" ng-click="file = true; phrase = hardware = false; showAdv = false" ng-style="file && {'border-bottom': '2px solid'}">
<div class="col" ng-click="file = true; phrase = hardware = false; showAdv = false" ng-style="file &&
{'border-bottom-style': 'solid'}">
<span translate>File/Text</span>
</div>
<div class="col" ng-click="hardware = true; phrase = file = false; showAdv = false" ng-style="hardware && {'border-bottom': '2px solid'}">
<div class="col" ng-click="hardware = true; phrase = file = false; showAdv = false" ng-style="hardware &&
{'border-bottom-style': 'solid'}">
<span translate>Hardware wallet</span>
</div>
</div>

View File

@ -5,7 +5,7 @@
</div>
<form name="exportForm" novalidate>
<div class="card">
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label" translate>Set up a password</span>
<input type="password" placeholder="{{'Your password'|translate}}" ng-model="formData.password">
@ -15,75 +15,77 @@
<span class="input-label" translate>Repeat the password</span>
<input type="password" placeholder="{{'Repeat password'|translate}}" ng-model="formData.repeatpassword">
</label>
<div ng-show="canSign">
<div class="item item-divider"></div>
<a class="item" ng-click="showAdvChange()">
<span translate ng-show="!showAdv">Show advanced options</span>
<span translate ng-show="showAdv">Hide advanced options</span>
</a>
<ion-checkbox ng-show="showAdv" ng-model="formData.noSignEnabled" class="checkbox-balanced" ng-change="noSignEnabledChange(); resizeView()">
<span class="toggle-label" translate>Do not include private key</span>
</ion-checkbox>
</div>
<div class="box-notification warning ng-hide" ng-show="!canSign">
<span class="size-14">
<i class="ion-alert-circled"></i>
<span translate>
WARNING: The private key of this wallet is not available. The export allows to check the wallet balance, transaction history, and create spend proposals from the export. However, does not allow to approve (sign) proposals, so <b>funds will not be accessible from the export</b>.
</span>
</span>
</div>
<div class="box-notification warning ng-hide" ng-show="formData.noSignEnabled">
<span class="size-14">
<i class="ion-alert-circled"></i>
<span translate>
WARNING: Not including the private key allows to check the wallet balance, transaction history, and create spend proposals from the export. However, does not allow to approve (sign) proposals, so <b>funds will not be accessible from the export</b>.
</span>
</span>
</div>
</div>
</form>
<div class="list card" ng-show="canSign">
<a class="item" ng-click="showAdvChange()">
<span translate ng-show="!showAdv">Show advanced options</span>
<span translate ng-show="showAdv">Hide advanced options</span>
</a>
<ion-checkbox ng-show="showAdv" ng-model="formData.noSignEnabled" class="checkbox-balanced" ng-change="noSignEnabledChange(); resizeView()">
<span class="toggle-label" translate>Do not include private key</span>
</ion-checkbox>
</div>
<div class="box-notification error ng-hide" ng-show="!canSign">
<span class="size-14">
<i class="ion-alert-circled"></i>
<span translate>
WARNING: The private key of this wallet is not available. The export allows to check the wallet balance, transaction history, and create spend proposals from the export. However, does not allow to approve (sign) proposals, so <b>funds will not be accessible from the export</b>.
</span>
</span>
</div>
<div class="box-notification error ng-hide" ng-show="formData.noSignEnabled">
<span class="size-14">
<i class="ion-alert-circled"></i>
<span translate>
WARNING: Not including the private key allows to check the wallet balance, transaction history, and create spend proposals from the export. However, does not allow to approve (sign) proposals, so <b>funds will not be accessible from the export</b>.
</span>
</span>
</div>
<button
ng-click="downloadWalletBackup()"
class="button button-standard button-primary"
ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
ng-style="{'background-color':wallet.color}"
ng-show="!isSafari && !isCordova">
<i class="fi-download"></i>
<span translate>Download</span>
</button>
<button
ng-click="viewWalletBackup()"
class="button button-standard button-primary"
ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
ng-style="{'background-color':wallet.color}"
ng-show="isSafari && !isCordova">
<i class="fi-eye"></i>
<span translate>View</span>
</button>
<div ng-show="isCordova">
<h4 translate>Export options</h4>
<button class="button button-standard button-primary"
<button
ng-click="downloadWalletBackup()"
class="button button-standard button-primary"
ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
ng-style="{'background-color':wallet.color}"
ng-click="copyWalletBackup()">
<i class="fi-clipboard-pencil"></i>
<span translate>Copy to clipboard</span></button>
<button class="button button-standard button-primary" ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
ng-show="!isSafari && !isCordova">
<i class="fi-download"></i>
<span translate>Download</span>
</button>
<button
ng-click="viewWalletBackup()"
class="button button-standard button-primary"
ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
ng-style="{'background-color':wallet.color}"
ng-click="sendWalletBackup()"><i class="fi-mail"></i>
<span translate>Send by email</span></button>
</div>
ng-show="isSafari && !isCordova">
<i class="fi-eye"></i>
<span translate>View</span>
</button>
<div ng-show="isCordova">
<h4 translate>Export options</h4>
<button class="button button-standard button-primary"
ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
ng-style="{'background-color':wallet.color}"
ng-click="copyWalletBackup()">
<i class="fi-clipboard-pencil"></i>
<span translate>Copy to clipboard</span></button>
<button class="button button-standard button-primary" ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
ng-style="{'background-color':wallet.color}"
ng-click="sendWalletBackup()"><i class="fi-mail"></i>
<span translate>Send by email</span></button>
</div>
</form>
</div>
<div ng-show="backupWalletPlainText" class="text-center card">
<div ng-show="backupWalletPlainText" class="text-center list">
<label class="item item-input item-stacked-label">
<span class="input-label" translate>Backup wallet</span>
<textarea rows="12">{{backupWalletPlainText}}</textarea>
</label>
<div class="item text-gray item-icon-left">

View File

@ -1,10 +1,10 @@
<div class="m20t text-gray" ng-show="formData.supported">
<div class="text-center m20b">
<div class="list" ng-show="formData.supported">
<div class="text-center m20t">
<qrcode size="220" version="8" error-correction-level="M" data="{{formData.exportWalletInfo}}"></qrcode>
</div>
<div class="text-center size-12 m10" translate>From the destination device, go to Add wallet &gt; Import wallet and scan this QR code</div>
<div class="text-center size-12 m20v" translate>From the destination device, go to Add wallet &gt; Import wallet and scan this QR code</div>
</div>
<div class="m20t text-gray" ng-show="!formData.supported">
<div class="text-center size-12 m10" translate>Exporting via QR not supported for this wallet</div>
<div class="list" ng-show="!formData.supported">
<div class="text-center size-12 m20v" translate>Exporting via QR not supported for this wallet</div>
</div>

View File

@ -12,20 +12,16 @@
<form name="importForm12" ng-submit="importMnemonic(importForm12)" novalidate>
<div class="list settings-list settings-input-group">
<div class="row">
<div class="col col-90">
<label class="item item-input item-stacked-label no-border">
<span class="input-label" translate>Type the Recovery Phrase (usually 12 words)</span>
<textarea ng-model="formData.words"
rows="3"
autocapitalize="off"
spellcheck="false"></textarea>
</label>
</div>
<div class="col text-center">
<label class="item item-input item-stacked-label no-border">
<span class="input-label" translate>Type the Recovery Phrase (usually 12 words)</span>
<div class="qr-scan-icon">
<qr-scanner class="qr-icon size-24" on-scan="processWalletInfo(data)"></qr-scanner>
<textarea ng-model="formData.words"
rows="3"
autocapitalize="off"
spellcheck="false"></textarea>
</div>
</div>
</label>
<div class="item item-divider"></div>