Merge pull request #459 from jamal-jackson/feature/recieve_view_polish

receive view polish on mobile

src/js/controllers/tab-receive.js

@@ -74,6 +74,10 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
       $log.debug('No wallet provided');
       return;
     }
+    if (wallet == $scope.wallet) {
+      $log.debug('No change in wallet');
+      return;
+    }
     $scope.wallet = wallet;
     $log.debug('Wallet changed: ' + wallet.name);
     $timeout(function() {
@@ -83,5 +87,7 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
 
   $scope.$on("$ionicView.beforeEnter", function(event, data) {
     $scope.wallets = profileService.getWallets();
+    $scope.wallet = $scope.wallets[0];
+    $scope.setAddress();
   });
 });

src/sass/views/includes/wallets.scss

@@ -1,15 +1,23 @@
 .wallets {
   .slides {
     .swiper-container {
-      width: 75% !important;
+      width: 85% !important;
       overflow: visible;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      @media (max-height: 600px){
+        &{
+          transform: translate(-50%, -58%);
+        }
+      }
     }
     .card {
-      padding: .7rem;
-      padding-left: .25rem;
-      padding-right: .25rem;
-      border-radius: .25rem;
       max-width: 350px;
+      box-shadow:$subtle-box-shadow;
+      padding:0;
+      border-radius: 6px;
       @media (min-width: 500px) {
         & {
           width: 350px;
@@ -17,6 +25,23 @@
           margin: 1.5rem auto 0;
         }
       }
+      .item{
+        padding: calc(100vh - 99vh) calc(100vw - 93vw) calc(100vh - 97vh) calc(100vw - 95vw);
+        i{left:auto;}
+        span{
+          clear:both;
+          width: 100%;
+          display: inline-block;
+          &.wallet-name{
+            margin-top:10px;
+            margin-bottom:5px;
+            font-size:13px;
+          }
+        }
+        .big-icon-svg{
+          & > .bg{padding:.3rem;width: 40px;height:40px;}
+        }
+      }
     }
     .swiper-slide {
       width: 100% !important;
@@ -37,13 +62,14 @@
       }
       &.swiper-slide-prev,
       &.swiper-slide-next {
-        opacity: .2;
+        opacity: .3;
+        transform: scale(.8);
       }
       &.swiper-slide-prev {
-        left: -5%;
+        left: 10vw;
       }
       &.swiper-slide-next {
-        left: 4%;
+        left: -10vw;
       }
     }
   }

src/sass/views/tab-receive.scss

@@ -10,8 +10,30 @@
   .border-top{
     border-top:1px solid rgb(228,228,228);
   }
+  .scroll{height:100%;}
   #address {
     background: #fff;
+    height: calc(100vh - 33vh);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    flex-flow: column;
+    @media(max-height: 600px){
+      height: calc(100vh - 36vh);
+    }
+    article{
+      flex:1;
+      width: 100%;
+    }
+    #bit-address{
+      position: absolute;
+      bottom:0;
+      width:100%;
+      #next-address{
+        color:$light-gray;
+      }
+    }
     .incomplete {
       padding: 50px;
       height: 352px;
@@ -42,20 +64,47 @@
         display: inline-block;
         font-size: .7rem;
       }
-      &-gen-address {}
     }
     .qr {
-      padding: 50px 0 20px 0;
+      padding: calc(100vh - 85vh) 0 calc(100vh - 96vh);
+      @media(max-height: 700px){
+        padding: calc(100vh - 90vh) 0 calc(100vh - 96vh);
+      }
+      div{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    #qr-options{
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-content: center;
+      .item{
+        i{left:25px;}
+      }
     }
     .backup {
       background-color: orange;
       color: #fff;
       position: absolute;
-      top: 5px;
+      top: 0;
       i {
         padding: 10px;
       }
     }
+    @media (max-height: 600px){
+      &{
+        .qr{
+          padding:6vh 0 0;
+          div{
+            transform: scale(.7);
+          }
+        }
+        #bit-address{position: realtive;}
+      }
+    }
   }
   #wallets {
     position: relative;
@@ -66,10 +115,12 @@
       height: 0;
       border-style: solid;
       border-width: 0 20px 20px 20px;
-      border-color: transparent transparent #f5f5f5 transparent;
+      border-color: transparent transparent rgb(242,242,242) transparent;
       top: -9px;
       position: absolute;
-      left: 45%;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 2;
     }
   }
   #first-time-tip {
@@ -112,6 +163,10 @@
     border-right: 1px solid rgb(228, 228, 228);
     padding-right: 10px;
   }
+  .wallets{
+    position: relative;
+    height: calc(100vh - 83vh);
+  }
 }
 
 @keyframes fadeIn {

www/views/includes/wallets.html

@@ -1,12 +1,15 @@
 <div class="wallets" ng-show="wallets[0]">
-  <ion-slides class="slides" slider="data.slider">
+  <ion-slides class="slides" slider="data.slider" options="sliderOptions">
     <ion-slide-page ng-repeat="wallet in wallets track by $index">
       <div class="card" ng-click="slider.slideTo($index)">
-        <div class="item item-icon-left text-right">
+        <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>{{wallet.name || wallet.id}}</span>
+          <span class="wallet-name">{{wallet.name || wallet.id}}</span>
+          <span class="item-note m10l">
+            {{wallet.status.availableBalanceStr}}
+          </span>
           <span class="item-note m10l" ng-show="wallet.n > 1 && wallet.isComplete()">
             {{wallet.m}}-of-{{wallet.n}}
           </span>

www/views/tab-receive.html

@@ -59,23 +59,21 @@
             </div>
           </div>
         </div>
-        <div class="row">
+        <div id="qr-options" class="row text-center">
-          <div class="col" ng-show="isCordova && addr">
+          <div class="item item-icon-left" ng-click="shareAddress(addr)" ng-show="isCordova && addr">
-            <div class="item item-icon-left" ng-click="shareAddress(addr)">
+            <i class="icon ion-ios-upload-outline"></i>
-              <i class="icon ion-ios-upload-outline"></i>
+            <span translate>Share</span>
-              <span translate>Share</span>
-            </div>
           </div>
-          <div class="col" ng-class="{'center-block col-50': !isCordova || !addr}">
+          <div ng-class="{'center-block': !isCordova || !addr}">
             <div class="item item-icon-left" ng-click="setAddress(true)">
               <i class="icon ion-ios-loop"></i>
               <span translate>Next Address</span>
             </div>
           </div>
         </div>
-        <div class="row border-top">
+        <div id="bit-address" class="row border-top">
           <div class="col col-90 center-block bit-address text-center">
-            <div class="item item-icon-left">
+            <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>