From 370360872ac1731f2f2c4b3970d5bd5378e96555 Mon Sep 17 00:00:00 2001
From: gpapavgeri <gpapavgeri@cite.gr>
Date: Wed, 5 Aug 2020 11:23:09 +0300
Subject: [PATCH] Guided tour comments added

---
 .../guided-tour/guided-tour.component.html    | 16 ++++--
 .../guided-tour/guided-tour.component.scss    | 55 ++++++++++++-------
 .../guided-tour/guided-tour.component.ts      |  9 ++-
 .../guided-tour/guided-tour.constants.ts      |  5 +-
 .../guided-tour/guided-tour.service.ts        | 54 +++++++++---------
 5 files changed, 84 insertions(+), 55 deletions(-)

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 4438a2a72..3f8e8dc89 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,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()">
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 c744f3283..a39ea2aaf 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
@@ -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;
       }
   }
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 292306604..913ab6d1b 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
@@ -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;
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 79e3f8556..04838b521 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,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;
 }
 
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 6ff9fab23..2823f24d0 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
@@ -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) {