From 8a0575d238690d7dec073b8adcbc120fe0923693 Mon Sep 17 00:00:00 2001 From: Sam Cheng Hung Date: Wed, 18 Jul 2018 16:41:52 +0800 Subject: [PATCH 01/25] Add empty view and controller for review transaction route --- src/js/controllers/review.js | 5 + src/js/routes.js | 12 + www/css/main.css | 1162 ++++++++++++++++++---------------- www/index.html | 7 +- www/views/review.html | 45 ++ 5 files changed, 670 insertions(+), 561 deletions(-) create mode 100644 src/js/controllers/review.js create mode 100644 www/views/review.html diff --git a/src/js/controllers/review.js b/src/js/controllers/review.js new file mode 100644 index 000000000..1effff0ba --- /dev/null +++ b/src/js/controllers/review.js @@ -0,0 +1,5 @@ +'use strict'; + +angular.module('copayApp.controllers').controller('reviewController', function($rootScope, $scope, $interval, $filter, $timeout, $ionicScrollDelegate, gettextCatalog, walletService, platformInfo, lodash, configService, $stateParams, $window, $state, $log, profileService, bitcore, bitcoreCash, txFormatService, ongoingProcess, $ionicModal, popupService, $ionicHistory, $ionicConfig, payproService, feeService, bwcError, txConfirmNotification, externalLinkService, firebaseEventsService, soundService) { + +}); diff --git a/src/js/routes.js b/src/js/routes.js index 8277314e5..79b88e2f7 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -316,6 +316,18 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr } } }) + .state('tabs.send.review', { + url: '/review', + views: { + 'tab-send@tabs': { + controller: 'reviewController', + templateUrl: 'views/review.html' + } + }, + params: { + paypro: null + } + }) /* * diff --git a/www/css/main.css b/www/css/main.css index b4e67edac..a87bc4be9 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -9970,7 +9970,7 @@ ion-nav-bar.hide { .card { margin: 20px 14px; } -ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm:before, ion-view#copayers-invitation:before, ion-view#tab-home:before, ion-view#tab-receive:before, ion-view#tab-send:before, ion-view.settings:before, ion-view#bitpayCard:before, ion-view#bitpayCard-intro:before, ion-view#view-address-book:before, ion-view#addresses:before, ion-view#send-feedback:before, ion-view#choose-fee-level:before, ion-view#txp-details:before, ion-view#coinbase:before, ion-view#glidera:before, ion-view#amazon:before, ion-view#mercadolibre:before, ion-view#custom-amount:before { +ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm:before, ion-view#copayers-invitation:before, ion-view#tab-home:before, ion-view#tab-receive:before, ion-view#tab-send:before, ion-view.settings:before, ion-view#bitpayCard:before, ion-view#bitpayCard-intro:before, ion-view#view-address-book:before, ion-view#addresses:before, ion-view#choose-fee-level:before, ion-view#txp-details:before, ion-view#coinbase:before, ion-view#glidera:before, ion-view#amazon:before, ion-view#mercadolibre:before, ion-view#custom-amount:before { content: " "; display: block; position: absolute; @@ -9980,7 +9980,7 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm height: 44px; background-color: #fab915; } -.platform-ios.platform-cordova:not(.fullscreen) ion-view.deflash-blue:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#view-amount:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#view-confirm:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#copayers-invitation:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#tab-home:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#tab-receive:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#tab-send:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view.settings:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#bitpayCard:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#bitpayCard-intro:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#view-address-book:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#addresses:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#send-feedback:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#choose-fee-level:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#txp-details:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#coinbase:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#glidera:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#amazon:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#mercadolibre:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#custom-amount:before { +.platform-ios.platform-cordova:not(.fullscreen) ion-view.deflash-blue:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#view-amount:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#view-confirm:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#copayers-invitation:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#tab-home:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#tab-receive:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#tab-send:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view.settings:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#bitpayCard:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#bitpayCard-intro:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#view-address-book:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#addresses:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#choose-fee-level:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#txp-details:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#coinbase:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#glidera:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#amazon:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#mercadolibre:before, .platform-ios.platform-cordova:not(.fullscreen) ion-view#custom-amount:before { height: 64px; } .just-a-hint, .icon.bp-arrow-right, .icon.bp-arrow-down, .icon.bp-arrow-up { @@ -10071,10 +10071,12 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm .loading .spinner svg { margin-top: 0; } -.button.button-primary.button-standard, .button.button-secondary.button-standard, .button.button-light.button-standard, .button.button-assertive.button-standard, +.button.button-primary.button-standard, .button.button-secondary.button-standard, .button.button-light.button-standard, .button.button-white.button-standard, .button.button-green.button-standard, .button.button-assertive.button-standard, .onboarding .button.button-primary.button-standard, .onboarding .button.button-secondary.button-standard, .onboarding .button.button-light.button-standard, +.onboarding .button.button-white.button-standard, +.onboarding .button.button-green.button-standard, .onboarding .button.button-assertive.button-standard { width: 85%; max-width: 300px; @@ -10118,10 +10120,12 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm box-shadow: none; color: #fff; } -.button.button-primary.button-standard + .button-standard, .button.button-secondary.button-standard + .button-standard, .button.button-light.button-standard + .button-standard, .button.button-assertive.button-standard + .button-standard, +.button.button-primary.button-standard + .button-standard, .button.button-secondary.button-standard + .button-standard, .button.button-light.button-standard + .button-standard, .button.button-white.button-standard + .button-standard, .button.button-green.button-standard + .button-standard, .button.button-assertive.button-standard + .button-standard, .onboarding .button.button-primary.button-standard + .button-standard, .onboarding .button.button-secondary.button-standard + .button-standard, .onboarding .button.button-light.button-standard + .button-standard, +.onboarding .button.button-white.button-standard + .button-standard, +.onboarding .button.button-green.button-standard + .button-standard, .onboarding .button.button-assertive.button-standard + .button-standard { margin-top: 1rem; } @@ -10183,8 +10187,67 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm font-size: 0.7em !important; display: inline !important; } -.button.button-full { - display: block; } +.button { + border-radius: 6px; } + .button.button-full { + display: block; } + .button-green { + border-color: #FFF; + background-color: #719561; + color: #FFF; + border: 0px; + box-shadow: 0 2px 11px 0 #C1C1C1; } + .button-green:hover { + color: #FFF; + text-decoration: none; } + .button-green.active, .button-green.activated { + border-color: #FFF; + background-color: #606060; } + .button-green.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #FFF; } + .button-green.button-icon { + border-color: transparent; + background: none; } + .button-green.button-outline { + border-color: #C1C1C1; + background: transparent; + color: #C1C1C1; } + .button-green.button-outline.active, .button-green.button-outline.activated { + background-color: #C1C1C1; + box-shadow: none; + color: #fff; } + .button-white { + border-color: #C1C1C1; + background-color: #FFF; + color: #606060; + box-shadow: 0 2px 11px 0 #C1C1C1; } + .button-white:hover { + color: #606060; + text-decoration: none; } + .button-white.active, .button-white.activated { + border-color: #FFF; + background-color: #C1C1C1; } + .button-white.button-clear { + border-color: transparent; + background: none; + box-shadow: none; + color: #FFF; } + .button-white.button-icon { + border-color: transparent; + background: none; } + .button-white.button-outline { + border-color: #C1C1C1; + background: transparent; + color: #C1C1C1; } + .button-white.button-outline.active, .button-white.button-outline.activated { + background-color: #C1C1C1; + box-shadow: none; + color: #fff; } + .button-white.activated { + color: #FFF; } .button-clear { background: none !important; } @@ -10197,6 +10260,22 @@ textarea.d-block { display: block; width: 100%; } +qrcode { + position: relative; } + qrcode.qr-overlay::before { + content: ""; + background-size: 100% 100%; + display: block; + left: 88px; + margin-top: 88px; + width: 44px; + height: 44px; + position: absolute; } + qrcode.qr-overlay--bch::before { + background-image: url("../img/qr-overlay-bch.png"); } + qrcode.qr-overlay--btc::before { + background-image: url("../img/qr-overlay-btc.png"); } + .center-block { float: none; margin: 0 auto; } @@ -10237,6 +10316,10 @@ textarea.d-block { font-weight: 700; } #tab-home .card > .item-heading .icon, #tab-home .list > .item-heading .icon, #tab-send .card > .item-heading .icon, #tab-send .list > .item-heading .icon { color: #667; } + #tab-home .card > .item-heading .subtitle, #tab-home .list > .item-heading .subtitle, #tab-send .card > .item-heading .subtitle, #tab-send .list > .item-heading .subtitle { + color: #667; + font-size: 12px; + font-weight: 300; } #view-add .item { margin-bottom: 10px; @@ -10260,349 +10343,345 @@ textarea.d-block { #view-add .bg.join { padding: 10px; } -#view-amount .recipient-label { - font-size: 14px; - padding-bottom: 0; - color: #667; } - -#view-amount .item-no-bottom-border + .item { - border-top: 0; } - -#view-amount .icon-bitpay-card { - background-image: url("../img/icon-bitpay.svg"); } - -#view-amount .icon-amazon { - background-image: url("../img/icon-amazon.svg"); } - -@media (max-width: 480px) { - #view-amount .bitcoin-address { - font-size: 13px; - padding-left: 48px; } - #view-amount .bitcoin-address .icon { - left: 8px; - font-size: 24px; } - #view-amount .bitcoin-address .big-icon-svg { - left: 5px; } - #view-amount .bitcoin-address .big-icon-svg > .bg { - width: 30px; - height: 30px; - box-shadow: none; } } - -@media (max-width: 320px) { - #view-amount .bitcoin-address > span:last-child { - margin-left: -2px; } } - -#view-amount .send-gravatar { - left: 11px; - position: absolute; - top: 10px; } - -#view-amount .amount span input { - display: inline; - width: 120px; } - -#view-amount .amount-pane-recipient { - position: absolute; - top: 95px; - bottom: 0; - width: 100%; - background-color: #fff; - padding: 0 16px; } - #view-amount .amount-pane-recipient .amount-bar { - padding: 24px 0; - font-size: 18px; } - @media (max-height: 480px) { - #view-amount .amount-pane-recipient .amount-bar { - padding: 0px; } } - @media (max-width: 320px) { - #view-amount .amount-pane-recipient .amount-bar { - padding: 0px; } } - #view-amount .amount-pane-recipient .amount-bar .title { - float: left; - padding-top: 10px; - color: #445; - font-weight: bold; } +#view-amount { + background: #494949; } + #view-amount .recipient-label { + font-size: 14px; + padding-bottom: 0; + color: #667; } + #view-amount .item-no-bottom-border + .item { + border-top: 0; } + #view-amount .icon-bitpay-card { + background-image: url("../img/icon-bitpay.svg"); } + #view-amount .icon-amazon { + background-image: url("../img/icon-amazon.svg"); } + @media (max-width: 480px) { + #view-amount .bitcoin-address { + font-size: 13px; + padding-left: 48px; } + #view-amount .bitcoin-address .icon { + left: 8px; + font-size: 24px; } + #view-amount .bitcoin-address .big-icon-svg { + left: 5px; } + #view-amount .bitcoin-address .big-icon-svg > .bg { + width: 30px; + height: 30px; + box-shadow: none; } } + @media (max-width: 320px) { + #view-amount .bitcoin-address > span:last-child { + margin-left: -2px; } } + #view-amount .send-gravatar { + left: 11px; + position: absolute; + top: 10px; } + #view-amount .amount span input { + display: inline; + width: 120px; } + #view-amount .amount-pane-recipient { + position: absolute; + top: 95px; + bottom: 0; + width: 100%; + background-color: #fff; + padding: 0 16px; } + #view-amount .amount-pane-recipient .amount-bar { + padding: 24px 0; + font-size: 18px; } @media (max-height: 480px) { - #view-amount .amount-pane-recipient .amount-bar .title { + #view-amount .amount-pane-recipient .amount-bar { padding: 0px; } } - @media (max-height: 480px) { - #view-amount .amount-pane-recipient .amount-bar { - padding-top: 3px; } } - #view-amount .amount-pane-recipient .amount { - display: flex; - flex-direction: column; - justify-content: center; - flex-grow: 1; - position: absolute; - bottom: 254px; - top: 66px; } - #view-amount .amount-pane-recipient .amount .light { - color: #9b9bab; } - @media (max-height: 480px) { - #view-amount .amount-pane-recipient .amount { - top: 45px; } } - @media (max-width: 320px) { - #view-amount .amount-pane-recipient .amount { - bottom: 276px; - top: 60px; } - #view-amount .amount-pane-recipient .amount > div { - display: inline-block; } - #view-amount .amount-pane-recipient .amount > div:first-child { - display: inherit; } } - -#view-amount .amount-pane-no-recipient { - position: absolute; - top: 0; - bottom: 0; - width: 100%; - background-color: #fff; - padding: 0 16px; } - #view-amount .amount-pane-no-recipient .amount-bar { - padding: 24px 0; - font-size: 18px; } - #view-amount .amount-pane-no-recipient .amount-bar .title { - padding-top: 10px; - color: #445; - font-weight: bold; } - #view-amount .amount-pane-no-recipient .amount-bar .title .limits { - margin-top: 10px; - color: #9b9bab; - font-size: 12px; } - #view-amount .amount-pane-no-recipient .amount-bar .title .select { - margin: 10px 1px; } - #view-amount .amount-pane-no-recipient .amount { - display: flex; - flex-direction: column; - justify-content: center; - flex-grow: 1; - position: absolute; - bottom: 254px; - top: 66px; } - #view-amount .amount-pane-no-recipient .amount .light { - color: #9b9bab; } - -#view-amount .amount { - padding-top: 10px; - padding-bottom: 10px; } - #view-amount .amount .icon-toggle { - font-size: 1.2em; - width: auto; - margin: 0.8em auto; - border: 1px solid #f2f2f2; - color: #445; - border-radius: 3px; - padding: 0 10px; - cursor: pointer; } - @media (max-height: 280px) { - #view-amount .amount .icon-toggle { - margin: 0.1em auto; } } - #view-amount .amount__editable--minimize { - font-size: 22px; } - #view-amount .amount__editable--standard { - font-size: 42px; } - @media (max-height: 480px) { - #view-amount .amount__editable--standard { - font-size: 26px; - padding-top: 10px; } } - #view-amount .amount__editable--placeholder { - color: #9b9bab; } - #view-amount .amount__number { - color: #445; } - #view-amount .amount__currency-toggle { - border: 1px solid #f2f2f2; - color: #445; - border-radius: 3px; - padding: 0 10px; - cursor: pointer; - font-size: .6em; - position: relative; - top: -3px; - line-height: 1; } - @media (max-width: 320px) { - #view-amount .amount__currency-toggle { - line-height: 30px; - height: 30px; } } - #view-amount .amount__currency-toggle-mobile { - border: 1px solid #f2f2f2; - color: #445; - border-radius: 3px; - cursor: pointer; - position: relative; - line-height: 1; } - @media (max-width: 320px) { - #view-amount .amount__currency-toggle-mobile { - line-height: 30px; - height: 30px; } } - #view-amount .amount__results--minimize { - font-size: 12px; } - #view-amount .amount__results--standard { - font-size: 18px; - padding: 10px 0; } - #view-amount .amount__results--placeholder { - color: #9b9bab; } - #view-amount .amount__result { - color: #9b9bab; - font-size: .9em; - line-height: 1; } - @media (max-height: 480px) { - #view-amount .amount__result { - margin-bottom: 0; } } - #view-amount .amount__result-equiv { - color: #667; - font-size: 1.2em; } - @media (max-height: 480px) { - #view-amount .amount__result-equiv { - margin-top: 0; - font-size: 16px; } } - -#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 .text-selectable { - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; } - #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: 15px; } - #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-width: 320px) { + #view-amount .amount-pane-recipient .amount-bar { + padding: 0px; } } + #view-amount .amount-pane-recipient .amount-bar .title { + float: left; + padding-top: 10px; + color: #445; + font-weight: bold; } + @media (max-height: 480px) { + #view-amount .amount-pane-recipient .amount-bar .title { + padding: 0px; } } @media (max-height: 480px) { - #view-amount .scroll-content .keypad-container .keypad { - font-size: 12px; } } + #view-amount .amount-pane-recipient .amount-bar { + padding-top: 3px; } } + #view-amount .amount-pane-recipient .amount { + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + position: absolute; + bottom: 254px; + top: 66px; } + #view-amount .amount-pane-recipient .amount .light { + color: #9b9bab; } + @media (max-height: 480px) { + #view-amount .amount-pane-recipient .amount { + top: 45px; } } + @media (max-width: 320px) { + #view-amount .amount-pane-recipient .amount { + bottom: 276px; + top: 60px; } + #view-amount .amount-pane-recipient .amount > div { + display: inline-block; } + #view-amount .amount-pane-recipient .amount > div:first-child { + display: inherit; } } + #view-amount .amount-pane-no-recipient { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + background-color: #fff; + padding: 0 16px; } + #view-amount .amount-pane-no-recipient .amount-bar { + padding: 24px 0; + font-size: 18px; } + #view-amount .amount-pane-no-recipient .amount-bar .title { + padding-top: 10px; + color: #445; + font-weight: bold; } + #view-amount .amount-pane-no-recipient .amount-bar .title .limits { + margin-top: 10px; + color: #9b9bab; + font-size: 12px; } + #view-amount .amount-pane-no-recipient .amount-bar .title .select { + margin: 10px 1px; } + #view-amount .amount-pane-no-recipient .amount { + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + position: absolute; + bottom: 254px; + top: 66px; } + #view-amount .amount-pane-no-recipient .amount .light { + color: #9b9bab; } + #view-amount .amount { + padding-top: 10px; + padding-bottom: 10px; } + #view-amount .amount .icon-toggle { + font-size: 1.2em; + width: auto; + margin: 0.8em auto; + border: 1px solid #f2f2f2; + color: #445; + border-radius: 3px; + padding: 0 10px; + cursor: pointer; } + @media (max-height: 280px) { + #view-amount .amount .icon-toggle { + margin: 0.1em auto; } } + #view-amount .amount__editable--minimize { + font-size: 22px; } + #view-amount .amount__editable--standard { + font-size: 42px; } + @media (max-height: 480px) { + #view-amount .amount__editable--standard { + font-size: 26px; + padding-top: 10px; } } + #view-amount .amount__editable--placeholder { + color: #9b9bab; } + #view-amount .amount__number { + color: #445; } + #view-amount .amount__currency-toggle { + border: 1px solid #f2f2f2; + color: #445; + border-radius: 3px; + padding: 0 10px; + cursor: pointer; + font-size: .6em; + position: relative; + top: -3px; + line-height: 1; } + @media (max-width: 320px) { + #view-amount .amount__currency-toggle { + line-height: 30px; + height: 30px; } } + #view-amount .amount__currency-toggle-mobile { + border: 1px solid #f2f2f2; + color: #445; + border-radius: 3px; + cursor: pointer; + position: relative; + line-height: 1; } + @media (max-width: 320px) { + #view-amount .amount__currency-toggle-mobile { + line-height: 30px; + height: 30px; } } + #view-amount .amount__results--minimize { + font-size: 12px; } + #view-amount .amount__results--standard { + font-size: 18px; + padding: 10px 0; } + #view-amount .amount__results--placeholder { + color: #9b9bab; } + #view-amount .amount__result { + color: #9b9bab; + font-size: .9em; + line-height: 1; } + @media (max-height: 480px) { + #view-amount .amount__result { + margin-bottom: 0; } } + #view-amount .amount__result-equiv { + color: #667; + font-size: 1.2em; } + @media (max-height: 480px) { + #view-amount .amount__result-equiv { + margin-top: 0; + font-size: 16px; } } + #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 .text-selectable { + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; } + #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: 15px; } + #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-amount ion-content { + margin-bottom: constant(safe-area-inset-bottom); + /* iOS 11.0 */ + margin-bottom: env(safe-area-inset-bottom); + /* iOS 11.2 */ } #view-confirm { - background-color: #ffffff; } + background-color: #494949; } #view-confirm .item-note { float: none; } #view-confirm .item-note .fee-rate { @@ -10622,6 +10701,13 @@ textarea.d-block { margin-top: -3px; } #view-confirm .toggle { cursor: pointer; } + #view-confirm ion-content { + background-color: #ffffff; } + #view-confirm slide-to-accept, #view-confirm slide-to-accept-success { + margin-bottom: constant(safe-area-inset-bottom); + /* iOS 11.0 */ + margin-bottom: env(safe-area-inset-bottom); + /* iOS 11.2 */ } #copayers-invitation .button-share { color: #fff; @@ -10728,6 +10814,8 @@ textarea.d-block { #tab-home .card-banner { padding: 0; } + #tab-home .card-banner svg { + margin: 40px auto 40px; } #tab-home .card-banner__img { width: 100%; display: block; } @@ -10951,123 +11039,154 @@ textarea.d-block { #cordova-plugin-qrscanner-still, #cordova-plugin-qrscanner-video-preview { background-color: #fab915 !important; } -#tab-send .input input { - width: 100%; - height: auto; } +#tab-send-header { + height: 300px; + width: 100%; } -#tab-send .input.item { - height: 55px; } +#tab-send-contacts { + height: calc(100vh - 300px - 50px - 44px); + /* screen size - button container - bottom-tab-menu - header top */ + overflow: scroll; } + #tab-send-contacts.ios { + height: calc(100vh - 300px - 50px - 44px - 18px); } -#tab-send .input i.left { - padding-left: 15px; } +#tab-send .input { + width: 100%; } + #tab-send .input input { + width: 100%; + height: 57px; + background: #FFF; + border: 1px #D9D9D9 solid; } + #tab-send .input input::placeholder { + color: #DCDCDC; } + #tab-send .input i.left { + padding-left: 15px; } + #tab-send .input i.qr { + cursor: pointer; + cursor: hand; + padding-right: 5px; } -#tab-send .input i.qr { - cursor: pointer; - cursor: hand; - padding-right: 5px; } - -#tab-send .qr-scan-icon { - cursor: pointer; - cursor: hand; - border-left: 1px solid #e4e4e4; - padding-left: 10px; } - -#tab-send .qr-icon { - line-height: 20px; } - -#tab-send .zero-state-cta { - padding-bottom: 3vh; - left: 0; } - -#tab-send .send-heading { - font-size: 14px; - font-weight: bold; - padding: 0 0 16px 0; - border: none; } - -#tab-send .send-header-wrapper { - padding: 10px; - background-color: white; - box-shadow: 0px 5px 10px 0px #cccccc; } - -#tab-send .search-wrapper { +#tab-send .send-wrapper { + padding: 18px 9px 9px 9px; background-color: #f2f2f2; border-radius: 3px; border: none; } - #tab-send .search-wrapper .svg#Bitcoin_Symbol { - width: 14px; } - #tab-send .search-wrapper .svg#Bitcoin_Symbol .st0 { - fill: #cccccc; } - #tab-send .search-wrapper.focus { - background: none; } - #tab-send .search-wrapper.focus .svg#Bitcoin_Symbol { - display: none; } - #tab-send .search-wrapper.focus .search-input { - padding-left: 30px; } - #tab-send .search-wrapper.focus .search-input:focus::-webkit-input-placeholder { - opacity: 0; } - -#tab-send .abs-v-center { - position: absolute; - top: 50%; - transform: translateY(-50%); } + #tab-send .send-wrapper:after { + display: block; + position: relative; + height: 1px; + background: #DEDEDE; + bottom: 0; + content: ''; + margin: 10px 6px 0px; } + #tab-send .send-wrapper.focus .search-input { + padding-left: 30px; } + #tab-send .send-wrapper.focus .search-input:focus::-webkit-input-placeholder { + opacity: 0; } + #tab-send .send-wrapper .buttons { + margin: auto; + margin-top: 18px; } + #tab-send .send-wrapper .buttons .button { + height: 60px; + line-height: 16px; + margin-right: 0px; + width: 95%; + max-width: none; + padding: 2px; } + #tab-send .send-wrapper .buttons .button-clipboard-paste { + margin-left: 0; } + #tab-send .send-wrapper .buttons .button-clipboard-paste .address { + display: none; } + #tab-send .send-wrapper .buttons .button-clipboard-paste .icon { + background: url(../img/icon-clipboard-paste.svg); + width: 15px; + height: 19px; + display: inline-block; + margin-bottom: 4px; } + #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-address, #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-content { + background: #FAB915; + color: #FFF !important; + border: 0; + box-shadow: 0 2px 11px 0 #C1C1C1; } + #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-address .address, #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-content .address { + display: none; } + #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-address .icon, #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-content .icon { + background: url(../img/icon-clipboard-paste-white.svg); } + #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-address.contains-address .address, #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-content.contains-address .address { + display: inline; } + #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-address.contains-address .non-address, #tab-send .send-wrapper .buttons .button-clipboard-paste.contains-content.contains-address .non-address { + display: none; } + #tab-send .send-wrapper .buttons .button span { + font-size: 14px; } + #tab-send .send-wrapper .buttons .button img { + height: 16px; + width: auto; + margin: 2px 0 4px; } + #tab-send .send-wrapper .buttons .button-qr { + font-weight: bold; + max-width: none; + width: 100%; + height: 95px; + margin-top: 20px; } + #tab-send .send-wrapper .buttons .button-qr img { + vertical-align: middle; + margin-right: 12px; + width: 43px; + height: 43px; } + #tab-send .send-wrapper .buttons .button-qr span { + font-size: 19px; } #tab-send .search-input { background-color: transparent; padding-left: 30px; } -#tab-send .separator-left { - border-left: 1px solid #d9d9df; - padding-left: 10px; - height: 70%; } - -#tab-send .bitcoin-address { - border-top: none; - padding-bottom: .5rem; } - @media (max-width: 480px) { - #tab-send .bitcoin-address input { - font-size: 14px; } } - #tab-send .bitcoin-address .icon { - line-height: 31px; - padding-top: 2px; - padding-bottom: 1px; } - -#tab-send .show-more { - text-align: center; - padding: 20px; - font-size: 16px; - color: #387ef5; - font-weight: bold; } - #tab-send .sendTip { + padding-top: 5vh; text-align: center; } - #tab-send .sendTip > .item-heading { - margin-top: 10px; - background: 0 none; } - #tab-send .sendTip img { - content: url("../img/app/tab-icons/ico-send-selected.svg"); } #tab-send .sendTip .item { border-style: none; } #tab-send .sendTip > .title { font-size: 20px; - font-weight: bold; color: #445; margin: 20px 10px; } #tab-send .sendTip > .subtitle { font-size: 1rem; line-height: 1.5em; font-weight: 300; - color: #445; + color: #6F6F70; margin: 20px 1em 2.5em; } #tab-send .sendTip .big-icon-svg .bg.green { padding: 0 10px; box-shadow: none; } + #tab-send .sendTip .buttons { + margin-top: 18px; } + #tab-send .sendTip .buttons .button { + font-weight: bold; + font-size: 19px; } + #tab-send .sendTip .button-first-contact img { + height: 19px; + width: 19px; + margin-right: 6px; + vertical-align: sub; } + +#tab-send .item-heading { + line-height: 16px; + font-size: 14px; + font-weight: bold; } + #tab-send .item-heading .subtitle { + color: #B5B2B2; + font-size: 12px; + font-weight: 300; } #tab-send .list .item { + font-weight: 600; color: #444; - border-top: none; - padding-top: 1.5rem; - padding-bottom: 1.5rem; } + padding-top: 0.6rem; + padding-bottom: 0.6rem; } + #tab-send .list .item p { + font-weight: normal; } + #tab-send .list .item.item-icon-left { + padding-left: 64px; } #tab-send .list .item .big-icon-svg { left: 5px; } #tab-send .list .item .big-icon-svg > .bg { @@ -11077,7 +11196,7 @@ textarea.d-block { #tab-send .list .item:before { display: block; position: absolute; - width: 80%; + width: 100%; height: 1px; background: rgba(221, 221, 221, 0.3); top: 0; @@ -11096,6 +11215,28 @@ textarea.d-block { #tab-send .scroll { height: 100%; } +#tab-send .card.contacts { + margin: 4px 4px 16px 4px; + border-radius: 6px; + box-shadow: 0px 2px 1px 0 #C1C1C1; } + #tab-send .card.contacts .gravatar { + border-radius: 30px; + height: 40px; + width: 40px; } + +@media only screen and (min-device-width: 320px) and (max-device-width: 568px) { + #tab-send .send-wrapper .buttons .button-qr { + height: 60px; } + #tab-send .send-wrapper .buttons .button-qr span { + font-size: 16px; } + #tab-send #tab-send-header { + height: 270px; } + #tab-send #tab-send-contacts { + height: calc(100vh - 270px - 50px - 44px); + /* screen size - button container - bottom-tab-menu - header top */ } + #tab-send #tab-send-contacts.ios { + height: calc(100vh - 270px - 50px - 44px - 18px); } } + .settings .icon-bitpay { background-image: url("../img/icon-bitpay.svg"); } @@ -11604,7 +11745,8 @@ textarea.d-block { fill: white; } #walletDetails .bp-content { position: relative; - height: 100%; } + height: 100%; + height: calc(100% - env(safe-area-inset-bottom) * 2); } #walletDetails .bp-content.status-bar { margin-top: 20px; } #walletDetails .bar-header { @@ -11618,7 +11760,8 @@ textarea.d-block { background-color: inherit !important; } #walletDetails ion-content { padding-top: 0; - top: 0; } + top: 0; + margin-bottom: 16px; } #walletDetails ion-content.collapsible { margin-top: 210px; } #walletDetails ion-content .scroll { @@ -12211,7 +12354,6 @@ a.item { position: relative; height: 70px; border-color: #fab915; - background-color: #fab915; padding-top: 20px; margin-bottom: 50px; text-align: center; } @@ -13013,74 +13155,13 @@ a.item { .onboarding-illustration-backup-warning { background-image: url(../img/app/backup-warning.svg); } -#rate-card .item-heading { - font-weight: 700; } - -#rate-card .row { - border: none; } - -#rate-card .item-icon-right { - margin: 0; } - -#rate-card .feedback-flow-button { - margin-bottom: 20px; } - -#rate-card .icon-svg > img { - height: 1.8rem; - margin-bottom: 5px; } - -#send-feedback { - background-color: #ffffff; } - #send-feedback .row { - border: none; } - #send-feedback .skip { - color: rgba(255, 255, 255, 0.3); } - #send-feedback .feedback-heading { - padding-top: 20px; } - #send-feedback .feedback-title { - padding-left: 10px; - font-size: 20px; - font-weight: bold; - color: #445; } - #send-feedback .rating { - text-align: right; - padding-right: 15px; } - #send-feedback .comment { - padding: 0 20px 20px; - font-size: 1rem; - line-height: 1.5em; - font-weight: 300; - color: #445; } - #send-feedback .user-feedback { - border-top: 1px solid #f2f2f2; - border-bottom: 1px solid #f2f2f2; - padding: 20px; - width: 100%; - margin-bottom: 20px; - -webkit-appearance: none; } - #send-feedback .send-feedback-star { - height: 1rem; - margin-left: 5px; } - #send-feedback .form-fade-in { - opacity: 0; - animation-name: fadeIn; - animation-duration: .5s; - animation-fill-mode: forwards; - animation-timing-function: ease-in; } - -@keyframes fadeIn { - from { - opacity: 0; } - to { - opacity: 1; } } - -#complete { +#share-app { background-color: #fff; } - #complete .complete-layout { + #share-app .share-app-layout { display: flex; flex-direction: column; height: 100%; } - #complete .complete-layout__expand { + #share-app .share-app-layout__expand { display: flex; flex-direction: column; flex-grow: 1; @@ -13089,36 +13170,27 @@ a.item { text-align: center; opacity: 0; transition: opacity .3s; } - #complete .complete-layout__expand.fade-in { + #share-app .share-app-layout__expand.fade-in { opacity: 1; } - #complete .share-the-love-illustration { + #share-app .share-the-love-illustration { width: 5rem; margin: 1rem; } - #complete .send-feedback-illustration { - height: 16rem; - margin: 1rem; } - #complete .feedback-title { - font-size: 20px; - font-weight: bold; - color: #445; - margin: 20px 10px; - text-align: center; } - #complete .subtitle { + #share-app .subtitle { padding: 10px 30px 20px; text-align: center; color: #667; } - #complete .icon-svg > img { + #share-app .icon-svg > img { height: 16rem; width: 16rem; margin: 10px; } - #complete .socialsharing-icon { + #share-app .socialsharing-icon { display: inline-block; width: 60px; } - #complete .addressbook-icon-svg { + #share-app .addressbook-icon-svg { display: inline-block; width: 50px; height: 50px; } - #complete .share-buttons { + #share-app .share-buttons { padding: 50px 10px 30px; background-color: #f2f2f2; text-align: center; @@ -13130,7 +13202,7 @@ a.item { animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-delay: .2s; } - #complete .share-buttons__action { + #share-app .share-buttons__action { display: inline-block; color: #667; font-size: .9rem; @@ -13148,38 +13220,6 @@ a.item { transform: translateY(0); opacity: 1; } } -#rate-app { - background-color: #ffffff; - text-align: center; } - #rate-app .skip-rating { - color: #445; - position: absolute; - top: 5px; - right: 10px; - padding: 15px; } - #rate-app .icon-svg > img { - width: 80px; - height: 80px; - margin-top: 15px; } - #rate-app .feedback-title { - font-size: 20px; - font-weight: bold; - color: #445; - margin: 80px 50px 10px; - text-align: center; } - #rate-app .share-the-love-illustration { - width: 5rem; - margin: 1rem; } - #rate-app .subtitle { - padding: 10px 30px 20px 40px; - color: #667; } - #rate-app .rate-buttons { - bottom: 0; - width: 100%; - position: absolute; - background-color: #f2f2f2; - padding: 30px 0 15px; } - action-sheet .bp-action-sheet__sheet { background: #fff; width: calc(100% + 1px); @@ -13800,7 +13840,11 @@ slide-to-accept-success { transform: translateY(5rem); opacity: 0; transition: transform 400ms ease, opacity 400ms ease; - transition-delay: 250ms; } + transition-delay: 250ms; + margin-bottom: constant(safe-area-inset-bottom); + /* iOS 11.0 */ + margin-bottom: env(safe-area-inset-bottom); + /* iOS 11.2 */ } slide-to-accept-success .slide-success__footer.reveal { -webkit-transform: translateY(0); transform: translateY(0); @@ -13858,16 +13902,16 @@ slide-to-accept-success { line-height: 30px; } #txp-details .head .amount-label .amount, #view-confirm .head .amount-label .amount { - font-size: 38px; - margin-bottom: .5rem; } - #txp-details .head .amount-label .amount > .unit, - #view-confirm .head .amount-label .amount > .unit { - font-family: "Roboto-Light"; } + font-size: 16px; + color: #9B9B9B; + font-family: "Roboto-Light"; } #txp-details .head .amount-label .alternative, #view-confirm .head .amount-label .alternative { - font-size: 16px; - font-family: "Roboto-Light"; - color: #9B9B9B; } + font-size: 38px; + margin-bottom: .5rem; } + #txp-details .head .amount-label .alternative > .unit, + #view-confirm .head .amount-label .alternative > .unit { + font-family: "Roboto-Light"; } #txp-details .item, #view-confirm .item { border-color: #EFEFEF; } @@ -14155,6 +14199,10 @@ wallet-selector .subheader { font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid #EFEFEF; } + wallet-selector .subheader .subtitle { + color: #667; + font-size: 12px; + font-weight: 300; } wallet-selector .subheader .wallet-coin-logo { vertical-align: middle; margin-right: 5px; } diff --git a/www/index.html b/www/index.html index 4c73317e3..ecc2d923c 100644 --- a/www/index.html +++ b/www/index.html @@ -11,9 +11,8 @@ - Bitcoin.com Wallet - Bitcoin.com Wallet - - + Bitcoin.com Wallet + @@ -31,7 +30,7 @@ - + diff --git a/www/views/review.html b/www/views/review.html new file mode 100644 index 000000000..d68eca05b --- /dev/null +++ b/www/views/review.html @@ -0,0 +1,45 @@ + + + + {{'Review'|translate}} + + + + + + + Review + + + {{buttonText}} + + + {{buttonText}} + + + Payment Sent + Proposal Created + Transaction Created + + + + + + From 155ea281d8ede8cc8c619a339aa4d389684e5431 Mon Sep 17 00:00:00 2001 From: Sam Cheng Hung Date: Wed, 18 Jul 2018 17:24:13 +0800 Subject: [PATCH 02/25] Adds header component --- src/sass/components/components.scss | 1 + src/sass/components/header.scss | 36 +++++++++++++++++++++++++++++ src/sass/main.scss | 1 + www/css/main.css | 24 +++++++++++++++++++ www/views/review.html | 8 ++++++- 5 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 src/sass/components/components.scss create mode 100644 src/sass/components/header.scss diff --git a/src/sass/components/components.scss b/src/sass/components/components.scss new file mode 100644 index 000000000..833f565dd --- /dev/null +++ b/src/sass/components/components.scss @@ -0,0 +1 @@ +@import "header"; diff --git a/src/sass/components/header.scss b/src/sass/components/header.scss new file mode 100644 index 000000000..1c178dd07 --- /dev/null +++ b/src/sass/components/header.scss @@ -0,0 +1,36 @@ +.header { + padding: 29px 12px 65px; + background-color: #FAB915; + color: #FFFFFF; + + .title { + font-size: 18px; + font-weight: 400; + line-height: 1em; + color: #FFFFFF; + text-align: center; + + + .content { + margin-top: 23px; + } + } + + .content { + text-align: center; + + p { + margin: 0; + line-height: 1em; + font-size: 18px; + + &.large { + font-size: 29px; + font-weight: 600; + } + + + p { + margin-top: 8px; + } + } + } +} \ No newline at end of file diff --git a/src/sass/main.scss b/src/sass/main.scss index 7b3e46291..516656449 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -9,4 +9,5 @@ @import "mixins/mixins"; @import "views/views"; @import "directives/directives"; +@import "components/components"; @import "shame"; diff --git a/www/css/main.css b/www/css/main.css index a87bc4be9..2e2726888 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -15066,6 +15066,30 @@ log-options #check-bar .checkbox-icon { border-radius: 3px; display: inline-block; } +.header { + padding: 29px 12px 65px; + background-color: #FAB915; + color: #FFFFFF; } + .header .title { + font-size: 18px; + font-weight: 400; + line-height: 1em; + color: #FFFFFF; + text-align: center; } + .header .title + .content { + margin-top: 23px; } + .header .content { + text-align: center; } + .header .content p { + margin: 0; + line-height: 1em; + font-size: 18px; } + .header .content p.large { + font-size: 29px; + font-weight: 600; } + .header .content p + p { + margin-top: 8px; } + /* This is for rules that don't yet have a home. * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/ */ diff --git a/www/views/review.html b/www/views/review.html index d68eca05b..cc57c79b8 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -8,7 +8,13 @@ - Review +
+

