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/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",

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

97
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 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> -->
<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">
{{ 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 class="tour-block d-flex">
<div class="col-11">
<h3 class="tour-title" *ngIf="currentTourStep.title && currentTourStep.selector">
{{currentTourStep.title}}
</h3>
<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>
</div>
<div class="argos-present-img"></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">&nbsp;</ng-container>{{ currentStepNumber }}/{{ totalSteps }}
</ng-template> -->
</div>

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

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

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

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

@ -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',
// }

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 _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');

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',
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
}
]
};

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="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>

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',
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() {

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',
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);
}
}

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

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