Merge pull request #2049 from cmgustavo/bug/mobile-14

Bug/mobile 14
This commit is contained in:
Matias Alejo Garcia 2014-12-08 13:13:54 -03:00
commit e1d0e68797
11 changed files with 98 additions and 45 deletions

View file

@ -356,14 +356,10 @@ a:hover {
background-color: #F8F8FB; background-color: #F8F8FB;
} }
.pin-main {
background-color: #2C3E50;
}
.logo-setup { .logo-setup {
text-align: center; text-align: center;
padding: 2rem 0; margin: 0 0 2rem 0;
color: #fff; color: #8597A7;
} }
.box-setup { .box-setup {
@ -375,7 +371,7 @@ a:hover {
.box-setup-footer { .box-setup-footer {
overflow: hidden; overflow: hidden;
margin-top: 2rem; margin-top: 1rem;
padding: 1rem 0 0; padding: 1rem 0 0;
border-top: 1px solid #425467; border-top: 1px solid #425467;
font-size: 12px; font-size: 12px;
@ -1724,6 +1720,11 @@ a.text-warning:hover {color: #FD7262;}
color: #fff; color: #fff;
} }
.home, .settings, .createProfile, .import-profile {
overflow: hidden;
padding: 2rem 0;
}
.tabbable { .tabbable {
border: 2px solid #213140; border: 2px solid #213140;
border-radius: 3px; border-radius: 3px;
@ -1793,6 +1794,8 @@ a.text-warning:hover {color: #FD7262;}
z-index: 999; z-index: 999;
padding-top: 20%; padding-top: 20%;
text-align: center; text-align: center;
padding-left: 10%;
padding-right: 10%;
} }
.clipo { .clipo {

View file

@ -7,12 +7,7 @@
@media (max-width: 1024px) { @media (max-width: 1024px) {
.logo-setup { .logo-setup {
margin: 0; margin: 0 0 1rem 0;
padding: 1rem 0;
}
.home, .open, .join, .waiting-copayers, .setup, .import, .settings {
margin-top: 0;
} }
.sidebar { .sidebar {
@ -48,6 +43,11 @@
background: #2C3E50; background: #2C3E50;
} }
.home, .settings, .createProfile, .import-profile {
overflow: hidden;
padding: 1rem 0;
}
header { header {
height: 45px; height: 45px;
line-height: 110%; line-height: 110%;
@ -198,10 +198,6 @@
padding: 1rem 1.2rem 1.0625rem; padding: 1rem 1.2rem 1.0625rem;
} }
.home form {
margin-bottom: 1rem;
}
form { form {
margin: 0; margin: 0;
} }

View file

@ -20,7 +20,10 @@
</style> </style>
<link rel="shortcut icon" href="img/favicon.ico"> <link rel="shortcut icon" href="img/favicon.ico">
</head> </head>
<body> <body
ng-controller="IndexController"
ng-swipe-left="swipe()"
ng-swipe-right="swipe(true)">
<div id="loading" class="loadingpage"> <div id="loading" class="loadingpage">
<img src="img/ajax-loader.gif" alt="Loading..."> <img src="img/ajax-loader.gif" alt="Loading...">
@ -101,7 +104,7 @@
ng-class="{'dni':$root.hideNavigation}" ng-class="{'dni':$root.hideNavigation}"
></div> ></div>
<section ng-class="{'main':$root.iden && !$root.starting, 'pin-main':$root.hideNavigation}" ng-view></section> <section ng-class="{'main':$root.iden && !$root.starting && !$root.hideNavigation}" ng-view></section>
<a class="exit-off-canvas"></a> <a class="exit-off-canvas"></a>

View file

@ -72,6 +72,7 @@ angular.module('copayApp.controllers').controller('HomeController', function($sc
var credentials = pinService.get(pin, function(err, credentials) { var credentials = pinService.get(pin, function(err, credentials) {
if (err || !credentials) { if (err || !credentials) {
$rootScope.starting = false; $rootScope.starting = false;
$scope.loading = null;
$scope.error = 'Wrong PIN'; $scope.error = 'Wrong PIN';
return; return;
} }
@ -164,9 +165,7 @@ angular.module('copayApp.controllers').controller('HomeController', function($sc
$scope.askForPin = 1; $scope.askForPin = 1;
$rootScope.starting = false; $rootScope.starting = false;
$rootScope.hideNavigation = true; $rootScope.hideNavigation = true;
$timeout(function(){ $rootScope.$digest();
$rootScope.$digest();
});
return; return;
} }
// no mobile // no mobile

12
js/controllers/index.js Normal file
View file

@ -0,0 +1,12 @@
'use strict';
angular.module('copayApp.controllers').controller('IndexController', function($scope, go) {
$scope.init = function() {
};
$scope.swipe = function(invert) {
go.swipe(invert);
};
});

View file

@ -14,6 +14,32 @@ angular.module('copayApp.services').factory('go', function($window, $location) {
elem.removeClass('move-left'); elem.removeClass('move-left');
}; };
var toggleSidebar = function(invert) {
if (typeof document === 'undefined')
return;
var elem = angular.element(document.querySelector('#off-canvas-wrap'));
var leftbarActive = angular.element(document.getElementsByClassName('move-right')).length;
var rightbarActive = angular.element(document.getElementsByClassName('move-left')).length;
if (invert) {
if (rightbarActive) {
hideSidebars();
}
else {
elem.addClass('move-right');
}
}
else {
if (leftbarActive) {
hideSidebars();
}
else {
elem.addClass('move-left');
}
}
};
root.go = function(path) { root.go = function(path) {
var parts = path.split('#'); var parts = path.split('#');
$location.path(parts[0]); $location.path(parts[0]);
@ -22,5 +48,9 @@ angular.module('copayApp.services').factory('go', function($window, $location) {
hideSidebars(); hideSidebars();
}; };
root.swipe = function(invert) {
toggleSidebar(invert);
};
return root; return root;
}); });

View file

@ -1,7 +1,7 @@
'use strict'; 'use strict';
angular.module('copayApp.services') angular.module('copayApp.services')
.factory('pinService', function($rootScope, localstorageService) { .factory('pinService', function($rootScope, $timeout, localstorageService) {
var KEY = 'pinDATA'; var KEY = 'pinDATA';
var SALT = '4gllotIKguqi0EkIslC0'; var SALT = '4gllotIKguqi0EkIslC0';
@ -57,8 +57,12 @@ angular.module('copayApp.services')
set: function(newValue) { set: function(newValue) {
this['_' + name] = newValue; this['_' + name] = newValue;
scope.error = null; scope.error = null;
scope.loading = null;
if (newValue && newValue.length == 4) { if (newValue && newValue.length == 4) {
return cb(newValue); scope.loading = true;
$timeout(function() {
return cb(newValue);
}, 30);
} }
}, },
enumerable: true, enumerable: true,

View file

@ -114,16 +114,16 @@
<div class="box-setup-footer"> <div class="box-setup-footer">
<div class="left"> <div class="left">
<a class="text-gray" href="#!/"> <a class="button-setup text-gray" href="#!/">
<i class="icon-arrow-left4"></i> <i class="icon-arrow-left4"></i>
<span translate>Back</span> <span translate>Back</span>
</a> </a>
</div> </div>
<div class="right"> <div class="right">
<a class="text-gray" href="https://copay.io/profile-storage" <span translate>Learn more about this option</span> <a class="button-setup text-gray" href="https://copay.io/profile-storage">
Learn more about this option
</a> </a>
</div> </div>
</div> </div>
</form> </form>
@ -155,7 +155,7 @@
</button> </button>
<div class="box-setup-footer"> <div class="box-setup-footer">
<div class="left"> <div class="left">
<a class="text-gray" ng-click="setStep('storage')"> <a class="button-setup text-gray" ng-click="setStep('storage')">
<i class="icon-arrow-left4"></i> <i class="icon-arrow-left4"></i>
<span translate>Back</span> <span translate>Back</span>
</a> </a>
@ -193,7 +193,7 @@
<div class="box-setup-footer"> <div class="box-setup-footer">
<div class="left"> <div class="left">
<a class="text-gray" ng-click="setStep('email')"> <a class="button-setup text-gray" ng-click="setStep('email')">
<i class="icon-arrow-left4"></i> <i class="icon-arrow-left4"></i>
<span translate>Back</span> <span translate>Back</span>
</a> </a>

View file

@ -23,7 +23,7 @@
<div class="large-5 large-centered medium-7 medium-centered columns" ng-show="!$root.starting"> <div class="large-5 large-centered medium-7 medium-centered columns" ng-show="!$root.starting">
<div class="logo-setup" ng-show="!$root.iden"> <div class="logo-setup" ng-show="!$root.iden">
<img src="img/logo-negative-beta.svg" alt="Copay" width="100"> <img src="img/logo-negative-beta.svg" alt="Copay" width="100">
<div class="text-gray" ng-include="'views/includes/version.html'"></div> <div ng-include="'views/includes/version.html'"></div>
</div> </div>
<div class="p10 box-setup bg-success m10b text-white" ng-show="confirmedEmail"> <div class="p10 box-setup bg-success m10b text-white" ng-show="confirmedEmail">
@ -78,7 +78,7 @@
</form> </form>
</div> </div>
<div ng-if='$root.hasPin'> <div ng-if='$root.hasPin && !$root.iden'>
<h2><span translate>Enter your </span> <b> PIN</b></h2> <h2><span translate>Enter your </span> <b> PIN</b></h2>
<form name="pinForm" novalidate> <form name="pinForm" novalidate>
<div class="box-notification" ng-show="error"> <div class="box-notification" ng-show="error">
@ -103,7 +103,9 @@
</a> </a>
</div> </div>
<div class="large-6 medium-6 small-6 columns text-right"> <div class="large-6 medium-6 small-6 columns text-right">
<button translate type="submit" class="button primary radius expand m0" ng-disabled="pinForm.$invalid || error"> <button translate type="submit" class="button primary radius expand m0"
ng-disabled="pinForm.$invalid || error || loading">
<i class="fi-bitcoin-circle icon-rotate spinner" ng-show="loading"></i>
Sign in Sign in
</button> </button>
</div> </div>

View file

@ -14,8 +14,8 @@
<div ng-show="!loading"> <div ng-show="!loading">
<div class="large-4 large-centered medium-6 medium-centered columns"> <div class="large-4 large-centered medium-6 medium-centered columns">
<div class="logo-setup"> <div class="logo-setup show-for-large-up">
<img src="img/logo-negative-beta.svg" alt="Copay" width="146" height="59"> <img src="img/logo-negative-beta.svg" alt="Copay" width="100">
<div ng-include="'views/includes/version.html'"></div> <div ng-include="'views/includes/version.html'"></div>
</div> </div>
<div> <div>
@ -60,10 +60,12 @@
</button> </button>
</form> </form>
<div class="box-setup-footer"> <div class="box-setup-footer">
<a class="text-gray" href="#!/"> <div class="left">
<i class="icon-arrow-left4"></i> <a class="button-setup text-gray" href="#!/">
<span translate>Back</span> <i class="icon-arrow-left4"></i>
</a> <span translate>Back</span>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,7 +1,7 @@
<div class="settings" ng-controller="SettingsController"> <div class="settings" ng-controller="SettingsController">
<div class="large-4 large-centered medium-6 medium-centered columns"> <div class="large-4 large-centered medium-6 medium-centered columns">
<div class="logo-setup" id="top"> <div class="logo-setup show-for-large-up" id="top">
<img src="img/logo-negative-beta.svg" alt="Copay" width="146" height="59"> <img src="img/logo-negative-beta.svg" alt="Copay" width="100">
<div ng-include="'views/includes/version.html'"></div> <div ng-include="'views/includes/version.html'"></div>
</div> </div>
<h2>{{title|translate}}</h2> <h2>{{title|translate}}</h2>
@ -71,11 +71,13 @@
</button> </button>
</form> </form>
<div class="box-setup-footer"> <div class="box-setup-footer">
<a class="text-gray" href="#!/"> <div class="left">
<i class="icon-arrow-left4"></i> <a class="button-setup text-gray" href="#!/">
<span translate>Back</span> <i class="icon-arrow-left4"></i>
</a> <span translate>Back</span>
<div class="right m10r"> </a>
</div>
<div class="right">
<a class="button-setup text-gray" href="" ng-click="reset()"> <a class="button-setup text-gray" href="" ng-click="reset()">
<i class="fi-page-delete"></i> <i class="fi-page-delete"></i>
<span translate>Reset settings</span> <span translate>Reset settings</span>