-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactoring: extract default step templates to separate components to…
… have properly typed "step" variables.
- Loading branch information
Showing
36 changed files
with
885 additions
and
768 deletions.
There are no files selected for viewing
53 changes: 53 additions & 0 deletions
53
...b/tour-step-template/tour-default-step-template/tour-default-step-template.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| @let step = this.step(); | ||
|
|
||
| <ion-card> | ||
| <ion-card-header> | ||
| <ion-card-title>{{step.title}}</ion-card-title> | ||
| <ion-button | ||
| class="close" | ||
| fill="clear" | ||
| shape="round" | ||
| (click)="tourService.end()" | ||
| > | ||
| <ion-icon slot="icon-only" name="close-outline"></ion-icon> | ||
| </ion-button> | ||
| </ion-card-header> | ||
|
|
||
| <ion-card-content | ||
| [innerHTML]="step.content" | ||
| ></ion-card-content> | ||
|
|
||
| <div | ||
| class="footer" | ||
| [class.no-progress]="!step.showProgress" | ||
| > | ||
| <ion-button | ||
| fill="clear" | ||
| [disabled]="!tourService.hasPrev(step)" | ||
| (click)="tourService.prev()" | ||
| > | ||
| <ion-icon slot="start" name="chevron-back-outline"></ion-icon> | ||
| {{ step.prevBtnTitle }} | ||
| </ion-button> | ||
| @if (step.showProgress) { | ||
| <div class="progress">{{ tourService.steps.indexOf(step) + 1 }} / {{ tourService.steps.length }}</div> | ||
| } | ||
| @if (tourService.hasNext(step) && !step.nextOnAnchorClick) { | ||
| <ion-button | ||
| fill="clear" | ||
| (click)="tourService.next()" | ||
| > | ||
| {{ step.nextBtnTitle }} | ||
| <ion-icon slot="end" name="chevron-forward-outline"></ion-icon> | ||
| </ion-button> | ||
| } | ||
| @if (!tourService.hasNext(step)) { | ||
| <ion-button | ||
| fill="clear" | ||
| (click)="tourService.end()" | ||
| > | ||
| {{ step.endBtnTitle }} | ||
| </ion-button> | ||
| } | ||
| </div> | ||
| </ion-card> |
57 changes: 57 additions & 0 deletions
57
...b/tour-step-template/tour-default-step-template/tour-default-step-template.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| ion-card { | ||
| margin: 0; | ||
| pointer-events: auto; | ||
| } | ||
|
|
||
| ion-card-header { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| padding: 8px 16px; | ||
|
|
||
| ion-card-title { | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| } | ||
| } | ||
|
|
||
| ion-button.close { | ||
| --padding-start: 5px; | ||
| --padding-end: 5px; | ||
| --padding-top: 5px; | ||
| --padding-bottom: 5px; | ||
| margin: 0 -8px 0 0; | ||
| } | ||
|
|
||
| .footer { | ||
| display: grid; | ||
| grid-template-columns: 1fr auto 1fr; | ||
| padding: 0 8px 8px; | ||
| align-items: center; | ||
| gap: 8px; | ||
|
|
||
| >* { | ||
| max-width: fit-content; | ||
|
|
||
| &:last-child { | ||
| justify-self: flex-end; | ||
| } | ||
| } | ||
|
|
||
| .progress { | ||
| font-size: 12px; | ||
| font-weight: 600; | ||
| color: rgba(0, 0, 0, .38); | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| &.no-progress { | ||
| grid-template-columns: 1fr 1fr; | ||
| } | ||
|
|
||
| ion-button { | ||
| text-transform: capitalize; | ||
| } | ||
| } |
39 changes: 39 additions & 0 deletions
39
...lib/tour-step-template/tour-default-step-template/tour-default-step-template.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import {ChangeDetectionStrategy, Component, inject, input} from '@angular/core'; | ||
| import type {IonStepOption} from '../../step-option.interface'; | ||
| import {IonTourService} from '../../ion-tour.service'; | ||
| import {IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonIcon} from '@ionic/angular/standalone'; | ||
| import {addIcons} from 'ionicons'; | ||
| import {chevronBackOutline, chevronForwardOutline, closeOutline} from 'ionicons/icons'; | ||
|
|
||
| @Component({ | ||
| selector: 'tour-default-step-template', | ||
| imports: [ | ||
| IonButton, | ||
| IonCard, | ||
| IonCardContent, | ||
| IonCardHeader, | ||
| IonCardTitle, | ||
| IonIcon | ||
| ], | ||
| templateUrl: './tour-default-step-template.component.html', | ||
| styleUrl: './tour-default-step-template.component.scss', | ||
| changeDetection: ChangeDetectionStrategy.OnPush | ||
| }) | ||
| export class TourDefaultStepTemplateComponent { | ||
|
|
||
| readonly step = input.required<IonStepOption>(); | ||
| protected readonly tourService = inject(IonTourService); | ||
|
|
||
| constructor() { | ||
| this.addIonicIcons(); | ||
| } | ||
|
|
||
| private addIonicIcons() { | ||
| addIcons({ | ||
| closeOutline, | ||
| chevronBackOutline, | ||
| chevronForwardOutline | ||
| }); | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 0 additions & 58 deletions
58
libs/ngx-ui-tour-ionic/src/lib/tour-step-template/tour-step-template.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,61 +1,3 @@ | ||
| ion-popover { | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| ion-card { | ||
| margin: 0; | ||
| pointer-events: auto; | ||
| } | ||
|
|
||
| ion-card-header { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| padding: 8px 16px; | ||
|
|
||
| ion-card-title { | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| } | ||
| } | ||
|
|
||
| ion-button.close { | ||
| --padding-start: 5px; | ||
| --padding-end: 5px; | ||
| --padding-top: 5px; | ||
| --padding-bottom: 5px; | ||
| margin: 0 -8px 0 0; | ||
| } | ||
|
|
||
| .footer { | ||
| display: grid; | ||
| grid-template-columns: 1fr auto 1fr; | ||
| padding: 0 8px 8px; | ||
| align-items: center; | ||
| gap: 8px; | ||
|
|
||
| >* { | ||
| max-width: fit-content; | ||
|
|
||
| &:last-child { | ||
| justify-self: flex-end; | ||
| } | ||
| } | ||
|
|
||
| .progress { | ||
| font-size: 12px; | ||
| font-weight: 600; | ||
| color: rgba(0, 0, 0, .38); | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| &.no-progress { | ||
| grid-template-columns: 1fr 1fr; | ||
| } | ||
|
|
||
| ion-button { | ||
| text-transform: capitalize; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 63 additions & 0 deletions
63
...b/tour-step-template/tour-default-step-template/tour-default-step-template.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| @let step = this.step(); | ||
|
|
||
| <mat-card | ||
| (click)="$event.stopPropagation()" | ||
| [style.width]="step.stepDimensions?.width" | ||
| [style.min-width]="step.stepDimensions?.minWidth" | ||
| [style.max-width]="step.stepDimensions?.maxWidth" | ||
| > | ||
| <mat-card-header> | ||
| <div class="header-group"> | ||
| <mat-card-title> | ||
| {{ step.title }} | ||
| </mat-card-title> | ||
| <button | ||
| mat-icon-button | ||
| (click)="tourService.end()" | ||
| class="close" | ||
| > | ||
| <mat-icon>close</mat-icon> | ||
| </button> | ||
| </div> | ||
| </mat-card-header> | ||
|
|
||
| <mat-card-content | ||
| class="mat-body" | ||
| [innerHTML]="step.content" | ||
| ></mat-card-content> | ||
|
|
||
| <mat-card-actions | ||
| [class.no-progress]="!step.showProgress" | ||
| > | ||
| <button | ||
| mat-button | ||
| class="prev" | ||
| [disabled]="!tourService.hasPrev(step)" | ||
| (click)="tourService.prev()" | ||
| > | ||
| <mat-icon>chevron_left</mat-icon> | ||
| {{ step.prevBtnTitle }} | ||
| </button> | ||
| @if (step.showProgress) { | ||
| <div class="progress">{{ tourService.steps.indexOf(step) + 1 }} / {{ tourService.steps.length }}</div> | ||
| } | ||
| @if (tourService.hasNext(step) && !step.nextOnAnchorClick) { | ||
| <button | ||
| class="next" | ||
| (click)="tourService.next()" | ||
| mat-button | ||
| > | ||
| {{ step.nextBtnTitle }} | ||
| <mat-icon iconPositionEnd>chevron_right</mat-icon> | ||
| </button> | ||
| } | ||
| @if (!tourService.hasNext(step)) { | ||
| <button | ||
| mat-button | ||
| (click)="tourService.end()" | ||
| > | ||
| {{ step.endBtnTitle }} | ||
| </button> | ||
| } | ||
| </mat-card-actions> | ||
| </mat-card> |
Oops, something went wrong.