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

Fix activity spinner - UI
This commit is contained in:
Matias Alejo Garcia 2016-08-25 17:17:03 -03:00 committed by GitHub
commit edcbec7d96
4 changed files with 62 additions and 61 deletions

View file

@ -2,30 +2,34 @@
<ion-view> <ion-view>
<ion-nav-bar class="bar-stable"> <ion-nav-bar class="bar-stable">
<ion-nav-title>Recent Activity</ion-nav-title> <ion-nav-title>Recent Activity</ion-nav-title>
<ion-nav-buttons side="primary">
<button class="button no-border" ui-sref="tabs.home">
<span translate>Close</span>
</button>
</ion-nav-buttons>
</ion-nav-bar> </ion-nav-bar>
<ion-content class="padding" ng-controller="activityController" ng-init="init()"> <ion-content class="padding" ng-controller="activityController" ng-init="init()">
<div ng-if="fetchingNotifications" class="updatingHistory"> <div ng-if="fetchingNotifications" class="updatingHistory">
<div class="row" > <div class="text-center">
<ion-spinner class="spinner-dark" icon="lines"></ion-spinner> <ion-spinner class="spinner-dark" icon="lines"></ion-spinner>
</div> <div translate>Updating activity. Please stand by</div>
<div class="row" >
<div class="col" translate>Updating activity. Please stand by.</div>
</div>
</div> </div>
</div> </div>
<div ng-if="!fetchingNotifications"> <div ng-if="!fetchingNotifications">
<div class="list card" ng-if="!fetchingNotifications"> <div class="list card">
<ul> <div class="item item-icon-left" ng-repeat="x in notifications" ng-click="x.action()">
<li ng-repeat="x in notifications" class="item item-icon-left" ng-click="x.action()"> <span ng-include="'views/includes/walletActivity.html'"></span>
<span ng-include="'views/includes/walletActivity.html'"></span> </div>
</li>
<li class="item" ng-show="!notifications[0]"> <a class="item text-center" ui-sref="activity" ng-show="notificationsMore">
No recent activity <span translate>More</span> ({{notificationsMore}})
</li> </a>
</ul>
<div class="item" ng-show="!notifications[0]">
<span translate>No recent activity</span>
</div>
</div> </div>
</div> </div>
</ion-content> </ion-content>

View file

