added animation to receive tab

src/js/controllers/tab-receive.js

@@ -4,6 +4,7 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
 
   $scope.isCordova = platformInfo.isCordova;
   $scope.isNW = platformInfo.isNW;
+  $scope.walletAddrs = {};
 
   $scope.shareAddress = function(addr) {
     if ($scope.generatingAddress) return;
@@ -20,12 +21,19 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
       $scope.generatingAddress = false;
       if (err) popupService.showAlert(gettextCatalog.getString('Error'), err);
       $scope.addr = addr;
+      if ($scope.walletAddrs[$scope.wallet.id]) $scope.walletAddrs[$scope.wallet.id] = addr;
       $timeout(function() {
         $scope.$apply();
       }, 10);
     });
   };
 
+  $scope.loadAddresses = function(wallet, index) {
+    walletService.getAddress(wallet, false, function(err, addr) {
+      $scope.walletAddrs[wallet.id] = addr || null;
+    });
+  }
+
   $scope.goCopayers = function() {
     $ionicHistory.removeBackView();
     $ionicHistory.nextViewOptions({
@@ -67,7 +75,32 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
     });
   };
 
+  $scope.setWallet = function(index) {
+    $scope.wallet = $scope.wallets[index];
+    $scope.walletIndex = index;
+    if ($scope.walletAddrs[$scope.walletIndex].addr) $scope.addr = $scope.walletAddrs[$scope.walletIndex].addr;
+    else $scope.setAddress(false);
+  }
+
+  $scope.isActive = function(index) {
+    return $scope.wallets[index] == $scope.wallet;
+  }
+
+  $scope.walletPosition = function(index) {
+    if (index == $scope.walletIndex) return 'current';
+    if (index < $scope.walletIndex) return 'prev';
+    if (index > $scope.walletIndex) return 'next';
+  }
+
+
   $scope.$on('Wallet/Changed', function(event, wallet) {
+    $scope.wallet = wallet;
+    $scope.walletIndex = lodash.findIndex($scope.wallets, function(wallet) {
+      return wallet.id == $scope.wallet.id;
+    });
+    if (!$scope.walletAddrs[wallet.id]) $scope.setAddress(false);
+    else $scope.addr = $scope.walletAddrs[wallet.id];
+    $scope.$apply();
     if (!wallet) {
       $log.debug('No wallet provided');
       return;
@@ -77,14 +110,13 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
       return;
     }
     $scope.wallet = wallet;
-    $scope.generatingAddress = false;
     $log.debug('Wallet changed: ' + wallet.name);
-    $timeout(function() {
-      $scope.setAddress(false);
-    }, 100);
   });
 
   $scope.$on("$ionicView.beforeEnter", function(event, data) {
     $scope.wallets = profileService.getWallets();
+    lodash.each($scope.wallets, function(wallet, index) {
+      $scope.loadAddresses(wallet);
+    });
   });
 });

src/sass/views/includes/wallets.scss

@@ -9,6 +9,7 @@
       box-shadow:$subtle-box-shadow;
       padding:0;
       border-radius: 6px;
+      margin: 0 auto;
       @media (min-width: 500px) {
         & {
           width: 350px;
@@ -32,7 +33,7 @@
             visibility: hidden;
           }
           &.visible{
-            visibility: visible !important; 
+            visibility: visible !important;
           }
         }
         .big-icon-svg{
@@ -64,10 +65,10 @@
         transform: scale(.8);
       }
       &.swiper-slide-prev {
-        left: 10vw;
+        left: 5vw;
       }
       &.swiper-slide-next {
-        left: -10vw;
+        left: -5vw;
       }
     }
   }

src/sass/views/tab-receive.scss

@@ -13,7 +13,7 @@
   .scroll{height:100%;}
   #address {
     background: #fff;
-    height: calc(100vh - 33vh);
+    height: calc(100vh - 34vh);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -22,14 +22,26 @@
     @media(max-height: 600px){
       height: calc(100vh - 36vh);
     }
+    &-info{
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    }
     article{
       flex:1;
       width: 100%;
     }
     #bit-address{
-      position: absolute;
+      width: 100%;
-      bottom:0;
+      align-self: flex-end;
-      width:100%;
+      margin-top: auto;
+      justify-content: center;
+      align-content: center;
+      position: relative;
+      min-height: 40px;
       #next-address{
         color:$light-gray;
       }
