Merge pull request #665 from yemel/feature/highlight-qr-code

Add highlight on QR change, add selected address below the QR

css/main.css

@@ -478,6 +478,32 @@ a.loading {
  vertical-align:middle
 }
 
+@-webkit-keyframes yellow-flash {
+    0% {
+        background-color: #FFFFE0;
+        opacity:1;
+    }
+    22% {
+        background-color: #FFFFE0;
+    }
+    100% {
+        background-color: none;
+    }
+}
+
+.highlight{
+  -webkit-animation-name: yellow-flash;
+    -webkit-animation-duration: 400ms;
+    -webkit-animation-iteration-count: 1;
+    -webkit-animation-timing-function: linear;
+  -moz-animation-name: yellow-flash;
+    -moz-animation-duration: 400ms;
+    -moz-animation-iteration-count: 1;
+    -moz-animation-timing-function: linear;
+}
+
+
+
 /* notifications */
 
 .dr-notification-container {

index.html

@@ -399,7 +399,7 @@
                   <span ng-if="showAll">Show less</span>
                 </a>
               </div>
-              <div class="large-4 medium-4 columns line-dashed-v text-center" ng-show="selectedAddr">
+              <div class="large-4 medium-4 columns line-dashed-v text-center" highlight-on-change="selectedAddr" ng-show="selectedAddr">
                 <qrcode size="160" data="{{selectedAddr.address}}"></qrcode>
                 <p class="m10t">
                   <strong>
@@ -411,7 +411,8 @@
                         <i class="fi-bitcoin"></i>
                       </span>
                     </span>
-                    <span ng-if="addrWithFund != selectedAddr.address">
+                    <span ng-if="addrWithFund != selectedAddr.address" style="word-wrap: break-word;">
+                      {{selectedAddr.address}}<br/>
                       {{selectedAddr.balance || 0}}
                       <i class="fi-bitcoin"></i>
                     </span>

js/directives.js

@@ -120,6 +120,17 @@ angular.module('copayApp.directives')
       }
     }
   })
+  .directive('highlightOnChange', function() {
+    return {
+      restrict: 'A',
+      link: function(scope, element, attrs) {
+        scope.$watch(attrs.highlightOnChange, function (newValue, oldValue) {
+          element.addClass('highlight');
+          setTimeout(function() { element.removeClass('highlight'); }, 500);
+        });
+      }
+    }
+  })
   .directive('checkStrength', function() {
     return {
       replace: false,