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

This commit is contained in:
Alex Martzios 2024-03-08 12:51:46 +02:00
parent 6f2e85e20e
commit d88349d62b
11 changed files with 132 additions and 12 deletions

View File

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

View File

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

View File

@ -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,

View File

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

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

View File

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

View File

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

View File

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

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB