BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #6972 from JDonadio/ref/onboarding-flow 

Fix styles, navigation, validations - Onboarding flow
This commit is contained in:
Gustavo Maximiliano Cortez 2017-10-26 14:48:25 -03:00 committed by GitHub
parent 4a7c329c5d c9279be7d6
commit 55730f55db
18 changed files with 106 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -129,7 +129,7 @@
"codecov": "2.2.0",
"fs-extra": "^4.0.2",
"html-loader": "0.4.5",
"ionic": "3.14.0",
"ionic": "3.15.0",
"jasmine-core": "2.6.4",
"jasmine-spec-reporter": "4.1.1",
"karma": "1.7.0",

5
src/pages/add/import-wallet/import-wallet.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NavController, NavParams } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { BwcProvider } from '../../../providers/bwc/bwc';
@ -12,6 +12,7 @@ import { ConfigProvider } from '../../../providers/config/config';
templateUrl: 'import-wallet.html'
})
export class ImportWalletPage implements OnInit{
public fromOnboarding: boolean;
public formData: any;
public showAdvOpts: boolean;
public selectedTab: string;
@ -23,12 +24,14 @@ export class ImportWalletPage implements OnInit{
constructor(
public navCtrl: NavController,
private navParams: NavParams,
private form: FormBuilder,
private bwc: BwcProvider,
private pathHelper: DerivationPathHelperProvider,
private walletProvider: WalletProvider,
private configProvider: ConfigProvider,
) {
this.fromOnboarding = this.navParams.data.fromOnboarding;
this.selectedTab = 'words';
this.derivationPathByDefault = this.pathHelper.default;
this.derivationPathForTestnet = this.pathHelper.defaultTestnet;

70
src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss
View File

@ -1,39 +1,33 @@
page-backup-confirm-modal {
.popup-modal-header-success {
background-color: $v-background-success;
display: flex;
justify-content: center;
padding: 1.5rem;
max-height: 10rem;
img {
max-height: 10rem;
height: 100%;
}
}
.popup-modal-content-success {
background-color: $v-onboarding-bar-header-color;
text-align: center;
height: 65%;
overflow-y: scroll;
padding: 3rem;
display: flex;
align-items: center;
.popup-modal-heading {
font-weight: bold;
font-size: 2rem;
padding-bottom: 1rem;
color: $v-dark-gray;
}
.popup-modal-message {
padding: 1.5rem;
font-size: 1.6rem;
color: $v-mid-gray;
}
.button-clear {
padding-top: 2rem;
background: none;
color: $v-background-success;
font-size: 1.6rem;
}
}
.popup-modal-header-success {
background-color: green;
display: flex;
justify-content: center;
padding: 1.5rem;
max-height: 10rem;
img {
max-height: 10rem;
height: 100%;
}
}
.popup-modal-content-success {
text-align: center;
height: 65%;
overflow-y: scroll;
padding: 3rem;
display: flex;
align-items: center;
.popup-modal-heading {
font-weight: bold;
font-size: 2rem;
padding-bottom: 1rem;
}
.popup-modal-message {
padding: 1.5rem;
font-size: 1.6rem;
}
.button-clear {
padding-top: 2rem;
background: none;
font-size: 1.6rem;
}
}

26
src/pages/backup/backup-game/backup-game.scss
View File

@ -4,23 +4,6 @@ page-backup-game {
.header-md::after {
background: none;
}
.navbarc {
.bar-button {
color: $v-onboarding-bar-header-button-color;
}
.toolbar-background {
background: $v-primary-color;
}
.toolbar-content {
.title {
text-align: center;
margin-right: 56px;
.toolbar-title {
color: $v-onboarding-bar-header-color;
}
}
}
}
.pages {
@ -96,11 +79,6 @@ page-backup-game {
border-radius: 3px;
cursor: pointer;
border-color: transparent;
background-color: $v-accent-color;
color: $v-onboarding-color;
&:active {
background-color: $v-btn-active-color;
}
}
.button.button-clear {
@ -113,7 +91,6 @@ page-backup-game {
cursor: pointer;
border-color: transparent;
background-color: inherit;
color: $v-accent-color;
&:active {
opacity: 0.5;
}
@ -136,9 +113,6 @@ page-backup-game {
text-align: center;
text-overflow: ellipsis;
font-size: 16px;
&:active {
background-color: $v-btn-active-color;
}
}
}
}

4
src/pages/backup/backup-warning-modal/backup-warning-modal.scss
View File

@ -8,7 +8,6 @@ page-backup-warning-modal {
min-height: 120px;
}
.popup-modal-content-warning {
background-color: $v-onboarding-bar-header-color;
text-align: center;
height: 65%;
overflow-y: scroll;
@ -19,17 +18,14 @@ page-backup-warning-modal {
font-weight: bold;
font-size: 2rem;
padding-bottom: 1rem;
color: $v-dark-gray;
}
.popup-modal-message {
padding: 1.5rem;
font-size: 1.6rem;
color: $v-mid-gray;
}
.button-clear {
padding-top: 2rem;
background: none;
color: $v-background-warning;
font-size: 1.6rem;
}
}

9
src/pages/backup/backup-warning/backup-warning.scss
View File

@ -15,15 +15,6 @@ page-backup-warning {
max-width: 400px;
}
}
.navbarc {
.bar-button {
color: $v-accent-color;
}
}
.header-md::after {
background: none;
}
}
@media not all and (min-height: 600px) and (min-width: 768px) {

3
src/pages/onboarding/backup-request/backup-request.ts
View File

@ -3,6 +3,7 @@ import { NavController, NavParams, AlertController} from 'ionic-angular';
import { Logger } from '@nsalaun/ng-logger';
import { DisclaimerPage } from '../disclaimer/disclaimer';
import { BackupWarningPage } from '../../backup/backup-warning/backup-warning';
@Component({
selector: 'page-backup-request',
@ -29,7 +30,7 @@ export class BackupRequestPage {
}
initBackupFlow() {
// TODO navigate to backupFlow
this.navCtrl.push(BackupWarningPage);
}
doBackupLater(confirmed: boolean) {

28
src/pages/onboarding/disclaimer/disclaimer.scss
View File

@ -1,17 +1,15 @@
page-disclaimer {
.terms {
width: 100%;
position: absolute;
bottom: 0px;
padding: 15px 15px 4vh 15px;
.link {
font-size: 2vh;
cursor: pointer;
}
}
.content {
padding-top: 5vh;
text-align: center;
font-size: 3vh;
.terms {
width: 100%;
position: absolute;
bottom: 0px;
padding: 15px 15px 4vh 15px;
.link {
font-size: 2vh;
cursor: pointer;
}
}
.content {
padding-top: 5vh;
text-align: center;
font-size: 3vh;
}

3
src/pages/onboarding/disclaimer/disclaimer.ts
View File

@ -1,5 +1,5 @@
import { Component } from '@angular/core';
import { NavController, NavParams} from 'ionic-angular';
import { NavController } from 'ionic-angular';
import { Logger } from '@nsalaun/ng-logger';
import { TermsOfUsePage } from '../../settings/about/terms-of-use/terms-of-use';
@ -15,7 +15,6 @@ export class DisclaimerPage {
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private log: Logger
) {
this.accepted = {

33
src/pages/onboarding/email/email.html
View File

@ -1,51 +1,48 @@
<ion-header>
<ion-navbar hideBackButton="true" transparent>
<ion-navbar hideBackButton="true">
<ion-buttons end>
<button ion-button icon-only (click)="skip()">
Skip
</button>
<button ion-button icon-only (click)="skip()" translate>Skip</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<div class="email-title" translate>Wallet Created</div>
<div translate>Wallet Created</div>
<div *ngIf="!showConfirmForm">
<div class="email-content">
<div>
<p translate>Notifications by email</p>
<p translate>Where would you like to receive email notifications about payments?</p>
</div>
<form (ngSubmit)="showConfirm()" novalidate>
<form [formGroup]="emailForm" (ngSubmit)="showConfirm()">
<ion-item>
<ion-label>Email</ion-label>
<ion-input type="email" [(ngModel)]="data.email" name="email" required></ion-input>
<ion-input type="email" [(ngModel)]="formData.email" formControlName="email" placeholder="Email Input"></ion-input>
</ion-item>
<ion-item>
<ion-label >Get news and updates from BitPay</ion-label>
<ion-checkbox name="accept" [(ngModel)]="data.accept"></ion-checkbox>
<ion-label translate>Get news and updates from BitPay</ion-label>
<ion-checkbox [(ngModel)]="formData.accept" formControlName="accept" checked="true"></ion-checkbox>
</ion-item>
<div class="buttons">
<button ion-button block type="submit">Continue &rarr;</button>
</div>
<button ion-button block type="submit" [disabled]="!validateEmail()" translate>Continue &rarr;</button>
</form>
</div>
<div *ngIf="showConfirmForm">
<div class="email-content">
<div>
<p translate>Is this email address correct?</p>
<p>{{data.email}}</p>
<p>{{formData.email}}</p>
</div>
<div class="buttons">
<div class="row">
<div class="col col-50">
<button class="primary" block ion-button (click)="showConfirm()">Edit</button>
<button block ion-button (click)="showConfirm()" translate>Edit</button>
</div>
<div class="col col-50">
<button class="primary" block ion-button (click)="save()">Confirm</button>
<button block ion-button (click)="save()" translate>Confirm</button>
</div>
</div>
</div>

21
src/pages/onboarding/email/email.scss
View File

@ -1,17 +1,6 @@
page-email {
.buttons {
width: 100%;
position: absolute;
bottom: 0px;
padding: 15px 15px 4vh 15px;
}
.email-title {
margin: 5vh 0;
text-align: center;
font-size: 3vh;
}
.email-content {
text-align: center;
padding: 0 4vh;
}
.buttons {
width: 100%;
position: absolute;
bottom: 0px;
padding: 15px 15px 4vh 15px;
}

26
src/pages/onboarding/email/email.ts
View File

@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import { NavController, NavParams, ActionSheetController } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { Logger } from '@nsalaun/ng-logger';
import { BackupRequestPage } from '../backup-request/backup-request';
@ -9,22 +10,32 @@ import { BackupRequestPage } from '../backup-request/backup-request';
templateUrl: 'email.html',
})
export class EmailPage {
public data: any;
public formData: any;
public showConfirmForm: boolean;
private emailForm: FormGroup;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public actionSheet: ActionSheetController,
private log: Logger
private log: Logger,
private fb: FormBuilder
) {
this.data = {
this.formData = {
accept: true,
email: '',
email: null,
};
this.showConfirmForm = false;
}
ngOnInit() {
this.emailForm = this.fb.group({
email: ['', Validators.required, this.validateEmail()],
accept: [''],
});
};
ionViewDidLoad() {
this.log.info('ionViewDidLoad EmailPage');
}
@ -33,6 +44,11 @@ export class EmailPage {
this.navCtrl.push(BackupRequestPage);
}
validateEmail() {
var regex = /^[a-zA-Z0-9.!#$%&*+=?^_{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
return regex.test(this.formData.email);
}
showActionSheet() {
let actionSheet = this.actionSheet.create({
buttons: [
@ -50,7 +66,7 @@ export class EmailPage {
showConfirm() {
// TODO Fix form validation
if (!this.data.email) return;
if (!this.formData.email) return;
this.showConfirmForm = !this.showConfirmForm;
}

3
src/pages/onboarding/onboarding.ts
View File

@ -4,6 +4,7 @@ import { Logger } from '@nsalaun/ng-logger';
import { TourPage } from './tour/tour';
import { TabsPage } from '../tabs/tabs';
import { ImportWalletPage } from '../add/import-wallet/import-wallet';
@Component({
selector: 'page-onboarding',
@ -26,7 +27,7 @@ export class OnboardingPage {
}
restoreFromBackup() {
// TODO navigate to backupFlow
this.navCtrl.push(ImportWalletPage, {fromOnboarding: true});
}
skipOnboarding() {

4
src/pages/onboarding/tour/tour.html
View File

@ -1,8 +1,8 @@
<ion-header>
<ion-navbar transparent>
<ion-navbar>
<ion-buttons end>
<button ion-button icon-only (click)="skip()">
<button ion-button icon-only (click)="createDefaultWallet()" *ngIf="currentIndex == 0" translate>
Skip
</button>
</ion-buttons>

18
src/pages/onboarding/tour/tour.scss
View File

@ -1,11 +1,9 @@
page-tour {
.buttons {
width: 100%;
position: absolute;
bottom: 0px;
padding: 15px 15px 9vh 15px;
}
.slide-zoom {
height: inherit;
}
.buttons {
width: 100%;
position: absolute;
bottom: 0px;
padding: 15px 15px 9vh 15px;
}
.slide-zoom {
height: inherit;
}

4
src/pages/onboarding/tour/tour.ts
View File

@ -35,10 +35,6 @@ export class TourPage {
this.currentIndex = this.slides.getActiveIndex();
}
skip() {
this.navCtrl.push(EmailPage);
}
slidePrev() {
if (this.currentIndex == 0) this.navCtrl.pop();
else {

12
src/pages/send/amount/amount.scss
View File

@ -9,7 +9,6 @@ page-amount {
position: absolute;
bottom: 0;
width: 100%;
color: $v-mid-gray;
.row {
padding: 0 !important;
@ -21,13 +20,8 @@ page-amount {
}
.operator {
background-color: $v-subtle-gray;
font-weight: normal;
cursor: pointer;
&:active {
background-color: $v-light-gray;
}
}
.operator-row {
@ -48,16 +42,10 @@ page-amount {
.digit{
cursor: pointer;
border-top: 1px solid $v-subtle-gray;
border-left: 1px solid $v-subtle-gray;
&:active {
background-color: $v-subtle-gray;
}
}
@media(max-height: 480px) {
font-size: 12px;
}
}
}

22
src/theme/variables.scss
View File

@ -21,28 +21,6 @@ $app-direction: ltr;
// TODO: Custom variables (backward compatibilities). Will be REMOVED
$v-primary-color: #192c3a;
$v-secondary-color: #31465b;
$v-accent-color: #1abb9b;
$v-dark-gray: #445 !default;
$v-mid-gray: #667 !default;
$v-light-gray: #9b9bab !default;
$v-title-gray: #c2c9d1 !default;
$v-subtle-gray: darken(#ffffff, 5%) !default;
$v-btn-active-color: #148e76;
$v-background-warning: #ffa500;
$v-background-success: #1abb9b;
$v-onboarding-color: #ffffff !default;
$v-onboarding-bar-header-color: #ffffff !default;
$v-onboarding-bar-header-button-color: #ffffff !default;
$v-onboarding-gradient-top-color: $v-primary-color !default;
$v-onboarding-gradient-bottom-color: $v-secondary-color !default;
$v-onboarding-checkbox-on-border: $v-accent-color;
$v-button-primary-bg: $v-accent-color !default;
$v-visible-radius: 6px !default;
// App iOS Variables
// --------------------------------------------------