MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Guided Tour Update

This commit is contained in:
gpapavgeri 2020-08-04 18:27:13 +03:00
parent de10a986db
commit 84047fc035
12 changed files with 88 additions and 303 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dmp-frontend/angular.json
View File

@ -27,8 +27,7 @@
"src/styles.scss", "src/styles.scss",
"src/assets/scss/material-dashboard.scss", "src/assets/scss/material-dashboard.scss",
"src/assets/css/demo.css", "src/assets/css/demo.css",
"node_modules/cookieconsent/build/cookieconsent.min.css", "node_modules/cookieconsent/build/cookieconsent.min.css"
"src/app/library/guided-tour/guided-tour-base-theme.scss"
], ],
"scripts": [ "scripts": [
"node_modules/cookieconsent/build/cookieconsent.min.js", "node_modules/cookieconsent/build/cookieconsent.min.js",

132
dmp-frontend/src/app/library/guided-tour/guided-tour-base-theme.scss
View File

@ -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;
}
}
}
}
}

75
dmp-frontend/src/app/library/guided-tour/guided-tour.component.html
View File

@ -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 *ngIf="currentTourStep && !isOrbShowing">
<div class="guided-tour-user-input-mask" (click)="backdropClick($event)"></div> <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" <div class="guided-tour-spotlight-overlay" [style.top.px]="overlayTop" [style.left.px]="overlayLeft"
[style.height.px]="overlayHeight" [style.width.px]="overlayWidth" > [style.height.px]="currentTourStep.isStepUnique ? overlayWidth : 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> </div>
</div> </div>
<div *ngIf="currentTourStep && !isOrbShowing"> <div *ngIf="currentTourStep && !isOrbShowing">
<div #tourStep *ngIf="currentTourStep" class="tour-step tour-{{ currentTourStep.orientation }}" [ngClass]="{ <div #tourStep *ngIf="currentTourStep" class="tour-step tour-{{ currentTourStep.orientation }}" [ngClass]="{
'page-tour-step': !currentTourStep.selector, 'tour-step-unique' : isStepUnique 'page-tour-step': !currentTourStep.selector }"
}" [style.top.px]="(currentTourStep.selector && selectedElementRect ? topPosition : null)" [style.top.px]="(currentTourStep.selector && selectedElementRect ? topPosition : null)"
[style.left.px]="(currentTourStep.selector && selectedElementRect ? leftPosition : null)" [style.left.px]="(currentTourStep.selector && selectedElementRect ? leftPosition : null)"
[style.width.px]="(currentTourStep.selector && selectedElementRect ? calculatedTourStepWidth : null)" [style.width.px]="(currentTourStep.selector && selectedElementRect ? calculatedTourStepWidth : null)"
[style.transform]="(currentTourStep.selector && selectedElementRect ? transform : null)"> [style.transform]="(currentTourStep.selector && selectedElementRect ? transform : null)">
<div *ngIf="currentTourStep.selector" class="tour-arrow"></div> <div *ngIf="currentTourStep.selector" class="tour-arrow"></div>
<div class="tour-block"> <div class="tour-block d-flex">
<!-- <div *ngIf=" <div class="col-11">
progressIndicatorLocation === progressIndicatorLocations.TopOfTourBlock
&& !guidedTourService.onResizeMessage" class="tour-progress-indicator">
<ng-container *ngTemplateOutlet="progress"></ng-container>
</div> -->
<h3 class="tour-title" *ngIf="currentTourStep.title && currentTourStep.selector"> <h3 class="tour-title" *ngIf="currentTourStep.title && currentTourStep.selector">
{{currentTourStep.title}} {{currentTourStep.title}}
</h3> </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"> <div class="tour-buttons">
<button *ngIf="!guidedTourService.onResizeMessage" class="next-button" <button *ngIf="!guidedTourService.onResizeMessage" class="next-button"
(click)="guidedTourService.nextStep()"> (click)="guidedTourService.nextStep()">
{{ nextText }} {{ nextText }}
</button> </button>
<button *ngIf="!guidedTourService.onResizeMessage && !isStepUnique" (click)="guidedTourService.skipTour()" <button *ngIf="!guidedTourService.onResizeMessage && !currentTourStep.isStepUnique"
class="skip-button link-button"> (click)="guidedTourService.skipTour()" class="skip-button link-button">
{{ skipText }} {{ skipText }}
</button> </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>
<div class="argos-present-img"></div> </div>
<div class="argos-present-img col-2"></div>
</div> </div>
</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">&nbsp;</ng-container>{{ currentStepNumber }}/{{ totalSteps }}
</ng-template> -->

