[master | DONE | ADDED] create new help-pop-up component for non-admin pages
parent
6f2e85e20e
commit
d88349d62b
@ -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