Update: Improves send screen layout

This commit is contained in:
Sam Cheng Hung 2018-04-05 11:20:49 +09:00
commit 8efff48aeb
8 changed files with 425 additions and 134 deletions

View file

@ -29,8 +29,8 @@
</div>
</div>
<div ng-show="!isAndroid && !isIos" ng-class="{'amount-pane-recipient': !customAmount && !nextStep,'amount-pane-no-recipient': customAmount || nextStep}">
<span class="recipient-label" ng-if="showWarningMessage" translate>Note: Address doesn't contain currency information, please make sure you are sending the correct currency.</span>
<div ng-show="!isAndroid && !isIos" class="send-amount" ng-class="{'amount-pane-recipient': !customAmount && !nextStep,'amount-pane-no-recipient': customAmount || nextStep}">
<span class="recipient-label notification-warning" ng-if="showWarningMessage" translate>Note: Address doesn't contain currency information, please make sure you are sending the correct currency.</span>
<div class="amount-bar oh">
<div class="title">
<span translate>Amount</span>
@ -61,77 +61,77 @@
</div>
</div>
<div class="item" ng-show="isAndroid || isIos">
<span class="recipient-label" ng-if="showWarningMessage" translate>Note: Address doesn't contain currency information, please make sure you are sending the correct currency.</span><br/><br/>
<span class="label" translate>Amount</span><br/>
<div class="item send-amount" ng-show="isAndroid || isIos">
<span class="recipient-label notification-warning" ng-if="showWarningMessage" translate>Note: Address doesn't contain currency information, please make sure you are sending the correct currency.</span>
<div ng-if="shapeshiftOrderId">
Minimum amount: {{minShapeshiftAmount}} <br/>
Maximum amount: {{maxShapeshiftAmount}} <br/>
</div>
<div class="amount">
<span>
<input type="number" ng-model="amountModel.amount" ng-change="processAmount()" placeholder="Enter amount" focus-me>
<a class="amount__currency-toggle-mobile" ng-click="changeUnit()">{{unit}}</a>
</span>
<span ng-show="globalResult">{{globalResult}} {{unit}}</span>
<span>&lt;&gt; {{alternativeAmount || '0.00'}} {{alternativeUnit}}</span>
</div>
<div>
<button class="button button-sendmax" ng-click="sendMax()">
<span>
<i class="icon ion-ios-speedometer-outline"></i>&emsp;
<span translate>Send max amount</span>
</span>
</button>
<button class="button button-sendmax" ng-click="changeUnit()">
<span>Switch Currencies</span>
</button>
</div>
</div>
<div class="item" ng-show="isAndroid || isIos">
<button class="button button-standard button-primary" ng-disabled="!allowSend" ng-click="finish()">
Confirm
</button>
</div>
<div ng-show="!isAndroid && !isIos">
<div class="keypad">
<div class="row">
<div class="col col-25 col-offset-75 operator-send"
ng-show="allowSend" ng-click="finish()">
<i class="icon ion-ios-arrow-thin-right"></i>
<div class="send-amount-tool">
<div class="send-amount-tool-input amount">
<div class="primary-amount"
ng-class="{long: amountModel.amount.length > 5, 'very-long': amountModel.amount.length > 10}">
<span class="primary-amount-display">{{ amountModel.amount || 0 }}</span><span class="unit">{{unit}}</span>
</div>
<span ng-show="globalResult">{{globalResult}} {{unit}}</span>
<div class="alternative-amount">
<span>{{alternativeAmount || '0.00'}} {{alternativeUnit}}</span>
</div>
<div class="switch-currencies" ng-click="changeUnit()"><img src="img/icon-convert.svg"></div>
</div>
<div class="send-amount-actions text-center">
<button class="button button-sendmax" ng-click="sendMax()">
<span>
<i class="icon ion-ios-speedometer-outline"></i>&emsp;
<span translate>Send max amount</span>
</span>
</button>
</div>
</div>
</div>
<div class="row">
<div class="col digit" ng-click="pushDigit('7')">7</div>
<div class="col digit" ng-click="pushDigit('8')">8</div>
<div class="col digit" ng-click="pushDigit('9')">9</div>
<div class="col operator" ng-click="pushOperator('/')">&divide;</div>
</div>
<div class="keypad-container">
<div class="keypad">
<div class="row">
<div class="col col-25 col-offset-75 operator-send"
ng-show="allowSend" ng-click="finish()">
<i class="icon ion-ios-arrow-thin-right"></i>
</div>
</div>
<div class="row">
<div class="col digit" ng-click="pushDigit('4')">4</div>
<div class="col digit" ng-click="pushDigit('5')">5</div>
<div class="col digit" ng-click="pushDigit('6')">6</div>
<div class="col operator" ng-click="pushOperator('x')">&times;</div>
</div>
<div class="row">
<div class="col digit" ng-click="pushDigit('7')">7</div>
<div class="col digit" ng-click="pushDigit('8')">8</div>
<div class="col digit" ng-click="pushDigit('9')">9</div>
</div>
<div class="row">
<div class="col digit" ng-click="pushDigit('1')">1</div>
<div class="col digit" ng-click="pushDigit('2')">2</div>
<div class="col digit" ng-click="pushDigit('3')">3</div>
<div class="col operator" ng-click="pushOperator('+')">&plus;</div>
</div>
<div class="row">
<div class="col digit" ng-click="pushDigit('4')">4</div>
<div class="col digit" ng-click="pushDigit('5')">5</div>
<div class="col digit" ng-click="pushDigit('6')">6</div>
</div>
<div class="row">
<div class="col digit" ng-click="pushDigit('.')">.</div>
<div class="col digit" ng-click="pushDigit('0')">0</div>
<div class="col digit icon ion-backspace-outline" ng-click="removeDigit()"></div>
<div class="col operator" ng-click="pushOperator('-')">&minus;</div>
<div class="row">
<div class="col digit" ng-click="pushDigit('1')">1</div>
<div class="col digit" ng-click="pushDigit('2')">2</div>
<div class="col digit" ng-click="pushDigit('3')">3</div>
</div>
<div class="row">
<div class="col digit" ng-click="pushDigit('.')">.</div>
<div class="col digit" ng-click="pushDigit('0')">0</div>
<div class="col digit icon ion-backspace-outline" ng-click="removeDigit()"></div>
</div>
</div>
</div>
<button
ng-show="isAndroid || isIos"
class="button button-full button-primary no-margin"
ng-disabled="!allowSend"
ng-click="finish()"
translate>
Next
</button>
</ion-content>
</ion-view>