[master | DONE | ADDED] create new help-pop-up component for non-admin pages
This commit is contained in:
parent
6f2e85e20e
commit
d88349d62b
|
@ -49,6 +49,7 @@ export class AdminComponent extends SidebarBaseComponent implements OnInit {
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
super.ngOnInit();
|
super.ngOnInit();
|
||||||
|
this.layoutService.setHasHelpPopUp(false);
|
||||||
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
|
this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
|
||||||
this.user = user;
|
this.user = user;
|
||||||
this.subscriptions.push(this.params.subscribe(params => {
|
this.subscriptions.push(this.params.subscribe(params => {
|
||||||
|
@ -109,6 +110,7 @@ export class AdminComponent extends SidebarBaseComponent implements OnInit {
|
||||||
|
|
||||||
ngOnDestroy() {
|
ngOnDestroy() {
|
||||||
super.ngOnDestroy();
|
super.ngOnDestroy();
|
||||||
|
this.layoutService.setHasHelpPopUp(true);
|
||||||
this.layoutService.setRootClass(null);
|
this.layoutService.setRootClass(null);
|
||||||
this.setProperties(Irish.irishAdminToolsCommunity, Irish.irishAdminToolsPortalType);
|
this.setProperties(Irish.irishAdminToolsCommunity, Irish.irishAdminToolsPortalType);
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,11 +31,6 @@ import {ConnectHelper} from "./openaireLibrary/connect/connectHelper";
|
||||||
<main>
|
<main>
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
</main>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<cookie-law *ngIf="isClient" position="bottom" cookieName="cookieLawSeen-NOAMIreland">
|
<cookie-law *ngIf="isClient" position="bottom" cookieName="cookieLawSeen-NOAMIreland">
|
||||||
|
@ -88,6 +83,7 @@ import {ConnectHelper} from "./openaireLibrary/connect/connectHelper";
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
<help-pop-up *ngIf="hasHelpPopUp"></help-pop-up>
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
export class AppComponent extends ResearcherBaseComponent implements OnInit, AfterViewInit {
|
export class AppComponent extends ResearcherBaseComponent implements OnInit, AfterViewInit {
|
||||||
|
@ -110,6 +106,7 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
|
||||||
stakeholderUtils: StakeholderUtils = new StakeholderUtils();
|
stakeholderUtils: StakeholderUtils = new StakeholderUtils();
|
||||||
windowWidth: number;
|
windowWidth: number;
|
||||||
compactMenuItems: boolean = false;
|
compactMenuItems: boolean = false;
|
||||||
|
hasHelpPopUp: boolean = true;
|
||||||
|
|
||||||
constructor(protected _route: ActivatedRoute,
|
constructor(protected _route: ActivatedRoute,
|
||||||
protected _router: Router,
|
protected _router: Router,
|
||||||
|
@ -147,6 +144,9 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit, Aft
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.isClient = typeof document !== 'undefined';
|
this.isClient = typeof document !== 'undefined';
|
||||||
|
this.subscriptions.push(this.layoutService.hasHelpPopUp.subscribe(value => {
|
||||||
|
this.hasHelpPopUp = value;
|
||||||
|
}));
|
||||||
if(this.isClient) {
|
if(this.isClient) {
|
||||||
this.getWindowWidth();
|
this.getWindowWidth();
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,8 +17,7 @@ import {CookieLawModule} from "./openaireLibrary/sharedComponents/cookie-law/coo
|
||||||
import {SearchResearchResultsServiceModule} from "./openaireLibrary/services/searchResearchResultsService.module";
|
import {SearchResearchResultsServiceModule} from "./openaireLibrary/services/searchResearchResultsService.module";
|
||||||
import {SearchOrcidService} from "./openaireLibrary/claims/claim-utils/service/searchOrcid.service";
|
import {SearchOrcidService} from "./openaireLibrary/claims/claim-utils/service/searchOrcid.service";
|
||||||
import {SearchOrcidServiceModule} from "./openaireLibrary/claims/claim-utils/service/searchOrcidService.module";
|
import {SearchOrcidServiceModule} from "./openaireLibrary/claims/claim-utils/service/searchOrcidService.module";
|
||||||
import {ContactModule} from "./contact/contact.module";
|
import {HelpPopUpModule} from './shared/help-pop-up/help-pop-up.module';
|
||||||
import {IconsModule} from "./openaireLibrary/utils/icons/icons.module";
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
|
@ -37,8 +36,7 @@ import {IconsModule} from "./openaireLibrary/utils/icons/icons.module";
|
||||||
CookieLawModule,
|
CookieLawModule,
|
||||||
SearchResearchResultsServiceModule,
|
SearchResearchResultsServiceModule,
|
||||||
SearchOrcidServiceModule,
|
SearchOrcidServiceModule,
|
||||||
ContactModule,
|
HelpPopUpModule
|
||||||
IconsModule
|
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
SearchOrcidService,
|
SearchOrcidService,
|
||||||
|
|
|
@ -21,8 +21,14 @@
|
||||||
</div>
|
</div>
|
||||||
</modal-alert>
|
</modal-alert>
|
||||||
<ng-container *ngIf="!page">
|
<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">
|
<a class="uk-link-reset" (click)="openFsModal()">
|
||||||
<icon name="email" ratio="1.5" [flex]="true" customClass="uk-text-background" visuallyHidden="feedback" (click)="openFsModal()"></icon>
|
<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>
|
</a>
|
||||||
<fs-modal #fsModal>
|
<fs-modal #fsModal>
|
||||||
<div class="uk-section uk-container uk-container-large uk-flex uk-flex-center">
|
<div class="uk-section uk-container uk-container-large uk-flex uk-flex-center">
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
Subproject commit c33af181bb46f6c054cc1e115f721cd204a619e1
|
Subproject commit b0c69be6ef3e55089d7032f0d1457c874652974f
|
|
@ -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>
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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();
|
||||||
|
}
|
||||||
|
}
|
|
@ -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 |
Loading…
Reference in New Issue