Guided Tour Update
This commit is contained in:
parent
de10a986db
commit
84047fc035
|
@ -27,8 +27,7 @@
|
|||
"src/styles.scss",
|
||||
"src/assets/scss/material-dashboard.scss",
|
||||
"src/assets/css/demo.css",
|
||||
"node_modules/cookieconsent/build/cookieconsent.min.css",
|
||||
"src/app/library/guided-tour/guided-tour-base-theme.scss"
|
||||
"node_modules/cookieconsent/build/cookieconsent.min.css"
|
||||
],
|
||||
"scripts": [
|
||||
"node_modules/cookieconsent/build/cookieconsent.min.js",
|
||||
|
|
|
@ -1,132 +0,0 @@
|
|||
$tour-zindex: 1081 !default;
|
||||
$tour-step-color: #ffffff !default;
|
||||
$tour-text-color: #231f1f !default;
|
||||
$tour-next-button-color: #007bff !default;
|
||||
$tour-next-button-hover: #0069d9 !default;
|
||||
$tour-back-button-color: #007bff !default;
|
||||
$tour-next-text-color: #ffffff !default;
|
||||
$tour-next-text-hover: #ffffff !default;
|
||||
$tour-skip-link-color: #5e5e5e !default;
|
||||
$tour-orb-color: #625aff !default;
|
||||
$tour-shadow-color: #4c4c4c !default;
|
||||
|
||||
body.tour-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin tour-triangle($direction, $color: currentColor, $size: 1rem) {
|
||||
|
||||
@if not index(top right bottom left, $direction) {
|
||||
@error 'Direction must be either `top`, `right`, `bottom` or `left`.';
|
||||
}
|
||||
|
||||
$opposite-direction: top;
|
||||
|
||||
@if $direction==top {
|
||||
$opposite-direction: bottom;
|
||||
}
|
||||
|
||||
@if $direction==bottom {
|
||||
$opposite-direction: top;
|
||||
}
|
||||
|
||||
@if $direction==right {
|
||||
$opposite-direction: left;
|
||||
}
|
||||
|
||||
@if $direction==left {
|
||||
$opposite-direction: right;
|
||||
}
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
z-index: 2;
|
||||
border-#{$opposite-direction}: $size solid $color;
|
||||
$perpendicular-borders: $size solid transparent;
|
||||
@if $direction==top or $direction==bottom {
|
||||
border-left: $perpendicular-borders;
|
||||
border-right: $perpendicular-borders;
|
||||
}
|
||||
@else if $direction==right or $direction==left {
|
||||
border-bottom: $perpendicular-borders;
|
||||
border-top: $perpendicular-borders;
|
||||
}
|
||||
}
|
||||
|
||||
ngx-guided-tour {
|
||||
.guided-tour-user-input-mask {
|
||||
z-index: $tour-zindex;
|
||||
}
|
||||
|
||||
.guided-tour-spotlight-overlay {
|
||||
z-index: $tour-zindex + 1;
|
||||
}
|
||||
|
||||
.tour-orb {
|
||||
z-index: $tour-zindex - 2;
|
||||
background-color: $tour-orb-color;
|
||||
box-shadow: 0 0 0.3rem 0.1rem $tour-orb-color;
|
||||
|
||||
.tour-orb-ring {
|
||||
&::after {
|
||||
border: 1rem solid $tour-orb-color;
|
||||
box-shadow: 0 0 0.1rem 0.1rem $tour-orb-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tour-step {
|
||||
z-index: $tour-zindex + 2;
|
||||
|
||||
&.tour-bottom, &.tour-bottom-right, &.tour-bottom-left {
|
||||
.tour-arrow::before {
|
||||
@include tour-triangle(top, $tour-step-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.tour-top, &.tour-top-right, &.tour-top-left {
|
||||
.tour-arrow::before {
|
||||
@include tour-triangle(bottom, $tour-step-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.tour-left {
|
||||
.tour-arrow::before {
|
||||
@include tour-triangle(right, $tour-step-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.tour-right {
|
||||
.tour-arrow::before {
|
||||
@include tour-triangle(left, $tour-step-color);
|
||||
}
|
||||
}
|
||||
|
||||
.tour-block {
|
||||
color: $tour-text-color;
|
||||
background-color: $tour-step-color;
|
||||
box-shadow: 0 0.4rem 0.6rem $tour-shadow-color;
|
||||
}
|
||||
|
||||
.tour-buttons {
|
||||
button.skip-button {
|
||||
color: $tour-skip-link-color;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
color: $tour-back-button-color;
|
||||
}
|
||||
|
||||
.next-button {
|
||||
background-color: $tour-next-button-color;
|
||||
color: $tour-next-text-color;
|
||||
&:hover {
|
||||
background-color: $tour-next-button-hover;
|
||||
color: $tour-next-text-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
|
@ -1,89 +1,34 @@
|
|||
<!-- <div *ngIf="currentTourStep && selectedElementRect && isOrbShowing"y
|
||||
class="tour-orb tour-{{ currentTourStep.orientation }}"
|
||||
(mouseenter)="handleOrb()"
|
||||
[style.top.px]="orbTopPosition"
|
||||
[style.left.px]="orbLeftPosition"
|
||||
[style.transform]="orbTransform">
|
||||
<div class="tour-orb-ring"></div>
|
||||
</div> -->
|
||||
<div *ngIf="currentTourStep && !isOrbShowing">
|
||||
<div class="guided-tour-user-input-mask" (click)="backdropClick($event)"></div>
|
||||
<div *ngIf="!isStepUnique" class="guided-tour-spotlight-overlay" [style.top.px]="overlayTop" [style.left.px]="overlayLeft"
|
||||
[style.height.px]="overlayHeight" [style.width.px]="overlayWidth" >
|
||||
</div>
|
||||
<div *ngIf="isStepUnique" class="guided-tour-spotlight-overlay spotlight-overlay-step-unique" [style.top.px]="overlayTop-12" [style.left.px]="overlayLeft-3"
|
||||
[style.height.px]="overlayHeight" [style.width.px]="overlayWidth" >
|
||||
<div class="guided-tour-spotlight-overlay" [style.top.px]="overlayTop" [style.left.px]="overlayLeft"
|
||||
[style.height.px]="currentTourStep.isStepUnique ? overlayWidth : overlayHeight" [style.width.px]="overlayWidth">
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="currentTourStep && !isOrbShowing">
|
||||
<div #tourStep *ngIf="currentTourStep" class="tour-step tour-{{ currentTourStep.orientation }}" [ngClass]="{
|
||||
'page-tour-step': !currentTourStep.selector, 'tour-step-unique' : isStepUnique
|
||||
}" [style.top.px]="(currentTourStep.selector && selectedElementRect ? topPosition : null)"
|
||||
'page-tour-step': !currentTourStep.selector }"
|
||||
[style.top.px]="(currentTourStep.selector && selectedElementRect ? topPosition : null)"
|
||||
[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>
|
||||
<div class="tour-block">
|
||||
<!-- <div *ngIf="
|
||||
progressIndicatorLocation === progressIndicatorLocations.TopOfTourBlock
|
||||
&& !guidedTourService.onResizeMessage" class="tour-progress-indicator">
|
||||
<ng-container *ngTemplateOutlet="progress"></ng-container>
|
||||
</div> -->
|
||||
<div class="tour-block d-flex">
|
||||
<div class="col-11">
|
||||
<h3 class="tour-title" *ngIf="currentTourStep.title && currentTourStep.selector">
|
||||
{{currentTourStep.title}}
|
||||
</h3>
|
||||
<h2 class="tour-title" *ngIf="currentTourStep.title && !currentTourStep.selector">
|
||||
{{ currentTourStep.title }}
|
||||
</h2>
|
||||
<!-- <div class="tour-content" [innerHTML]="currentTourStep.content"></div> -->
|
||||
<div class="tour-buttons">
|
||||
<button *ngIf="!guidedTourService.onResizeMessage" class="next-button"
|
||||
(click)="guidedTourService.nextStep()">
|
||||
{{ nextText }}
|
||||
</button>
|
||||
<button *ngIf="!guidedTourService.onResizeMessage && !isStepUnique" (click)="guidedTourService.skipTour()"
|
||||
class="skip-button link-button">
|
||||
<button *ngIf="!guidedTourService.onResizeMessage && !currentTourStep.isStepUnique"
|
||||
(click)="guidedTourService.skipTour()" class="skip-button link-button">
|
||||
{{ skipText }}
|
||||
</button>
|
||||
<!-- <button *ngIf="!guidedTourService.onResizeMessage"
|
||||
(click)="guidedTourService.skipTour()"
|
||||
class="skip-button link-button">
|
||||
{{ skipText }}
|
||||
</button> -->
|
||||
<!-- <button *ngIf="!guidedTourService.onLastStep && !guidedTourService.onResizeMessage"
|
||||
class="next-button"
|
||||
(click)="guidedTourService.nextStep()">
|
||||
{{ nextText }}
|
||||
<ng-container *ngIf="progressIndicatorLocation === progressIndicatorLocations.InsideNextButton">
|
||||
<ng-container *ngTemplateOutlet="progress"></ng-container>
|
||||
</ng-container>
|
||||
</button> -->
|
||||
<!-- <button *ngIf="guidedTourService.onLastStep"
|
||||
class="next-button"
|
||||
(click)="guidedTourService.nextStep()">
|
||||
{{ doneText }}
|
||||
</button> -->
|
||||
<!-- <button *ngIf="guidedTourService.onResizeMessage"
|
||||
class="next-button"
|
||||
(click)="guidedTourService.resetTour()">
|
||||
{{ closeText }}
|
||||
</button> -->
|
||||
<!-- <button *ngIf="!guidedTourService.onFirstStep && !guidedTourService.onResizeMessage"
|
||||
class="back-button link-button"
|
||||
(click)="guidedTourService.backStep()">
|
||||
{{ backText }}
|
||||
</button> -->
|
||||
</div>
|
||||
<div class="argos-present-img"></div>
|
||||
</div>
|
||||
<div class="argos-present-img col-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <ng-template #progress>
|
||||
<ng-container *ngTemplateOutlet="
|
||||
progressIndicator || defaultProgressIndicator;
|
||||
context: { currentStepNumber: guidedTourService.currentTourStepDisplay, totalSteps: guidedTourService.currentTourStepCount }
|
||||
"></ng-container>
|
||||
</ng-template>
|
||||
<ng-template #defaultProgressIndicator let-currentStepNumber="currentStepNumber" let-totalSteps="totalSteps">
|
||||
<ng-container *ngIf="progressIndicatorLocation === progressIndicatorLocations.InsideNextButton"> </ng-container>{{ currentStepNumber }}/{{ totalSteps }}
|
||||
</ng-template> -->
|
|
@ -17,10 +17,6 @@ ngx-guided-tour {
|
|||
border-radius: 44px;
|
||||
}
|
||||
|
||||
.spotlight-overlay-step-unique {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.tour-orb {
|
||||
position: fixed;
|
||||
width: 20px;
|
||||
|
@ -57,10 +53,6 @@ ngx-guided-tour {
|
|||
}
|
||||
}
|
||||
|
||||
.tour-step-unique {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.tour-step {
|
||||
position: fixed;
|
||||
&.page-tour-step {
|
||||
|
@ -93,9 +85,13 @@ ngx-guided-tour {
|
|||
}
|
||||
|
||||
&.tour-bottom , &.tour-top {
|
||||
margin-top: 20px;
|
||||
margin-left: 10px;
|
||||
.tour-arrow::before {
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
// transform: translateX(-50%);
|
||||
// left: 50%;
|
||||
transform: scale(2);
|
||||
left: 494px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -125,39 +121,35 @@ ngx-guided-tour {
|
|||
}
|
||||
|
||||
&.tour-right {
|
||||
margin-left: 10px;
|
||||
.tour-arrow::before {
|
||||
transform: scale(1.5);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
}
|
||||
.tour-block {
|
||||
margin-top: -15px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tour-block {
|
||||
padding: 15px 25px;
|
||||
height: 348px;
|
||||
max-height: 348px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
// .tour-progress-indicator {
|
||||
// padding-bottom: 15px;
|
||||
// }
|
||||
|
||||
.tour-title {
|
||||
font-weight: lighter !important;
|
||||
font-size: 16px !important;
|
||||
padding-left: 65px;
|
||||
padding-top: 28px;
|
||||
padding-right: 156px;
|
||||
// padding-bottom: 20px;
|
||||
padding: 28px 45px 0px 65px;
|
||||
overflow: auto;
|
||||
text-align: left;
|
||||
color: #212121;
|
||||
line-height: 26px;
|
||||
white-space:pre-line;
|
||||
height: 182px;
|
||||
width: 983px;
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
h3.tour-title {
|
||||
|
@ -167,15 +159,9 @@ ngx-guided-tour {
|
|||
font-size: 30px;
|
||||
}
|
||||
|
||||
// .tour-content {
|
||||
// min-height: 80px;
|
||||
// padding-bottom: 30px;
|
||||
// font-size: 15px;
|
||||
// }
|
||||
|
||||
.tour-buttons {
|
||||
overflow: hidden; // clearfix
|
||||
padding: 40px 156px 25px 65px;
|
||||
padding: 10px 45px 30px 65px;
|
||||
|
||||
button.link-button {
|
||||
padding-left: 0;
|
||||
|
@ -204,7 +190,6 @@ ngx-guided-tour {
|
|||
border: 1px solid #129D99;
|
||||
background: #FFFFFF 0% 0% no-repeat padding-box;
|
||||
color: #129D99;
|
||||
// text-align: center;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
|
@ -233,11 +218,11 @@ ngx-guided-tour {
|
|||
|
||||
.argos-present-img {
|
||||
background: url("../../../assets/splash/assets/img/argos\ present.png") no-repeat;
|
||||
width: 176px;
|
||||
min-width: 176px;
|
||||
height: 220px;
|
||||
position: relative;
|
||||
top: -205px;
|
||||
left: 820px;
|
||||
top: 110px;
|
||||
left: -65px;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild, ViewEncapsulation, TemplateRef, Inject } from '@angular/core';
|
||||
import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild, ViewEncapsulation, TemplateRef, Inject, ChangeDetectorRef } from '@angular/core';
|
||||
import { fromEvent, Subscription } from 'rxjs';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { Orientation, TourStep } from './guided-tour.constants';
|
||||
|
@ -14,21 +14,15 @@ import { WindowRefService } from "./windowref.service";
|
|||
export class GuidedTourComponent implements AfterViewInit, OnDestroy {
|
||||
@Input() public topOfPageAdjustment?= 0;
|
||||
@Input() public tourStepWidth?= 1043;
|
||||
@Input() public minimalTourStepWidth?= 900;
|
||||
@Input() public minimalTourStepWidth?= 500;
|
||||
@Input() public skipText?= 'Leave Tour';
|
||||
@Input() public nextText?= 'Got it!';
|
||||
// @Input() public doneText?= 'Done';
|
||||
// @Input() public closeText?= 'Close';
|
||||
// @Input() public backText?= 'Back';
|
||||
// @Input() public progressIndicatorLocation?: ProgressIndicatorLocation = ProgressIndicatorLocation.InsideNextButton;
|
||||
@Input() public progressIndicator?: TemplateRef<any> = undefined;
|
||||
@ViewChild('tourStep', { static: false }) public tourStep: ElementRef;
|
||||
public highlightPadding = 4;
|
||||
public currentTourStep: TourStep = null;
|
||||
public selectedElementRect: DOMRect = null;
|
||||
public isOrbShowing = false;
|
||||
// public progressIndicatorLocations = ProgressIndicatorLocation;
|
||||
public isStepUnique = false;
|
||||
|
||||
private resizeSubscription: Subscription;
|
||||
private scrollSubscription: Subscription;
|
||||
|
@ -36,6 +30,7 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
|
|||
constructor(
|
||||
public guidedTourService: GuidedTourService,
|
||||
private windowRef: WindowRefService,
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
@Inject(DOCUMENT) private dom: any
|
||||
) { }
|
||||
|
||||
|
@ -59,13 +54,11 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
|
|||
}
|
||||
|
||||
public get calculatedTourStepWidth() {
|
||||
return this.tourStepWidth;
|
||||
// return this.tourStepWidth - this.widthAdjustmentForScreenBound;
|
||||
return this.tourStepWidth - this.widthAdjustmentForScreenBound;
|
||||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this.guidedTourService.guidedTourCurrentStepStream.subscribe((step: TourStep) => {
|
||||
this.isStepUnique = this.guidedTourService.isStepUnique;
|
||||
this.currentTourStep = step;
|
||||
if (step && step.selector) {
|
||||
const selectedElement = this.dom.querySelector(step.selector);
|
||||
|
@ -93,6 +86,10 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
|
|||
});
|
||||
}
|
||||
|
||||
ngAfterContentChecked() {
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.resizeSubscription.unsubscribe();
|
||||
this.scrollSubscription.unsubscribe();
|
||||
|
@ -340,7 +337,11 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
|
|||
|
||||
public get overlayTop(): number {
|
||||
if (this.selectedElementRect) {
|
||||
return this.selectedElementRect.top - this.getHighlightPadding();
|
||||
let customTopOffset = 0;
|
||||
if (this.currentTourStep.customTopOffset) {
|
||||
customTopOffset = this.currentTourStep.customTopOffset;
|
||||
}
|
||||
return this.selectedElementRect.top - this.getHighlightPadding() - customTopOffset;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
|
|
@ -20,6 +20,10 @@ export interface TourStep {
|
|||
useHighlightPadding?: boolean;
|
||||
/** Adds padding around tour highlighting in pixels, this overwrites the default for this step. Is not dependent on useHighlightPadding being true */
|
||||
highlightPadding?: number;
|
||||
/** True if the tour has no other step */
|
||||
isStepUnique?: boolean;
|
||||
/** Adds offset in pixels to the calculated overlayTop */
|
||||
customTopOffset?: number;
|
||||
}
|
||||
|
||||
export interface GuidedTour {
|
||||
|
@ -67,9 +71,3 @@ export class Orientation {
|
|||
public static readonly TopLeft = 'top-left';
|
||||
public static readonly TopRight = 'top-right';
|
||||
}
|
||||
|
||||
// export enum ProgressIndicatorLocation {
|
||||
// InsideNextButton = 'inside-next-button',
|
||||
// TopOfTourBlock = 'top-of-tour-block',
|
||||
// None = 'none',
|
||||
// }
|
||||
|
|
|
@ -18,7 +18,6 @@ export class GuidedTourService {
|
|||
private _onFirstStep = true;
|
||||
private _onLastStep = true;
|
||||
private _onResizeMessage = false;
|
||||
public isStepUnique = false;
|
||||
|
||||
constructor(
|
||||
public errorHandler: ErrorHandler,
|
||||
|
@ -145,13 +144,6 @@ export class GuidedTourService {
|
|||
}
|
||||
}
|
||||
|
||||
public checkIfStepIsUnique(tour: GuidedTour): boolean {
|
||||
if(tour.steps.length === 1) {
|
||||
this.isStepUnique = true;
|
||||
}
|
||||
return this.isStepUnique;
|
||||
}
|
||||
|
||||
public activateOrb(): void {
|
||||
this._guidedTourOrbShowingSubject.next(false);
|
||||
this.dom.body.classList.add('tour-open');
|
||||
|
|
|
@ -150,12 +150,14 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
|
|||
{
|
||||
selector: '.dmp-tour',
|
||||
content: 'Step 1',
|
||||
orientation: Orientation.Right
|
||||
orientation: Orientation.Right,
|
||||
isStepUnique: false
|
||||
},
|
||||
{
|
||||
selector: '.dataset-tour',
|
||||
content: 'Step 2',
|
||||
orientation: Orientation.Right
|
||||
orientation: Orientation.Right,
|
||||
isStepUnique: false
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
|
@ -7,7 +7,9 @@
|
|||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="heading">1.1 {{'DATASET-EDITOR.FIELDS.TITLE' | translate}}*</div>
|
||||
<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span><a class="dmp-link dmp-only-tour-title" target="_blank" (click)="restartTourFromTitle()">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a><span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span>
|
||||
<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span>
|
||||
<a class="dmp-link dmp-tour-{{ formGroup.get('id').value + 1 }}" (click)="restartTour(formGroup.get('id').value + 1)">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a>
|
||||
<span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span>
|
||||
<div class="title-form">
|
||||
<mat-form-field appearance="outline">
|
||||
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" formControlName="label" required>
|
||||
|
@ -23,7 +25,9 @@
|
|||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="heading">1.2 {{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
|
||||
<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span><a class="dmp-link dmp-only-tour-desc" target="_blank" (click)="restartTourFromDesc()">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a><span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span>
|
||||
<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span>
|
||||
<a class="dmp-link dmp-tour-{{ formGroup.get('id').value + 2 }}" (click)="restartTour(formGroup.get('id').value + 2)">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a>
|
||||
<span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span>
|
||||
<div class="description-form">
|
||||
<mat-form-field appearance="outline">
|
||||
<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" formControlName="description"></textarea>
|
||||
|
|
|
@ -137,51 +137,38 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
|
|||
}
|
||||
}
|
||||
|
||||
public dashboardTourDmpTitle: GuidedTour = {
|
||||
public dashboardTourDmp: GuidedTour = {
|
||||
tourId: 'only-dmp-tour',
|
||||
useOrb: true,
|
||||
steps: [
|
||||
{
|
||||
title: this.dmpText,
|
||||
selector: '.dmp-only-tour-title',
|
||||
content: 'Step 1',
|
||||
orientation: Orientation.Bottom
|
||||
orientation: Orientation.Bottom,
|
||||
highlightPadding: 3,
|
||||
isStepUnique: true,
|
||||
customTopOffset: 8
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
public dashboardTourDmpDescription: GuidedTour = {
|
||||
tourId: 'only-dmp-tour',
|
||||
useOrb: true,
|
||||
steps: [
|
||||
{
|
||||
title: this.dmpText,
|
||||
selector: '.dmp-only-tour-desc',
|
||||
content: 'Step 1',
|
||||
orientation: Orientation.Bottom
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
setDashboardTourDmpText(): void {
|
||||
this.dmpText = this.language.instant('DMP-LISTING.TEXT-INFO') + '\n\n' +
|
||||
getDmpText(): string {
|
||||
return this.language.instant('DMP-LISTING.TEXT-INFO') + '\n\n' +
|
||||
this.language.instant('DMP-LISTING.TEXT-INFO-QUESTION') + ' ' +
|
||||
this.language.instant('DMP-LISTING.LINK-ZENODO') + ' ' +
|
||||
this.language.instant('DMP-LISTING.GET-IDEA');
|
||||
this.dashboardTourDmpTitle.steps[0].title = this.dmpText;
|
||||
this.dashboardTourDmpDescription.steps[0].title = this.dmpText;
|
||||
}
|
||||
|
||||
public restartTourFromTitle(): void {
|
||||
this.setDashboardTourDmpText();
|
||||
this.guidedTourService.checkIfStepIsUnique(this.dashboardTourDmpTitle);
|
||||
this.guidedTourService.startTour(this.dashboardTourDmpTitle);
|
||||
setDashboardTourDmp(label: string): void {
|
||||
this.dashboardTourDmp.steps[0].title = this.getDmpText();
|
||||
this.dashboardTourDmp.steps[0].selector = '.dmp-tour-' + label;
|
||||
}
|
||||
|
||||
public restartTourFromDesc(): void {
|
||||
this.setDashboardTourDmpText();
|
||||
this.guidedTourService.checkIfStepIsUnique(this.dashboardTourDmpDescription);
|
||||
this.guidedTourService.startTour(this.dashboardTourDmpDescription);
|
||||
public restartTour(label: string): void {
|
||||
this.setDashboardTourDmp(label);
|
||||
console.log(this.dashboardTourDmp.steps[0].selector);
|
||||
this.guidedTourService.startTour(this.dashboardTourDmp);
|
||||
|
||||
}
|
||||
|
||||
registerFormListeners() {
|
||||
|
|
|
@ -188,12 +188,14 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
|
|||
{
|
||||
selector: '.dmp-tour',
|
||||
content: 'Step 1',
|
||||
orientation: Orientation.Right
|
||||
orientation: Orientation.Right,
|
||||
isStepUnique: false
|
||||
},
|
||||
{
|
||||
selector: '.dataset-tour',
|
||||
content: 'Step 2',
|
||||
orientation: Orientation.Right
|
||||
orientation: Orientation.Right,
|
||||
isStepUnique: false
|
||||
}
|
||||
]
|
||||
};
|
||||
|
@ -490,7 +492,6 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
|
|||
public restartTour(): void {
|
||||
this.setDashboardTourDmpText();
|
||||
this.setDashboardTourDatasetText();
|
||||
this.guidedTourService.checkIfStepIsUnique(this.dashboardTour);
|
||||
this.guidedTourService.startTour(this.dashboardTour);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,6 +5,9 @@
|
|||
// Material-Bootstrap configuration
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
|
||||
// Guided Tour style
|
||||
@import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss';
|
||||
|
||||
// Custom Theme
|
||||
// @import "./assets/scss/blue-theme.scss";
|
||||
|
||||
|
|
Loading…
Reference in New Issue