Adds fee-summary bar, adds amount directive, adds support for fee-summary overlapping with content on scrollable small screens

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);
+            }]
+        };
+    }
+]);

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;
+  }
+}

src/sass/components/components.scss

@@ -7,3 +7,5 @@
 @import "address";
 @import "action-minor";
 @import "expand-content";
+@import "fee-summary";
+@import "amount";

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;
+  }
+}

src/sass/components/ion-content.scss

@@ -10,4 +10,8 @@ ion-content {
   &.padded-bottom-cta {
     bottom: 92px;
   }
+
+  &.padded-bottom-cta-with-summary {
+    bottom: 134px;
+  }
 }

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;
+  }
 }

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.*?"/
  */

www/views/includes/amount.html

@@ -0,0 +1,6 @@
+<div class="amount">
+  <span class="start">{{start}}</span>
+  <span class="middle">{{middle}}</span>
+  <span class="end">{{end}}</span>
+  <span class="currency">{{currency}}</span>
+</div>

www/views/review.html

@@ -7,7 +7,7 @@
     </ion-nav-back-button>
   </ion-nav-bar>
 
-  <ion-content class="padded-bottom-cta bg-neutral"
+  <ion-content class="padded-bottom-cta-with-summary bg-neutral"
     ng-init="memoExpanded = false">
     <div class="header">
       <div class="content" translate>
@@ -63,6 +63,17 @@
       </div>
     </div>
   </ion-content>
+
+  <div class="fee-summary">
+    <div class="fee-fiat positive">Fee: Less than 1 cent</div>
+    <div class="fee-crypto"
+      ng-init="fee = {value: '0.00195823', currency: 'BCH'};">
+      <amount
+        value="fee.value"
+        currency="fee.currency"></amount>
+    </div>
+  </div>
+
   <click-to-accept
     ng-click="approve(tx, wallet, statusChangeHandler)"
     ng-if="(!isCordova || isWindowsPhoneApp) && wallet"