Quick Contact: Add images dynamically. Disable overflow in quick contact and browse-stakeholder modals.

This commit is contained in:
Konstantinos Triantafyllou 2022-06-02 18:15:22 +03:00
parent 11647a1e37
commit f55ece6070
7 changed files with 18 additions and 35 deletions

View File

@ -35,7 +35,7 @@ import {AlertModal} from "./openaireLibrary/utils/modal/alert";
<a *ngIf="showGetStarted" extra-m class="uk-button uk-button-small uk-button-primary uk-text-uppercase uk-margin-left" routerLink="/get-started">Get Started</a> <a *ngIf="showGetStarted" extra-m class="uk-button uk-button-small uk-button-primary uk-text-uppercase uk-margin-left" routerLink="/get-started">Get Started</a>
</navbar> </navbar>
<schema2jsonld *ngIf="properties " [URL]="properties.domain + properties.baseLink" <schema2jsonld *ngIf="properties " [URL]="properties.domain + properties.baseLink"
[logoURL]="properties.domain + properties.baseLink+'/assets/common-assets/logo-services/monitor/main.svg'" [logoURL]="properties.domain + properties.baseLink + logoPath + 'main.svg'"
type="home" type="home"
description="OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies. Work together with us to view, understand and visualize research statistics and indicators. " description="OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies. Work together with us to view, understand and visualize research statistics and indicators. "
name="OpenAIRE Monitor" [searchAction]="true" name="OpenAIRE Monitor" [searchAction]="true"
@ -60,13 +60,9 @@ import {AlertModal} from "./openaireLibrary/utils/modal/alert";
<bottom *ngIf="properties && showMenu" [grantAdvance]="false" <bottom *ngIf="properties && showMenu" [grantAdvance]="false"
[properties]="properties"></bottom> [properties]="properties"></bottom>
<quick-contact #quickContact *ngIf="showQuickContact && contactForm" (sendEmitter)="send($event)" <quick-contact #quickContact *ngIf="showQuickContact && contactForm" (sendEmitter)="send($event)"
[contactForm]="contactForm" [sending]="sending" [contactForm]="contactForm" [sending]="sending" [images]="images"
[organizationTypes]="organizationTypes"></quick-contact> [organizationTypes]="organizationTypes"></quick-contact>
<modal-alert #modal> <modal-alert #modal [overflowBody]="false"></modal-alert>
<div class="uk-padding-small uk-padding-remove-horizontal">
Our team will respond to your submission soon.
</div>
</modal-alert>
</div> </div>
` `
@ -78,8 +74,6 @@ export class AppComponent {
properties: EnvProperties = properties; properties: EnvProperties = properties;
showMenu: boolean = false; showMenu: boolean = false;
user: User; user: User;
params: BehaviorSubject<Params> = new BehaviorSubject<Params>(null);
url: string;
header: Header; header: Header;
logoPath: string = 'assets/common-assets/logo-services/monitor/'; logoPath: string = 'assets/common-assets/logo-services/monitor/';
/* Contact */ /* Contact */
@ -91,6 +85,7 @@ export class AppComponent {
'Research Infrastructure', 'Government', 'Research Infrastructure', 'Government',
'Non-profit', 'Industry', 'Other' 'Non-profit', 'Industry', 'Other'
]; ];
public images: string[] = ['assets/monitor-assets/avatar1.jpg', 'assets/monitor-assets/avatar2.jpg']
public sending = false; public sending = false;
@ViewChild('modal') modal: AlertModal; @ViewChild('modal') modal: AlertModal;
@ViewChild('quickContact') quickContact: QuickContactComponent; @ViewChild('quickContact') quickContact: QuickContactComponent;
@ -104,13 +99,6 @@ export class AppComponent {
private emailService: EmailService) { private emailService: EmailService) {
this.subscriptions.push(router.events.forEach((event) => { this.subscriptions.push(router.events.forEach((event) => {
if (event instanceof NavigationEnd) { if (event instanceof NavigationEnd) {
this.url = event.url;
let r = this.route;
while (r.firstChild) {
r = r.firstChild;
}
let params = r.snapshot.params;
this.params.next(params);
if (event.url === '/contact-us') { if (event.url === '/contact-us') {
this.quickContactService.setDisplay(false); this.quickContactService.setDisplay(false);
} else if (event.url !== '/contact-us' && !this.showQuickContact) { } else if (event.url !== '/contact-us' && !this.showQuickContact) {
@ -156,7 +144,7 @@ export class AppComponent {
this.stakeholderService.clearSubscriptions(); this.stakeholderService.clearSubscriptions();
this.smoothScroll.clearSubscriptions(); this.smoothScroll.clearSubscriptions();
} }
public buildMenu() { public buildMenu() {
this.menuItems = []; this.menuItems = [];
this.menuItems.push({ this.menuItems.push({
@ -167,10 +155,6 @@ export class AppComponent {
rootItem: new MenuItem("stakeholders", "Browse Dashboards", "", "/browse", false, [], null, {}), rootItem: new MenuItem("stakeholders", "Browse Dashboards", "", "/browse", false, [], null, {}),
items: [] items: []
}); });
/*this.menuItems.push({
rootItem: new MenuItem("contact-us", "Contact us", "", "/contact-us", false, [], null, {}),
items: []
});*/
this.bottomMenuItems = [ this.bottomMenuItems = [
new MenuItem("", "About", "https://beta.openaire.eu/project-factsheets", "", false, [], [], {}), new MenuItem("", "About", "https://beta.openaire.eu/project-factsheets", "", false, [], [], {}),
new MenuItem("", "News - Events", "https://beta.openaire.eu/news-events", "", false, [], [], {}), new MenuItem("", "News - Events", "https://beta.openaire.eu/news-events", "", false, [], [], {}),
@ -237,7 +221,7 @@ export class AppComponent {
public modalOpen() { public modalOpen() {
this.modal.okButton = true; this.modal.okButton = true;
this.modal.alertTitle = 'Your request has been successfully submitted'; this.modal.alertTitle = 'Your request has been successfully submitted';
this.modal.alertMessage = false; this.modal.message = 'Our team will respond to your submission soon.';
this.modal.cancelButton = false; this.modal.cancelButton = false;
this.modal.okButtonLeft = false; this.modal.okButtonLeft = false;
this.modal.okButtonText = 'OK'; this.modal.okButtonText = 'OK';

View File

@ -29,8 +29,4 @@
</div> </div>
</div> </div>
</ng-template> </ng-template>
<modal-alert #AlertModal (alertOutput)="goToPage($event)"> <modal-alert #AlertModal [overflowBody]="false" (alertOutput)="goToPage($event)"></modal-alert>
<div class="uk-text-left">
You will be navigated to a new tab. Are you sure that you want to proceed?
</div>
</modal-alert>

View File

@ -59,7 +59,7 @@ export class BrowseStakeholderComponent {
this.modal.cancelButton = true; this.modal.cancelButton = true;
this.modal.okButton = true; this.modal.okButton = true;
this.modal.alertTitle = 'You are going to visit ' + this.stakeholder.name + ' Monitor Dashboard'; this.modal.alertTitle = 'You are going to visit ' + this.stakeholder.name + ' Monitor Dashboard';
this.modal.alertMessage = false; this.modal.message = 'You will be navigated to a new tab. Are you sure that you want to proceed?';
this.modal.okButtonLeft = false; this.modal.okButtonLeft = false;
this.modal.okButtonText = 'Yes'; this.modal.okButtonText = 'Yes';
this.modal.cancelButtonText = 'No'; this.modal.cancelButtonText = 'No';

View File

@ -218,9 +218,11 @@
</div> </div>
</div> </div>
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom"> <div class="uk-section uk-container uk-container-large uk-margin-large-bottom">
<h2 class="uk-h1">Dashboards in action<span class="uk-text-primary">.</span></h2> <div class="uk-width-1-2@m uk-margin-bottom">
<div class="uk-text-large uk-margin-bottom"> <h2 class="uk-heading-xlarge">Dashboards in action<span class="uk-text-primary">.</span></h2>
View existing dashboards from collaborating organizations. Get a preview on how they work and how our service can be customized to serve you. <div class="uk-text-large">
View existing dashboards from collaborating organizations. Get a preview on how they work and how our service can be customized to serve you.
</div>
</div> </div>
<a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text" <a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
routerLinkActive="router-link-active" routerLink="/browse"> routerLinkActive="router-link-active" routerLink="/browse">

@ -1 +1 @@
Subproject commit 135638ad6364f7cabdcef68e4fadfbc667c75cee Subproject commit 23a3c8a508f720dc155f30ce69bcfda72a200a19

View File

@ -12,6 +12,7 @@
/*backgrounds*/ /*backgrounds*/
--background-primary:var(--monitor-color); --background-primary:var(--monitor-color);
--background-primary-rgb:var(--monitor-color-rgb);
--background-primary-image:none; --background-primary-image:none;
--background-secondary: var(--grey-color); --background-secondary: var(--grey-color);
--background-secondary-image:none; --background-secondary-image:none;
@ -56,8 +57,8 @@ main {
min-height: calc(100vh - 90px); min-height: calc(100vh - 90px);
} }
.monitorApp .searchForm { .search-form {
background: var(--monitor-contrast-color) !important; background: var(--secondary-color);
} }

@ -1 +1 @@
Subproject commit e7f2543b7a01368a09f9100c001fe7fb76018658 Subproject commit e032e8ce0a597da6e447451e53ed7e6bdfed2323