Skip to content

Commit

Permalink
Merge pull request #2072 from numbersprotocol/feature-rebranded-onboa…
Browse files Browse the repository at this point in the history 
…rding

Feature rebranded onboarding
  • Loading branch information
@bafu
bafu committed Sep 15, 2022
2 parents c83ade2 + 50849e9 commit 6d47073
Show file tree
Hide file tree
Showing 11 changed files with 219 additions and 189 deletions.
7 changes: 1 addition & 6 deletions src/app/features/home/home.page.ts
View file
Expand Up @@ -107,12 +107,7 @@ export class HomePage {
}

private async onboardingRedirect() {
if (
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
!this.userGuideIsTemporarelyDisabled &&
this.platform.is('ios') &&
(await this.onboardingService.hasShownTutorialVersion()) === ''
) {
if (await this.onboardingService.shouldShowOnboardingTutotrial()) {
return this.router.navigate(['tutorial'], {
relativeTo: this.route,
});
Expand Down
201 changes: 47 additions & 154 deletions src/app/features/home/onboarding/tutorial/tutorial.page.html
View file
@@ -1,166 +1,59 @@
<ion-content *transloco="let t">
<ion-slides #slides pager>
<div class="top-section">
<ion-img src="/assets/images/icons/capture-rebrand-wordmark.svg"> </ion-img>
<button *ngIf="!isLastSlide" (click)="skipSlides()" mat-stroked-button>
{{ t('onboarding.skip') }}
</button>
</div>
<ion-slides
#slides
[pager]="isLastSlide === false"
(ionSlideDidChange)="ionSlideDidChange($event)"
>
<ion-slide>
<ng-container>
<svg
version="1.1"
id="圖層_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 360 639"
enable-background="new 0 0 360 639"
xml:space="preserve"
>
<image
overflow="visible"
width="360"
height="639"
xlink:href="/assets/images/tutorial-1.png"
></image>
<text transform="matrix(1 0 0 1 88.6169 279.2624)">
<tspan x="0" y="0" fill="#FFFFFF" font-size="24px">
{{ t('tutorial.switchBetween0') }}
</tspan>
<tspan x="-12.6" y="28.8" fill="#FFFFFF" font-size="24px">
{{ t('tutorial.switchBetween1') }}
</tspan>
<tspan x="4.8" y="57.6" fill="#FFFFFF" font-size="24px">
{{ t('tutorial.switchBetween2') }}
</tspan>
</text>
<text
transform="matrix(1 0 0 1 100 519.6104)"
fill="#FFFFFF"
font-size="24px"
>
{{ t('tutorial.viewYourCollections') }}
</text>
</svg>
</ng-container>
<button (click)="slides.slideNext()" mat-stroked-button>
{{ t('next') }}
</button>
<img src="/assets/images/onboarding/image-1.jpeg" class="slide-image" />
<div class="slide-text">
<div class="title">{{ t('onboarding.slide1.title') }}</div>
<div class="spacer"></div>
<div class="subtitle">{{ t('onboarding.slide1.subtitle') }}</div>
</div>
<div class="mat-button-height-placeholder"></div>
</ion-slide>
<ion-slide>
<ng-container>
<svg
version="1.1"
id="圖層_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 360 639"
enable-background="new 0 0 360 639"
xml:space="preserve"
>
<image
overflow="visible"
width="359"
height="639"
xlink:href="/assets/images/tutorial-2.png"
></image>
<text
transform="matrix(1 0 0 1 90 460.2997)"
fill="#FFFFFF"
font-size="24px"
>
{{ t('tutorial.createCaptures') }}
</text>
<text
transform="matrix(1 0 0 1 20 397.8444)"
fill="#FFFFFF"
font-size="24px"
>
{{ t('tutorial.viewCreatedCaptures') }}
</text>
</svg>
</ng-container>
<button (click)="slides.slideNext()" mat-stroked-button>
{{ t('next') }}
</button>
<img src="/assets/images/onboarding/image-2.jpeg" class="slide-image" />
<div class="slide-text">
<div class="title">{{ t('onboarding.slide2.title') }}</div>
<div class="spacer"></div>
<div class="subtitle">{{ t('onboarding.slide2.subtitle') }}</div>
</div>
<div class="mat-button-height-placeholder"></div>
</ion-slide>
<ion-slide>
<ng-container>
<svg
version="1.1"
id="圖層_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 360 639"
enable-background="new 0 0 360 639"
xml:space="preserve"
>
<image
overflow="visible"
width="360"
height="639"
xlink:href="/assets/images/tutorial-3.png"
></image>
<text
transform="matrix(1 0 0 1 158.3539 116.3548)"
fill="#FFFFFF"
font-size="24px"
>
{{ t('tutorial.viewMore') }}
</text>
<text
transform="matrix(1 0 0 1 40 480)"
fill="#FFFFFF"
font-size="24px"
>
{{ t('tutorial.openCertificate') }}
</text>
</svg>
</ng-container>
<button (click)="slides.slideNext()" mat-stroked-button>
{{ t('next') }}
</button>
<img src="/assets/images/onboarding/image-3.jpeg" class="slide-image" />
<div class="slide-text">
<div class="title">{{ t('onboarding.slide3.title') }}</div>
<div class="spacer"></div>
<div class="subtitle">{{ t('onboarding.slide3.subtitle') }}</div>
</div>
<div class="mat-button-height-placeholder"></div>
</ion-slide>
<ion-slide>
<ng-container>
<svg
version="1.1"
id="圖層_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 360 639"
enable-background="new 0 0 360 639"
xml:space="preserve"
>
<image
overflow="visible"
width="360"
height="639"
xlink:href="/assets/images/tutorial-4.png"
></image>
<text
transform="matrix(1 0 0 1 127.9265 65)"
fill="#000"
font-size="24px"
>
{{ t('tutorial.histories') }}
</text>
<g>
<text
transform="matrix(1 0 0 1 159.2167 200)"
fill="#FFFFFF"
font-size="24px"
>
{{ t('tutorial.messageInbox') }}
</text>
</g>
</svg>
</ng-container>
<button routerLink="/home" mat-stroked-button>
{{ t('start') }}
<img src="/assets/images/onboarding/image-4.jpeg" class="slide-image" />
<div class="slide-text">
<div class="title">{{ t('onboarding.slide4.title') }}</div>
<div class="spacer"></div>
<div class="subtitle">{{ t('onboarding.slide4.subtitle') }}</div>
</div>
<button
routerLink="/home"
color="primary"
mat-raised-button
class="explore-catpure"
>
{{ t('onboarding.exploreCapture') | uppercase }}
</button>
</ion-slide>
</ion-slides>

<div class="bottom-section"></div>
</ion-content>
103 changes: 76 additions & 27 deletions src/app/features/home/onboarding/tutorial/tutorial.page.scss
View file
@@ -1,43 +1,92 @@
$top-section-height: calc(64px + env(safe-area-inset-top));
$bottom-section-height: calc(56px + env(safe-area-inset-bottom));
$ion-slides-height: calc(
100vh - #{$top-section-height} - #{$bottom-section-height}
);
$ion-slide-img-height: 50vh;

ion-content {
.top-section {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-right: 8px;
padding-left: 24px;
padding-top: 4vh;
height: $top-section-height;
width: 100vw;

ion-img {
height: 32px;
width: 135px;
}

button {
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
text-align: right;
color: white;
border: none;
}
}

ion-slides {
--bullet-background-active: white;
height: $ion-slides-height;

--bullet-background: white;
--bullet-background-active: #486cd9;

ion-slide {
flex-direction: column;
justify-content: space-around;
background-color: var(--noir-primary);
height: 100vh;

svg {
padding-top: 8vh;
padding-bottom: calc(12vh + env(safe-area-inset-bottom));
.slide-image {
height: $ion-slide-img-height;
width: 100vw;
object-fit: cover;
}

.slide-text {
padding-left: 4vw;
padding-right: 4vw;

.title {
font-weight: 700;
text-align: center;
color: white;
font-size: 32px;
}

.spacer {
height: 2vh;
}

.subtitle {
font-weight: 500;
text-align: center;
color: white;
opacity: 0.75;
font-size: 16px;
}
}

.mat-button-height-placeholder {
height: 36px;
}

button {
position: absolute;
bottom: 10px;
right: 20px;
.mat-raised-button.mat-primary {
color: white;
font-size: 20px;
padding-bottom: calc(5vh + env(safe-area-inset-bottom));
border: none;
width: calc(100vw - 32px);
border-radius: 37px;
}
}
}
}

.pagination-bullets {
bottom: 16px;
}

.ios text {
font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
}

@media (min-height: 750px) {
.ios div {
position: relative;
width: 100%;
padding: 30px;
height: 90%;
.bottom-section {
height: $bottom-section-height;
}
}
28 changes: 26 additions & 2 deletions src/app/features/home/onboarding/tutorial/tutorial.page.ts
View file
@@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { OnboardingService } from '../../../../shared/onboarding/onboarding.service';

Expand All @@ -9,7 +10,30 @@ import { OnboardingService } from '../../../../shared/onboarding/onboarding.serv
styleUrls: ['./tutorial.page.scss'],
})
export class TutorialPage {
constructor(private readonly onboardingService: OnboardingService) {
isLastSlide = false;

@ViewChild('slides') slides?: IonSlides;

constructor(
private readonly onboardingService: OnboardingService,
private readonly ref: ChangeDetectorRef
) {
this.onboardingService.onboard$().pipe(untilDestroyed(this)).subscribe();
}

async ionSlideDidChange(_: any) {
if (!this.slides) return;

const curSlideIndex = await this.slides.getActiveIndex();
const totalSlides = await this.slides.length();

this.isLastSlide = curSlideIndex === totalSlides - 1;
}

async skipSlides() {
if (!this.slides) return;

const totalSlides = await this.slides.length();
await this.slides.slideTo(totalSlides - 1);
}
}

0 comments on commit 6d47073

Please sign in to comment.