49
dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss
View File

@ -17,10 +17,6 @@ ngx-guided-tour {
border-radius: 44px; border-radius: 44px;
} }
.spotlight-overlay-step-unique {
padding: 20px;
}
.tour-orb { .tour-orb {
position: fixed; position: fixed;
width: 20px; width: 20px;
@ -57,10 +53,6 @@ ngx-guided-tour {
} }
} }
.tour-step-unique {
margin-top: 15px;
}
.tour-step { .tour-step {
position: fixed; position: fixed;
&.page-tour-step { &.page-tour-step {
@ -93,9 +85,13 @@ ngx-guided-tour {
} }
&.tour-bottom , &.tour-top { &.tour-bottom , &.tour-top {
margin-top: 20px;
margin-left: 10px;
.tour-arrow::before { .tour-arrow::before {
transform: translateX(-50%); // transform: translateX(-50%);
left: 50%; // left: 50%;
transform: scale(2);
left: 494px;
} }
} }
@ -125,39 +121,35 @@ ngx-guided-tour {
} }
&.tour-right { &.tour-right {
margin-left: 10px;
.tour-arrow::before { .tour-arrow::before {
transform: scale(1.5);
position: absolute; position: absolute;
left: 0; left: 0;
top: 5px; top: 5px;
} }
.tour-block { .tour-block {
margin-top: -15px;
margin-left: 10px; margin-left: 10px;
} }
} }
.tour-block { .tour-block {
padding: 15px 25px; padding: 15px 25px;
height: 348px; max-height: 348px;
border-radius: 5px; border-radius: 5px;
} }
// .tour-progress-indicator {
// padding-bottom: 15px;
// }
.tour-title { .tour-title {
font-weight: lighter !important; font-weight: lighter !important;
font-size: 16px !important; font-size: 16px !important;
padding-left: 65px; padding: 28px 45px 0px 65px;
padding-top: 28px; overflow: auto;
padding-right: 156px;
// padding-bottom: 20px;
text-align: left; text-align: left;
color: #212121; color: #212121;
line-height: 26px; line-height: 26px;
white-space:pre-line; white-space:pre-line;
height: 182px; height: 210px;
width: 983px;
} }
h3.tour-title { h3.tour-title {
@ -167,15 +159,9 @@ ngx-guided-tour {
font-size: 30px; font-size: 30px;
} }
// .tour-content {
// min-height: 80px;
// padding-bottom: 30px;
// font-size: 15px;
// }
.tour-buttons { .tour-buttons {
overflow: hidden; // clearfix overflow: hidden; // clearfix
padding: 40px 156px 25px 65px; padding: 10px 45px 30px 65px;
button.link-button { button.link-button {
padding-left: 0; padding-left: 0;
@ -204,7 +190,6 @@ ngx-guided-tour {
border: 1px solid #129D99; border: 1px solid #129D99;
background: #FFFFFF 0% 0% no-repeat padding-box; background: #FFFFFF 0% 0% no-repeat padding-box;
color: #129D99; color: #129D99;
// text-align: center;
} }
.back-button { .back-button {
@ -233,11 +218,11 @@ ngx-guided-tour {
.argos-present-img { .argos-present-img {
background: url("../../../assets/splash/assets/img/argos\ present.png") no-repeat; background: url("../../../assets/splash/assets/img/argos\ present.png") no-repeat;
width: 176px; min-width: 176px;
height: 220px; height: 220px;
position: relative; position: relative;
top: -205px; top: 110px;
left: 820px; left: -65px;
border-top: none; border-top: none;
} }
} }

25
dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts
View File

@ -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 { fromEvent, Subscription } from 'rxjs';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { Orientation, TourStep } from './guided-tour.constants'; import { Orientation, TourStep } from './guided-tour.constants';
@ -14,21 +14,15 @@ import { WindowRefService } from "./windowref.service";
export class GuidedTourComponent implements AfterViewInit, OnDestroy { export class GuidedTourComponent implements AfterViewInit, OnDestroy {
@Input() public topOfPageAdjustment?= 0; @Input() public topOfPageAdjustment?= 0;
@Input() public tourStepWidth?= 1043; @Input() public tourStepWidth?= 1043;
@Input() public minimalTourStepWidth?= 900; @Input() public minimalTourStepWidth?= 500;
@Input() public skipText?= 'Leave Tour'; @Input() public skipText?= 'Leave Tour';
@Input() public nextText?= 'Got it!'; @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; @Input() public progressIndicator?: TemplateRef<any> = undefined;
@ViewChild('tourStep', { static: false }) public tourStep: ElementRef; @ViewChild('tourStep', { static: false }) public tourStep: ElementRef;
public highlightPadding = 4; public highlightPadding = 4;
public currentTourStep: TourStep = null; public currentTourStep: TourStep = null;
public selectedElementRect: DOMRect = null; public selectedElementRect: DOMRect = null;
public isOrbShowing = false; public isOrbShowing = false;
// public progressIndicatorLocations = ProgressIndicatorLocation;
public isStepUnique = false;
private resizeSubscription: Subscription; private resizeSubscription: Subscription;
private scrollSubscription: Subscription; private scrollSubscription: Subscription;
@ -36,6 +30,7 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
constructor( constructor(
public guidedTourService: GuidedTourService, public guidedTourService: GuidedTourService,
private windowRef: WindowRefService, private windowRef: WindowRefService,
private changeDetectorRef: ChangeDetectorRef,
@Inject(DOCUMENT) private dom: any @Inject(DOCUMENT) private dom: any
) { } ) { }
@ -59,13 +54,11 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
} }
public get calculatedTourStepWidth() { public get calculatedTourStepWidth() {
return this.tourStepWidth; return this.tourStepWidth - this.widthAdjustmentForScreenBound;
// return this.tourStepWidth - this.widthAdjustmentForScreenBound;
} }
public ngAfterViewInit(): void { public ngAfterViewInit(): void {
this.guidedTourService.guidedTourCurrentStepStream.subscribe((step: TourStep) => { this.guidedTourService.guidedTourCurrentStepStream.subscribe((step: TourStep) => {
this.isStepUnique = this.guidedTourService.isStepUnique;
this.currentTourStep = step; this.currentTourStep = step;
if (step && step.selector) { if (step && step.selector) {
const selectedElement = this.dom.querySelector(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 { public ngOnDestroy(): void {
this.resizeSubscription.unsubscribe(); this.resizeSubscription.unsubscribe();
this.scrollSubscription.unsubscribe(); this.scrollSubscription.unsubscribe();
@ -340,7 +337,11 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
public get overlayTop(): number { public get overlayTop(): number {
if (this.selectedElementRect) { 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; return 0;
} }

10
dmp-frontend/src/app/library/guided-tour/guided-tour.constants.ts
View File

@ -20,6 +20,10 @@ export interface TourStep {
useHighlightPadding?: boolean; useHighlightPadding?: boolean;
/** Adds padding around tour highlighting in pixels, this overwrites the default for this step. Is not dependent on useHighlightPadding being true */ /** Adds padding around tour highlighting in pixels, this overwrites the default for this step. Is not dependent on useHighlightPadding being true */
highlightPadding?: number; 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 { export interface GuidedTour {
@ -67,9 +71,3 @@ export class Orientation {
public static readonly TopLeft = 'top-left'; public static readonly TopLeft = 'top-left';
public static readonly TopRight = 'top-right'; public static readonly TopRight = 'top-right';
} }
// export enum ProgressIndicatorLocation {
// InsideNextButton = 'inside-next-button',
// TopOfTourBlock = 'top-of-tour-block',
// None = 'none',
// }

8
dmp-frontend/src/app/library/guided-tour/guided-tour.service.ts
View File

@ -18,7 +18,6 @@ export class GuidedTourService {
private _onFirstStep = true; private _onFirstStep = true;
private _onLastStep = true; private _onLastStep = true;
private _onResizeMessage = false; private _onResizeMessage = false;
public isStepUnique = false;
constructor( constructor(
public errorHandler: ErrorHandler, 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 { public activateOrb(): void {
this._guidedTourOrbShowingSubject.next(false); this._guidedTourOrbShowingSubject.next(false);
this.dom.body.classList.add('tour-open'); this.dom.body.classList.add('tour-open');

6
dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts
View File

@ -150,12 +150,14 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
{ {
selector: '.dmp-tour', selector: '.dmp-tour',
content: 'Step 1', content: 'Step 1',
orientation: Orientation.Right orientation: Orientation.Right,
isStepUnique: false
}, },
{ {
selector: '.dataset-tour', selector: '.dataset-tour',
content: 'Step 2', content: 'Step 2',
orientation: Orientation.Right orientation: Orientation.Right,
isStepUnique: false
} }
] ]
}; };

8
dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.html
View File

@ -7,7 +7,9 @@
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="heading">1.1 {{'DATASET-EDITOR.FIELDS.TITLE' | translate}}*</div> <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"> <div class="title-form">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" formControlName="label" required> <input matInput placeholder="{{'DATASET-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" formControlName="label" required>
@ -23,7 +25,9 @@
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="heading">1.2 {{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}</div> <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"> <div class="description-form">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" formControlName="description"></textarea> <textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" formControlName="description"></textarea>

43
dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.ts
View File

@ -137,51 +137,38 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
} }
} }
public dashboardTourDmpTitle: GuidedTour = { public dashboardTourDmp: GuidedTour = {
tourId: 'only-dmp-tour', tourId: 'only-dmp-tour',
useOrb: true, useOrb: true,
steps: [ steps: [
{ {
title: this.dmpText, title: this.dmpText,
selector: '.dmp-only-tour-title',
content: 'Step 1', content: 'Step 1',
orientation: Orientation.Bottom orientation: Orientation.Bottom,
highlightPadding: 3,
isStepUnique: true,
customTopOffset: 8
} }
] ]
}; };
public dashboardTourDmpDescription: GuidedTour = { getDmpText(): string {
tourId: 'only-dmp-tour', return this.language.instant('DMP-LISTING.TEXT-INFO') + '\n\n' +
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' +
this.language.instant('DMP-LISTING.TEXT-INFO-QUESTION') + ' ' + this.language.instant('DMP-LISTING.TEXT-INFO-QUESTION') + ' ' +
this.language.instant('DMP-LISTING.LINK-ZENODO') + ' ' + this.language.instant('DMP-LISTING.LINK-ZENODO') + ' ' +
this.language.instant('DMP-LISTING.GET-IDEA'); this.language.instant('DMP-LISTING.GET-IDEA');
this.dashboardTourDmpTitle.steps[0].title = this.dmpText;
this.dashboardTourDmpDescription.steps[0].title = this.dmpText;
} }
public restartTourFromTitle(): void { setDashboardTourDmp(label: string): void {
this.setDashboardTourDmpText(); this.dashboardTourDmp.steps[0].title = this.getDmpText();
this.guidedTourService.checkIfStepIsUnique(this.dashboardTourDmpTitle); this.dashboardTourDmp.steps[0].selector = '.dmp-tour-' + label;
this.guidedTourService.startTour(this.dashboardTourDmpTitle);
} }
public restartTourFromDesc(): void { public restartTour(label: string): void {
this.setDashboardTourDmpText(); this.setDashboardTourDmp(label);
this.guidedTourService.checkIfStepIsUnique(this.dashboardTourDmpDescription); console.log(this.dashboardTourDmp.steps[0].selector);
this.guidedTourService.startTour(this.dashboardTourDmpDescription); this.guidedTourService.startTour(this.dashboardTourDmp);
} }
registerFormListeners() { registerFormListeners() {

7
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts
View File

@ -188,12 +188,14 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
{ {
selector: '.dmp-tour', selector: '.dmp-tour',
content: 'Step 1', content: 'Step 1',
orientation: Orientation.Right orientation: Orientation.Right,
isStepUnique: false
}, },
{ {
selector: '.dataset-tour', selector: '.dataset-tour',
content: 'Step 2', 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 { public restartTour(): void {
this.setDashboardTourDmpText(); this.setDashboardTourDmpText();
this.setDashboardTourDatasetText(); this.setDashboardTourDatasetText();
this.guidedTourService.checkIfStepIsUnique(this.dashboardTour);
this.guidedTourService.startTour(this.dashboardTour); this.guidedTourService.startTour(this.dashboardTour);
} }
} }

3
dmp-frontend/src/styles.scss
View File

@ -5,6 +5,9 @@
// Material-Bootstrap configuration // Material-Bootstrap configuration
@import "~bootstrap/scss/bootstrap"; @import "~bootstrap/scss/bootstrap";
// Guided Tour style
@import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss';
// Custom Theme // Custom Theme
// @import "./assets/scss/blue-theme.scss"; // @import "./assets/scss/blue-theme.scss";