diff --git a/dmp-frontend/src/app/library/guided-tour/guided-tour.component.html b/dmp-frontend/src/app/library/guided-tour/guided-tour.component.html index e0c5e0174..f3892f724 100644 --- a/dmp-frontend/src/app/library/guided-tour/guided-tour.component.html +++ b/dmp-frontend/src/app/library/guided-tour/guided-tour.component.html @@ -8,13 +8,16 @@ -->
-
+
+
+
{{ nextText }} - diff --git a/dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss b/dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss index fa2c91615..be8aafb0f 100644 --- a/dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss +++ b/dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss @@ -17,6 +17,10 @@ ngx-guided-tour { border-radius: 44px; } + .spotlight-overlay-step-unique { + padding: 20px; + } + .tour-orb { position: fixed; width: 20px; @@ -53,6 +57,10 @@ ngx-guided-tour { } } + .tour-step-unique { + margin-top: 15px; + } + .tour-step { position: fixed; &.page-tour-step { @@ -133,9 +141,9 @@ ngx-guided-tour { border-radius: 5px; } - .tour-progress-indicator { - padding-bottom: 15px; - } + // .tour-progress-indicator { + // padding-bottom: 15px; + // } .tour-title { font-weight: lighter !important; @@ -149,6 +157,7 @@ ngx-guided-tour { line-height: 26px; white-space:pre-line; height: 182px; + width: 983px; } h3.tour-title { @@ -158,11 +167,11 @@ ngx-guided-tour { font-size: 30px; } - .tour-content { - min-height: 80px; - padding-bottom: 30px; - font-size: 15px; - } + // .tour-content { + // min-height: 80px; + // padding-bottom: 30px; + // font-size: 15px; + // } .tour-buttons { overflow: hidden; // clearfix diff --git a/dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts b/dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts index 2fb3ed1bc..da1ca8c8b 100644 --- a/dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts +++ b/dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts @@ -1,7 +1,7 @@ import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild, ViewEncapsulation, TemplateRef, Inject } from '@angular/core'; import { fromEvent, Subscription } from 'rxjs'; import { DOCUMENT } from '@angular/common'; -import { Orientation, TourStep, ProgressIndicatorLocation } from './guided-tour.constants'; +import { Orientation, TourStep } from './guided-tour.constants'; import { GuidedTourService } from './guided-tour.service'; import { WindowRefService } from "./windowref.service"; @@ -12,22 +12,23 @@ import { WindowRefService } from "./windowref.service"; encapsulation: ViewEncapsulation.None }) export class GuidedTourComponent implements AfterViewInit, OnDestroy { - @Input() public topOfPageAdjustment ?= 0; - @Input() public tourStepWidth ?= 1043; - @Input() public minimalTourStepWidth ?= 900; - @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 topOfPageAdjustment?= 0; + @Input() public tourStepWidth?= 1043; + @Input() public minimalTourStepWidth?= 900; + @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 = 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 progressIndicatorLocations = ProgressIndicatorLocation; + public isStepUnique = false; private resizeSubscription: Subscription; private scrollSubscription: Subscription; @@ -58,11 +59,13 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy { } public get calculatedTourStepWidth() { - return this.tourStepWidth - this.widthAdjustmentForScreenBound; + return this.tourStepWidth; + // 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); @@ -203,8 +206,8 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy { private isBottom(): boolean { return this.currentTourStep.orientation && (this.currentTourStep.orientation === Orientation.Bottom - || this.currentTourStep.orientation === Orientation.BottomLeft - || this.currentTourStep.orientation === Orientation.BottomRight); + || this.currentTourStep.orientation === Orientation.BottomLeft + || this.currentTourStep.orientation === Orientation.BottomRight); } public get topPosition(): number { diff --git a/dmp-frontend/src/app/library/guided-tour/guided-tour.constants.ts b/dmp-frontend/src/app/library/guided-tour/guided-tour.constants.ts index 6053c2583..d0007739f 100644 --- a/dmp-frontend/src/app/library/guided-tour/guided-tour.constants.ts +++ b/dmp-frontend/src/app/library/guided-tour/guided-tour.constants.ts @@ -68,8 +68,8 @@ export class Orientation { public static readonly TopRight = 'top-right'; } -export enum ProgressIndicatorLocation { - InsideNextButton = 'inside-next-button', - TopOfTourBlock = 'top-of-tour-block', - None = 'none', -} +// export enum ProgressIndicatorLocation { +// InsideNextButton = 'inside-next-button', +// TopOfTourBlock = 'top-of-tour-block', +// None = 'none', +// } diff --git a/dmp-frontend/src/app/library/guided-tour/guided-tour.service.ts b/dmp-frontend/src/app/library/guided-tour/guided-tour.service.ts index 2823f24d0..5cfd7e6c8 100644 --- a/dmp-frontend/src/app/library/guided-tour/guided-tour.service.ts +++ b/dmp-frontend/src/app/library/guided-tour/guided-tour.service.ts @@ -18,6 +18,7 @@ export class GuidedTourService { private _onFirstStep = true; private _onLastStep = true; private _onResizeMessage = false; + public isStepUnique = false; constructor( public errorHandler: ErrorHandler, @@ -77,33 +78,33 @@ export class GuidedTourService { } } - public backStep(): void { - if (this._currentTour.steps[this._currentTourStepIndex].closeAction) { - this._currentTour.steps[this._currentTourStepIndex].closeAction(); - } - if (this._currentTour.steps[this._currentTourStepIndex - 1]) { - this._currentTourStepIndex--; - this._setFirstAndLast(); - if (this._currentTour.steps[this._currentTourStepIndex].action) { - this._currentTour.steps[this._currentTourStepIndex].action(); - setTimeout(() => { - if (this._checkSelectorValidity()) { - this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); - } else { - this.backStep(); - } - }); - } else { - if (this._checkSelectorValidity()) { - this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); - } else { - this.backStep(); - } - } - } else { - this.resetTour(); - } - } + // public backStep(): void { + // if (this._currentTour.steps[this._currentTourStepIndex].closeAction) { + // this._currentTour.steps[this._currentTourStepIndex].closeAction(); + // } + // if (this._currentTour.steps[this._currentTourStepIndex - 1]) { + // this._currentTourStepIndex--; + // this._setFirstAndLast(); + // if (this._currentTour.steps[this._currentTourStepIndex].action) { + // this._currentTour.steps[this._currentTourStepIndex].action(); + // setTimeout(() => { + // if (this._checkSelectorValidity()) { + // this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); + // } else { + // this.backStep(); + // } + // }); + // } else { + // if (this._checkSelectorValidity()) { + // this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); + // } else { + // this.backStep(); + // } + // } + // } else { + // this.resetTour(); + // } + // } public skipTour(): void { if (this._currentTour.skipCallback) { @@ -144,6 +145,13 @@ 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'); diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html index b468f4be3..afae52531 100644 --- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html +++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html @@ -35,18 +35,20 @@ - -
- {{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }} +
+ +
+ {{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }} +
+ + + + search + + {{formGroup.get('like').getError('backendError').message}} + +
- - - - search - - {{formGroup.get('like').getError('backendError').message}} - -
diff --git a/dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.html b/dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.html index 5179f7010..dd8040de5 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.html +++ b/dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.html @@ -7,7 +7,7 @@
1.1 {{'DATASET-EDITOR.FIELDS.TITLE' | translate}}*
- {{'DATASET-EDITOR.HINT.TITLE' | translate}}{{'DATASET-EDITOR.FIELDS.DMP' | translate}}{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}} + {{'DATASET-EDITOR.HINT.TITLE' | translate}}{{'DATASET-EDITOR.FIELDS.DMP' | translate}}{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}
@@ -23,7 +23,7 @@
1.2 {{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}
- {{'DATASET-EDITOR.HINT.TITLE' | translate}}{{'DATASET-EDITOR.FIELDS.DMP' | translate}}{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}} + {{'DATASET-EDITOR.HINT.TITLE' | translate}}{{'DATASET-EDITOR.FIELDS.DMP' | translate}}{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}
diff --git a/dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.ts b/dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.ts index 48dd01d5b..16218cf25 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.ts +++ b/dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.ts @@ -27,6 +27,8 @@ import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset- import { DmpListingModel } from '@app/core/model/dmp/dmp-listing'; import { DatasetWizardEditorModel, ExternalTagEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model'; import { ENTER, COMMA } from '@angular/cdk/keycodes'; +import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants'; +import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service'; @Component({ @@ -57,6 +59,7 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn // isLinear = false; lock: LockModel; lockStatus: Boolean; + dmpText: string; @Input() formGroup: FormGroup; @Input() dmpId: string; @@ -79,7 +82,8 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn private formService: FormService, private lockService: LockService, private location: Location, - private authService: AuthService + private authService: AuthService, + private guidedTourService: GuidedTourService ) { super(); } @@ -133,6 +137,53 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn } } + public dashboardTourDmpTitle: GuidedTour = { + tourId: 'only-dmp-tour', + useOrb: true, + steps: [ + { + title: this.dmpText, + selector: '.dmp-only-tour-title', + content: 'Step 1', + orientation: Orientation.Bottom + } + ] + }; + + 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' + + 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); + } + + public restartTourFromDesc(): void { + this.setDashboardTourDmpText(); + this.guidedTourService.checkIfStepIsUnique(this.dashboardTourDmpDescription); + this.guidedTourService.startTour(this.dashboardTourDmpDescription); + } + registerFormListeners() { this.formGroup.get('dmp').valueChanges .pipe(takeUntil(this._destroyed)) diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html index 440e59115..93abc1d2e 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html +++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html @@ -30,18 +30,24 @@ - -
- {{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }} +
+ +
+ {{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }} +
+ + + + search + + + {{formGroup.get('like').getError('backendError').message}} + +
- - - - search - - {{formGroup.get('like').getError('backendError').message}} - -
diff --git a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts index 6f98c42d4..a6c265e08 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts +++ b/dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts @@ -201,6 +201,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread public isAuthenticated(): boolean { return !(!this.authService.current()); } + ngAfterContentChecked(): void { this.scrollbar = this.hasScrollbar(); } @@ -483,6 +484,7 @@ 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); } }