@@ -58,6 +70,31 @@
     }
     .bit-address {
       font-size: .8rem;
+      // left:10%;
+      position: absolute;
+      transition: all .4s ease;
+      width:100%;
+      height: 100%;
+      z-index: 0;
+      position: absolute;
+      top:50%;
+      &, &.next{
+        left:100%;
+        transform: translate(100%, -40%);
+      }
+      &.next, &.prev{
+        z-index:2;
+      }
+      &.current, &.prev{
+        left:50%;
+      }
+      &.current{
+        transform: translate(-50%, -40%);
+        z-index: 3;
+      }
+      &.prev{
+        transform: translate(-150%, -40%);
+      }
       .item {
         padding-top: 5px;
         padding-bottom: 5px;
@@ -67,6 +104,32 @@
     }
     .qr {
       padding: calc(100vh - 85vh) 0 calc(100vh - 96vh);
+      align-self: center;
+      margin-top: auto;
+      height: 220px;
+      position: relative;
+      justify-content: center;
+      flex: 1;
+      div{
+        transition: all .4s ease;
+        &.current, &.prev, &.next{
+          position: absolute;
+          top:50%;
+        }
+        &.current, &.prev{
+          left:50%;
+        }
+        &.current{
+          transform: translate(-50%, -40%);
+        }
+        &.prev{
+          transform: translate(-150%, -40%);
+        }
+        &.next{
+          left:100%;
+          transform: translate(100%, -40%);
+        }
+      }
       @media(max-height: 700px){
         padding: calc(100vh - 90vh) 0 calc(100vh - 96vh);
       }
@@ -74,13 +137,13 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        position: relative;
+        min-height: 220px;
       }
     }
     #qr-options{
-      display: flex;
-      flex-direction: row;
       justify-content: center;
-      align-content: center;
+      align-self: flex-end;
       .item{
         i{left:25px;}
       }
@@ -90,6 +153,8 @@
       color: #fff;
       position: absolute;
       top: 0;
+      left:0;
+      z-index: 2;
       i {
         padding: 10px;
       }
@@ -122,7 +187,7 @@
       left: 50%;
       -webkit-transform: translateX(-50%);
       transform: translateX(-50%);
-      z-index: 2;
+      z-index: 4;
     }
   }
   #first-time-tip {
@@ -165,6 +230,9 @@
     border-right: 1px solid rgb(228, 228, 228);
     padding-right: 10px;
   }
+  #wallets{
+    #sidebar-wallet{display: none;}
+  }
   .wallets{
     position: relative;
     height: calc(100vh - 83vh);
@@ -175,6 +243,17 @@
         top: 50%;
         -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
+        max-width: 450px;
+        .swiper-slide{
+          text-align: center;
+          .card{
+            margin-top:2vh;
+            display: inline-block;
+            width:80%;
+          }
+          &-next{left:-25%;}
+          &-prev{left:25%;}
+        }
         @media (max-height: 600px){
           &{
             -webkit-transform: translate(-50%, -58%);
@@ -184,23 +263,107 @@
       }
     }
   }
