MaDgIK
/
irish-monitor
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[master]: 1. Change feedback to open fs modal. 2. Add info floating button.

This commit is contained in:
Konstantinos Triantafyllou 2024-01-29 15:56:33 +02:00
parent 0866c1a9b7
commit b36808ab60
8 changed files with 78 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/app.component.ts
View File

@ -31,6 +31,11 @@ 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">

8
src/app/app.module.ts
View File

@ -16,9 +16,9 @@ import {ErrorModule} from "./openaireLibrary/error/error.module";
import {CookieLawModule} from "./openaireLibrary/sharedComponents/cookie-law/cookie-law.module";
import {SearchResearchResultsServiceModule} from "./openaireLibrary/services/searchResearchResultsService.module";
import {SearchOrcidService} from "./openaireLibrary/claims/claim-utils/service/searchOrcid.service";
import {LoginGuard} from "./openaireLibrary/login/loginGuard.guard";
import {HasConsentGuard} from "./shared/hasConsent.guard";
import {SearchOrcidServiceModule} from "./openaireLibrary/claims/claim-utils/service/searchOrcidService.module";
import {ContactModule} from "./contact/contact.module";
import {IconsModule} from "./openaireLibrary/utils/icons/icons.module";
@NgModule({
declarations: [
@ -36,7 +36,9 @@ import {SearchOrcidServiceModule} from "./openaireLibrary/claims/claim-utils/ser
AppRoutingModule,
CookieLawModule,
SearchResearchResultsServiceModule,
SearchOrcidServiceModule
SearchOrcidServiceModule,
ContactModule,
IconsModule
],
providers: [
SearchOrcidService,

23
src/app/contact/contact.component.html
View File

@ -1,5 +1,5 @@
<schema2jsonld *ngIf="url" [URL]="url" [name]="title" type="other" [description]="description"></schema2jsonld>
<div>
<div *ngIf="page">
<div class="uk-section uk-container uk-container-large uk-flex uk-flex-center"
uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
<div class="uk-padding-small uk-width-1-2@l uk-width-2-3@m uk-width-1-1">
@ -8,7 +8,7 @@
<h1 page-title class="uk-visible@m uk-margin-auto uk-text-center" uk-scrollspy-class>
Contact us<span class="uk-text-primary">.</span>
</h1>
<h1 page-title class="uk-hidden@m uk-heading-large uk-margin-auto uk-text-center" uk-scrollspy-class>
<h1 page-title class="uk-hidden@m uk-heading-large uk-margin-auto uk-text-center" uk-scrollspy-class>
Contact us<span class="uk-text-primary">.</span>
</h1>
</contact-us>
@ -20,3 +20,22 @@
Our team will respond to your submission soon.<br>
</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>
<fs-modal #fsModal>
<div class="uk-section uk-container uk-container-large uk-flex uk-flex-center">
<div class="uk-padding-small uk-width-1-2@l uk-width-2-3@m uk-width-1-1">
<contact-us [sending]="sending" [contactForm]="contactForm" (sendEmitter)="send($event)">
<h1 page-title class="uk-visible@m uk-margin-auto uk-text-center" >
Contact us<span class="uk-text-primary">.</span>
</h1>
<h1 page-title class="uk-hidden@m uk-heading-large uk-margin-auto uk-text-center">
Contact us<span class="uk-text-primary">.</span>
</h1>
</contact-us>
</div>
</div>
</fs-modal>
</ng-container>

51
src/app/contact/contact.component.ts
View File

@ -1,4 +1,4 @@
import {Component, OnInit, ViewChild} from '@angular/core';
import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {EmailService} from "../openaireLibrary/utils/email/email.service";
import {Composer} from "../openaireLibrary/utils/email/composer";
@ -8,16 +8,20 @@ import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
import {UntypedFormBuilder, UntypedFormGroup, Validators} from "@angular/forms";
import {NotificationHandler} from "../openaireLibrary/utils/notification-handler";
import {BaseComponent} from '../openaireLibrary/sharedComponents/base/base.component';
import {FullScreenModalComponent} from "../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component";
@Component({
selector: 'contact',
templateUrl: './contact.component.html'
})
export class ContactComponent extends BaseComponent implements OnInit {
@Input()
public page: boolean = true;
public url: string = null;
public sending = false;
public contactForm: UntypedFormGroup;
@ViewChild('modal') modal;
@ViewChild('fsModal') fsModal: FullScreenModalComponent;
constructor(protected _route: ActivatedRoute,
protected _router: Router,
@ -31,10 +35,12 @@ export class ContactComponent extends BaseComponent implements OnInit {
}
ngOnInit() {
this.title = 'Contact us';
this.description = 'Contact us';
this.url = this.properties.domain + this.properties.baseLink + this._router.url;
this.setMetadata();
if(this.page) {
this.title = 'Contact us';
this.description = 'Contact us';
this.url = this.properties.domain + this.properties.baseLink + this._router.url;
this.setMetadata();
}
this.reset();
}
@ -44,11 +50,11 @@ export class ContactComponent extends BaseComponent implements OnInit {
}
}
public reset() {
public reset(subject: string = null) {
this.contactForm = this.fb.group( {
name: this.fb.control('', Validators.required),
email: this.fb.control('', [Validators.required, Validators.email]),
subject: this.fb.control('', Validators.required),
subject: this.fb.control(subject, Validators.required),
message: this.fb.control('', Validators.required),
recaptcha: this.fb.control('', Validators.required),
});
@ -62,7 +68,11 @@ export class ContactComponent extends BaseComponent implements OnInit {
res => {
if (res) {
this.sending = false;
this.reset();
if(this.fsModal) {
this.fsModal.cancel();
} else {
this.reset();
}
this.modalOpen();
} else {
this.handleError('Email <b>sent failed!</b> Please try again.');
@ -74,14 +84,21 @@ export class ContactComponent extends BaseComponent implements OnInit {
));
}
public openFsModal() {
this.reset(this._title.getTitle());
this.fsModal.open();
}
public modalOpen() {
this.modal.okButton = true;
this.modal.alertTitle = 'Your request has been successfully submitted';
this.modal.alertMessage = false;
this.modal.cancelButton = false;
this.modal.okButtonLeft = false;
this.modal.okButtonText = 'OK';
this.modal.open();
if(this.modal) {
this.modal.okButton = true;
this.modal.alertTitle = 'Your request has been successfully submitted';
this.modal.alertMessage = false;
this.modal.cancelButton = false;
this.modal.okButtonLeft = false;
this.modal.okButtonText = 'OK';
this.modal.open();
}
}
handleError(message: string, error = null) {
@ -94,6 +111,8 @@ export class ContactComponent extends BaseComponent implements OnInit {
}
public goToHome() {
this._router.navigate(['/']);
if(!this.fsModal) {
this._router.navigate(['/']);
}
}
}

4
src/app/contact/contact.module.ts
View File

@ -10,13 +10,15 @@ import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module
import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
import {ContactUsModule} from "../openaireLibrary/contact-us/contact-us.module";
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
import {FullScreenModalModule} from "../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.module";
@NgModule({
imports: [
ContactRoutingModule, CommonModule, RouterModule,
AlertModalModule, RecaptchaModule,
Schema2jsonldModule, ContactUsModule
Schema2jsonldModule, ContactUsModule, IconsModule, FullScreenModalModule
],
declarations: [
ContactComponent

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 340dd96dc21697a0e1ecf9a76b63e646c14a3490
Subproject commit 4c55fb252cec8c1801bc37a9544c8e09412ff504

4
src/app/shared/monitor/monitor.component.html
View File

@ -197,10 +197,6 @@
{{countSelectedFilters()}}
</span>
</a>
<a *ngIf="stakeholder" routerLink="/contact-us" 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"></icon>
</a>
<div *ngIf="stakeholder" id="style_switcher" class="uk-offcanvas"
uk-offcanvas="flip:true; overlay: true">
<div class="uk-offcanvas-bar">

8
src/styles.less
View File

@ -7,11 +7,19 @@
top: 400px !important;
}
#info_switcher_toggle {
top: 250px !important;
}
@media (max-width: @breakpoint-small-max) {
#filters_switcher_toggle {
top: unset !important;
bottom: 10vh;
}
#info_switcher_toggle {
display: none;
}
}
/* Quick fix for svgs with a class that makes their opacity: 0.5*/