From 2492a405a1ae6f86f9d1098052134d55db2cab76 Mon Sep 17 00:00:00 2001 From: Sam Cheng Hung Date: Thu, 26 Jul 2018 14:29:53 +0800 Subject: [PATCH] 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
+
+ +
+
+