-  // @media(min-width: 700px) and (min-height: 700px){
+  @media(min-width: 700px) and (min-height: 700px){
-  //   .wallets{display: none;}
+    .wallets{display: none;}
-  //   #address{
+    #address{
-  //     height:90vh;
+      float:left;
-  //     width:75%;
+      height:90vh;
-  //     .qr{
+      width:65%;
-  //       height: 70%;
+      &-info{
-  //       div{
+        height: 100%;
-  //         transform: scale(1.5);
+      }
-  //       }
+      .qr{
-  //     }
+        height: 70%;
-  //     #bit-address{
+        div{
-  //       height: 10%;
+          opacity: 0;
-  //       padding: calc(100vh - 99vh);
+          transition: none;
-  //     }
+          &.current{
-  //   }
+            opacity: 1;
-  // }
+          }
+        }
+      }
+      .bit-address{
+        opacity: 0;
+        transition: none;
+        &.current{
+          opacity: 1;
+        }
+      }
+      .backup, #bit-address{left:0;}
+      #bit-address{
+        height: 10%;
+        padding: calc(100vh - 99vh);
+      }
+    }
+    #wallets{
+      float:left;
+      width:35%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: visible;
+      #sidebar-wallet{display: block;}
+      .list{height: 100%;overflow: visible;}
+      #wallet-list{
+        position: absolute;
+        width: 100%;
+        overflow-y: scroll;
+        height: 100%;
+        left: -6%;
+      }
+      .wallet{
+        position: relative;
+        &.current{
+          &:before {
+          	right: 93%;
+          	top: 50%;
+          	border: solid transparent;
+          	content: " ";
+          	height: 0;
+          	width: 0;
+          	position: absolute;
+          	pointer-events: none;
+            border-right-color: #f2f2f2;
+            border-width: 20px;
+            margin-top: -20px;
+          }
+        }
+      }
+      .card {
+        max-width: 350px;
+        box-shadow:$subtle-box-shadow;
+        padding:0;
+        border-radius: 6px;
+        padding:2px;
+        width: 80%;
+        position: relative;
+        margin: 1.5rem auto 0;
+        .item{
+          padding: 6% 10% 6% 8%;
+          i{left:auto;}
+          span{
+            clear:both;
+            width: 100%;
+            display: inline-block;
+            &.wallet-name{
+              margin-top:10px;
+              margin-bottom:5px;
+              font-size:13px;
+            }
+            &.wallet-number{
+              visibility: hidden;
+            }
+            &.visible{
+              visibility: visible !important;
+            }
+          }
+          .big-icon-svg{
+            & > .bg{padding:.3rem;width: 40px;height:40px;}
+          }
+        }
+      }
+    }
+  }
 }
 
 @keyframes fadeIn {

www/views/tab-receive.html

@@ -3,11 +3,11 @@
     <ion-nav-title>{{'Receive' | translate}}</ion-nav-title>
   </ion-nav-bar>
   <ion-content scroll="false">
-    <div class="list card padding text-center" ng-if="!wallets[0]">
+    <article class="list card padding text-center" ng-if="!wallets[0]">
       <span translate>No Wallet</span>
-    </div>
+    </article>
-    <div id="address" ng-if="wallets[0]">
+    <article id="address" ng-if="wallets[0]">
-      <article class="text-center" ng-if="!wallet">
+      <div id="address-info" class="text-center" ng-if="!wallet">
         <div class="row qr">
           <div class="text-center col center-block">
             <div style="height:225px; width:220px; margin:auto; background: white; padding-top: 25%;">
@@ -23,8 +23,8 @@
             </div>
           </div>
         </div>
-      </article>
+      </div>
-      <article class="text-center" ng-if="wallet && !wallet.isComplete()">
+      <div id="address-info" class="text-center" ng-if="wallet && !wallet.isComplete()">
         <div class="incomplete">
           <div class="title">
             <span translate>Incomplete wallet</span>
@@ -44,17 +44,17 @@
             </div>
           </div>
         </div>
-      </article>
+      </div>
-      <article ng-if="wallet && wallet.isComplete()">
+      <div id="address-info" ng-if="wallet && wallet.isComplete()">
         <div class="row backup" ng-show="wallet.needsBackup" ng-click="openBackupNeededModal()">
           <div class="text-center col center-block">
             <i class="icon ion-alert"></i><span translate>Wallet not backed up</span><i class="icon ion-ios-arrow-thin-right"></i>
           </div>
         </div>
         <div class="row qr">
-          <div class="text-center col center-block" copy-to-clipboard="addr">
+          <div class="text-center col center-block" copy-to-clipboard="addr" ng-repeat="wallet in wallets track by $index" ng-class="walletPosition($index)">
-            <qrcode ng-if="addr" size="220" data="bitcoin:{{addr}}" color="#334"></qrcode>
+            <qrcode ng-if="walletAddrs[wallet.id]" size="220" data="bitcoin:{{walletAddrs[wallet.id]}}" color="#334"></qrcode>
-            <div ng-if="!addr" style="height:225px; width:220px; margin:auto; background: white; padding-top: 25%;">
+            <div ng-if="!walletAddrs[wallet.id]" style="height:225px; width:220px; margin:auto;padding-top: 25%;position:absolute;left:50%;top:50%;z-index:1;">
               ...
             </div>
           </div>
@@ -72,20 +72,35 @@
           </div>
         </div>
         <div id="bit-address" class="row border-top">
-          <div class="col col-90 center-block bit-address text-center">
+          <div class="center-block bit-address text-center" ng-repeat="wallet in wallets track by $index" ng-class="walletPosition($index)">
             <div class="item item-icon-left item-icon-right">
               <i class="icon icon-svg receive-tab-bitcoin-icon"><img src="img/icon-bitcoin-symbol.svg"></i>
               <span class="bit-address-gen-address" ng-if="generatingAddress">...</span>
-              <span class="bit-address-gen-address" ng-if="!generatingAddress" copy-to-clipboard="addr">{{addr}}</span>
+              <span class="bit-address-gen-address" ng-if="!generatingAddress" copy-to-clipboard="walletAddrs[wallet.id]">{{walletAddrs[wallet.id]}}</span>
             </div>
           </div>
         </div>
-      </article>
-    </div>
-    <article id="wallets" ng-if="wallets[0]">
-      <div class="list">
-        <wallets wallets="wallets"></wallets>
       </div>
     </article>
+    <article id="wallets" ng-if="wallets[0]">
+      <div id="sidebar-wallet" class="list">
+        <div id="wallet-list">
+          <div class="wallet" ng-repeat="wallet in wallets track by $index" ng-click="setWallet($index)" ng-class="walletPosition($index)">
+            <div class="card">
+              <div class="item item-icon-left text-right" ng-class="{'noBalance': !wallet.status.availableBalanceStr}">
+                <i class="icon big-icon-svg">
+                  <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
+                </i>
+                <span class="wallet-name">{{wallet.name || wallet.id}}</span>
+                <span class="item-note m10l">
+                  {{wallet.status.availableBalanceStr}}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <wallets id="wallet-slider" wallets="wallets" options="sliderOptions"></wallets>
+    </article>
   </ion-content>
 </ion-view>