@ -3,60 +3,54 @@
<ion-nav-bar class="bar-stable"> <ion-nav-bar class="bar-stable">
<ion-nav-title>Home</ion-nav-title> <ion-nav-title>Home</ion-nav-title>
</ion-nav-bar> </ion-nav-bar>
<ion-content class="padding" ng-controller="tabHomeController"> <ion-content class="padding" ng-controller="tabHomeController">
<h3 class="title" translate>Activity</h3>
<h2 translate>Activity</h2>
<div ng-if="fetchingNotifications" class="updatingHistory"> <div ng-if="fetchingNotifications" class="updatingHistory">
<div class="row" > <div class="text-center">
<ion-spinner class="spinner-dark" icon="lines"></ion-spinner> <ion-spinner class="spinner-dark" icon="lines"></ion-spinner>
</div> <div translate>Updating activity. Please stand by</div>
<div class="row" >
<div class="col" translate>Updating activity. Please stand by.</div>
</div>
</div> </div>
</div> </div>
<div ng-if="!fetchingNotifications"> <div ng-if="!fetchingNotifications">
<div class="list card" ng-if="!fetchingNotifications"> <div class="list card">
<ul> <div class="item item-icon-left" ng-repeat="x in notifications" ng-click="x.action()">
<li ng-repeat="x in notifications" class="item item-icon-left" ng-click="x.action()"> <span ng-include="'views/includes/walletActivity.html'"></span>
<span ng-include="'views/includes/walletActivity.html'"></span> </div>
</li>
<li class="item " ui-sref="activity" ng-show="notificationsMore"> <a class="item text-center" ui-sref="activity" ng-show="notificationsMore">
<button class="button button-block button-passive"> <span translate>More</span> ({{notificationsMore}})
More ({{notificationsMore}}) </a>
</button>
</li> <div class="item" ng-show="!notifications[0]">
<li class="item" ng-show="!notifications[0]"> <span translate>No recent activity</span>
No recent activity </div>
</li>
</ul>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col col-80"> <div class="col col-80">
<h2>Wallets </h2> <h3 translate>Wallets</h3>
</div> </div>
<div class="col col-20 text-right"> <div class="col text-right" ui-sref="add.main">
<a class="button button-light" ui-sref="add.main"> <i class="size-32 icon ion-ios-plus-empty"></i>
<i class="size-36 icon ion-ios-plus-outline"></i>
</a>
</div> </div>
</div> </div>
<div class="card" ng-init="updateAllWallets()"> <div class="list card" ng-init="updateAllWallets()">
<div class="item" ng-if="!wallets[0]">
<span translate>No Wallet</span>
</div>
<div ng-repeat="item in wallets track by $index" <div ng-repeat="item in wallets track by $index"
class="item item-icon-left" class="item item-icon-left"
ui-sref="wallet.details({'walletId': item.id})"> ui-sref="wallet.details({'walletId': item.id})">
<i class="icon ion-briefcase size-21" ng-style="{'color':item.color}"></i> <i class="icon ion-briefcase size-21" ng-style="{'color':item.color}"></i>
{{item.name || item.id}} {{item.name || item.id}}
<span ng-show="item.n > 1" class="text-gray"> <span ng-show="item.n > 1" class="text-gray">
{{item.m}}-of-{{item.n}} {{item.m}}-of-{{item.n}}
</span> </span>
<span class="badge badge-assertive" ng-show="!item.isComplete()" translate> <span class="badge badge-assertive" ng-show="!item.isComplete()" translate>
Incomplete Incomplete
</span> </span>
@ -67,7 +61,7 @@
</div> </div>
<div ng-show="glideraEnabled || coinbaseEnabled"> <div ng-show="glideraEnabled || coinbaseEnabled">
<h3>Buy & Sell Bitcoin</h3> <h3 class="title" translate>Buy & Sell Bitcoin</h3>
<div class="card"> <div class="card">
<div ng-show="glideraEnabled" ui-sref="glidera.main" class="item"> <div ng-show="glideraEnabled" ui-sref="glidera.main" class="item">
<img src="img/glidera-logo.png" width="90"> <img src="img/glidera-logo.png" width="90">
@ -78,15 +72,13 @@
</div> </div>
</div> </div>
<h3>Next steps </h3> <h3 class="title" translate>Next steps</h3>
<div class="card"> <div class="card">
<div ui-sref="bitpayCard.main" ng-show="bitpayCardEnabled" class="item item-icon-left"> <div ui-sref="bitpayCard.main" ng-show="bitpayCardEnabled" class="item item-icon-left">
<i class="icon ion-card"></i> <i class="icon ion-card"></i>BitPay Card
BitPay Card
</div> </div>
<div ui-sref="amazon.main" class="item item-icon-left"> <div ui-sref="amazon.main" class="item item-icon-left">
<i class="icon ion-ios-cart"></i> <i class="icon ion-ios-cart"></i>Gift Cards
Gift Cards
</div> </div>
</div> </div>

View file

@ -4,24 +4,21 @@ angular.module('copayApp.controllers').controller('tabHomeController',
function($rootScope, $timeout, $scope, $state, lodash, profileService, walletService, configService, txFormatService, $ionicModal, $log, platformInfo) { function($rootScope, $timeout, $scope, $state, lodash, profileService, walletService, configService, txFormatService, $ionicModal, $log, platformInfo) {
var setNotifications = function(notifications) { var setNotifications = function(notifications) {
var n = walletService.processNotifications(notifications, 5); var n = walletService.processNotifications(notifications, 5);
$scope.notifications = n; $scope.notifications = n;
$scope.notificationsMore = notifications.length > 5 ? notifications.length - 5 : null; $scope.notificationsMore = notifications.length > 5 ? notifications.length - 5 : null;
$timeout(function() { $timeout(function() {
$scope.$apply(); $scope.$apply();
}, 1); }, 1);
}; };
$scope.updateAllWallets = function() { $scope.updateAllWallets = function() {
$timeout(function() { $scope.wallets = profileService.getWallets();
$scope.wallets = profileService.getWallets(); if (lodash.isEmpty($scope.wallets)) return;
var i = $scope.wallets.length, j =0; $timeout(function() {
var i = $scope.wallets.length;
var j = 0;
var timeSpan = 60 * 60 * 24 * 7; var timeSpan = 60 * 60 * 24 * 7;
var notifications = []; var notifications = [];
@ -52,7 +49,7 @@ angular.module('copayApp.controllers').controller('tabHomeController',
}); });
}); });
$scope.$digest(); $scope.$digest();
}, 100); }, 100);
}; };

View file

@ -4,6 +4,10 @@
* *
*/ */
h3.title {
margin-left: 10px !important;
}
.walletHome h4.title { .walletHome h4.title {
padding: 0px 0 10px 15px; padding: 0px 0 10px 15px;
margin: 5px 0 5px 0; margin: 5px 0 5px 0;
@ -521,6 +525,10 @@ ul.wallet-selection.wallets {
font-size: 28px; font-size: 28px;
} }
.size-32 {
font-size: 32px;
}
.size-36 { .size-36 {
font-size: 36px; font-size: 36px;
} }