Merge pull request #4653 from gabrielbazan7/feat/clipboardNW

Notify when click on clickable element

public/views/includes/confirm-tx.html

@@ -7,7 +7,7 @@
   <div class="size-36">{{tx.amountStr}}</div>
   <div class="size-12 label gray radius" ng-show="tx.alternativeAmountStr">{{tx.alternativeAmountStr}}</div>
   <i class="db fi-arrow-down size-24 m10v"></i>
-  <div class="payment-proposal-to" ng-click="copyToClipboard(tx.toAddress)">
+  <div class="payment-proposal-to" ng-click="copyToClipboard(tx.toAddress, $event)">
     <i class="fi-bitcoin left m10l"></i>
     <contact ng-if="!tx.hasMultiplesOutputs" class="dib enable_text_select ellipsis m5t m5b m15l size-14" address="{{tx.toAddress}}"></contact>
     <span ng-if="tx.hasMultiplesOutputs" translate>

public/views/includes/copyToClipboard.html

@@ -0,0 +1,7 @@
+<ion-popover-view>
+<div class="columns m20t" ng-click="close()">
+  <label class="size-10 text-center m20b">
+    <span translate>Copied to clipboard</span>
+  </label>
+</div>
+</ion-popover-view>

public/views/includes/output.html

@@ -1,14 +1,14 @@
-<li class="p10 oh" ng-click="copyToClipboard(output.toAddress)">
+<li class="p10 oh" ng-click="copyToClipboard(output.toAddress, $event)">
   <span class="text-gray" translate>To</span>:
   <span class="right enable_text_select">{{output.toAddress || output.address}}</span>
 </li>
-<li class="p10" ng-click="copyToClipboard(output.amountStr)">
+<li class="p10" ng-click="copyToClipboard(output.amountStr, $event)">
   <span class="text-gray" translate>Amount</span>:
   <span class="right enable_text_select">{{output.amountStr}}
     <span ng-show="output.alternativeAmountStr" class="label gray radius">{{output.alternativeAmountStr}}</span>
   </span>
 </li>
-<li class="p10 oh" ng-click="copyToClipboard(output.message)">
+<li class="p10 oh" ng-click="copyToClipboard(output.message, $event)">
   <span class="text-gray" translate>Note</span>:
   <span class="right enable_text_select">{{output.message}}</span>
 </li>

public/views/modals/tx-details.html

@@ -25,7 +25,7 @@
             <p class="m0 text-gray size-14" translate>Moved</p>
           </div>
 
-          <div class="size-36" ng-click="copyToClipboard(btx.amountStr)">
+          <div class="size-36" ng-click="copyToClipboard(btx.amountStr, $event)">
             <span class="enable_text_select">{{btx.amountStr}}</span>
           </div>
           <div class="alternative-amount" ng-click="showRate=!showRate" ng-init="showRate = false">
@@ -46,7 +46,7 @@
 
       <ul class="no-bullet size-14 m0">
         <li ng-if="!btx.hasMultiplesOutputs && btx.addressTo && btx.addressTo != 'N/A'" class="line-b p10 oh"
-          ng-click="copyToClipboard(btx.addressTo)">
+          ng-click="copyToClipboard(btx.addressTo, $event)">
           <span class="text-gray" translate>To</span>
           <span class="right">
             <span ng-if="btx.merchant">
@@ -89,19 +89,19 @@
         </li>
 
         <li class="line-b p10" ng-show="btx.action != 'received'"
-          ng-click="copyToClipboard(btx.feeStr)">
+          ng-click="copyToClipboard(btx.feeStr, $event)">
           <span class="text-gray" translate>Fee</span>
           <span class="right enable_text_select">{{btx.feeStr}}</span>
         </li>
 
         <li class="line-b p10 oh" ng-if="btx.message && btx.action != 'received'"
-          ng-click="copyToClipboard(btx.message)">
+          ng-click="copyToClipboard(btx.message, $event)">
           <span class="text-gray" translate>Description</span>
           <span class="right enable_text_select">{{btx.message}}</span>
         </li>
 
         <li ng-if="btx.merchant" class="line-b p10 oh"
-          ng-click="copyToClipboard(btx.merchant.pr.pd.memo)">
+          ng-click="copyToClipboard(btx.merchant.pr.pd.memo, $event)">
           <span class="text-gray" translate>Merchant message</span>
           <span class="right enable_text_select">
             {{btx.merchant.pr.pd.memo}}

public/views/modals/txp-details.html

