diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js index fd268671f..e3b29a12d 100644 --- a/src/js/controllers/amount.js +++ b/src/js/controllers/amount.js @@ -39,6 +39,10 @@ angular.module('copayApp.controllers').controller('amountController', function($ if (data.stateParams.noPrefix) { $scope.showWarningMessage = data.stateParams.noPrefix != 0; + if ($scope.showWarningMessage) { + var message = 'Address doesn\'t contain currency information, please make sure you are sending the correct currency.'; + popupService.showAlert('', message, function() {}, 'Ok'); + } } var config = configService.getSync().wallet.settings; @@ -245,6 +249,7 @@ angular.module('copayApp.controllers').controller('amountController', function($ }; $scope.changeUnit = function() { + $scope.amountModel.amount = '0'; if ($scope.alternativeAmount == 0) { $scope.alternativeAmount = null; @@ -293,9 +298,12 @@ angular.module('copayApp.controllers').controller('amountController', function($ $scope.pushDigit = function(digit) { if ($scope.amountModel.amount && $scope.amountModel.amount.length >= LENGTH_EXPRESSION_LIMIT) return; - if (!$scope.isAndroid && !$scope.isIos && $scope.amountModel.amount.indexOf('.') > -1 && digit == '.') return; + if (($scope.amountModel.amount.indexOf('.') > -1 || $scope.amountModel.amount == '') && digit == '.') return; + if ($scope.amountModel.amount == '0' && digit == '0') return; if (availableUnits[unitIndex].isFiat && $scope.amountModel.amount.indexOf('.') > -1 && $scope.amountModel.amount[$scope.amountModel.amount.indexOf('.') + 2]) return; - + + if ($scope.amountModel.amount == '0' && digit != '.') { $scope.amountModel.amount = ''} + $scope.amountModel.amount = ($scope.amountModel.amount + digit).replace('..', '.'); checkFontSize(); $scope.processAmount(); diff --git a/src/sass/views/amount.scss b/src/sass/views/amount.scss index cd77cb501..08892c88d 100644 --- a/src/sass/views/amount.scss +++ b/src/sass/views/amount.scss @@ -233,58 +233,238 @@ } } } - .keypad { - text-align: center; - font-size: 24px; - font-weight: lighter; - position: absolute; - bottom: 0; - width: 100%; - color: $v-mid-gray; - .row { - padding: 0 !important; - margin: 0 !important; - } + .scroll-content { + display: flex; + flex-direction: column; - .col { - line-height: 45px; - } + .send-amount { + flex: 1 1 auto; + display: flex; + flex-direction: column; + justify-content: center; - .operator { - background-color: $v-subtle-gray; - font-weight: normal; - cursor: pointer; + .send-amount-tool { + flex: 0 1 auto; - &:active { - background-color: $v-light-gray; + .send-amount-tool-input { + text-align: center; + position: relative; + padding: 10px 30px; + + .primary-amount { + input, .unit, .primary-amount-display { + font-size: 1.8em; + + @media (min-width: 375px) { + font-size: 2.1em; + } + + @media (min-width: 414px) { + font-size: 2.4em; + } + } + + &.long { + input, .unit, .primary-amount-display { + font-size: 1.6em; + + @media (min-width: 375px) { + font-size: 1.8em; + } + + @media (min-width: 414px) { + font-size: 2em; + } + } + } + + &.very-long { + input, .unit, .primary-amount-display { + font-size: 0.9em; + + @media (min-width: 375px) { + font-size: 1.3em; + } + + @media (min-width: 414px) { + font-size: 1.4em; + } + } + } + + + input { + border:0; + padding:0; + white-space:normal; + background:none; + line-height:1; + box-sizing:content-box; + display: inline-block; + vertical-align: middle; + margin: 0; + height: 1em; + margin-right: 5px; + font-family: 'ProximaNova'; + + @media (min-width: 375px) { + } + + @media (min-width: 414px) { + } + } + + .unit, + .primary-amount-display { + display: inline-block; + vertical-align: middle; + line-height: 1em; + } + + .unit { + font-weight: bold; + } + + .primary-amount-display { + margin-right: 5px; + word-break: break-all; + } + } + + .switch-currencies { + position: absolute; + right: 0; + top: 50%; + transform: translate(0, -50%); + padding: 5px; + + img { + width: 18px; + } + } + } + + .send-amount-actions { + margin-top: 15px; + display: flex; + align-items: center; + justify-content: center; + + .button { + flex: 1 1 auto; + line-height: 1.2em; + + + .button { + margin-left: 10px; + } + + span { + display: flex; + align-items: center; + justify-content: center; + } + } + } } } - .operator-send { - font-weight: bolder; - color: #fff; - background-color: $positive; - font-size: 36px; - cursor: pointer; - - &:active { - background-color: #eaeaea; + .button { + &.no-margin { + margin: 0; } } - .digit{ - cursor: pointer; - border-top: 1px solid $v-subtle-gray; - border-left: 1px solid $v-subtle-gray; - &:active { - background-color: $v-subtle-gray; - } + .notification-warning { + display: block; + padding: .75rem 1.25rem; + color: #856404; + background-color: #fff3cd; + border: 1px solid #ffeeba; + line-height: 1.4em; + margin-bottom: 20px; } - @media(max-height: 480px) { - font-size: 12px; + .keypad-container { + position: relative; + //flex: 0 1 196px; + @media (min-height: 667px) { + //flex: 0 1 224px; + } + + .keypad { + text-align: center; + font-size: 18px; + font-weight: lighter; + position: absolute; + bottom: 0; + width: 100%; + color: $v-mid-gray; + + @media (min-height: 667px) { + font-size: 24px; + } + + .row { + padding: 0 !important; + margin: 0 !important; + } + + .col { + line-height: 38px; + + @media (min-height: 667px) { + line-height: 45px; + } + } + + .row { + &:last-child { + .col { + padding-bottom: 10px; + } + } + } + + .operator { + background-color: $v-subtle-gray; + font-weight: normal; + cursor: pointer; + + &:active { + background-color: $v-light-gray; + } + } + + .operator-send { + font-weight: bolder; + color: #fff; + background-color: $positive; + font-size: 36px; + cursor: pointer; + + &:active { + background-color: #eaeaea; + } + } + + .digit{ + cursor: pointer; + border-top: 1px solid $v-subtle-gray; + border-left: 1px solid $v-subtle-gray; + transition: all 0.1s ease; + + &:active { + background-color: $v-subtle-gray; + } + } + + @media(max-height: 480px) { + font-size: 12px; + + } + } } } -} +} \ No newline at end of file diff --git a/www/css/main.css b/www/css/main.css index 1cc07e123..9a78aed23 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -10425,42 +10425,146 @@ textarea.d-block { margin-top: 0; font-size: 16px; } } -#view-amount .keypad { - text-align: center; - font-size: 24px; - font-weight: lighter; - position: absolute; - bottom: 0; - width: 100%; - color: #667; } - #view-amount .keypad .row { - padding: 0 !important; - margin: 0 !important; } - #view-amount .keypad .col { - line-height: 45px; } - #view-amount .keypad .operator { - background-color: #f2f2f2; - font-weight: normal; - cursor: pointer; } - #view-amount .keypad .operator:active { - background-color: #9b9bab; } - #view-amount .keypad .operator-send { - font-weight: bolder; - color: #fff; - background-color: #494949; - font-size: 36px; - cursor: pointer; } - #view-amount .keypad .operator-send:active { - background-color: #eaeaea; } - #view-amount .keypad .digit { - cursor: pointer; - border-top: 1px solid #f2f2f2; - border-left: 1px solid #f2f2f2; } - #view-amount .keypad .digit:active { - background-color: #f2f2f2; } - @media (max-height: 480px) { - #view-amount .keypad { - font-size: 12px; } } +#view-amount .scroll-content { + display: flex; + flex-direction: column; } + #view-amount .scroll-content .send-amount { + flex: 1 1 auto; + display: flex; + flex-direction: column; + justify-content: center; } + #view-amount .scroll-content .send-amount .send-amount-tool { + flex: 0 1 auto; } + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input { + text-align: center; + position: relative; + padding: 10px 30px; } + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display { + font-size: 1.8em; } + @media (min-width: 375px) { + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display { + font-size: 2.1em; } } + @media (min-width: 414px) { + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display { + font-size: 2.4em; } } + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .primary-amount-display { + font-size: 1.6em; } + @media (min-width: 375px) { + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .primary-amount-display { + font-size: 1.8em; } } + @media (min-width: 414px) { + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.long .primary-amount-display { + font-size: 2em; } } + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .primary-amount-display { + font-size: 0.9em; } + @media (min-width: 375px) { + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .primary-amount-display { + font-size: 1.3em; } } + @media (min-width: 414px) { + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount.very-long .primary-amount-display { + font-size: 1.4em; } } + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount input { + border: 0; + padding: 0; + white-space: normal; + background: none; + line-height: 1; + box-sizing: content-box; + display: inline-block; + vertical-align: middle; + margin: 0; + height: 1em; + margin-right: 5px; + font-family: 'ProximaNova'; } + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit, + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display { + display: inline-block; + vertical-align: middle; + line-height: 1em; } + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit { + font-weight: bold; } + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display { + margin-right: 5px; + word-break: break-all; } + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .switch-currencies { + position: absolute; + right: 0; + top: 50%; + transform: translate(0, -50%); + padding: 5px; } + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .switch-currencies img { + width: 18px; } + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-actions { + margin-top: 15px; + display: flex; + align-items: center; + justify-content: center; } + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-actions .button { + flex: 1 1 auto; + line-height: 1.2em; } + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-actions .button + .button { + margin-left: 10px; } + #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-actions .button span { + display: flex; + align-items: center; + justify-content: center; } + #view-amount .scroll-content .button.no-margin { + margin: 0; } + #view-amount .scroll-content .notification-warning { + display: block; + padding: .75rem 1.25rem; + color: #856404; + background-color: #fff3cd; + border: 1px solid #ffeeba; + line-height: 1.4em; + margin-bottom: 20px; } + #view-amount .scroll-content .keypad-container { + position: relative; } + #view-amount .scroll-content .keypad-container .keypad { + text-align: center; + font-size: 18px; + font-weight: lighter; + position: absolute; + bottom: 0; + width: 100%; + color: #667; } + @media (min-height: 667px) { + #view-amount .scroll-content .keypad-container .keypad { + font-size: 24px; } } + #view-amount .scroll-content .keypad-container .keypad .row { + padding: 0 !important; + margin: 0 !important; } + #view-amount .scroll-content .keypad-container .keypad .col { + line-height: 38px; } + @media (min-height: 667px) { + #view-amount .scroll-content .keypad-container .keypad .col { + line-height: 45px; } } + #view-amount .scroll-content .keypad-container .keypad .row:last-child .col { + padding-bottom: 10px; } + #view-amount .scroll-content .keypad-container .keypad .operator { + background-color: #f2f2f2; + font-weight: normal; + cursor: pointer; } + #view-amount .scroll-content .keypad-container .keypad .operator:active { + background-color: #9b9bab; } + #view-amount .scroll-content .keypad-container .keypad .operator-send { + font-weight: bolder; + color: #fff; + background-color: #494949; + font-size: 36px; + cursor: pointer; } + #view-amount .scroll-content .keypad-container .keypad .operator-send:active { + background-color: #eaeaea; } + #view-amount .scroll-content .keypad-container .keypad .digit { + cursor: pointer; + border-top: 1px solid #f2f2f2; + border-left: 1px solid #f2f2f2; + transition: all 0.1s ease; } + #view-amount .scroll-content .keypad-container .keypad .digit:active { + background-color: #f2f2f2; } + @media (max-height: 480px) { + #view-amount .scroll-content .keypad-container .keypad { + font-size: 12px; } } #view-confirm { background-color: #ffffff; } diff --git a/www/views/amount.html b/www/views/amount.html index 75eddab3b..13a795b0d 100644 --- a/www/views/amount.html +++ b/www/views/amount.html @@ -1,136 +1,85 @@ - - - {{'Enter amount' | translate}} - - - - -
-
Recipient
- -
- - - - - - - - - - - - - - - {{toName || displayAddress || toAddress}} -
-
- -
- Note: Address doesn't contain currency information, please make sure you are sending the correct currency. -
-
- Amount + + + {{'Enter amount' | translate}} + + + + + +
+ +
+
+ Minimum amount: {{minShapeshiftAmount}}
+ Maximum amount: {{maxShapeshiftAmount}}
+
+
+
+
+ {{ amountModel.amount || 0 }}{{unit}} +
+ {{globalResult}} {{unit}} +
+ {{alternativeAmount || '0.00'}} {{alternativeUnit}} +
+
+
+
+ + +
+
-
- Minimum amount: {{minShapeshiftAmount}}
- Maximum amount: {{maxShapeshiftAmount}}
-
-
-
- {{amountModel.amount || "0.00" }} - {{unit}} -
-
-
{{globalResult}} {{unit}}
-
<> {{alternativeAmount || '0.00'}} {{alternativeUnit}}
-
-
- - + +
+
+ +
+
7
+
8
+
9
+
+ +
+
4
+
5
+
6
+
+ +
+
1
+
2
+
3
+
+ +
+
.
+
0
+
+
-
- -
- Note: Address doesn't contain currency information, please make sure you are sending the correct currency.

- Amount
-
- Minimum amount: {{minShapeshiftAmount}}
- Maximum amount: {{maxShapeshiftAmount}}
-
-
- - - {{unit}} - - {{globalResult}} {{unit}} - <> {{alternativeAmount || '0.00'}} {{alternativeUnit}} -
-
- - -
-
- -
- -
- -
-
-
-
- -
-
- -
-
7
-
8
-
9
-
÷
-
- -
-
4
-
5
-
6
-
×
-
- -
-
1
-
2
-
3
-
+
-
- -
-
.
-
0
-
-
-
-
- - - + + \ No newline at end of file