From 84047fc035ade3d334208f2cae8c44b792999708 Mon Sep 17 00:00:00 2001 From: gpapavgeri Date: Tue, 4 Aug 2020 18:27:13 +0300 Subject: [PATCH] Guided Tour Update --- dmp-frontend/angular.json | 3 +- .../guided-tour/guided-tour-base-theme.scss | 132 ------------------ .../guided-tour/guided-tour.component.html | 97 +++---------- .../guided-tour/guided-tour.component.scss | 49 +++---- .../guided-tour/guided-tour.component.ts | 25 ++-- .../guided-tour/guided-tour.constants.ts | 10 +- .../guided-tour/guided-tour.service.ts | 8 -- .../listing/dataset-listing.component.ts | 6 +- .../dataset-editor-details.component.html | 8 +- .../dataset-editor-details.component.ts | 43 ++---- .../ui/dmp/listing/dmp-listing.component.ts | 7 +- dmp-frontend/src/styles.scss | 3 + 12 files changed, 88 insertions(+), 303 deletions(-) delete mode 100644 dmp-frontend/src/app/library/guided-tour/guided-tour-base-theme.scss diff --git a/dmp-frontend/angular.json b/dmp-frontend/angular.json index dbc2640b5..e3a5fc57b 100644 --- a/dmp-frontend/angular.json +++ b/dmp-frontend/angular.json @@ -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", diff --git a/dmp-frontend/src/app/library/guided-tour/guided-tour-base-theme.scss b/dmp-frontend/src/app/library/guided-tour/guided-tour-base-theme.scss deleted file mode 100644 index bed340850..000000000 --- a/dmp-frontend/src/app/library/guided-tour/guided-tour-base-theme.scss +++ /dev/null @@ -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; - } - } - } - } - -} 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 f3892f724..4438a2a72 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 @@ -1,89 +1,34 @@ -
-
-
-
+
-
- -

- {{currentTourStep.title}} -

-

- {{ currentTourStep.title }} -

- -
- - - - - - - +
+
+

+ {{currentTourStep.title}} +

+
+ + +
-
+
-
- \ No newline at end of file +
\ No newline at end of file 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 be8aafb0f..c744f3283 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,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; } } 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 da1ca8c8b..292306604 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,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 = 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; } 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 d0007739f..79e3f8556 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 @@ -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', -// } 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 5cfd7e6c8..6ff9fab23 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,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'); diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts index f0ac8837e..0c34377c0 100644 --- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts +++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts @@ -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 } ] }; 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 dd8040de5..5aca66898 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,9 @@
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 +25,9 @@
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 16218cf25..63f705711 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 @@ -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() { 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 d3d09086c..3730aa365 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 @@ -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); } } diff --git a/dmp-frontend/src/styles.scss b/dmp-frontend/src/styles.scss index 5f7c6d762..32cca66b9 100644 --- a/dmp-frontend/src/styles.scss +++ b/dmp-frontend/src/styles.scss @@ -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";