You are sending

+
+

13.98 USD

+

0.014 BCH

+
+
Date: Thu, 19 Jul 2018 17:41:02 +0800 Subject: [PATCH 03/25] Added content-frame, item and ion-content components, added dummy wallet interfaces --- src/sass/components/components.scss | 3 ++ src/sass/components/content-frame.scss | 11 ++++++ src/sass/components/ion-content.scss | 13 ++++++ src/sass/components/item.scss | 39 ++++++++++++++++++ src/sass/icons.scss | 7 ++++ src/sass/views/review.scss | 8 ++++ src/sass/views/views.scss | 1 + www/css/main.css | 55 ++++++++++++++++++++++++++ www/views/review.html | 44 ++++++++++++++++++++- 9 files changed, 179 insertions(+), 2 deletions(-) create mode 100644 src/sass/components/content-frame.scss create mode 100644 src/sass/components/ion-content.scss create mode 100644 src/sass/components/item.scss create mode 100644 src/sass/views/review.scss diff --git a/src/sass/components/components.scss b/src/sass/components/components.scss index 833f565dd..fa0d9008b 100644 --- a/src/sass/components/components.scss +++ b/src/sass/components/components.scss @@ -1 +1,4 @@ @import "header"; +@import "content-frame"; +@import "item"; +@import "ion-content"; diff --git a/src/sass/components/content-frame.scss b/src/sass/components/content-frame.scss new file mode 100644 index 000000000..1c6831271 --- /dev/null +++ b/src/sass/components/content-frame.scss @@ -0,0 +1,11 @@ +.content-frame { + &.negative-top { + margin-top: -20px; + + .card { + &:first-child { + margin-top: 0; + } + } + } +} \ No newline at end of file diff --git a/src/sass/components/ion-content.scss b/src/sass/components/ion-content.scss new file mode 100644 index 000000000..7be47c9ab --- /dev/null +++ b/src/sass/components/ion-content.scss @@ -0,0 +1,13 @@ +/* +* Extends Ionic v1 ion-content +*/ + +ion-content { + &.bg-neutral { + background-color: #F2F2F2; + } + + &.padded-bottom-cta { + bottom: 92px; + } +} \ No newline at end of file diff --git a/src/sass/components/item.scss b/src/sass/components/item.scss new file mode 100644 index 000000000..0d8ece804 --- /dev/null +++ b/src/sass/components/item.scss @@ -0,0 +1,39 @@ +/* +* Extends Ionic v1 item +*/ + +.item { + &.item-compact { + padding: 11px 13px; + } + &.item-gutterless { + padding: 0; + } + + .item-content { + &.item-content-compact { + min-height: 69px; + padding: 13px 11px 13px 68px; + + > img, + > i { + &:first-child { + position: absolute; + max-width: 40px; + max-height: 40px; + width: 100%; + height: 100%; + border-radius: 50%; + left: 13px; + top: 50%; + padding: 0; + transform: translate(0,-50%); + } + } + } + + .highlight { + color: #FAB915; + } + } +} \ No newline at end of file diff --git a/src/sass/icons.scss b/src/sass/icons.scss index 7d14f8886..ee270408f 100644 --- a/src/sass/icons.scss +++ b/src/sass/icons.scss @@ -88,6 +88,13 @@ background-image: url('../img/icon-faucet.svg'); background-size: 70%; } + + &.icon-wallet { + background-color: #FAB915; + background-image: url('../img/icon-wallet.svg'); + border: none; + box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset; + } } } diff --git a/src/sass/views/review.scss b/src/sass/views/review.scss new file mode 100644 index 000000000..e1d4ebd07 --- /dev/null +++ b/src/sass/views/review.scss @@ -0,0 +1,8 @@ +#view-review { + background-color: #494949; + + slide-to-accept, slide-to-accept-success { + margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */ + margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */ + } +} \ No newline at end of file diff --git a/src/sass/views/views.scss b/src/sass/views/views.scss index d4ed735ed..1e54062f9 100644 --- a/src/sass/views/views.scss +++ b/src/sass/views/views.scss @@ -48,3 +48,4 @@ @import "includes/logOptions"; @import "includes/checkBar"; @import "cashScan"; +@import "review"; diff --git a/www/css/main.css b/www/css/main.css index 2e2726888..7b40c47c7 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -10037,6 +10037,11 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm .big-icon-svg.theme-circle > .bg.icon-faucet { background-image: url("../img/icon-faucet.svg"); background-size: 70%; } + .big-icon-svg.theme-circle > .bg.icon-wallet { + background-color: #FAB915; + background-image: url("../img/icon-wallet.svg"); + border: none; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3) inset; } .big-icon-svg.theme-circle-services > .bg { border: 1px solid #191919; } .big-icon-svg.theme-circle-community > .bg { @@ -15062,6 +15067,14 @@ log-options #check-bar .checkbox-icon { #cash-scan a { cursor: pointer; } +#view-review { + background-color: #494949; } + #view-review slide-to-accept, #view-review slide-to-accept-success { + margin-bottom: constant(safe-area-inset-bottom); + /* iOS 11.0 */ + margin-bottom: env(safe-area-inset-bottom); + /* iOS 11.2 */ } + .gravatar { border-radius: 3px; display: inline-block; } @@ -15090,6 +15103,48 @@ log-options #check-bar .checkbox-icon { .header .content p + p { margin-top: 8px; } +.content-frame.negative-top { + margin-top: -20px; } + .content-frame.negative-top .card:first-child { + margin-top: 0; } + +/* +* Extends Ionic v1 item +*/ +.item.item-compact { + padding: 11px 13px; } + +.item.item-gutterless { + padding: 0; } + +.item .item-content.item-content-compact { + min-height: 69px; + padding: 13px 11px 13px 68px; } + .item .item-content.item-content-compact > img:first-child, + .item .item-content.item-content-compact > i:first-child { + position: absolute; + max-width: 40px; + max-height: 40px; + width: 100%; + height: 100%; + border-radius: 50%; + left: 13px; + top: 50%; + padding: 0; + transform: translate(0, -50%); } + +.item .item-content .highlight { + color: #FAB915; } + +/* +* Extends Ionic v1 ion-content +*/ +ion-content.bg-neutral { + background-color: #F2F2F2; } + +ion-content.padded-bottom-cta { + bottom: 92px; } + /* This is for rules that don't yet have a home. * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/ */ diff --git a/www/views/review.html b/www/views/review.html index cc57c79b8..563ddf6d6 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -1,4 +1,4 @@ - + {{'Review'|translate}} @@ -7,7 +7,7 @@ - +

You are sending

@@ -15,6 +15,46 @@

0.014 BCH

+ +
+
+
From:
+
+
+ +
+ +

Personal Wallet (BCH)

+

128.67

+
+
+
+
+
From:
+
+
+ +
+ +

Personal Wallet (BTC)

+

128.67

+
+
+
+
+
To:
+
+
+ +

Satoshi Nakamoto

+

128.67

+
+
+
+
Date: Thu, 19 Jul 2018 20:21:58 +0800 Subject: [PATCH 04/25] Adds address component --- src/sass/components/address.scss | 27 ++++++++++++++++++++++++ src/sass/components/components.scss | 1 + src/sass/components/item.scss | 13 ++++++++++-- www/css/main.css | 32 ++++++++++++++++++++++++++--- www/views/review.html | 9 +++++--- 5 files changed, 74 insertions(+), 8 deletions(-) create mode 100644 src/sass/components/address.scss diff --git a/src/sass/components/address.scss b/src/sass/components/address.scss new file mode 100644 index 000000000..2848deb82 --- /dev/null +++ b/src/sass/components/address.scss @@ -0,0 +1,27 @@ +.address { + background-color: #F8F8F8; + border: 0.5px solid #EDEBEB; + border-radius: 3px; + padding: 9px; + text-align: center; + font-size: 14px; + overflow: hidden; + text-overflow: ellipsis; + + &.expanded { + white-space: pre-wrap; + word-break: break-all; + } + + .prefix { + color: #000000; + } + + .mid { + color: #919191; + } + + .suffix { + color: #000000; + } +} \ No newline at end of file diff --git a/src/sass/components/components.scss b/src/sass/components/components.scss index fa0d9008b..b547defad 100644 --- a/src/sass/components/components.scss +++ b/src/sass/components/components.scss @@ -2,3 +2,4 @@ @import "content-frame"; @import "item"; @import "ion-content"; +@import "address"; diff --git a/src/sass/components/item.scss b/src/sass/components/item.scss index 0d8ece804..bb75ae8e0 100644 --- a/src/sass/components/item.scss +++ b/src/sass/components/item.scss @@ -11,7 +11,7 @@ } .item-content { - &.item-content-compact { + &.item-content-avatar { min-height: 69px; padding: 13px 11px 13px 68px; @@ -32,8 +32,17 @@ } } + &.item-content-compact { + min-height: 0; + padding: 13px 11px; + } + .highlight { - color: #FAB915; + color: #FAB915 + } + + + .item-content { + padding-top: 0; } } } \ No newline at end of file diff --git a/www/css/main.css b/www/css/main.css index 7b40c47c7..4f9410e68 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -15117,11 +15117,11 @@ log-options #check-bar .checkbox-icon { .item.item-gutterless { padding: 0; } -.item .item-content.item-content-compact { +.item .item-content.item-content-avatar { min-height: 69px; padding: 13px 11px 13px 68px; } - .item .item-content.item-content-compact > img:first-child, - .item .item-content.item-content-compact > i:first-child { + .item .item-content.item-content-avatar > img:first-child, + .item .item-content.item-content-avatar > i:first-child { position: absolute; max-width: 40px; max-height: 40px; @@ -15133,9 +15133,16 @@ log-options #check-bar .checkbox-icon { padding: 0; transform: translate(0, -50%); } +.item .item-content.item-content-compact { + min-height: 0; + padding: 13px 11px; } + .item .item-content .highlight { color: #FAB915; } +.item .item-content + .item-content { + padding-top: 0; } + /* * Extends Ionic v1 ion-content */ @@ -15145,6 +15152,25 @@ ion-content.bg-neutral { ion-content.padded-bottom-cta { bottom: 92px; } +.address { + background-color: #F8F8F8; + border: 0.5px solid #EDEBEB; + border-radius: 3px; + padding: 9px; + text-align: center; + font-size: 14px; + overflow: hidden; + text-overflow: ellipsis; } + .address.expanded { + white-space: pre-wrap; + word-break: break-all; } + .address .prefix { + color: #000000; } + .address .mid { + color: #919191; } + .address .suffix { + color: #000000; } + /* This is for rules that don't yet have a home. * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/ */ diff --git a/www/views/review.html b/www/views/review.html index 563ddf6d6..9df212be9 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -20,7 +20,7 @@
From:
-
+
From:
-
+
@@ -47,11 +47,14 @@
To:
-
+

Satoshi Nakamoto

128.67

+
+
qz9cqq5pryv9hnqwa8q8mccmynk9uf4vlu5nxerpzmc
+
From 6efd338f87c94913ad5c745aba5eb6108ed1f1be Mon Sep 17 00:00:00 2001 From: Sam Cheng Hung Date: Fri, 20 Jul 2018 15:56:39 +0800 Subject: [PATCH 05/25] Adds action-minor component --- src/sass/components/action-minor.scss | 23 +++++++++++++++++++++++ src/sass/components/components.scss | 1 + www/css/main.css | 15 +++++++++++++++ www/img/icon-bookmark.svg | 3 +++ www/views/review.html | 4 ++++ 5 files changed, 46 insertions(+) create mode 100644 src/sass/components/action-minor.scss create mode 100644 www/img/icon-bookmark.svg diff --git a/src/sass/components/action-minor.scss b/src/sass/components/action-minor.scss new file mode 100644 index 000000000..74fbe5639 --- /dev/null +++ b/src/sass/components/action-minor.scss @@ -0,0 +1,23 @@ +.action-minor { + margin: 20px 14px; + font-size: 14px; + + &.mt-negative { + margin-top: -10px; + } + + &.right { + text-align: right; + } + + > .action-icon { + width: 15px; + height: 15px; + vertical-align: middle; + margin-right: 3px; + } + + > .action-text { + vertical-align: middle; + } +} \ No newline at end of file diff --git a/src/sass/components/components.scss b/src/sass/components/components.scss index b547defad..c0224e56f 100644 --- a/src/sass/components/components.scss +++ b/src/sass/components/components.scss @@ -3,3 +3,4 @@ @import "item"; @import "ion-content"; @import "address"; +@import "action-minor"; diff --git a/www/css/main.css b/www/css/main.css index 4f9410e68..b34db534e 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -15171,6 +15171,21 @@ ion-content.padded-bottom-cta { .address .suffix { color: #000000; } +.action-minor { + margin: 20px 14px; + font-size: 14px; } + .action-minor.mt-negative { + margin-top: -10px; } + .action-minor.right { + text-align: right; } + .action-minor > .action-icon { + width: 15px; + height: 15px; + vertical-align: middle; + margin-right: 3px; } + .action-minor > .action-text { + vertical-align: middle; } + /* This is for rules that don't yet have a home. * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/ */ diff --git a/www/img/icon-bookmark.svg b/www/img/icon-bookmark.svg new file mode 100644 index 000000000..b1ad892fd --- /dev/null +++ b/www/img/icon-bookmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/www/views/review.html b/www/views/review.html index 9df212be9..2bef9a95e 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -57,6 +57,10 @@
+
+ + Add a personal note +
Date: Tue, 24 Jul 2018 15:27:21 +0800 Subject: [PATCH 06/25] Adds expand-content component, update various UI measurements --- src/sass/components/action-minor.scss | 5 +- src/sass/components/card.scss | 5 ++ src/sass/components/components.scss | 7 +- src/sass/components/content-frame.scss | 2 +- src/sass/components/expand-content.scss | 26 ++++++++ src/sass/components/header.scss | 2 +- src/sass/directives/directives.scss | 1 + src/sass/directives/elastic.scss | 4 ++ www/css/main.css | 88 ++++++++++++++++--------- www/img/icon-bookmark.svg | 10 ++- www/views/review.html | 42 ++++++------ 11 files changed, 133 insertions(+), 59 deletions(-) create mode 100644 src/sass/components/card.scss create mode 100644 src/sass/components/expand-content.scss create mode 100644 src/sass/directives/elastic.scss diff --git a/src/sass/components/action-minor.scss b/src/sass/components/action-minor.scss index 74fbe5639..f158fe845 100644 --- a/src/sass/components/action-minor.scss +++ b/src/sass/components/action-minor.scss @@ -3,10 +3,10 @@ font-size: 14px; &.mt-negative { - margin-top: -10px; + margin-top: 0; } - &.right { + &.text-right { text-align: right; } @@ -19,5 +19,6 @@ > .action-text { vertical-align: middle; + color: #444444; } } \ No newline at end of file diff --git a/src/sass/components/card.scss b/src/sass/components/card.scss new file mode 100644 index 000000000..6df235ab8 --- /dev/null +++ b/src/sass/components/card.scss @@ -0,0 +1,5 @@ +.card { + &.card-gutter-compact { + margin: 10px 12px; + } +} \ No newline at end of file diff --git a/src/sass/components/components.scss b/src/sass/components/components.scss index c0224e56f..180279125 100644 --- a/src/sass/components/components.scss +++ b/src/sass/components/components.scss @@ -1,6 +1,9 @@ -@import "header"; -@import "content-frame"; @import "item"; @import "ion-content"; +@import "card"; + +@import "header"; +@import "content-frame"; @import "address"; @import "action-minor"; +@import "expand-content"; diff --git a/src/sass/components/content-frame.scss b/src/sass/components/content-frame.scss index 1c6831271..5766b246b 100644 --- a/src/sass/components/content-frame.scss +++ b/src/sass/components/content-frame.scss @@ -1,6 +1,6 @@ .content-frame { &.negative-top { - margin-top: -20px; + margin-top: -40px; .card { &:first-child { diff --git a/src/sass/components/expand-content.scss b/src/sass/components/expand-content.scss new file mode 100644 index 000000000..934a2beec --- /dev/null +++ b/src/sass/components/expand-content.scss @@ -0,0 +1,26 @@ +.expand-content-frame { + position: relative; + + .expand-content-trigger { + position: absolute; + top: 0; + transition: opacity 0.3s ease; + right: 0; + + &.expand-content-revealed { + opacity: 0; + } + } + + .expand-content { + opacity: 0; + transform-origin: 100% 0%; + transform: scale(0,0); + transition: opacity 0.3s ease, transform 0.3s ease; + + &.expand-content-revealed { + opacity: 1; + transform: scale(1,1); + } + } +} \ No newline at end of file diff --git a/src/sass/components/header.scss b/src/sass/components/header.scss index 1c178dd07..fad1f1812 100644 --- a/src/sass/components/header.scss +++ b/src/sass/components/header.scss @@ -1,5 +1,5 @@ .header { - padding: 29px 12px 65px; + padding: 29px 12px 61px; background-color: #FAB915; color: #FFFFFF; diff --git a/src/sass/directives/directives.scss b/src/sass/directives/directives.scss index 9159d3f23..954b86c3a 100644 --- a/src/sass/directives/directives.scss +++ b/src/sass/directives/directives.scss @@ -1 +1,2 @@ @import "gravatar"; +@import "elastic"; \ No newline at end of file diff --git a/src/sass/directives/elastic.scss b/src/sass/directives/elastic.scss new file mode 100644 index 000000000..8e8aba4fa --- /dev/null +++ b/src/sass/directives/elastic.scss @@ -0,0 +1,4 @@ +.elastic { + width: 100%; + font-size: 14px; +} \ No newline at end of file diff --git a/www/css/main.css b/www/css/main.css index b34db534e..df8779400 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -15079,34 +15079,9 @@ log-options #check-bar .checkbox-icon { border-radius: 3px; display: inline-block; } -.header { - padding: 29px 12px 65px; - background-color: #FAB915; - color: #FFFFFF; } - .header .title { - font-size: 18px; - font-weight: 400; - line-height: 1em; - color: #FFFFFF; - text-align: center; } - .header .title + .content { - margin-top: 23px; } - .header .content { - text-align: center; } - .header .content p { - margin: 0; - line-height: 1em; - font-size: 18px; } - .header .content p.large { - font-size: 29px; - font-weight: 600; } - .header .content p + p { - margin-top: 8px; } - -.content-frame.negative-top { - margin-top: -20px; } - .content-frame.negative-top .card:first-child { - margin-top: 0; } +.elastic { + width: 100%; + font-size: 14px; } /* * Extends Ionic v1 item @@ -15152,6 +15127,38 @@ ion-content.bg-neutral { ion-content.padded-bottom-cta { bottom: 92px; } +.card.card-gutter-compact { + margin: 10px 12px; } + +.header { + padding: 29px 12px 61px; + background-color: #FAB915; + color: #FFFFFF; } + .header .title { + font-size: 18px; + font-weight: 400; + line-height: 1em; + color: #FFFFFF; + text-align: center; } + .header .title + .content { + margin-top: 23px; } + .header .content { + text-align: center; } + .header .content p { + margin: 0; + line-height: 1em; + font-size: 18px; } + .header .content p.large { + font-size: 29px; + font-weight: 600; } + .header .content p + p { + margin-top: 8px; } + +.content-frame.negative-top { + margin-top: -40px; } + .content-frame.negative-top .card:first-child { + margin-top: 0; } + .address { background-color: #F8F8F8; border: 0.5px solid #EDEBEB; @@ -15175,8 +15182,8 @@ ion-content.padded-bottom-cta { margin: 20px 14px; font-size: 14px; } .action-minor.mt-negative { - margin-top: -10px; } - .action-minor.right { + margin-top: 0; } + .action-minor.text-right { text-align: right; } .action-minor > .action-icon { width: 15px; @@ -15184,7 +15191,26 @@ ion-content.padded-bottom-cta { vertical-align: middle; margin-right: 3px; } .action-minor > .action-text { - vertical-align: middle; } + vertical-align: middle; + color: #444444; } + +.expand-content-frame { + position: relative; } + .expand-content-frame .expand-content-trigger { + position: absolute; + top: 0; + transition: opacity 0.3s ease; + right: 0; } + .expand-content-frame .expand-content-trigger.expand-content-revealed { + opacity: 0; } + .expand-content-frame .expand-content { + opacity: 0; + transform-origin: 100% 0%; + transform: scale(0, 0); + transition: opacity 0.3s ease, transform 0.3s ease; } + .expand-content-frame .expand-content.expand-content-revealed { + opacity: 1; + transform: scale(1, 1); } /* This is for rules that don't yet have a home. * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/ diff --git a/www/img/icon-bookmark.svg b/www/img/icon-bookmark.svg index b1ad892fd..5db1f9047 100644 --- a/www/img/icon-bookmark.svg +++ b/www/img/icon-bookmark.svg @@ -1,3 +1,11 @@ - + + + + diff --git a/www/views/review.html b/www/views/review.html index 2bef9a95e..9de1a403e 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -7,9 +7,9 @@ - +
-

You are sending

13.98 USD

0.014 BCH

@@ -17,7 +17,7 @@
-
+
From:
@@ -31,21 +31,8 @@
-
-
From:
-
-
- -
- -

Personal Wallet (BTC)

-

128.67

-
-
-
-
-
To:
+
+
To:
@@ -57,9 +44,22 @@
-
- - Add a personal note +
+
+ + Add a personal note +
+
+
Personal Note:
+
+
+ +
+
+
From 2492a405a1ae6f86f9d1098052134d55db2cab76 Mon Sep 17 00:00:00 2001 From: Sam Cheng Hung Date: Thu, 26 Jul 2018 14:29:53 +0800 Subject: [PATCH 07/25] Adds fee-summary bar, adds amount directive, adds support for fee-summary overlapping with content on scrollable small screens --- src/js/directives/amount.js | 21 +++++++++++++ src/sass/components/amount.scss | 24 ++++++++++++++ src/sass/components/components.scss | 2 ++ src/sass/components/fee-summary.scss | 33 +++++++++++++++++++ src/sass/components/ion-content.scss | 4 +++ src/sass/views/review.scss | 5 +++ www/css/main.css | 47 ++++++++++++++++++++++++++++ www/views/includes/amount.html | 6 ++++ www/views/review.html | 13 +++++++- 9 files changed, 154 insertions(+), 1 deletion(-) create mode 100644 src/js/directives/amount.js create mode 100644 src/sass/components/amount.scss create mode 100644 src/sass/components/fee-summary.scss create mode 100644 www/views/includes/amount.html diff --git a/src/js/directives/amount.js b/src/js/directives/amount.js new file mode 100644 index 000000000..e86bec2fe --- /dev/null +++ b/src/js/directives/amount.js @@ -0,0 +1,21 @@ +'use strict'; +angular.module('bitcoincom.directives') + .directive('amount', [ + '$timeout', + function($timeout) { + return { + restrict: 'E', + scope: { + value: '=', + currency: '=' + }, + templateUrl: 'views/includes/amount.html', + controller: ['$scope', function($scope) { + var valueFormatted = parseFloat($scope.value).toFixed(8); + $scope.start = valueFormatted.slice(0, -5); + $scope.middle = valueFormatted.slice(-5, -2); + $scope.end = valueFormatted.substr(valueFormatted.length - 2); + }] + }; + } +]); \ No newline at end of file diff --git a/src/sass/components/amount.scss b/src/sass/components/amount.scss new file mode 100644 index 000000000..eb0768f4f --- /dev/null +++ b/src/sass/components/amount.scss @@ -0,0 +1,24 @@ +.amount { + .start, + .middle, + .end, + .currency { + display: inline-block; + } + + .start { + font-size: 14px; + } + + .middle { + font-size: 11px; + } + + .end { + font-size: 11px; + } + + .currency { + font-size: 14px; + } +} \ No newline at end of file diff --git a/src/sass/components/components.scss b/src/sass/components/components.scss index 180279125..8d8346265 100644 --- a/src/sass/components/components.scss +++ b/src/sass/components/components.scss @@ -7,3 +7,5 @@ @import "address"; @import "action-minor"; @import "expand-content"; +@import "fee-summary"; +@import "amount"; diff --git a/src/sass/components/fee-summary.scss b/src/sass/components/fee-summary.scss new file mode 100644 index 000000000..5f5236d0c --- /dev/null +++ b/src/sass/components/fee-summary.scss @@ -0,0 +1,33 @@ +.fee-summary { + position: relative; + display: flex; + justify-content: space-between; + width: 100%; + padding: 5px 12px 15px; + box-sizing: border-box; + background-color: #F2F2F2; + + &:before { + content: ''; + position: absolute; + left: 0; + top: -15px; + width: 100%; + height: 15px; + background: linear-gradient(to bottom, rgba(242,242,242,0) 0%,rgba(242,242,242,1) 100%); + } + + .fee-fiat { + &.positive { + color: #70955F; + } + + &.negative { + color: #C24633; + } + } + + .fee-crypto { + color: #BCBCBC; + } +} \ No newline at end of file diff --git a/src/sass/components/ion-content.scss b/src/sass/components/ion-content.scss index 7be47c9ab..56f3960a0 100644 --- a/src/sass/components/ion-content.scss +++ b/src/sass/components/ion-content.scss @@ -10,4 +10,8 @@ ion-content { &.padded-bottom-cta { bottom: 92px; } + + &.padded-bottom-cta-with-summary { + bottom: 134px; + } } \ No newline at end of file diff --git a/src/sass/views/review.scss b/src/sass/views/review.scss index e1d4ebd07..67733fe22 100644 --- a/src/sass/views/review.scss +++ b/src/sass/views/review.scss @@ -5,4 +5,9 @@ margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */ margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */ } + + .fee-summary { + position: absolute; + bottom: 92px; + } } \ No newline at end of file diff --git a/www/css/main.css b/www/css/main.css index df8779400..063f60ff7 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -15074,6 +15074,9 @@ log-options #check-bar .checkbox-icon { /* iOS 11.0 */ margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */ } + #view-review .fee-summary { + position: absolute; + bottom: 92px; } .gravatar { border-radius: 3px; @@ -15127,6 +15130,9 @@ ion-content.bg-neutral { ion-content.padded-bottom-cta { bottom: 92px; } +ion-content.padded-bottom-cta-with-summary { + bottom: 134px; } + .card.card-gutter-compact { margin: 10px 12px; } @@ -15212,6 +15218,47 @@ ion-content.padded-bottom-cta { opacity: 1; transform: scale(1, 1); } +.fee-summary { + position: relative; + display: flex; + justify-content: space-between; + width: 100%; + padding: 5px 12px 15px; + box-sizing: border-box; + background-color: #F2F2F2; } + .fee-summary:before { + content: ''; + position: absolute; + left: 0; + top: -15px; + width: 100%; + height: 15px; + background: linear-gradient(to bottom, rgba(242, 242, 242, 0) 0%, #f2f2f2 100%); } + .fee-summary .fee-fiat.positive { + color: #70955F; } + .fee-summary .fee-fiat.negative { + color: #C24633; } + .fee-summary .fee-crypto { + color: #BCBCBC; } + +.amount .start, +.amount .middle, +.amount .end, +.amount .currency { + display: inline-block; } + +.amount .start { + font-size: 14px; } + +.amount .middle { + font-size: 11px; } + +.amount .end { + font-size: 11px; } + +.amount .currency { + font-size: 14px; } + /* This is for rules that don't yet have a home. * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/ */ diff --git a/www/views/includes/amount.html b/www/views/includes/amount.html new file mode 100644 index 000000000..791983c06 --- /dev/null +++ b/www/views/includes/amount.html @@ -0,0 +1,6 @@ +
+ {{start}} + {{middle}} + {{end}} + {{currency}} +
\ No newline at end of file diff --git a/www/views/review.html b/www/views/review.html index 9de1a403e..4995d3d25 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -7,7 +7,7 @@ -
@@ -63,6 +63,17 @@
+ +
+
Fee: Less than 1 cent
+
+ +
+
+ Date: Fri, 27 Jul 2018 12:29:34 +0800 Subject: [PATCH 08/25] Updates amount font size --- src/sass/components/amount.scss | 8 ++++---- src/sass/components/fee-summary.scss | 2 +- www/css/main.css | 10 +++++----- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/sass/components/amount.scss b/src/sass/components/amount.scss index eb0768f4f..3280c0706 100644 --- a/src/sass/components/amount.scss +++ b/src/sass/components/amount.scss @@ -7,18 +7,18 @@ } .start { - font-size: 14px; + font-size: 1em; } .middle { - font-size: 11px; + font-size: 0.7857em; } .end { - font-size: 11px; + font-size: 0.7857em; } .currency { - font-size: 14px; + font-size: 1em; } } \ No newline at end of file diff --git a/src/sass/components/fee-summary.scss b/src/sass/components/fee-summary.scss index 5f5236d0c..404643a82 100644 --- a/src/sass/components/fee-summary.scss +++ b/src/sass/components/fee-summary.scss @@ -28,6 +28,6 @@ } .fee-crypto { - color: #BCBCBC; + color: #A7A7A7; } } \ No newline at end of file diff --git a/www/css/main.css b/www/css/main.css index 063f60ff7..7a064f812 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -15239,7 +15239,7 @@ ion-content.padded-bottom-cta-with-summary { .fee-summary .fee-fiat.negative { color: #C24633; } .fee-summary .fee-crypto { - color: #BCBCBC; } + color: #A7A7A7; } .amount .start, .amount .middle, @@ -15248,16 +15248,16 @@ ion-content.padded-bottom-cta-with-summary { display: inline-block; } .amount .start { - font-size: 14px; } + font-size: 1em; } .amount .middle { - font-size: 11px; } + font-size: 0.7857em; } .amount .end { - font-size: 11px; } + font-size: 0.7857em; } .amount .currency { - font-size: 14px; } + font-size: 1em; } /* This is for rules that don't yet have a home. * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/ From 47de79cc64ec2ce6856960938a7b854a0679a0ab Mon Sep 17 00:00:00 2001 From: Sam Cheng Hung Date: Fri, 27 Jul 2018 17:03:09 +0800 Subject: [PATCH 09/25] Adds support for 0, 2, 3 and 8 decimal places and locale commas and decimals --- src/js/directives/amount.js | 89 ++++++++++++++++++++++++++------- src/sass/components/amount.scss | 3 ++ www/css/main.css | 9 ++-- www/views/includes/amount.html | 5 +- www/views/review.html | 4 +- 5 files changed, 84 insertions(+), 26 deletions(-) diff --git a/src/js/directives/amount.js b/src/js/directives/amount.js index e86bec2fe..ff61288b3 100644 --- a/src/js/directives/amount.js +++ b/src/js/directives/amount.js @@ -1,21 +1,76 @@ 'use strict'; + +/** + * @desc amount directive that can be used to display formatted financial values + * @example + */ angular.module('bitcoincom.directives') - .directive('amount', [ - '$timeout', - function($timeout) { - return { - restrict: 'E', - scope: { - value: '=', - currency: '=' - }, - templateUrl: 'views/includes/amount.html', - controller: ['$scope', function($scope) { - var valueFormatted = parseFloat($scope.value).toFixed(8); - $scope.start = valueFormatted.slice(0, -5); - $scope.middle = valueFormatted.slice(-5, -2); - $scope.end = valueFormatted.substr(valueFormatted.length - 2); - }] + .directive('amount', [ + '$timeout', + function($timeout) { + return { + restrict: 'E', + scope: { + value: '@', + currency: '@' + }, + templateUrl: 'views/includes/amount.html', + controller: ['$scope', function($scope) { + var decimalPlaces = { + '0': ['BIF', 'CLP', 'DJF', 'GNF', 'ILS', 'JPY', 'KMF', 'KRW', 'MGA', 'PYG', 'RWF', 'UGX', 'VND', 'VUV', 'XAF', 'XOF', 'XPF'], + '3': ['BHD', 'IQD', 'JOD', 'KWD', 'OMR', 'TND'], + '8': ['BCH', 'BTC'] }; - } + + var numberWithCommas = function(x) { + return parseFloat(x).toLocaleString(); + }; + + var buildAmount = function(start, middle, end) { + $scope.start = start; + $scope.middle = middle; + $scope.end = end; + }; + + var getDecimalPlaces = function(currency) { + if (decimalPlaces['0'].indexOf($scope.currency.toUpperCase()) > -1) return '0'; + if (decimalPlaces['3'].indexOf($scope.currency.toUpperCase()) > -1) return '3'; + if (decimalPlaces['8'].indexOf($scope.currency.toUpperCase()) > -1) return '8'; + return '2'; + }; + + switch (getDecimalPlaces($scope.currency)) { + case '0': + var valueFormatted = numberWithCommas(Math.round(parseFloat($scope.value))); + buildAmount(valueFormatted, '', ''); + break; + + case '2': + var valueProcessing = parseFloat(parseFloat($scope.value).toFixed(2)); + var valueFormatted = numberWithCommas(valueProcessing); + buildAmount(valueFormatted, '', ''); + break; + + case '3': + var valueProcessing = parseFloat(parseFloat($scope.value).toFixed(3)); + var valueFormatted = numberWithCommas(valueProcessing); + buildAmount(valueFormatted, '', ''); + break; + + case '8': + var valueFormatted = parseFloat($scope.value).toFixed(8); + if (parseFloat($scope.value) == 0) { + buildAmount('0', '', ''); + } else { + buildAmount(valueFormatted, '', ''); + var start = numberWithCommas(valueFormatted.slice(0, -5)); + var middle = valueFormatted.slice(-5, -2); + var end = valueFormatted.substr(valueFormatted.length - 2); + buildAmount(start, middle, end); + } + break; + } + }] + }; + } ]); \ No newline at end of file diff --git a/src/sass/components/amount.scss b/src/sass/components/amount.scss index 3280c0706..d8fe552a2 100644 --- a/src/sass/components/amount.scss +++ b/src/sass/components/amount.scss @@ -12,13 +12,16 @@ .middle { font-size: 0.7857em; + margin-left: 5px; } .end { font-size: 0.7857em; + margin-left: 5px; } .currency { font-size: 1em; + margin-left: 5px; } } \ No newline at end of file diff --git a/www/css/main.css b/www/css/main.css index 7a064f812..3b7ddca9d 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -15251,13 +15251,16 @@ ion-content.padded-bottom-cta-with-summary { font-size: 1em; } .amount .middle { - font-size: 0.7857em; } + font-size: 0.7857em; + margin-left: 5px; } .amount .end { - font-size: 0.7857em; } + font-size: 0.7857em; + margin-left: 5px; } .amount .currency { - font-size: 1em; } + font-size: 1em; + margin-left: 5px; } /* This is for rules that don't yet have a home. * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/ diff --git a/www/views/includes/amount.html b/www/views/includes/amount.html index 791983c06..5d006fe46 100644 --- a/www/views/includes/amount.html +++ b/www/views/includes/amount.html @@ -1,6 +1,3 @@
- {{start}} - {{middle}} - {{end}} - {{currency}} + {{start}}{{middle}}{{end}}{{currency}}
\ No newline at end of file diff --git a/www/views/review.html b/www/views/review.html index 4995d3d25..64c256fd8 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -69,8 +69,8 @@
+ value="{{fee.value}}" + currency="{{fee.currency}}">
From 2b32fe9bdccb603cef9d85f5d4c1bf09197dcd07 Mon Sep 17 00:00:00 2001 From: Sam Cheng Hung Date: Fri, 27 Jul 2018 17:04:53 +0800 Subject: [PATCH 10/25] Changes amount directive scope values to bind to parent scope property --- src/js/directives/amount.js | 4 ++-- www/views/review.html | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/js/directives/amount.js b/src/js/directives/amount.js index ff61288b3..bf519c0d0 100644 --- a/src/js/directives/amount.js +++ b/src/js/directives/amount.js @@ -11,8 +11,8 @@ angular.module('bitcoincom.directives') return { restrict: 'E', scope: { - value: '@', - currency: '@' + value: '=', + currency: '=' }, templateUrl: 'views/includes/amount.html', controller: ['$scope', function($scope) { diff --git a/www/views/review.html b/www/views/review.html index 64c256fd8..4995d3d25 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -69,8 +69,8 @@
+ value="fee.value" + currency="fee.currency">
From 2b96293c80302181f52b0c4d6701b342fee974ab Mon Sep 17 00:00:00 2001 From: Sam Cheng Hung Date: Mon, 30 Jul 2018 16:40:16 +0800 Subject: [PATCH 11/25] Move amount directive to a separate branch --- src/js/directives/amount.js | 76 ----------------------------- src/sass/components/amount.scss | 27 ---------- src/sass/components/components.scss | 1 - www/css/main.css | 21 -------- 4 files changed, 125 deletions(-) delete mode 100644 src/js/directives/amount.js delete mode 100644 src/sass/components/amount.scss diff --git a/src/js/directives/amount.js b/src/js/directives/amount.js deleted file mode 100644 index bf519c0d0..000000000 --- a/src/js/directives/amount.js +++ /dev/null @@ -1,76 +0,0 @@ -'use strict'; - -/** - * @desc amount directive that can be used to display formatted financial values - * @example - */ -angular.module('bitcoincom.directives') - .directive('amount', [ - '$timeout', - function($timeout) { - return { - restrict: 'E', - scope: { - value: '=', - currency: '=' - }, - templateUrl: 'views/includes/amount.html', - controller: ['$scope', function($scope) { - var decimalPlaces = { - '0': ['BIF', 'CLP', 'DJF', 'GNF', 'ILS', 'JPY', 'KMF', 'KRW', 'MGA', 'PYG', 'RWF', 'UGX', 'VND', 'VUV', 'XAF', 'XOF', 'XPF'], - '3': ['BHD', 'IQD', 'JOD', 'KWD', 'OMR', 'TND'], - '8': ['BCH', 'BTC'] - }; - - var numberWithCommas = function(x) { - return parseFloat(x).toLocaleString(); - }; - - var buildAmount = function(start, middle, end) { - $scope.start = start; - $scope.middle = middle; - $scope.end = end; - }; - - var getDecimalPlaces = function(currency) { - if (decimalPlaces['0'].indexOf($scope.currency.toUpperCase()) > -1) return '0'; - if (decimalPlaces['3'].indexOf($scope.currency.toUpperCase()) > -1) return '3'; - if (decimalPlaces['8'].indexOf($scope.currency.toUpperCase()) > -1) return '8'; - return '2'; - }; - - switch (getDecimalPlaces($scope.currency)) { - case '0': - var valueFormatted = numberWithCommas(Math.round(parseFloat($scope.value))); - buildAmount(valueFormatted, '', ''); - break; - - case '2': - var valueProcessing = parseFloat(parseFloat($scope.value).toFixed(2)); - var valueFormatted = numberWithCommas(valueProcessing); - buildAmount(valueFormatted, '', ''); - break; - - case '3': - var valueProcessing = parseFloat(parseFloat($scope.value).toFixed(3)); - var valueFormatted = numberWithCommas(valueProcessing); - buildAmount(valueFormatted, '', ''); - break; - - case '8': - var valueFormatted = parseFloat($scope.value).toFixed(8); - if (parseFloat($scope.value) == 0) { - buildAmount('0', '', ''); - } else { - buildAmount(valueFormatted, '', ''); - var start = numberWithCommas(valueFormatted.slice(0, -5)); - var middle = valueFormatted.slice(-5, -2); - var end = valueFormatted.substr(valueFormatted.length - 2); - buildAmount(start, middle, end); - } - break; - } - }] - }; - } -]); \ No newline at end of file diff --git a/src/sass/components/amount.scss b/src/sass/components/amount.scss deleted file mode 100644 index d8fe552a2..000000000 --- a/src/sass/components/amount.scss +++ /dev/null @@ -1,27 +0,0 @@ -.amount { - .start, - .middle, - .end, - .currency { - display: inline-block; - } - - .start { - font-size: 1em; - } - - .middle { - font-size: 0.7857em; - margin-left: 5px; - } - - .end { - font-size: 0.7857em; - margin-left: 5px; - } - - .currency { - font-size: 1em; - margin-left: 5px; - } -} \ No newline at end of file diff --git a/src/sass/components/components.scss b/src/sass/components/components.scss index 8d8346265..a689138bf 100644 --- a/src/sass/components/components.scss +++ b/src/sass/components/components.scss @@ -8,4 +8,3 @@ @import "action-minor"; @import "expand-content"; @import "fee-summary"; -@import "amount"; diff --git a/www/css/main.css b/www/css/main.css index 3b7ddca9d..f059eeaac 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -15241,27 +15241,6 @@ ion-content.padded-bottom-cta-with-summary { .fee-summary .fee-crypto { color: #A7A7A7; } -.amount .start, -.amount .middle, -.amount .end, -.amount .currency { - display: inline-block; } - -.amount .start { - font-size: 1em; } - -.amount .middle { - font-size: 0.7857em; - margin-left: 5px; } - -.amount .end { - font-size: 0.7857em; - margin-left: 5px; } - -.amount .currency { - font-size: 1em; - margin-left: 5px; } - /* This is for rules that don't yet have a home. * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/ */ From 5c4890fac48c60f6428e3acc73bcc96fdf6873f4 Mon Sep 17 00:00:00 2001 From: Sam Cheng Hung Date: Mon, 30 Jul 2018 17:34:20 +0800 Subject: [PATCH 12/25] Removes amount directive template --- www/views/includes/amount.html | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 www/views/includes/amount.html diff --git a/www/views/includes/amount.html b/www/views/includes/amount.html deleted file mode 100644 index 5d006fe46..000000000 --- a/www/views/includes/amount.html +++ /dev/null @@ -1,3 +0,0 @@ -
- {{start}}{{middle}}{{end}}{{currency}} -
\ No newline at end of file From 51bd97012173e0487a11a3224a6100bf648b5897 Mon Sep 17 00:00:00 2001 From: Sam Cheng Hung Date: Mon, 30 Jul 2018 17:46:00 +0800 Subject: [PATCH 13/25] Merges amount directive From 1895e0dbeb3fbee50bb2e7141d1d2b26edabd260 Mon Sep 17 00:00:00 2001 From: Sam Cheng Hung Date: Tue, 31 Jul 2018 16:23:45 +0800 Subject: [PATCH 14/25] Adds watcher for changes to value or currency scope variables --- src/js/directives/amount.js | 65 ++++++++++++++++++++----------------- 1 file changed, 36 insertions(+), 29 deletions(-) diff --git a/src/js/directives/amount.js b/src/js/directives/amount.js index f991f0a28..9622ca09d 100644 --- a/src/js/directives/amount.js +++ b/src/js/directives/amount.js @@ -48,37 +48,44 @@ angular.module('bitcoincom.directives') return '2'; }; - switch (getDecimalPlaces($scope.currency)) { - case '0': - var valueFormatted = numberWithCommas(Math.round(parseFloat($scope.value))); - buildAmount(valueFormatted, '', ''); - break; - - case '2': - var valueProcessing = parseFloat(parseFloat($scope.value).toFixed(2)); - var valueFormatted = numberWithCommas(valueProcessing); - buildAmount(valueFormatted, '', ''); - break; - - case '3': - var valueProcessing = parseFloat(parseFloat($scope.value).toFixed(3)); - var valueFormatted = numberWithCommas(valueProcessing); - buildAmount(valueFormatted, '', ''); - break; - - case '8': - var valueFormatted = parseFloat($scope.value).toFixed(8); - if (parseFloat($scope.value) == 0) { - buildAmount('0', '', ''); - } else { + var formatNumbers = function(currency, value) { + switch (getDecimalPlaces(currency)) { + case '0': + var valueFormatted = numberWithCommas(Math.round(parseFloat(value))); buildAmount(valueFormatted, '', ''); - var start = numberWithCommas(valueFormatted.slice(0, -5)); - var middle = valueFormatted.slice(-5, -2); - var end = valueFormatted.substr(valueFormatted.length - 2); - buildAmount(start, middle, end); - } - break; + break; + + case '2': + var valueProcessing = parseFloat(parseFloat(value).toFixed(2)); + var valueFormatted = numberWithCommas(valueProcessing); + buildAmount(valueFormatted, '', ''); + break; + + case '3': + var valueProcessing = parseFloat(parseFloat(value).toFixed(3)); + var valueFormatted = numberWithCommas(valueProcessing); + buildAmount(valueFormatted, '', ''); + break; + + case '8': + var valueFormatted = parseFloat(value).toFixed(8); + if (parseFloat(value) == 0) { + buildAmount('0', '', ''); + } else { + buildAmount(valueFormatted, '', ''); + var start = numberWithCommas(valueFormatted.slice(0, -5)); + var middle = valueFormatted.slice(-5, -2); + var end = valueFormatted.substr(valueFormatted.length - 2); + buildAmount(start, middle, end); + } + break; + } } + + formatNumbers($scope.currency, $scope.value); + $scope.$watchGroup(['currency', 'value'], function() { + formatNumbers($scope.currency, $scope.value); + }); }] }; } From f3a350f6645ddcdfd03b2f926e8af2b67dd93110 Mon Sep 17 00:00:00 2001 From: Brendon Duncan Date: Wed, 1 Aug 2018 11:33:24 +1200 Subject: [PATCH 15/25] Redirecting to new Review screen when sending max. --- src/js/controllers/amount.js | 2 +- src/js/controllers/review.controller.js | 9 +++++++++ src/js/controllers/review.js | 5 ----- src/js/routes.js | 1 + 4 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 src/js/controllers/review.controller.js delete mode 100644 src/js/controllers/review.js diff --git a/src/js/controllers/amount.js b/src/js/controllers/amount.js index 52695e829..399acde49 100644 --- a/src/js/controllers/amount.js +++ b/src/js/controllers/amount.js @@ -508,7 +508,7 @@ angular.module('copayApp.controllers').controller('amountController', function($ } } - $state.transitionTo('tabs.send.confirm', confirmData); + $state.transitionTo('tabs.send.review', confirmData); } $scope.useSendMax = null; } diff --git a/src/js/controllers/review.controller.js b/src/js/controllers/review.controller.js new file mode 100644 index 000000000..217e15b00 --- /dev/null +++ b/src/js/controllers/review.controller.js @@ -0,0 +1,9 @@ +'use strict'; + +angular + .module('copayApp.controllers') + .controller('reviewController', reviewController); + +function reviewController() { + var vm = this; +} diff --git a/src/js/controllers/review.js b/src/js/controllers/review.js deleted file mode 100644 index 1effff0ba..000000000 --- a/src/js/controllers/review.js +++ /dev/null @@ -1,5 +0,0 @@ -'use strict'; - -angular.module('copayApp.controllers').controller('reviewController', function($rootScope, $scope, $interval, $filter, $timeout, $ionicScrollDelegate, gettextCatalog, walletService, platformInfo, lodash, configService, $stateParams, $window, $state, $log, profileService, bitcore, bitcoreCash, txFormatService, ongoingProcess, $ionicModal, popupService, $ionicHistory, $ionicConfig, payproService, feeService, bwcError, txConfirmNotification, externalLinkService, firebaseEventsService, soundService) { - -}); diff --git a/src/js/routes.js b/src/js/routes.js index 79b88e2f7..99513c278 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -321,6 +321,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr views: { 'tab-send@tabs': { controller: 'reviewController', + controllerAs: 'vm', templateUrl: 'views/review.html' } }, From 52f1e93e5b7688364a5fc7a73442731a6325c55b Mon Sep 17 00:00:00 2001 From: Brendon Duncan Date: Wed, 1 Aug 2018 11:36:25 +1200 Subject: [PATCH 16/25] Header text. --- i18n/po/template.pot | 4 ++++ www/views/review.html | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/i18n/po/template.pot b/i18n/po/template.pot index a23e5dbae..caa984046 100644 --- a/i18n/po/template.pot +++ b/i18n/po/template.pot @@ -3699,3 +3699,7 @@ msgstr "" #: www/views/includes/walletInfo.html:18 msgid "{{wallet.m}}-of-{{wallet.n}}" msgstr "" + +#: www/views/review.html:4 +msgid "Review Transaction" +msgstr "" \ No newline at end of file diff --git a/www/views/review.html b/www/views/review.html index 4995d3d25..35fb6a51a 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -1,7 +1,7 @@ - {{'Review'|translate}} + {{'Review Transaction' | translate}} From d6176e0f3ee97514017195d0a2bea83d45ae0b57 Mon Sep 17 00:00:00 2001 From: Brendon Duncan Date: Wed, 1 Aug 2018 14:28:26 +1200 Subject: [PATCH 17/25] Getting crypto value. --- src/js/controllers/review.controller.js | 46 ++++++++++++++++++++++++- src/js/routes.js | 2 +- 2 files changed, 46 insertions(+), 2 deletions(-) diff --git a/src/js/controllers/review.controller.js b/src/js/controllers/review.controller.js index 217e15b00..937790d9c 100644 --- a/src/js/controllers/review.controller.js +++ b/src/js/controllers/review.controller.js @@ -4,6 +4,50 @@ angular .module('copayApp.controllers') .controller('reviewController', reviewController); -function reviewController() { +function reviewController(configService, $log, $scope,) { var vm = this; + + vm.primaryAmount = '0'; + vm.primaryCurrency = ''; + + vm.secondaryAmount = ''; + vm.secondaryCurrency = ''; + + var config; + var amount = { + crypto: { + quantity: 0, + currency: '' + }, + fiat: null + }; + var priceDisplayIsFiat = true; + + $scope.$on("$ionicView.beforeEnter", onBeforeEnter); + + + function onBeforeEnter(event, data) { + + amount.crypto.quantity = data.stateParams.toAmount; + amount.crypto.currency = data.stateParams.coin.toUpperCase(); + console.log('cryptoAmount', cryptoAmount); + //vm.amount = cryptoAmount.toFixed(8); + console.log('vm.amount:', vm.amount); + + vm.secondaryAmount = amount.crypto.quantity; + vm.secondaryCurrency = amount.crypto.currency; + + configService.get(function onConfig(err, configCache) { + if (err) { + $log.err('Error getting config.', err); + return; + } else { + console.log('Got config.'); + config = configCache; + // Use this later if have time + priceDisplayIsFiat = config.wallet.settings.priceDisplay === 'fiat'; + } + }); + } + } diff --git a/src/js/routes.js b/src/js/routes.js index 99513c278..92193090a 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -317,7 +317,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr } }) .state('tabs.send.review', { - url: '/review', + url: '/review/:coin/:fromWalletId/:toAmount/:useSendMax', views: { 'tab-send@tabs': { controller: 'reviewController', From 38c3f2fb70f97f16029c1ea7482025c2d2658b49 Mon Sep 17 00:00:00 2001 From: Brendon Duncan Date: Wed, 1 Aug 2018 17:17:34 +1200 Subject: [PATCH 18/25] Displaying the amount. --- src/js/controllers/review.controller.js | 55 +++++++++++++++++++------ src/js/routes.js | 2 +- www/views/review.html | 4 +- 3 files changed, 45 insertions(+), 16 deletions(-) diff --git a/src/js/controllers/review.controller.js b/src/js/controllers/review.controller.js index 937790d9c..4995e9dc2 100644 --- a/src/js/controllers/review.controller.js +++ b/src/js/controllers/review.controller.js @@ -4,33 +4,37 @@ angular .module('copayApp.controllers') .controller('reviewController', reviewController); -function reviewController(configService, $log, $scope,) { +function reviewController(configService, $log, $scope, txFormatService) { var vm = this; - vm.primaryAmount = '0'; + vm.primaryAmount = ''; vm.primaryCurrency = ''; vm.secondaryAmount = ''; vm.secondaryCurrency = ''; - var config; - var amount = { - crypto: { - quantity: 0, - currency: '' - }, - fiat: null - }; - var priceDisplayIsFiat = true; + + var coin = ''; + //var config = null; + var satoshis = null; + + //var priceDisplayIsFiat = true; $scope.$on("$ionicView.beforeEnter", onBeforeEnter); function onBeforeEnter(event, data) { - amount.crypto.quantity = data.stateParams.toAmount; + satoshis = parseInt(data.stateParams.amount, 10); + coin = data.stateParams.coin; + + updateAmount(); + + + /* + //amount.crypto.quantity = ; amount.crypto.currency = data.stateParams.coin.toUpperCase(); - console.log('cryptoAmount', cryptoAmount); + console.log('crypto:', JSON.stringify(amount.crypto)); //vm.amount = cryptoAmount.toFixed(8); console.log('vm.amount:', vm.amount); @@ -48,6 +52,31 @@ function reviewController(configService, $log, $scope,) { priceDisplayIsFiat = config.wallet.settings.priceDisplay === 'fiat'; } }); + */ } + function updateAmount() { + if (typeof satoshis !== 'number') { + return; + } + + var amountStr = txFormatService.formatAmountStr(coin, satoshis); + var amountParts = amountStr.split(' '); + vm.primaryAmount = amountParts[0]; + vm.primaryCurrency = amountParts[1]; + txFormatService.formatAlternativeStr(coin, satoshis, function(v) { + if (!v) { + vm.secondaryAmount = ''; + vm.secondaryCurrency = ''; + return; + } + vm.secondaryAmount = vm.primaryAmount; + vm.secondaryCurrency = vm.primaryCurrency; + + var fiatParts = v.split(' '); + vm.primaryAmount = fiatParts[0]; + vm.primaryCurrency = fiatParts[1]; + }); + } + } diff --git a/src/js/routes.js b/src/js/routes.js index 92193090a..d38e0e0de 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -317,7 +317,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr } }) .state('tabs.send.review', { - url: '/review/:coin/:fromWalletId/:toAmount/:useSendMax', + url: '/review/:coin/:fromWalletId/:amount/:useSendMax', views: { 'tab-send@tabs': { controller: 'reviewController', diff --git a/www/views/review.html b/www/views/review.html index 35fb6a51a..ebec1581b 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -11,8 +11,8 @@ ng-init="memoExpanded = false">
-

13.98 USD

-

0.014 BCH

+

+

From 0caa3fb92afbdc9e5c918612b5945b009da2ff4d Mon Sep 17 00:00:00 2001 From: Brendon Duncan Date: Thu, 2 Aug 2018 09:48:12 +1200 Subject: [PATCH 19/25] From wallet details. --- src/js/controllers/review.controller.js | 118 ++++++++++++++++++------ www/views/review.html | 14 +-- 2 files changed, 96 insertions(+), 36 deletions(-) diff --git a/src/js/controllers/review.controller.js b/src/js/controllers/review.controller.js index 4995e9dc2..a38084b91 100644 --- a/src/js/controllers/review.controller.js +++ b/src/js/controllers/review.controller.js @@ -4,68 +4,116 @@ angular .module('copayApp.controllers') .controller('reviewController', reviewController); -function reviewController(configService, $log, $scope, txFormatService) { +function reviewController(configService, gettextCatalog, profileService, $scope, txFormatService) { var vm = this; + vm.origin = { + balanceAmount: '', + balanceCurrency: '', + color: '', + currency: '', + name: '', + }; vm.primaryAmount = ''; vm.primaryCurrency = ''; - vm.secondaryAmount = ''; vm.secondaryCurrency = ''; - var coin = ''; - //var config = null; + var originWalletId = ''; + var priceDisplayIsFiat = true; var satoshis = null; + var toAddress = ''; + var toWalletId = ''; - //var priceDisplayIsFiat = true; + + $scope.$on("$ionicView.beforeEnter", onBeforeEnter); function onBeforeEnter(event, data) { - satoshis = parseInt(data.stateParams.amount, 10); coin = data.stateParams.coin; - - updateAmount(); - - - /* - //amount.crypto.quantity = ; - amount.crypto.currency = data.stateParams.coin.toUpperCase(); - console.log('crypto:', JSON.stringify(amount.crypto)); - //vm.amount = cryptoAmount.toFixed(8); - console.log('vm.amount:', vm.amount); - - vm.secondaryAmount = amount.crypto.quantity; - vm.secondaryCurrency = amount.crypto.currency; + originWalletId = data.stateParams.fromWalletId; + satoshis = parseInt(data.stateParams.amount, 10); + toAddress = data.stateParams.toAddress; + + var originWallet = profileService.getWallet(originWalletId); + vm.origin.currency = originWallet.coin.toUpperCase(); + vm.origin.color = originWallet.color; + vm.origin.name = originWallet.name; configService.get(function onConfig(err, configCache) { if (err) { $log.err('Error getting config.', err); - return; } else { console.log('Got config.'); - config = configCache; + //config = configCache; // Use this later if have time - priceDisplayIsFiat = config.wallet.settings.priceDisplay === 'fiat'; + priceDisplayIsFiat = configCache.wallet.settings.priceDisplay === 'fiat'; } + updateSendAmounts(); + getOriginWalletBalance(originWallet); }); - */ } - function updateAmount() { + function getOriginWalletBalance(originWallet) { + console.log('origin wallet error:', originWallet.error); + var balanceCryptoAmount = ''; + var balanceCryptoCurrencyCode = ''; + var balanceFiatAmount = ''; + var balanceFiatCurrency = '' + + var originWalletStatus = null; + if (originWallet.status.isValid) { + originWalletStatus = originWallet.status; + } else if (originWallet.cachedStatus.isValid) { + originWalletStatus = originWallet.cachedStatus; + } else { + vm.origin.balanceAmount = ''; + vm.origin.balanceCurrency = ''; + return; + } + + if (originWalletStatus) { + var cryptoBalanceParts = originWalletStatus.spendableBalanceStr.split(' '); + balanceCryptoAmount = cryptoBalanceParts[0]; + balanceCryptoCurrencyCode = cryptoBalanceParts.length > 1 ? cryptoBalanceParts[1] : ''; + + if (originWalletStatus.alternativeBalanceAvailable) { + balanceFiatAmount = originWalletStatus.spendableBalanceAlternative; + balanceFiatCurrency = originWalletStatus.alternativeIsoCode; + } + } + + if (priceDisplayIsFiat) { + vm.origin.balanceAmount = balanceFiatAmount ? balanceFiatAmount : balanceCryptoAmount; + vm.origin.balanceCurrency = balanceFiatAmount ? balanceFiatCurrency : balanceCryptoCurrencyCode; + } else { + vm.origin.balanceAmount = balanceCryptoAmount; + vm.origin.balanceCurrency = balanceCryptoCurrencyCode; + } + } + + function updateSendAmounts() { if (typeof satoshis !== 'number') { return; } + var cryptoAmount = ''; + var cryptoCurrencyCode = ''; var amountStr = txFormatService.formatAmountStr(coin, satoshis); - var amountParts = amountStr.split(' '); - vm.primaryAmount = amountParts[0]; - vm.primaryCurrency = amountParts[1]; + if (amountStr) { + var amountParts = amountStr.split(' '); + cryptoAmount = amountParts[0]; + cryptoCurrencyCode = amountParts.length > 1 ? amountParts[1] : ''; + } + // Want to avoid flashing of amount strings so do all formatting after this has returned. txFormatService.formatAlternativeStr(coin, satoshis, function(v) { if (!v) { + vm.primaryAmount = cryptoAmount; + vm.primaryCurrency = cryptoCurrencyCode; vm.secondaryAmount = ''; vm.secondaryCurrency = ''; return; @@ -74,8 +122,20 @@ function reviewController(configService, $log, $scope, txFormatService) { vm.secondaryCurrency = vm.primaryCurrency; var fiatParts = v.split(' '); - vm.primaryAmount = fiatParts[0]; - vm.primaryCurrency = fiatParts[1]; + var fiatAmount = fiatParts[0]; + var fiatCurrency = fiatParts.length > 1 ? fiatParts[1] : ''; + + if (priceDisplayIsFiat) { + vm.primaryAmount = fiatAmount; + vm.primaryCurrency = fiatCurrency; + vm.secondaryAmount = cryptoAmount; + vm.secondaryCurrency = cryptoCurrencyCode; + } else { + vm.primaryAmount = cryptoAmount; + vm.primaryCurrency = cryptoCurrencyCode; + vm.secondaryAmount = fiatAmount; + vm.secondaryCurrency = fiatCurrency; + } }); } diff --git a/www/views/review.html b/www/views/review.html index ebec1581b..d75ce9e48 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -10,24 +10,24 @@
-
-

-

+
+

{{vm.primaryAmount}} {{vm.primaryCurrency}}

+

{{vm.secondaryAmount}} {{vm.secondaryCurrency}}

-
From:
+
From:
 -

Personal Wallet (BCH)

-

128.67

+

{{vm.origin.name}} ({{vm.origin.currency}})

+

{{vm.origin.balanceAmount}} {{vm.origin.balanceCurrency}}

From e58c3bf438676226f44a140aba7630ef8d84a79d Mon Sep 17 00:00:00 2001 From: Brendon Duncan Date: Thu, 2 Aug 2018 10:07:25 +1200 Subject: [PATCH 20/25] From wallet currency colour. --- src/js/controllers/review.controller.js | 6 ++++-- www/views/review.html | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/js/controllers/review.controller.js b/src/js/controllers/review.controller.js index a38084b91..1e51bd5d0 100644 --- a/src/js/controllers/review.controller.js +++ b/src/js/controllers/review.controller.js @@ -12,6 +12,7 @@ function reviewController(configService, gettextCatalog, profileService, $scope, balanceCurrency: '', color: '', currency: '', + currencyColor: '', name: '', }; vm.primaryAmount = ''; @@ -44,14 +45,15 @@ function reviewController(configService, gettextCatalog, profileService, $scope, vm.origin.color = originWallet.color; vm.origin.name = originWallet.name; - configService.get(function onConfig(err, configCache) { + configService.get(function onConfig(err, config) { if (err) { $log.err('Error getting config.', err); } else { console.log('Got config.'); //config = configCache; // Use this later if have time - priceDisplayIsFiat = configCache.wallet.settings.priceDisplay === 'fiat'; + priceDisplayIsFiat = config.wallet.settings.priceDisplay === 'fiat'; + vm.origin.currencyColor = originWallet.coin === 'btc' ? config.bitcoinWalletColor : config.bitcoinCashWalletColor; } updateSendAmounts(); getOriginWalletBalance(originWallet); diff --git a/www/views/review.html b/www/views/review.html index d75ce9e48..2ee10e40a 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -26,7 +26,7 @@ style="background-color: {{vm.origin.color}}" >
 -

{{vm.origin.name}} ({{vm.origin.currency}})

+

{{vm.origin.name}} ({{vm.origin.currency}})

{{vm.origin.balanceAmount}} {{vm.origin.balanceCurrency}}

From 438ab94404512feb5901f508d7f790af85d04000 Mon Sep 17 00:00:00 2001 From: Brendon Duncan Date: Thu, 2 Aug 2018 10:20:03 +1200 Subject: [PATCH 21/25] Strings for translation. --- i18n/po/template.pot | 25 +++++++++++++++++++++++++ src/js/controllers/review.controller.js | 5 ++--- www/views/review.html | 3 ++- 3 files changed, 29 insertions(+), 4 deletions(-) diff --git a/i18n/po/template.pot b/i18n/po/template.pot index caa984046..7406fcb74 100644 --- a/i18n/po/template.pot +++ b/i18n/po/template.pot @@ -3702,4 +3702,29 @@ msgstr "" #: www/views/review.html:4 msgid "Review Transaction" +msgstr "" + +#: www/views/review.html:14 +msgid "You are sending" +msgstr "" + +#: www/views/review.html:22 +msgid "From:" +msgstr "" + +#: www/views/review.html:36 +msgid "To:" +msgstr "" + +#: www/views/review.html:53 +msgid "Add personal note" +msgstr "" + + +#: www/views/review.html:57 +msgid "Personal note:" +msgstr "" + +#: www/views/review.html:69 +msgid "Less than 1 cent" msgstr "" \ No newline at end of file diff --git a/src/js/controllers/review.controller.js b/src/js/controllers/review.controller.js index 1e51bd5d0..f0c443e96 100644 --- a/src/js/controllers/review.controller.js +++ b/src/js/controllers/review.controller.js @@ -7,6 +7,8 @@ angular function reviewController(configService, gettextCatalog, profileService, $scope, txFormatService) { var vm = this; + vm.feeCrypto = ''; + vm.feeFiat = ''; vm.origin = { balanceAmount: '', balanceCurrency: '', @@ -49,9 +51,6 @@ function reviewController(configService, gettextCatalog, profileService, $scope, if (err) { $log.err('Error getting config.', err); } else { - console.log('Got config.'); - //config = configCache; - // Use this later if have time priceDisplayIsFiat = config.wallet.settings.priceDisplay === 'fiat'; vm.origin.currencyColor = originWallet.coin === 'btc' ? config.bitcoinWalletColor : config.bitcoinCashWalletColor; } diff --git a/www/views/review.html b/www/views/review.html index 2ee10e40a..15c6d5978 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -11,6 +11,7 @@ ng-init="memoExpanded = false">
+

You are sending

{{vm.primaryAmount}} {{vm.primaryCurrency}}

{{vm.secondaryAmount}} {{vm.secondaryCurrency}}

@@ -49,7 +50,7 @@ ng-class="{ 'expand-content-revealed': memoExpanded }" ng-click="memoExpanded = !memoExpanded"> - Add a personal note + Add personal note
From ff643bf479958364a4a82dae6b7de24d6c065ea9 Mon Sep 17 00:00:00 2001 From: Brendon Duncan Date: Thu, 2 Aug 2018 11:48:41 +1200 Subject: [PATCH 22/25] Starting on destination UI. --- src/js/controllers/review.controller.js | 17 ++++++++++++++++- www/views/review.html | 2 +- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/js/controllers/review.controller.js b/src/js/controllers/review.controller.js index f0c443e96..9394b5ef2 100644 --- a/src/js/controllers/review.controller.js +++ b/src/js/controllers/review.controller.js @@ -7,6 +7,13 @@ angular function reviewController(configService, gettextCatalog, profileService, $scope, txFormatService) { var vm = this; + vm.destination = { + address: '', + balanceAmount: '', + balanceCurrecy: '', + color: '', + name: '' + }; vm.feeCrypto = ''; vm.feeFiat = ''; vm.origin = { @@ -27,7 +34,7 @@ function reviewController(configService, gettextCatalog, profileService, $scope, var priceDisplayIsFiat = true; var satoshis = null; var toAddress = ''; - var toWalletId = ''; + var destinationWalletId = ''; @@ -47,6 +54,14 @@ function reviewController(configService, gettextCatalog, profileService, $scope, vm.origin.color = originWallet.color; vm.origin.name = originWallet.name; + destinationWalletId = data.stateParams.toWalletId; + if (destinationWalletId) { + var destinationWallet = profileService.getWallet(destinationWalletId); + vm.destination.color = destinationWallet.color; + vm.destination.name = destinationWallet.name; + + } + configService.get(function onConfig(err, config) { if (err) { $log.err('Error getting config.', err); diff --git a/www/views/review.html b/www/views/review.html index 15c6d5978..0ec643b8b 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -37,7 +37,7 @@
-

Satoshi Nakamoto

+

{{vm.destination.name}}

128.67

From e525b2e8addcb9fcd5d97c6a67c3cbc254c59c17 Mon Sep 17 00:00:00 2001 From: Brendon Duncan Date: Thu, 2 Aug 2018 18:14:54 +1200 Subject: [PATCH 23/25] UI for destination as wallet. --- src/js/controllers/review.controller.js | 85 ++++++++++++++++--------- src/js/routes.js | 2 +- www/views/review.html | 13 ++-- 3 files changed, 66 insertions(+), 34 deletions(-) diff --git a/src/js/controllers/review.controller.js b/src/js/controllers/review.controller.js index 9394b5ef2..686cb5787 100644 --- a/src/js/controllers/review.controller.js +++ b/src/js/controllers/review.controller.js @@ -10,8 +10,12 @@ function reviewController(configService, gettextCatalog, profileService, $scope, vm.destination = { address: '', balanceAmount: '', - balanceCurrecy: '', + balanceCurrency: '', + coin: '', color: '', + currency: '', + currencyColor: '', + kind: '', // 'address', 'contact', 'wallet' name: '' }; vm.feeCrypto = ''; @@ -29,6 +33,7 @@ function reviewController(configService, gettextCatalog, profileService, $scope, vm.secondaryAmount = ''; vm.secondaryCurrency = ''; + var config = null; var coin = ''; var originWalletId = ''; var priceDisplayIsFiat = true; @@ -54,61 +59,83 @@ function reviewController(configService, gettextCatalog, profileService, $scope, vm.origin.color = originWallet.color; vm.origin.name = originWallet.name; - destinationWalletId = data.stateParams.toWalletId; - if (destinationWalletId) { - var destinationWallet = profileService.getWallet(destinationWalletId); - vm.destination.color = destinationWallet.color; - vm.destination.name = destinationWallet.name; - - } - - configService.get(function onConfig(err, config) { + configService.get(function onConfig(err, configCache) { if (err) { $log.err('Error getting config.', err); } else { + config = configCache; priceDisplayIsFiat = config.wallet.settings.priceDisplay === 'fiat'; vm.origin.currencyColor = originWallet.coin === 'btc' ? config.bitcoinWalletColor : config.bitcoinCashWalletColor; } updateSendAmounts(); getOriginWalletBalance(originWallet); + handleDestinationAsWallet(data.stateParams.toWalletId); }); } function getOriginWalletBalance(originWallet) { - console.log('origin wallet error:', originWallet.error); + var balanceText = getWalletBalanceDisplayText(originWallet); + vm.origin.balanceAmount = balanceText.amount; + vm.origin.balanceCurrecny = balanceText.currency; + } + + function getWalletBalanceDisplayText(wallet) { var balanceCryptoAmount = ''; var balanceCryptoCurrencyCode = ''; var balanceFiatAmount = ''; var balanceFiatCurrency = '' + var displayAmount = ''; + var displayCurrency = ''; - var originWalletStatus = null; - if (originWallet.status.isValid) { - originWalletStatus = originWallet.status; - } else if (originWallet.cachedStatus.isValid) { - originWalletStatus = originWallet.cachedStatus; - } else { - vm.origin.balanceAmount = ''; - vm.origin.balanceCurrency = ''; - return; + var walletStatus = null; + if (wallet.status.isValid) { + walletStatus = wallet.status; + } else if (wallet.cachedStatus.isValid) { + walletStatus = wallet.cachedStatus; } - if (originWalletStatus) { - var cryptoBalanceParts = originWalletStatus.spendableBalanceStr.split(' '); + if (walletStatus) { + var cryptoBalanceParts = walletStatus.spendableBalanceStr.split(' '); balanceCryptoAmount = cryptoBalanceParts[0]; balanceCryptoCurrencyCode = cryptoBalanceParts.length > 1 ? cryptoBalanceParts[1] : ''; - if (originWalletStatus.alternativeBalanceAvailable) { - balanceFiatAmount = originWalletStatus.spendableBalanceAlternative; - balanceFiatCurrency = originWalletStatus.alternativeIsoCode; + if (walletStatus.alternativeBalanceAvailable) { + balanceFiatAmount = walletStatus.spendableBalanceAlternative; + balanceFiatCurrency = walletStatus.alternativeIsoCode; } } if (priceDisplayIsFiat) { - vm.origin.balanceAmount = balanceFiatAmount ? balanceFiatAmount : balanceCryptoAmount; - vm.origin.balanceCurrency = balanceFiatAmount ? balanceFiatCurrency : balanceCryptoCurrencyCode; + displayAmount = balanceFiatAmount ? balanceFiatAmount : balanceCryptoAmount; + displayCurrency = balanceFiatAmount ? balanceFiatCurrency : balanceCryptoCurrencyCode; } else { - vm.origin.balanceAmount = balanceCryptoAmount; - vm.origin.balanceCurrency = balanceCryptoCurrencyCode; + displayAmount = balanceCryptoAmount; + displayCurrency = balanceCryptoCurrencyCode; + } + + return { + amount: displayAmount, + currency: displayCurrency + }; + } + + function handleDestinationAsWallet(walletId) { + destinationWalletId = walletId; + if (destinationWalletId) { + var destinationWallet = profileService.getWallet(destinationWalletId); + vm.destination.coin = destinationWallet.coin; + vm.destination.color = destinationWallet.color; + vm.destination.currency = destinationWallet.coin.toUpperCase(); + vm.destination.kind = 'wallet'; + vm.destination.name = destinationWallet.name; + + if (config) { + vm.destination.currencyColor = vm.destination.coin === 'btc' ? config.bitcoinWalletColor : config.bitcoinCashWalletColor; + } + + var balanceText = getWalletBalanceDisplayText(destinationWallet); + vm.destination.balanceAmount = balanceText.amount; + vm.destination.balanceCurrency = balanceText.currency; } } diff --git a/src/js/routes.js b/src/js/routes.js index d38e0e0de..38941021c 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -317,7 +317,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr } }) .state('tabs.send.review', { - url: '/review/:coin/:fromWalletId/:amount/:useSendMax', + url: '/review/:amount/:fromWalletId/:sendMax/:toWalletId', views: { 'tab-send@tabs': { controller: 'reviewController', diff --git a/www/views/review.html b/www/views/review.html index 0ec643b8b..c1974a0dc 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -36,11 +36,16 @@
To:
- -

{{vm.destination.name}}

-

128.67

+ + +
+ +

{{vm.destination.name}} ({{vm.destination.currency}})

+

{{vm.destination.balanceAmount}} {{vm.destination.balanceCurrency}}

-
+
qz9cqq5pryv9hnqwa8q8mccmynk9uf4vlu5nxerpzmc
From aeb6efcdd0aef5153396b304564c31b391785cc1 Mon Sep 17 00:00:00 2001 From: Brendon Duncan Date: Thu, 2 Aug 2018 19:51:50 +1200 Subject: [PATCH 24/25] UI for sending to contact. --- src/js/controllers/review.controller.js | 71 +++++++++++++++++-------- src/js/routes.js | 2 +- 2 files changed, 51 insertions(+), 22 deletions(-) diff --git a/src/js/controllers/review.controller.js b/src/js/controllers/review.controller.js index 686cb5787..b81645488 100644 --- a/src/js/controllers/review.controller.js +++ b/src/js/controllers/review.controller.js @@ -4,7 +4,7 @@ angular .module('copayApp.controllers') .controller('reviewController', reviewController); -function reviewController(configService, gettextCatalog, profileService, $scope, txFormatService) { +function reviewController(addressbookService, configService, profileService, $log, $scope, txFormatService) { var vm = this; vm.destination = { @@ -42,22 +42,20 @@ function reviewController(configService, gettextCatalog, profileService, $scope, var destinationWalletId = ''; - - $scope.$on("$ionicView.beforeEnter", onBeforeEnter); function onBeforeEnter(event, data) { - coin = data.stateParams.coin; originWalletId = data.stateParams.fromWalletId; satoshis = parseInt(data.stateParams.amount, 10); - toAddress = data.stateParams.toAddress; + toAddress = data.stateParams.toAddr; var originWallet = profileService.getWallet(originWalletId); vm.origin.currency = originWallet.coin.toUpperCase(); vm.origin.color = originWallet.color; vm.origin.name = originWallet.name; + coin = originWallet.coin; configService.get(function onConfig(err, configCache) { if (err) { @@ -69,6 +67,7 @@ function reviewController(configService, gettextCatalog, profileService, $scope, } updateSendAmounts(); getOriginWalletBalance(originWallet); + handleDestinationAsAddress(toAddress, coin); handleDestinationAsWallet(data.stateParams.toWalletId); }); } @@ -76,7 +75,7 @@ function reviewController(configService, gettextCatalog, profileService, $scope, function getOriginWalletBalance(originWallet) { var balanceText = getWalletBalanceDisplayText(originWallet); vm.origin.balanceAmount = balanceText.amount; - vm.origin.balanceCurrecny = balanceText.currency; + vm.origin.balanceCurrency = balanceText.currency; } function getWalletBalanceDisplayText(wallet) { @@ -119,24 +118,54 @@ function reviewController(configService, gettextCatalog, profileService, $scope, }; } + function handleDestinationAsAddress(address, originCoin) { + if (!address) { + return; + } + + // Check if the recipient is a contact + addressbookService.get(originCoin + address, function(err, contact) { + if (!err && contact) { + console.log('destination is contact'); + handleDestinationAsContact(contact); + } else { + console.log('destination is address'); + vm.destination.address = address; + vm.destination.kind = 'address'; + } + }); + + } + + function handleDestinationAsContact(contact) { + vm.destination.kind = 'contact'; + vm.destination.name = contact.name; + vm.destination.color = contact.coin === 'btc' ? config.bitcoinWalletColor : config.bitcoinCashWalletColor; + vm.destination.currency = contact.coin.toUpperCase(); + vm.destination.currencyColor = vm.destination.color; + } + function handleDestinationAsWallet(walletId) { destinationWalletId = walletId; - if (destinationWalletId) { - var destinationWallet = profileService.getWallet(destinationWalletId); - vm.destination.coin = destinationWallet.coin; - vm.destination.color = destinationWallet.color; - vm.destination.currency = destinationWallet.coin.toUpperCase(); - vm.destination.kind = 'wallet'; - vm.destination.name = destinationWallet.name; - - if (config) { - vm.destination.currencyColor = vm.destination.coin === 'btc' ? config.bitcoinWalletColor : config.bitcoinCashWalletColor; - } - - var balanceText = getWalletBalanceDisplayText(destinationWallet); - vm.destination.balanceAmount = balanceText.amount; - vm.destination.balanceCurrency = balanceText.currency; + if (!destinationWalletId) { + return; } + + console.log('destination is wallet'); + var destinationWallet = profileService.getWallet(destinationWalletId); + vm.destination.coin = destinationWallet.coin; + vm.destination.color = destinationWallet.color; + vm.destination.currency = destinationWallet.coin.toUpperCase(); + vm.destination.kind = 'wallet'; + vm.destination.name = destinationWallet.name; + + if (config) { + vm.destination.currencyColor = vm.destination.coin === 'btc' ? config.bitcoinWalletColor : config.bitcoinCashWalletColor; + } + + var balanceText = getWalletBalanceDisplayText(destinationWallet); + vm.destination.balanceAmount = balanceText.amount; + vm.destination.balanceCurrency = balanceText.currency; } function updateSendAmounts() { diff --git a/src/js/routes.js b/src/js/routes.js index 38941021c..4807fab5c 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -317,7 +317,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr } }) .state('tabs.send.review', { - url: '/review/:amount/:fromWalletId/:sendMax/:toWalletId', + url: '/review/:amount/:fromWalletId/:sendMax/:toAddr/:toWalletId', views: { 'tab-send@tabs': { controller: 'reviewController', From 4a1fd498f5952f18bb09f6e98ef13ba640477df4 Mon Sep 17 00:00:00 2001 From: Brendon Duncan Date: Thu, 2 Aug 2018 20:05:52 +1200 Subject: [PATCH 25/25] UI for sending to address. --- www/views/review.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/www/views/review.html b/www/views/review.html index c1974a0dc..36bb67410 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -35,7 +35,8 @@
To:
-
+