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 class="guided-tour-user-input-mask" (click)="backdropClick($event)"></div>
<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 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 }"
<div #tourStep *ngIf="currentTourStep"
class="tour-step tour-{{ currentTourStep.orientation }}"
[ngClass]="{ '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)"
@ -17,6 +22,9 @@
<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-buttons">
<button *ngIf="!guidedTourService.onResizeMessage" class="next-button"
(click)="guidedTourService.nextStep()">

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

@ -14,7 +14,7 @@ ngx-guided-tour {
.guided-tour-spotlight-overlay {
position: fixed;
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 {
@ -56,7 +56,8 @@ ngx-guided-tour {
.tour-step {
position: fixed;
&.page-tour-step {
max-width: 1043px;
// max-width: 400px;
max-width: 1043px; /*custom add*/
width: 50%;
left: 50%;
top: 50%;
@ -85,14 +86,16 @@ ngx-guided-tour {
}
&.tour-bottom , &.tour-top {
margin-top: 20px;
margin-left: 10px;
.tour-arrow::before {
// transform: translateX(-50%);
// left: 50%;
transform: scale(2);
left: 494px;
/*custom add*/
transform: scale(2);
left: 494px;
}
/*custom add*/
margin-top: 20px;
margin-left: 10px;
}
&.tour-bottom-right, &.tour-top-right {
@ -121,29 +124,36 @@ ngx-guided-tour {
}
&.tour-right {
margin-left: 10px;
margin-left: 10px; /*custom add*/
.tour-arrow::before {
transform: scale(1.5);
transform: scale(1.5); /*custom add*/
position: absolute;
left: 0;
top: 5px;
}
.tour-block {
margin-top: -15px;
margin-top: -15px; /*custom add*/
margin-left: 10px;
}
}
.tour-block {
padding: 15px 25px;
// padding: 15px 25px;
/*custom add*/
padding: 15px 25px 15px 0px;
max-height: 348px;
border-radius: 5px;
}
.tour-title {
// font-weight: bold !important;
// padding-bottom: 20px;
/*custom add*/
font-weight: lighter !important;
font-size: 16px !important;
padding: 28px 45px 0px 65px;
padding: 28px 74px 0px 65px;
overflow: auto;
text-align: left;
color: #212121;
@ -161,7 +171,7 @@ ngx-guided-tour {
.tour-buttons {
overflow: hidden; // clearfix
padding: 10px 45px 30px 65px;
padding: 10px 70px 30px 65px; /*custom add*/
button.link-button {
padding-left: 0;
@ -182,8 +192,11 @@ ngx-guided-tour {
}
button.skip-button.link-button {
padding: 0;
// padding-left: 0;
border-left: 0;
/*custom add*/
padding: 0;
float: right;
width: 133px;
height: 40px;
@ -192,20 +205,23 @@ ngx-guided-tour {
color: #129D99;
}
.back-button {
float: right;
}
.next-button {
cursor: pointer;
float: left;
// border-radius: 1px;
// float: right;
border: none;
outline: none;
// padding-left: 10px;
// padding-right: 10px;
/*custom add*/
float: left;
padding: 10px 0px;;
width: 101px;
background: #129D99 0% 0% no-repeat padding-box;
}
/*custom add*/
button.skip-button.link-button, .next-button {
font-size: 14px;
font-weight: bold;
@ -216,13 +232,14 @@ ngx-guided-tour {
}
}
/*custom add*/
.argos-present-img {
background: url("../../../assets/splash/assets/img/argos\ present.png") no-repeat;
min-width: 176px;
height: 220px;
position: relative;
top: 110px;
left: -65px;
left: -85px;
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 skipText?= 'Leave Tour';
@Input() public nextText?= 'Got it!';
@Input() public progressIndicator?: TemplateRef<any> = undefined;
@ViewChild('tourStep', { static: false }) public tourStep: ElementRef;
public highlightPadding = 4;
public currentTourStep: TourStep = null;
@ -30,7 +29,7 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
constructor(
public guidedTourService: GuidedTourService,
private windowRef: WindowRefService,
private changeDetectorRef: ChangeDetectorRef,
private changeDetectorRef: ChangeDetectorRef, /*custom add*/
@Inject(DOCUMENT) private dom: any
) { }
@ -63,7 +62,7 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
if (step && step.selector) {
const selectedElement = this.dom.querySelector(step.selector);
if (selectedElement) {
this.handleOrb();
this.handleOrb(); /*custom add*/
this.scrollToAndSetElement();
} else {
this.selectedElementRect = null;
@ -86,6 +85,7 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
});
}
/*custom add*/
ngAfterContentChecked() {
this.changeDetectorRef.detectChanges();
}
@ -337,6 +337,9 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy {
public get overlayTop(): number {
if (this.selectedElementRect) {
// return this.selectedElementRect.top - this.getHighlightPadding();
/*custom add*/
let customTopOffset = 0;
if (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;
/** 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 */
/** CUSTOM ADD: True if the tour has no other step */
isStepUnique?: boolean;
/** Adds offset in pixels to the calculated overlayTop */
/** CUSTOM ADD: Adds offset in pixels to the calculated overlayTop */
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 {
// 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) {