From e5f798d5ed21cfc5f6c74ba1955cf269303eeeb6 Mon Sep 17 00:00:00 2001
From: Yemel Jardi <angel.jardi@gmail.com>
Date: Wed, 11 Jun 2014 17:49:14 -0300
Subject: [PATCH] Add highlight on QR change, add selected address below the QR

---
 css/main.css     | 26 ++++++++++++++++++++++++++
 index.html       |  5 +++--
 js/directives.js | 11 +++++++++++
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/css/main.css b/css/main.css
index b29cbe070..f7f6a6f17 100644
--- a/css/main.css
+++ b/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 {
diff --git a/index.html b/index.html
index c369e0920..a553b140c 100644
--- a/index.html
+++ b/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>
diff --git a/js/directives.js b/js/directives.js
index f1f5bbee8..d975d82b6 100644
--- a/js/directives.js
+++ b/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,