diff --git a/src/js/controllers/confirm.js b/src/js/controllers/confirm.js index d8dc250c0..3fa1febeb 100644 --- a/src/js/controllers/confirm.js +++ b/src/js/controllers/confirm.js @@ -40,6 +40,8 @@ angular.module('copayApp.controllers').controller('confirmController', function( $scope.toAmount = parseInt($scope.toAmount); $scope.amountStr = txFormatService.formatAmountStr($scope.toAmount); + $scope.displayAmount = getDisplayAmount($scope.amountStr); + $scope.displayUnit = getDisplayUnit($scope.amountStr); var networkName = (new bitcore.Address($scope.toAddress)).network.name; $scope.network = networkName; @@ -65,6 +67,7 @@ angular.module('copayApp.controllers').controller('confirmController', function( if (err || !status) { $log.error(err); } else { + w.status = status; if (!status.availableBalanceSat) $log.debug('No balance available in: ' + w.name); if (status.availableBalanceSat > $scope.toAmount) { filteredWallets.push(w); @@ -75,6 +78,7 @@ angular.module('copayApp.controllers').controller('confirmController', function( if (++index == wallets.length) { if (!lodash.isEmpty(filteredWallets)) { $scope.wallets = lodash.clone(filteredWallets); + setWallet($scope.wallets[0]); } else { if (!enoughFunds) @@ -108,6 +112,14 @@ angular.module('copayApp.controllers').controller('confirmController', function( setWallet(wallet, true); }); + $scope.showWalletSelector = function() { + $scope.showWallets = true; + }; + + $scope.onWalletSelect = function(wallet) { + setWallet(wallet); + }; + $scope.showDescriptionPopup = function() { var message = gettextCatalog.getString('Add description'); @@ -123,6 +135,14 @@ angular.module('copayApp.controllers').controller('confirmController', function( }); }; + function getDisplayAmount(amountStr) { + return amountStr.split(' ')[0]; + } + + function getDisplayUnit(amountStr) { + return amountStr.split(' ')[1]; + } + var setFromPayPro = function(uri, cb) { if (!cb) cb = function() {}; diff --git a/src/js/directives/actionSheet.js b/src/js/directives/actionSheet.js new file mode 100644 index 000000000..4ca9fddb0 --- /dev/null +++ b/src/js/directives/actionSheet.js @@ -0,0 +1,18 @@ +'use strict'; + +angular.module('copayApp.directives') + .directive('actionSheet', function() { + return { + restrict: 'E', + templateUrl: 'views/includes/actionSheet.html', + transclude: true, + scope: { + show: '=actionSheetShow', + }, + link: function(scope, element, attrs) { + scope.hide = function() { + scope.show = false; + }; + } + }; + }); diff --git a/src/js/directives/walletSelector.js b/src/js/directives/walletSelector.js new file mode 100644 index 000000000..97149d528 --- /dev/null +++ b/src/js/directives/walletSelector.js @@ -0,0 +1,27 @@ +'use strict'; + +angular.module('copayApp.directives') + .directive('walletSelector', function($timeout) { + return { + restrict: 'E', + templateUrl: 'views/includes/walletSelector.html', + transclude: true, + scope: { + show: '=walletSelectorShow', + wallets: '=walletSelectorWallets', + selectedWallet: '=walletSelectorSelectedWallet', + onSelect: '=walletSelectorOnSelect' + }, + link: function(scope, element, attrs) { + scope.hide = function() { + scope.show = false; + }; + scope.selectWallet = function(wallet) { + $timeout(function() { + scope.hide(); + }, 100); + scope.onSelect(wallet); + }; + } + }; + }); diff --git a/src/sass/buttons.scss b/src/sass/buttons.scss index 80139248f..f411f087e 100644 --- a/src/sass/buttons.scss +++ b/src/sass/buttons.scss @@ -19,7 +19,8 @@ $button-secondary-border: transparent; $button-secondary-active-bg: darken($subtle-gray, 5%); $button-secondary-active-border: transparent; -%button-standard { +%button-standard, +click-to-accept { width: 85%; max-width: 300px; margin-left: auto; diff --git a/src/sass/views/confirm.scss b/src/sass/views/confirm.scss index 667184165..172f82173 100644 --- a/src/sass/views/confirm.scss +++ b/src/sass/views/confirm.scss @@ -1,30 +1,3 @@ #view-confirm { - .icon-bitpay-card { - background-image: url("../img/icon-bitpay.svg"); - } - .slide-to-pay{ - bottom: 149px; - } - .send-gravatar { - left: 11px; - position: absolute; - top: 10px; - } - .accept-slide { - position: fixed; - bottom: 0; - width: 100%; - height: 100px; - background-color: #647CE8; - color: #ffffff; - font-size: 25px; - text-align: center; - padding-top: 34px; - line-height: 32px; - } - .accept-slide i { - float: right; - font-size: 32px; - margin-right: 20px; - } + } diff --git a/src/sass/views/includes/actionSheet.scss b/src/sass/views/includes/actionSheet.scss new file mode 100644 index 000000000..a0137618c --- /dev/null +++ b/src/sass/views/includes/actionSheet.scss @@ -0,0 +1,58 @@ +action-sheet { + .bp-action-sheet { + $border-color: #EFEFEF; + + &__sheet { + background: #fff; + width: calc(100% + 1px); + position: fixed; + bottom: 0; + left: 50%; + transform: translateY(100%) translateX(-50%); + transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1); + z-index: 100; + padding-top: 1.75rem; + padding-left: 2rem; + padding-right: .75rem; + color: #2f2f2f; + padding-bottom: 3.5rem; + max-width: 550px; + max-height: 100vh; + overflow: scroll; + + &.slide-up { + transform: translateY(0) translateX(-50%); + box-shadow: 0px 2px 13px 3px rgba(0, 0, 0, .3); + } + + .back-arrow { + padding-bottom: 1.25rem; + cursor: pointer; + } + + .header { + font-weight: 600; + padding-bottom: 1rem; + border-bottom: 1px solid $border-color; + margin-bottom: 1px; + } + } + + &__backdrop { + height: 100%; + width: 100%; + position: fixed; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0); + transition: background 250ms cubic-bezier(0.4, 0.0, 0.2, 1);; + pointer-events: none; + z-index: 99; + + &.fade-in { + background: rgba(0, 0, 0, .4); + pointer-events: all; + } + } + } +} diff --git a/src/sass/views/includes/txp-details.scss b/src/sass/views/includes/txp-details.scss index 76f48336d..c5d216e8f 100644 --- a/src/sass/views/includes/txp-details.scss +++ b/src/sass/views/includes/txp-details.scss @@ -1,4 +1,5 @@ -#txp-details { +#txp-details, +#view-confirm { $item-lateral-padding: 20px; $item-vertical-padding: 10px; $item-border-color: #EFEFEF; @@ -8,7 +9,7 @@ background: #f5f5f5; } .slide-to-pay { - bottom: 100px; + bottom: 92px; } .head { padding: 30px $item-lateral-padding 4rem; @@ -48,9 +49,19 @@ span { display: block; } + .badge { + border-radius: 0; + padding: .5rem; + } .item { color: #4A4A4A; - padding: $item-vertical-padding $item-lateral-padding; + padding-top: $item-vertical-padding; + padding-bottom: $item-vertical-padding; + padding-left: $item-lateral-padding; + + &:not(.item-icon-right) { + padding-right: $item-lateral-padding; + } .label { font-size: 14px; @@ -61,7 +72,8 @@ &.single-line { display: flex; align-items: center; - padding: 17px $item-lateral-padding; + padding-top: 17px; + padding-bottom: 17px; .label { margin: 0; @@ -112,15 +124,23 @@ display: flex; align-items: center; padding: .2rem 0; - i { - padding: 0; + margin-bottom: 5px; + + ~ .bp-arrow-right { + top: 14px; } - img { - height: 24px; - width: 24px; - padding: 2px; - margin-right: .7rem; - box-shadow: none; + + > i { + padding: 0; + position: static; + + > img { + height: 24px; + width: 24px; + padding: 2px; + margin-right: .7rem; + box-shadow: none; + } } } diff --git a/src/sass/views/includes/walletSelector.scss b/src/sass/views/includes/walletSelector.scss new file mode 100644 index 000000000..d0990b71b --- /dev/null +++ b/src/sass/views/includes/walletSelector.scss @@ -0,0 +1,62 @@ +wallet-selector { + + $border-color: #EFEFEF; + + .wallet-selector { + .wallet { + border: 0; + padding-right: 0; + padding-top: 0; + padding-left: 65px; + padding-bottom: 0; + margin-bottom: 1px; + overflow: visible; + + > i { + padding: 0; + margin-left: -5px; + + > img { + height: 39px; + width: 39px; + padding: 4px; + } + } + } + .wallet-inner { + display: flex; + position: relative; + padding-top: 16px; + padding-bottom: 16px; + + &::after { + display: block; + position: absolute; + width: 100%; + height: 1px; + background: $border-color; + bottom: 0; + right: 0; + content: ''; + } + + .check { + padding: 0 1.2rem; + } + } + .wallet-details { + flex-grow: 1; + + .wallet-name { + padding-bottom: 5px; + } + + .wallet-balance { + color: #3A3A3A; + font-family: "Roboto-Light"; + } + + } + } + +} diff --git a/src/sass/views/views.scss b/src/sass/views/views.scss index e8d8e58e1..7ecf39b7a 100644 --- a/src/sass/views/views.scss +++ b/src/sass/views/views.scss @@ -16,6 +16,7 @@ @import "wallet-backup-phrase"; @import "zero-state"; @import "onboarding/onboarding"; +@import "includes/actionSheet"; @import "includes/walletActivity"; @import "includes/wallets"; @import "includes/modals/modals"; @@ -25,4 +26,5 @@ @import "includes/tx-details"; @import "includes/txp-details"; @import "includes/tx-status"; +@import "includes/walletSelector"; @import "integrations/coinbase.scss"; diff --git a/www/img/icon-back-arrow.svg b/www/img/icon-back-arrow.svg new file mode 100644 index 000000000..18e06f27b --- /dev/null +++ b/www/img/icon-back-arrow.svg @@ -0,0 +1,18 @@ + + + + controls-ico-back + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/www/img/icon-check-selected.svg b/www/img/icon-check-selected.svg new file mode 100644 index 000000000..e68f11eb4 --- /dev/null +++ b/www/img/icon-check-selected.svg @@ -0,0 +1,24 @@ + + + + Icons/Check/Green + Created with Sketch. + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/www/views/confirm.html b/www/views/confirm.html index cb2a3063b..01aa35e97 100644 --- a/www/views/confirm.html +++ b/www/views/confirm.html @@ -7,62 +7,55 @@ - - -
-
- Sending -
{{amountStr}}
-
{{alternativeAmountStr}}
-
-
- -
-
Fee: {{feeLevel}} - - {{fee || '...'}} - -
- -
- -
- - -
- + +
+
+
+ + Sending
-
- To: {{toAddress}} -

{{toName}}

- -
- - - {{_paypro.domain}} +
+
{{displayAmount}} {{displayUnit}}
+
{{alternativeAmountStr}}
+
+
+
+
+ To + + + {{toAddress}} + + +
+
+ Insufficient funds +
+ + From +
+ + + +
{{wallet.name}}
-
-
-
- -
- No appropiate wallet to make this payment -
- - - -
- Insufficient funds -
- - - -
-
- - Add description - {{description}} - + + + + {{'Add Memo'|translate}} + + {{description}} + + + + + Fee + + {{fee}} + + +
Payment Sent Proposal Created + + + + diff --git a/www/views/includes/actionSheet.html b/www/views/includes/actionSheet.html new file mode 100644 index 000000000..df159bc2b --- /dev/null +++ b/www/views/includes/actionSheet.html @@ -0,0 +1,10 @@ +
+
+
+ +
Send from
+ +
diff --git a/www/views/includes/walletSelector.html b/www/views/includes/walletSelector.html new file mode 100644 index 000000000..ba97edad0 --- /dev/null +++ b/www/views/includes/walletSelector.html @@ -0,0 +1,30 @@ + + + + + +
+
+
+ {{w.name}} +
+

+ + Incomplete + + + {{w.status.availableBalanceStr}} + [Balance Hidden] + + +   +

+
+ +
+ +