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

Guided tour comments added

This commit is contained in:
gpapavgeri 2020-08-05 11:23:09 +03:00
parent 8e473d1a9f
commit 370360872a
5 changed files with 84 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,17 @@
<!-- custom add: isStepUnique -->
<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 class="guided-tour-spotlight-overlay" [style.top.px]="overlayTop" [style.left.px]="overlayLeft" <div class="guided-tour-spotlight-overlay"
[style.height.px]="currentTourStep.isStepUnique ? overlayWidth : overlayHeight" [style.width.px]="overlayWidth"> [style.top.px]="overlayTop"
[style.left.px]="overlayLeft"
[style.height.px]="currentTourStep.isStepUnique ? overlayWidth : 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"
'page-tour-step': !currentTourStep.selector }" class="tour-step tour-{{ currentTourStep.orientation }}"
[ngClass]="{ '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)"
@ -17,6 +22,9 @@
<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-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()">

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

@ -14,7 +14,7 @@ ngx-guided-tour {
.guided-tour-spotlight-overlay { .guided-tour-spotlight-overlay {
position: fixed; position: fixed;
box-shadow: 0 0 0 9999px rgba(0,0,0,.7), 0 0 1.5rem rgba(0,0,0,.5); box-shadow: 0 0 0 9999px rgba(0,0,0,.7), 0 0 1.5rem rgba(0,0,0,.5);
border-radius: 44px; border-radius: 44px; /*custom add*/
} }
.tour-orb { .tour-orb {
@ -56,7 +56,8 @@ ngx-guided-tour {
.tour-step { .tour-step {
position: fixed; position: fixed;
&.page-tour-step { &.page-tour-step {
max-width: 1043px; // max-width: 400px;
max-width: 1043px; /*custom add*/
width: 50%; width: 50%;
left: 50%; left: 50%;
top: 50%; top: 50%;
@ -85,14 +86,16 @@ 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%;
/*custom add*/
transform: scale(2); transform: scale(2);
left: 494px; left: 494px;
} }
/*custom add*/
margin-top: 20px;
margin-left: 10px;
} }
&.tour-bottom-right, &.tour-top-right { &.tour-bottom-right, &.tour-top-right {
@ -121,29 +124,36 @@ ngx-guided-tour {
} }
&.tour-right { &.tour-right {
margin-left: 10px; margin-left: 10px; /*custom add*/
.tour-arrow::before { .tour-arrow::before {
transform: scale(1.5); transform: scale(1.5); /*custom add*/
position: absolute; position: absolute;
left: 0; left: 0;
top: 5px; top: 5px;
} }
.tour-block { .tour-block {
margin-top: -15px; margin-top: -15px; /*custom add*/
margin-left: 10px; margin-left: 10px;
} }
} }
.tour-block { .tour-block {
padding: 15px 25px; // padding: 15px 25px;
/*custom add*/
padding: 15px 25px 15px 0px;
max-height: 348px; max-height: 348px;
border-radius: 5px; border-radius: 5px;
} }
.tour-title { .tour-title {
// font-weight: bold !important;
// padding-bottom: 20px;
/*custom add*/
font-weight: lighter !important; font-weight: lighter !important;
font-size: 16px !important; font-size: 16px !important;
padding: 28px 45px 0px 65px; padding: 28px 74px 0px 65px;
overflow: auto; overflow: auto;
text-align: left; text-align: left;
color: #212121; color: #212121;
@ -161,7 +171,7 @@ ngx-guided-tour {
.tour-buttons { .tour-buttons {
overflow: hidden; // clearfix overflow: hidden; // clearfix
padding: 10px 45px 30px 65px; padding: 10px 70px 30px 65px; /*custom add*/
button.link-button { button.link-button {
padding-left: 0; padding-left: 0;
@ -182,8 +192,11 @@ ngx-guided-tour {
} }
button.skip-button.link-button { button.skip-button.link-button {
padding: 0; // padding-left: 0;
border-left: 0; border-left: 0;
/*custom add*/
padding: 0;
float: right; float: right;
width: 133px; width: 133px;
height: 40px; height: 40px;
@ -192,20 +205,23 @@ ngx-guided-tour {
color: #129D99; color: #129D99;
} }
.back-button {
float: right;
}
.next-button { .next-button {
cursor: pointer; cursor: pointer;
float: left; // border-radius: 1px;
// float: right;
border: none; border: none;
outline: none; outline: none;
// padding-left: 10px;
// padding-right: 10px;
/*custom add*/
float: left;
padding: 10px 0px;; padding: 10px 0px;;
width: 101px; width: 101px;
background: #129D99 0% 0% no-repeat padding-box; background: #129D99 0% 0% no-repeat padding-box;
} }
/*custom add*/
button.skip-button.link-button, .next-button { button.skip-button.link-button, .next-button {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
@ -216,13 +232,14 @@ ngx-guided-tour {
} }
} }
/*custom add*/
.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;
min-width: 176px; min-width: 176px;
height: 220px; height: 220px;
position: relative; position: relative;
top: 110px; top: 110px;
left: -65px; left: -85px;
border-top: none; border-top: none;
} }
} }

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

@ -17,7 +17,6 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
@Input() public minimalTourStepWidth?= 500; @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 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;
@ -30,7 +29,7 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
constructor( constructor(
public guidedTourService: GuidedTourService, public guidedTourService: GuidedTourService,
private windowRef: WindowRefService, private windowRef: WindowRefService,
private changeDetectorRef: ChangeDetectorRef, private changeDetectorRef: ChangeDetectorRef, /*custom add*/
@Inject(DOCUMENT) private dom: any @Inject(DOCUMENT) private dom: any
) { } ) { }
@ -63,7 +62,7 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
if (step && step.selector) { if (step && step.selector) {
const selectedElement = this.dom.querySelector(step.selector); const selectedElement = this.dom.querySelector(step.selector);
if (selectedElement) { if (selectedElement) {
this.handleOrb(); this.handleOrb(); /*custom add*/
this.scrollToAndSetElement(); this.scrollToAndSetElement();
} else { } else {
this.selectedElementRect = null; this.selectedElementRect = null;
@ -86,6 +85,7 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
}); });
} }
/*custom add*/
ngAfterContentChecked() { ngAfterContentChecked() {
this.changeDetectorRef.detectChanges(); this.changeDetectorRef.detectChanges();
} }
@ -337,6 +337,9 @@ 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();
/*custom add*/
let customTopOffset = 0; let customTopOffset = 0;
if (this.currentTourStep.customTopOffset) { if (this.currentTourStep.customTopOffset) {
customTopOffset = this.currentTourStep.customTopOffset; customTopOffset = this.currentTourStep.customTopOffset;

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

@ -20,9 +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 */
/** CUSTOM ADD: True if the tour has no other step */
isStepUnique?: boolean; isStepUnique?: boolean;
/** Adds offset in pixels to the calculated overlayTop */ /** CUSTOM ADD: Adds offset in pixels to the calculated overlayTop */
customTopOffset?: number; customTopOffset?: number;
} }

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

@ -77,33 +77,33 @@ export class GuidedTourService {
} }
} }
// public backStep(): void { public backStep(): void {
// if (this._currentTour.steps[this._currentTourStepIndex].closeAction) { if (this._currentTour.steps[this._currentTourStepIndex].closeAction) {
// this._currentTour.steps[this._currentTourStepIndex].closeAction(); this._currentTour.steps[this._currentTourStepIndex].closeAction();
// } }
// if (this._currentTour.steps[this._currentTourStepIndex - 1]) { if (this._currentTour.steps[this._currentTourStepIndex - 1]) {
// this._currentTourStepIndex--; this._currentTourStepIndex--;
// this._setFirstAndLast(); this._setFirstAndLast();
// if (this._currentTour.steps[this._currentTourStepIndex].action) { if (this._currentTour.steps[this._currentTourStepIndex].action) {
// this._currentTour.steps[this._currentTourStepIndex].action(); this._currentTour.steps[this._currentTourStepIndex].action();
// setTimeout(() => { setTimeout(() => {
// if (this._checkSelectorValidity()) { if (this._checkSelectorValidity()) {
// this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
// } else { } else {
// this.backStep(); this.backStep();
// } }
// }); });
// } else { } else {
// if (this._checkSelectorValidity()) { if (this._checkSelectorValidity()) {
// this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
// } else { } else {
// this.backStep(); this.backStep();
// } }
// } }
// } else { } else {
// this.resetTour(); this.resetTour();
// } }
// } }
public skipTour(): void { public skipTour(): void {
if (this._currentTour.skipCallback) { if (this._currentTour.skipCallback) {