[master | DONE | ADDED] create new help-pop-up component for non-admin pages

src/app/admin/admin.component.ts

@@ -49,6 +49,7 @@ export class AdminComponent extends SidebarBaseComponent implements OnInit {
 
   ngOnInit() {
     super.ngOnInit();
+    this.layoutService.setHasHelpPopUp(false);
     this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
       this.user = user;
       this.subscriptions.push(this.params.subscribe(params => {
@@ -109,6 +110,7 @@ export class AdminComponent extends SidebarBaseComponent implements OnInit {
 
   ngOnDestroy() {
     super.ngOnDestroy();
+    this.layoutService.setHasHelpPopUp(true);
     this.layoutService.setRootClass(null);
     this.setProperties(Irish.irishAdminToolsCommunity, Irish.irishAdminToolsPortalType);
   }

src/app/app.component.ts

@@ -31,11 +31,6 @@ import {ConnectHelper} from "./openaireLibrary/connect/connectHelper";
               <main>
                   <router-outlet></router-outlet>
               </main>
-              <a routerLink="/methodology/terminology" target="_blank" id="info_switcher_toggle" 
-                 class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-link-reset" uk-tooltip="Terminology and construction">
-                  <icon name="info" ratio="1.5" [flex]="true" customClass="uk-text-background" visuallyHidden="info"></icon>
-              </a>
-              <contact [page]="false"></contact>
           </div>
       </div>
       <cookie-law *ngIf="isClient" position="bottom" cookieName="cookieLawSeen-NOAMIreland">
@@ -88,6 +83,7 @@ import {ConnectHelper} from "./openaireLibrary/connect/connectHelper";
               </div>
           </div>
       </footer>
+      <help-pop-up *ngIf="hasHelpPopUp"></help-pop-up>
   `
 })
 export class AppComponent extends ResearcherBaseComponent implements OnInit, AfterViewInit {
@@ -110,6 +106,7 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
   stakeholderUtils: StakeholderUtils = new StakeholderUtils();
   windowWidth: number;
   compactMenuItems: boolean = false;
+  hasHelpPopUp: boolean = true;
 
   constructor(protected _route: ActivatedRoute,
               protected _router: Router,
@@ -147,6 +144,9 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
 
   ngOnInit() {
     this.isClient = typeof document !== 'undefined';
+    this.subscriptions.push(this.layoutService.hasHelpPopUp.subscribe(value => {
+      this.hasHelpPopUp = value;
+    }));
     if(this.isClient) {
       this.getWindowWidth();
     }

src/app/app.module.ts

@@ -17,8 +17,7 @@ import {CookieLawModule} from "./openaireLibrary/sharedComponents/cookie-law/coo
 import {SearchResearchResultsServiceModule} from "./openaireLibrary/services/searchResearchResultsService.module";
 import {SearchOrcidService} from "./openaireLibrary/claims/claim-utils/service/searchOrcid.service";
 import {SearchOrcidServiceModule} from "./openaireLibrary/claims/claim-utils/service/searchOrcidService.module";
-import {ContactModule} from "./contact/contact.module";
-import {IconsModule} from "./openaireLibrary/utils/icons/icons.module";
+import {HelpPopUpModule} from './shared/help-pop-up/help-pop-up.module';
 
 @NgModule({
   declarations: [
@@ -37,8 +36,7 @@ import {IconsModule} from "./openaireLibrary/utils/icons/icons.module";
     CookieLawModule,
     SearchResearchResultsServiceModule,
     SearchOrcidServiceModule,
-    ContactModule,
-    IconsModule
+    HelpPopUpModule
   ],
   providers: [
     SearchOrcidService,

src/app/contact/contact.component.html

@@ -21,8 +21,14 @@
   </div>
 </modal-alert>
 <ng-container *ngIf="!page">
-  <a id="feedback_switcher_toggle" class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-link-reset" uk-tooltip="Give us feedback">
-    <icon name="email" ratio="1.5" [flex]="true" customClass="uk-text-background" visuallyHidden="feedback" (click)="openFsModal()"></icon>
+  <a class="uk-link-reset" (click)="openFsModal()">
+    <div class="uk-flex uk-flex-top">
+      <icon name="description" flex="true" customClass="uk-text-primary"></icon>
+      <div class="uk-margin-small-left">
+        <p class="uk-text-bold uk-margin-xsmall-bottom">Give us your feedback</p>
+        <span class="uk-text-small uk-text-meta">Give general feedback of this platform.</span>
+      </div>
+    </div>
   </a>
   <fs-modal #fsModal>
     <div class="uk-section uk-container uk-container-large uk-flex uk-flex-center">

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit c33af181bb46f6c054cc1e115f721cd204a619e1
+Subproject commit b0c69be6ef3e55089d7032f0d1457c874652974f

src/app/shared/help-pop-up/help-pop-up.component.html

@@ -0,0 +1,36 @@
+<div id="help-pop-up">
+  <button class="uk-button uk-button-primary uk-box-shadow-default uk-box-shadow-default-hover uk-flex uk-flex-middle" (click)="helpPopUpClicked = true">
+    <icon *ngIf="!showDrop" name="help_outline" [flex]="true"></icon>
+    <icon *ngIf="showDrop" name="close" [flex]="true"></icon>
+    <span class="uk-margin-small-left">Help</span>
+  </button>
+  <div #drop id="pop-up" class="uk-drop" uk-drop="mode: click; pos: top-right; offset: 20">
+    <div *ngIf="helpPopUpClicked" class="uk-card uk-card-default uk-card-body uk-box-shadow-default">
+      <div class="uk-flex uk-flex-top uk-margin-medium-bottom">
+        <icon name="ondemand_video" flex="true" customClass="uk-text-primary"></icon>
+        <div class="uk-margin-small-left">
+          <p class="uk-text-bold uk-margin-small-bottom">Basic interactivity functions</p>
+          <a class="uk-link-reset" (click)="openGuideModal()">
+            <img src="assets/irish-assets/interactive_functions_preview.png" alt="Basic interactive functions" loading="lazy">
+          </a>
+        </div>
+      </div>
+      <a routerLink="/methodology/terminology" target="_blank" class="uk-link-reset">
+        <div class="uk-flex uk-flex-top uk-margin-medium-bottom">
+          <icon name="info" flex="true" customClass="uk-text-primary"></icon>
+          <div class="uk-margin-small-left">
+            <p class="uk-text-bold uk-margin-xsmall-bottom">Terminology and construction</p>
+            <span class="uk-text-small uk-text-meta">Do you have questions on our terminology?</span>
+          </div>
+        </div>
+      </a>
+      <contact [page]="false"></contact>
+    </div>
+  </div>
+</div>
+
+<modal-alert #guideModal [large]="true">
+  <div>
+    <img src="assets/irish-assets/interactive_functions.gif" alt="Basic interactive functions">
+  </div>
+</modal-alert>

src/app/shared/help-pop-up/help-pop-up.component.less

@@ -0,0 +1,15 @@
+@import (reference) "~src/assets/openaire-theme/less/_import-variables";
+
+#help-pop-up {
+	position: fixed;
+	bottom: 5vh;
+	right: 5vw;
+	z-index: @global-z-index - 20;
+
+	.uk-drop {
+		max-height: 550px;
+    height: 385px;
+		max-width: 80vw;
+		width: 400px;
+	}
+}

src/app/shared/help-pop-up/help-pop-up.component.ts

@@ -0,0 +1,39 @@
+import {Component, ElementRef, OnInit, ViewChild} from "@angular/core";
+import {AlertModal} from "../../openaireLibrary/utils/modal/alert";
+
+declare var UIkit;
+
+@Component({
+  selector: 'help-pop-up',
+  templateUrl: 'help-pop-up.component.html',
+  styleUrls: ['help-pop-up.component.less']
+})
+export class HelpPopUpComponent implements OnInit {
+  private subscriptions: any[] = [];
+  isClient: boolean = false;
+  helpPopUpClicked: boolean = false;
+  showDrop: boolean = false;
+  @ViewChild('drop') drop: ElementRef;
+  @ViewChild('guideModal', { static: true }) guideModal: AlertModal;
+
+  ngOnInit() {
+    this.isClient = typeof document !== 'undefined';
+    if(this.isClient) {
+      this.subscriptions.push(UIkit.util.on(document, 'show', '#pop-up', (event) => {
+        this.showDrop = true;
+      }));
+      this.subscriptions.push(UIkit.util.on(document, 'hide', '#pop-up', (event) => {
+        this.showDrop = false;
+      }));
+    }
+  }
+
+  openGuideModal() {
+    this.guideModal.alertMessage = false;
+    this.guideModal.alertHeader = false;
+    this.guideModal.alertFooter = false;
+    this.guideModal.cancelButton = false;
+    this.guideModal.okButton = false;
+    this.guideModal.open();
+  }
+}

src/app/shared/help-pop-up/help-pop-up.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {AppRoutingModule} from '../../app-routing.module';
+import {IconsModule} from '../../openaireLibrary/utils/icons/icons.module';
+import {HelpPopUpComponent} from './help-pop-up.component';
+import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
+import {ContactModule} from '../../contact/contact.module';
+
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, AppRoutingModule, IconsModule, ContactModule, AlertModalModule
+  ],
+  declarations: [
+    HelpPopUpComponent
+  ],
+  providers:[],
+  exports: [
+    HelpPopUpComponent
+  ]
+})
+export class HelpPopUpModule {
+}