Core welcome tour functionality

This commit is contained in:
Michael Shamoon
2022-09-21 21:44:15 -07:00
parent e7ebc33090
commit 4e56fe339e
16 changed files with 169 additions and 35 deletions

View File

@@ -11,3 +11,27 @@
</div>
</ng-template>
</ngx-file-drop>
<tour-step-template>
<ng-template #tourStep let-step="step">
<p class="tour-step-content" [innerHTML]="step?.content"></p>
<div class="d-flex justify-content-between align-items-end">
<span class="badge bg-secondary">{{ tourService.steps?.indexOf(step) + 1 }}/{{ tourService.steps?.length }}</span>
<div class="tour-step-navigation btn-toolbar" role="toolbar" aria-label="Controls">
<div class="btn-group me-2" role="group" aria-label="Dismiss">
<button class="btn btn-outline-danger btn-sm" (click)="tourService.end()">
{{ step?.endBtnTitle }}
</button>
</div>
<div class="btn-group align-self-end" role="group" aria-label="Previous / Next">
<button *ngIf="tourService.hasPrev(step)" class="btn btn-outline-primary btn-sm" (click)="tourService.prev()">
« {{ step?.prevBtnTitle }}
</button>
<button *ngIf="tourService.hasNext(step)" class="btn btn-outline-primary btn-sm" (click)="tourService.next()">
{{ step?.nextBtnTitle }} »
</button>
</div>
</div>
</div>
</ng-template>
</tour-step-template>