Merge pull request #6666 from cmgustavo/ref/wallet-details-02

Bug fixes UI from walletDetails

src/js/controllers/walletDetails.js

@@ -156,9 +156,7 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
 
   var updateTxHistory = function(cb) {
     if (!cb) cb = function() {};
-    if ($scope.updatingTxHistory) return;
 
-    $scope.updatingTxHistory = true;
     $scope.updateTxHistoryError = false;
     $scope.updatingTxHistoryProgress = 0;
 
@@ -358,6 +356,8 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
     if (!$scope.wallet) return;
     $scope.requiresMultipleSignatures = $scope.wallet.credentials.m > 1;
 
+    $scope.updatingTxHistory = true;
+
     addressbookService.list(function(err, ab) {
       if (err) $log.error(err);
       $scope.addressbook = ab || {};

src/sass/views/walletDetails.scss

@@ -88,6 +88,27 @@
     padding: 1rem;
     background: #f8f8f9;
   }
+
+  &__no-transaction {
+    color: $v-mid-gray;
+    font-size: 12.5px;
+    text-align: center;
+    padding-top: 2rem;
+  }
+
+  &__no-update-history {
+    color: $v-error-color;
+    font-size: 12.5px;
+    text-align: center;
+    padding-top: 2rem;
+  }
+
+  &__updating-history {
+    color: $v-mid-gray;
+    font-size: 12.5px;
+    text-align: center;
+    padding-top: 1rem;
+  }
 }
 
 #walletDetails {
@@ -177,10 +198,6 @@
     align-items: center;
     justify-content: center;
 
-    &.collapsible {
-      margin-bottom: 10px;
-    }
-
     &__balance {
       -webkit-transform: scale3d(1, 1, 1) translateY(45px);
       transform: scale3d(1, 1, 1) translateY(45px);
@@ -200,6 +217,15 @@
       border: 1px solid rgba(255,255,255,0.25);
     }
 
+    &__error {
+      cursor: pointer;
+      font-size: 14px;
+      padding: 35px 20px;
+    }
+
+  }
+  .no-alternative {
+    padding-top: 45px;
   }
   .item.item-footer {
     font-weight: lighter;

www/views/includes/walletInfo.html

@@ -1,5 +1,6 @@
 
-<ion-spinner class="spinner-dark recent right" icon="crescent" ng-show="updatingStatus || (updatingTxHistory && updatingTxHistoryProgress<=5)"   ></ion-spinner>
+<ion-spinner class="spinner-dark recent right" icon="crescent" ng-show="(updatingStatus || updatingTxHistory) &&
+  !walletNotRegistered && !updateStatusError && !updateTxHistoryError"></ion-spinner>
 
 <div>
 <span ng-show="wallet.status.wallet.singleAddress" class="size-12"><span translate>Auditable</span></span>

www/views/walletDetails.html

@@ -14,72 +14,59 @@
   <div class="bp-content" ng-class="{'status-bar': isCordova}">
 
   <div class="amount-wrapper" ng-show="wallet && wallet.isComplete() && amountIsCollapsible" ng-class="{'wallet-background-color-default': !wallet.color}" ng-style="{'background-color':wallet.color}">
-    <div
+
-      class="amount-bg"
-      ng-style="{'background-color':wallet.color}"
-      ng-class="{collapsible: amountIsCollapsible, 'wallet-background-color-default': !wallet.color}"
-    ></div>
     <div
       ng-style="{'background-color':wallet.color, 'height': amountHeight}"
       class="amount"
-      ng-class="{collapsible: amountIsCollapsible, 'wallet-background-color-default': !wallet.color}"
+      ng-class="{collapsible: amountIsCollapsible, 'wallet-background-color-default': !wallet.color, 'no-alternative': wallet.network != 'livenet'}"
     >
-      <div ng-if="!notAuthorized && !updatingStatus">
 
-        <div ng-show="updateStatusError">
+      <div class="amount__error" ng-style="{opacity: altAmountOpacity}" ng-show="updateStatusError" ng-click="updateAll(true)">
-          <span class="size-12 db m10">{{updateStatusError}}</span>
+        <span>{{updateStatusError}}</span>
-          <a class="button button-outline button-light button-small" ng-click='updateAll(true)' translate>Tap to retry</a>
+      </div>
-        </div>
 
-        <div ng-show="walletNotRegistered">
+      <div class="amount__error" ng-style="{opacity: altAmountOpacity}" ng-show="walletNotRegistered" ng-click="recreate()">
-          <span class="size-12 db m10" translate>This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.</span>
+        <span translate>This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.</span>
-          <a class="button button-outline button-light button-small" ng-click='recreate()' translate>Recreate</a>
+      </div>
-        </div>
 
+      <div
+        ng-click='updateAll(true)'
+        ng-show="!updateStatusError && !wallet.balanceHidden"
+        on-hold="hideToggle()"
+        ng-style="{'transform': amountScale}"
+        ng-class="{amount__balance: amountIsCollapsible}">
+        <strong class="size-36">{{status.totalBalanceStr}}</strong>
         <div
-          ng-click='updateAll(true)'
+          class="size-14 amount-alternative"
-          ng-show="!updateStatusError && !wallet.balanceHidden"
+          ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'"
-          on-hold="hideToggle()"
+          ng-style="{opacity: altAmountOpacity}">
-          ng-style="{'transform': amountScale}"
+          {{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}
-          ng-class="{amount__balance: amountIsCollapsible}">
-          <strong class="size-36">{{status.totalBalanceStr}}</strong>
-          <div
-            class="size-14 amount-alternative"
-            ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'"
-            ng-style="{opacity: altAmountOpacity}">
-            {{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}
-          </div>
-        </div>
-
-        <div ng-style="{'transform': amountScale}"
-        class="amount__balance"
-        ng-show="!updateStatusError && wallet.balanceHidden"
-        on-hold="hideToggle()">
-          <strong class="size-24" translate>[Balance Hidden]</strong>
-          <div ng-style="{opacity: altAmountOpacity}" class="size-14 amount-alternative" translate>
-            Tap and hold to show
-          </div>
-        </div>
-
-        <div ng-if="!wallet.balanceHidden && showBalanceButton" ng-style="{'opacity': altAmountOpacity, 'transform': amountScale}">
-          <button class="button button-standard button-primary amount__button-balance size-14" ng-click="openBalanceModal()">
-            <i class="icon ion-ios-checkmark-outline"></i>
-            <strong>
-              {{status.spendableBalanceStr}}
-            </strong>
-            &nbsp;
-            <span>
-              {{status.spendableBalanceAlternative}} {{status.alternativeIsoCode}}
-            </span>
-          </button>
-        </div>
-
-      </div>
-      <div ng-if="updatingStatus" class="amount__updating">
-        <div class="size-36">
-          <strong>...</strong>
         </div>
       </div>
+
+      <div ng-style="{'transform': amountScale}"
+      class="amount__balance"
+      ng-show="!updateStatusError && wallet.balanceHidden"
+      on-hold="hideToggle()">
+        <strong class="size-24" translate>[Balance Hidden]</strong>
+        <div ng-style="{opacity: altAmountOpacity}" class="size-14 amount-alternative" translate>
+          Tap and hold to show
+        </div>
+      </div>
+
+      <div ng-if="!wallet.balanceHidden && showBalanceButton" ng-style="{'opacity': altAmountOpacity, 'transform': amountScale}">
+        <button class="button button-standard button-primary amount__button-balance size-14" ng-click="openBalanceModal()">
+          <i class="icon ion-ios-checkmark-outline"></i>
+          <strong>
+            {{status.spendableBalanceStr}}
+          </strong>
+          &nbsp;
+          <span>
+            {{status.spendableBalanceAlternative}} {{status.alternativeIsoCode}}
+          </span>
+        </button>
+      </div>
+
     </div>
     <div class="wallet-details-wallet-info" ng-style="{opacity: altAmountOpacity}">
       <span ng-include="'views/includes/walletInfo.html'"></span>
@@ -94,77 +81,17 @@
       on-refresh="onRefresh()">
     </ion-refresher>
 
-    <div class="amount-wrapper" ng-if="wallet && wallet.isComplete() && !amountIsCollapsible">
-      <div
-        class="amount-bg"
-        ng-class="{'wallet-background-color-default': !wallet.color}" ng-style="{'background-color':wallet.color}"
-      ></div>
-      <div
-        ng-style="{'background-color':wallet.color}"
-        class="amount"
-        ng-class="{'collapsible': amountIsCollapsible, 'wallet-background-color-default': !wallet.color}"
-      >
-        <div ng-if="!updatingStatus">
-
-          <div ng-show="updateStatusError">
-            <span class="size-12 db m10">{{updateStatusError}}</span>
-            <a class="button button-outline button-light button-small" ng-click='updateAll()' translate>Tap to retry</a>
-          </div>
-
-          <div ng-show="walletNotRegistered">
-            <span class="size-12 db m10" translate>This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.</span>
-            <a class="button button-outline button-light button-small" ng-click='recreate()' translate>Recreate</a>
-          </div>
-
-          <div ng-click='updateAll(true)' ng-show="!updateStatusError && !wallet.balanceHidden" on-hold="hideToggle()" ng-style="{'transform': amountScale}">
-            <strong class="size-36">{{status.totalBalanceStr}}</strong>
-            <div class="size-14 amount-alternative" ng-if="status.totalBalanceAlternative && wallet.network == 'livenet'">{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}</div>
-          </div>
-
-          <div ng-if="!wallet.balanceHidden && showBalanceButton" ng-style="{'opacity': altAmountOpacity, 'transform': amountScale}">
-            <button class="button button-standard button-primary amount__button-balance size-14" ng-click="openBalanceModal()">
-              <i class="icon ion-ios-checkmark-outline"></i>
-              <strong>
-                {{status.spendableBalanceStr}}
-              </strong>
-              &nbsp;
-              <span>
-                {{status.spendableBalanceAlternative}} {{status.alternativeIsoCode}}
-              </span>
-            </button>
-          </div>
-
-          <div ng-show="!updateStatusError && wallet.balanceHidden" ng-style="{'transform': amountScale}" on-hold="hideToggle()">
-            <strong class="size-24" translate>[Balance Hidden]</strong>
-            <div class="size-14" translate>
-              Tap and hold to show
-            </div>
-          </div>
-        </div>
-        <div ng-if="updatingStatus">
-          <div class="size-36">
-            <strong>...</strong>
-          </div>
-        </div>
-      </div> <!-- amount -->
-
-      <div class="wallet-details-wallet-info">
-        <span ng-include="'views/includes/walletInfo.html'"></span>
-      </div>
-    </div> <!-- oh -->
-
     <a class="wallet-not-backed-up-warning" ng-if="wallet.needsBackup" ui-sref="tabs.wallet.backupWarning({from: 'tabs.wallet'})" translate>
       Wallet not backed up
     </a>
 
-
     <a class="wallet-not-backed-up-warning" ng-if="lowUtxosWarning" ui-sref="tabs.wallet.addresses({walletId:wallet.id,from: 'tabs.wallet'})" translate>
       Spending this balance will need significant Bitcoin network fees
     </a>
 
 
-    <div class="p60b" ng-if="wallet &&  wallet.isComplete() && !walletNotRegistered">
+    <div ng-if="wallet &&  wallet.isComplete() && !walletNotRegistered">
-      <div class="oh pr m20t" ng-show="wallet.incorrectDerivation">
+      <div class="wallet-details__incorrect-derivation" ng-show="wallet.incorrectDerivation">
         <div class="text-center text-warning">
           <i class="fi-alert"></i>
           <span translate>
@@ -189,37 +116,30 @@
 
       <!-- Transactions -->
 
-      <div class="oh pr m20t text-gray size-12 text-center"
+      <div class="wallet-details__no-transaction"
         ng-show="!txHistory[0] && !updatingTxHistory && !updateTxHistoryError && !updateStatusError" translate>
         No transactions yet
       </div>
 
 
-      <div class="oh pr m20t text-gray size-12 text-center"
+      <div class="wallet-details__no-update-history"
         ng-show="!txHistory[0] && !updatingTxHistory && updateTxHistoryError" translate>
         Could not update transaction history
       </div>
 
 
-      <div ng-show="updatingTxHistory && updatingTxHistoryProgress>5" class="updating">
+      <div ng-show="updatingTxHistory && updatingTxHistoryProgress>5" class="wallet-details__updating-history">
-        <div  class="row" >
+        <span translate>Updating transaction history. Please stand by.</span><br>
-            <ion-spinner class="spinner-dark" icon="crescent"></ion-spinner>
+        <span translate>{{updatingTxHistoryProgress}} transactions downloaded</span>
-        </div>
-        <div  class="row" >
-          <div  class="col">
-            <span translate>Updating transaction history. Please stand by.</span><br>
-            <span translate>{{updatingTxHistoryProgress}} transactions downloaded</span>
-          </div>
-        </div>
       </div>
 
-      <div class="wallet-details__list" ng-show="txHistory[0]">
+      <div class="wallet-details__list" ng-show="txHistory[0] && !updatingTxHistory">
         <div ng-repeat="btx in txHistory track by $index" ng-click="openTxModal(btx)">
           <span ng-include="'views/includes/walletHistory.html'"></span>
         </div>
       </div>
       <ion-infinite-scroll
-        ng-if="txHistoryShowMore"
+        ng-if="txHistory[0] && !updatingTxHistory && txHistoryShowMore"
         on-infinite="showMore()"
         distance="1%">
       </ion-infinite-scroll>