argos/dmp-frontend/src/app/library/guided-tour/guided-tour.component.html

46 lines
2.3 KiB
HTML
Raw Normal View History

2020-08-05 10:23:09 +02:00
<!-- custom add: isStepUnique -->
2020-07-30 17:29:20 +02:00
<div *ngIf="currentTourStep && !isOrbShowing">
<div class="guided-tour-user-input-mask" (click)="backdropClick($event)"></div>
2020-09-09 16:56:20 +02:00
<div class="guided-tour-spotlight-overlay"
[style.top.px]="overlayTop"
2020-08-05 10:23:09 +02:00
[style.left.px]="overlayLeft"
2020-09-09 16:56:20 +02:00
[style.height.px]="currentTourStep.isStepUnique ? overlayWidth : overlayHeight"
2020-08-05 10:23:09 +02:00
[style.width.px]="overlayWidth">
2020-07-30 17:29:20 +02:00
</div>
</div>
<div *ngIf="currentTourStep && !isOrbShowing">
2020-09-09 16:56:20 +02:00
<div #tourStep *ngIf="currentTourStep"
class="tour-step tour-{{ currentTourStep.orientation }}"
2020-08-05 10:23:09 +02:00
[ngClass]="{ 'page-tour-step': !currentTourStep.selector }"
2020-08-04 17:27:13 +02:00
[style.top.px]="(currentTourStep.selector && selectedElementRect ? topPosition : null)"
2020-07-30 17:29:20 +02:00
[style.left.px]="(currentTourStep.selector && selectedElementRect ? leftPosition : null)"
[style.width.px]="(currentTourStep.selector && selectedElementRect ? calculatedTourStepWidth : null)"
[style.transform]="(currentTourStep.selector && selectedElementRect ? transform : null)">
<div *ngIf="currentTourStep.selector" class="tour-arrow"></div>
2020-09-09 16:56:20 +02:00
<div class="row tour-block d-flex">
<div class="col p-0">
2020-08-04 17:27:13 +02:00
<h3 class="tour-title" *ngIf="currentTourStep.title && currentTourStep.selector">
{{currentTourStep.title}}
</h3>
2020-08-05 10:23:09 +02:00
<h2 class="tour-title" *ngIf="currentTourStep.title && !currentTourStep.selector">
{{ currentTourStep.title }}
</h2>
2020-08-04 17:27:13 +02:00
<div class="tour-buttons">
<button *ngIf="!guidedTourService.onResizeMessage" class="next-button"
(click)="guidedTourService.nextStep()">
{{ nextText }}
</button>
<button *ngIf="!guidedTourService.onResizeMessage && !currentTourStep.isStepUnique"
(click)="guidedTourService.skipTour()" class="skip-button link-button">
{{ skipText }}
</button>
</div>
2020-07-30 17:29:20 +02:00
</div>
2020-09-09 16:56:20 +02:00
<div class="col-auto p-0 d-flex align-items-end">
<img src="../../../assets/splash/assets/img/2_Sign_in/Png/Sign In - Copy.png" width="190px" height="210px">
<!-- <div class="argos-present-img"></div> -->
</div>
2020-07-30 17:29:20 +02:00
</div>
</div>
2020-09-09 16:56:20 +02:00
</div>