@@ -14,7 +14,7 @@
         <div class="size-36">{{tx.amountStr}}</div>
         <div class="size-14 text-light" ng-show="tx.alternativeAmountStr">{{tx.alternativeAmountStr}}</div>
         <i class="db fi-arrow-down size-24 m10v"></i>
-        <span class="payment-proposal-to" ng-click="copyToClipboard(tx.toAddress)">
+        <span class="payment-proposal-to" ng-click="copyToClipboard(tx.toAddress, $event)">
           <i class="fi-bitcoin left"></i>
           <contact ng-if="!tx.hasMultiplesOutputs" class="dib enable_text_select ellipsis m5t m5b size-14" address="{{tx.toAddress}}"></contact>
           <span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span>

public/views/walletHome.html

@@ -279,7 +279,7 @@
           <!-- Address-->
           <div class="large-12 columns">
             <h2 class="text-center m10t" translate>My Bitcoin address</h2>
-            <div class="text-center" ng-click="home.copyToClipboard(home.addr)" ng-show="home.addr || home.generatingAddress">
+            <div class="text-center" ng-click="home.copyToClipboard(home.addr, $event)" ng-show="home.addr || home.generatingAddress">
               <qrcode size="220" data="bitcoin:{{home.addr}}"></qrcode>
               <div ng-show="home.generatingAddress" style="position:relative; top:-226px; height:0px">
                 <div style="height:220px; width:220px; margin:auto; background: white">

src/css/ionic-migration.css

@@ -43,6 +43,15 @@
 	font-size: 16px;
 }
 
+.popover, .popover .bar-header {
+	border-radius: 10px;
+}
+
+.popover {
+	height: auto;
+	width: 200px;
+}
+
 .popup-container.active .popup {
 	border-radius: 10px;
 }

src/js/controllers/modals/txDetails.js

@@ -85,9 +85,9 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
     return n.substring(0, 4);
   };
 
-  $scope.copyToClipboard = function(addr) {
+  $scope.copyToClipboard = function(addr, $event) {
     if (!addr) return;
-    self.copyToClipboard(addr);
+    self.copyToClipboard(addr, $event);
   };
 
   $scope.cancel = function() {

src/js/controllers/modals/txpDetails.js

@@ -227,9 +227,9 @@ angular.module('copayApp.controllers').controller('txpDetailsController', functi
     });
   };
 
-  $scope.copyToClipboard = function(addr) {
+  $scope.copyToClipboard = function(addr, $event) {
     if (!addr) return;
-    self.copyToClipboard(addr);
+    self.copyToClipboard(addr, $event);
   };
 
   $scope.close = function(txp) {

src/js/controllers/walletHome.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('walletHomeController', function($scope, $rootScope, $interval, $timeout, $filter, $log, $ionicModal, notification, txStatus, profileService, lodash, configService, rateService, storageService, bitcore, gettext, gettextCatalog, platformInfo, addressService, ledger, bwcError, confirmDialog, txFormatService, addressbookService, go, feeService, walletService, fingerprintService, nodeWebkit, ongoingProcess) {
+angular.module('copayApp.controllers').controller('walletHomeController', function($scope, $rootScope, $interval, $timeout, $filter, $log, $ionicModal, $ionicPopover, notification, txStatus, profileService, lodash, configService, rateService, storageService, bitcore, gettext, gettextCatalog, platformInfo, addressService, ledger, bwcError, confirmDialog, txFormatService, addressbookService, go, feeService, walletService, fingerprintService, nodeWebkit, ongoingProcess) {
 
   var isCordova = platformInfo.isCordova;
   var isWP = platformInfo.isWP;
@@ -200,12 +200,36 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
     });
   };
 
-  this.copyToClipboard = function(addr) {
+  this.copyToClipboard = function(addr, $event) {
+
+    var showPopover = function() {
+
+      $ionicPopover.fromTemplateUrl('views/includes/copyToClipboard.html', {
+        scope: $scope
+      }).then(function(popover) {
+        $scope.popover = popover;
+        $scope.popover.show($event);
+      });
+
+      $scope.close = function() {
+        $scope.popover.hide();
+      }
+
+      $timeout(function() {
+        $scope.popover.hide(); //close the popover after 0.7 seconds
+      }, 700);
+
+      $scope.$on('$destroy', function() {
+        $scope.popover.remove();
+      });
+    };
+
     if (isCordova) {
       window.cordova.plugins.clipboard.copy(addr);
       window.plugins.toast.showShortCenter(gettextCatalog.getString('Copied to clipboard'));
     } else if (platformInfo.isNW) {
       nodeWebkit.writeToClipboard(addr);
+      showPopover($event);
     }
   };