Merge pull request #7027 from JDonadio/ref/home-01

Refactor home view

src/pages/home/home.html

@@ -1,6 +1,6 @@
 <ion-header>
   <ion-navbar>
-    <ion-title>Home</ion-title>
+    <ion-title>{{'Home' | translate}}</ion-title>
   </ion-navbar>
 </ion-header>
 
@@ -15,9 +15,9 @@
 
   <ion-card *ngIf="wallets && wallets[0]">
     <ion-item>
-      Wallets
-      <button ion-button outline item-end icon-left (click)="goToAddView()">
-        <ion-icon name="md-add"></ion-icon>
+      <span translate>Wallets</span>
+      <button ion-button clear item-end class="header-icon" (click)="goToAddView()">
+        <ion-icon name="ios-add"></ion-icon>
       </button>
     </ion-item>
 
@@ -26,9 +26,10 @@
         <ion-icon item-start>
           <img src="assets/img/icon-wallet.svg" class="icon-wallet">
         </ion-icon>
-        <h2>{{wallet.credentials.walletName}} {{wallet.credentials.m}}-{{wallet.credentials.n}}</h2>
-        <p *ngIf="!wallet.scanning">{{wallet.status.totalBalanceStr ? wallet.status.totalBalanceStr : ( wallet.cachedBalance ? wallet.cachedBalance   + (wallet.cachedBalanceUpdatedOn ? ' &middot; ' + ( wallet.cachedBalanceUpdatedOn  * 1000 | amTimeAgo) : '') : ''  )}}</p>
-        <span *ngIf="wallet.scanning"> Scanning funds... </span>        
+        <h2>{{wallet.credentials.walletName}} <span *ngIf="wallet.credentials.m > 1">{{wallet.credentials.m}}-{{wallet.credentials.n}}</span></h2>
+        <span *ngIf="wallet.scanning" translate>Scanning funds</span>        
+        <p *ngIf="!wallet.scanning">{{wallet.statusStr}}</p>
+        <p *ngIf="wallet.error" class="error">{{wallet.error}}</p>
       </button>
     </ion-list>
   </ion-card>

src/pages/home/home.scss

@@ -1,15 +1,22 @@
 img {
   &.icon-wallet {
     width: 35px !important;
-    background-color: #647ce8;
+    background-color: color($colors, accent);
   }
 }
 
-.button-outline-md {
-  margin-right: auto !important;
-  border: none;
-  color: #488aff;
-  background-color: transparent;
-  -webkit-box-shadow: none;
-  box-shadow: none;
+/* Android fix */
+.item-md [item-start] {
+  margin: 0 !important;
+}
+
+.header-icon {
+  font-size: 1.7rem !important;
+  color: silver;
+  margin: 0 !important;
+  padding: 10px !important;
+}
+
+.error {
+  color: color($colors, danger) !important;
 }

src/pages/home/home.ts

@@ -6,6 +6,7 @@ import { ReleaseProvider } from '../../providers/release/release';
 import { WalletProvider } from '../../providers/wallet/wallet';
 import { BwcErrorProvider } from '../../providers/bwc-error/bwc-error';
 import * as _ from 'lodash';
+import * as moment from 'moment';
 
 @Component({
   selector: 'page-home',
@@ -20,9 +21,11 @@ export class HomePage {
     private releaseProvider: ReleaseProvider,
     private walletProvider: WalletProvider,
     private bwcErrorProvider: BwcErrorProvider
-  ) {
-    this.checkUpdate();
+  ) {}
+
+  ionViewDidEnter() {
     this.wallets = this.profileProvider.getWallets();
+    this.checkUpdate();
     this.updateAllWallets();
   }
 
@@ -33,6 +36,10 @@ export class HomePage {
   private updateAllWallets(): void {
     _.each(this.wallets, (wallet: any) => {
       this.walletProvider.getStatus(wallet, {}).then((status: any) => {
+        const balanceStr = status.totalBalanceStr ? wallet.status.totalBalanceStr : '';
+        const cachedBalanceStr = wallet.cachedBalance ? wallet.cachedBalance : '';
+        const cachedBalanceUpdateOn = wallet.cachedBalanceUpdatedOn ? ' - ' + moment(wallet.cachedBalanceUpdatedOn * 1000).fromNow() : '';
+        wallet.statusStr = balanceStr || cachedBalanceStr + cachedBalanceUpdateOn;
         wallet.status = status;
         this.profileProvider.setLastKnownBalance(wallet.id, wallet.status.totalBalanceStr);
       }).catch((err) => {

src/theme/variables.scss

@@ -70,6 +70,12 @@ $checkbox-md-item-start-margin-end: 20px;
 $alert-ios-button-text-color: color($colors, accent);
 $alert-md-button-text-color: color($colors, accent);
 
+/* tabs */
+$tabs-ios-tab-color-active: color($colors, accent);
+$tabs-md-tab-color-active: color($colors, accent);
+$tabs-wp-tab-color-active: color($colors, accent);
+
+
 // App iOS Variables
 // --------------------------------------------------
 // iOS only Sass variables can go here