prelim action sheet directive

src/js/controllers/confirm.js

@@ -111,6 +111,11 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     setWallet(wallet, true);
   });
 
+  $scope.showWalletSelector = function() {
+    console.log('showWalletSelector called');
+    $scope.showWallets = true;
+  };
+
 
   $scope.showDescriptionPopup = function() {
     var message = gettextCatalog.getString('Add description');

src/js/directives/actionSheet.js

@@ -0,0 +1,23 @@
+'use strict';
+
+angular.module('copayApp.directives')
+  .directive('actionSheet', function() {
+    return {
+      restrict: 'E',
+      templateUrl: 'views/includes/actionSheet.html',
+      transclude: true,
+      scope: {
+        show: '=actionSheetShow',
+      },
+      link: function(scope, element, attrs) {
+        console.log('action sheet instantiated');
+        scope.$watch('show', function() {
+          console.log('show called', scope.show);
+        });
+
+        scope.hide = function() {
+          scope.show = false;
+        };
+      }
+    };
+  });

src/sass/views/includes/actionSheet.scss

@@ -0,0 +1,37 @@
+action-sheet {
+  .bp-action-sheet {
+
+    &__sheet {
+      background: #fff;
+      height: 300px;
+      width: 100%;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      transform: translateY(100%);
+      transition: transform 250ms ease;
+      z-index: 100;
+
+      &.slide-up {
+        transform: translateY(0);
+      }
+    }
+
+    &__backdrop {
+      height: 100%;
+      width: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      background: rgba(0, 0, 0, 0);
+      transition: background 250ms ease;
+      pointer-events: none;
+      z-index: 99;
+
+      &.fade-in {
+        background: rgba(0, 0, 0, .5);
+        pointer-events: all;
+      }
+    }
+  }
+}

src/sass/views/views.scss

@@ -17,6 +17,7 @@
 @import "address-book";
 @import "zero-state";
 @import "onboarding/onboarding";
+@import "includes/actionSheet";
 @import "includes/walletActivity";
 @import "includes/wallets";
 @import "includes/modals/modals";

www/views/confirm.html

@@ -32,7 +32,7 @@
         <div class="text-center" ng-show="insuffientFunds">
           <span class="badge badge-energized" translate>Insufficient funds</span>
         </div>
-        <a class="item item-icon-right" ng-hide="insuffientFunds">
+        <a class="item item-icon-right" ng-hide="insuffientFunds" ng-click="showWalletSelector()">
           <span class="label" translate>From</span>
           <div class="wallet">
             <i class="icon big-icon-svg">
@@ -79,6 +79,9 @@
     <span ng-hide="wallet.m > 1">Payment Sent</span>
     <span ng-show="wallet.m > 1">Proposal Created</span>
   </slide-to-accept-success>
+  <action-sheet action-sheet-show="showWallets">
+
+  </action-sheet>
 </ion-view>
 <!-- <ion-view id="view-confirm">
   <ion-nav-bar class="bar-royal">

www/views/includes/actionSheet.html

@@ -0,0 +1,8 @@
+<div
+  class="bp-action-sheet__backdrop"
+  ng-class="{'fade-in': show}"
+  ng-click="hide()">
+</div>
+<div class="bp-action-sheet__sheet" ng-class="{'slide-up': show}">
+
+</div>