diff --git a/src/app/about/how-it-works.component.less b/src/app/about/about.component.less similarity index 100% rename from src/app/about/how-it-works.component.less rename to src/app/about/about.component.less diff --git a/src/app/about/how-it-works.component.ts b/src/app/about/about.component.ts similarity index 99% rename from src/app/about/how-it-works.component.ts rename to src/app/about/about.component.ts index 33c72fc..7a34ec3 100644 --- a/src/app/about/how-it-works.component.ts +++ b/src/app/about/about.component.ts @@ -11,7 +11,7 @@ import {properties} from "../../environments/environment"; import {StakeholderEntities} from "../openaireLibrary/monitor/entities/stakeholder"; @Component({ - selector: 'how-it-works', + selector: 'about', template: `
@@ -589,15 +589,13 @@ import {StakeholderEntities} from "../openaireLibrary/monitor/entities/stakehold } `] }) -export class HowItWorksComponent { - +export class AboutComponent { public url: string = null; - public pageTitle: string = "OpenAIRE - Monitor | How it works"; - public description: string = "OpenAIRE - Monitor | How it works"; - public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'About - How it works'}]; + public pageTitle: string = "OpenAIRE - Monitor | About"; + public description: string = "OpenAIRE - Monitor | About - How it works"; + public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'About'}]; public properties: EnvProperties = properties; public sections: string[] = [StakeholderEntities.FUNDERS, StakeholderEntities.RIS, StakeholderEntities.ORGANIZATIONS]; - public activeSection: string = StakeholderEntities.FUNDERS; public offset: number; public stakeholderEntities = StakeholderEntities; public shouldSticky: boolean = true; diff --git a/src/app/about/about.module.ts b/src/app/about/about.module.ts index 2965597..86a188f 100644 --- a/src/app/about/about.module.ts +++ b/src/app/about/about.module.ts @@ -2,8 +2,7 @@ import {CommonModule} from "@angular/common"; import {NgModule} from "@angular/core"; import {RouterModule} from "@angular/router"; import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard"; -import {HowItWorksComponent} from "./how-it-works.component"; -import {FaqsComponent} from "./faqs.component"; +import {AboutComponent} from "./about.component"; import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module"; import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service"; import {SliderTabsModule} from "../openaireLibrary/sharedComponents/tabs/slider-tabs.module"; @@ -11,25 +10,23 @@ import {HelperModule} from "../openaireLibrary/utils/helper/helper.module"; import {YouWeComponent} from "./you-we.component"; @NgModule({ - declarations: [HowItWorksComponent, FaqsComponent, YouWeComponent], + declarations: [AboutComponent, YouWeComponent], imports: [CommonModule, RouterModule.forChild([ { path: '', - redirectTo: 'how-it-works', - canDeactivate: [PreviousRouteRecorder], - pathMatch: 'full' - }, - { - path: 'how-it-works', - component: HowItWorksComponent, + component: AboutComponent, data: {extraOffset: 50} }, { - path: 'faqs', - component: FaqsComponent + path: 'how-it-works', + redirectTo: '/about' }, + { + path: 'faqs', + redirectTo: '/support' + } ]), BreadcrumbsModule, SliderTabsModule, HelperModule], - exports: [HowItWorksComponent, FaqsComponent], + exports: [AboutComponent], providers: [PreviousRouteRecorder, PiwikService] }) export class AboutModule {} diff --git a/src/app/about/faqs.component.html b/src/app/about/faqs.component.html deleted file mode 100644 index d5634e7..0000000 --- a/src/app/about/faqs.component.html +++ /dev/null @@ -1,25 +0,0 @@ -
-
-
-
- -
-
-

Frequently Asked
Questions.

-
-
-
- -
-
-
-
-
-

Frequently Asked
Questions.

-
-
-
- -
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 2d25307..482faad 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -9,6 +9,10 @@ const routes: Routes = [ path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }, + { + path: 'support', + loadChildren: () => import('./support/support.module').then(m => m.SupportModule) + }, { path: 'methodology', loadChildren: () => import('./openaireLibrary/monitor/methodology/methodology.module').then(m => m.MethodologyModule) @@ -23,7 +27,8 @@ const routes: Routes = [ }, { path: 'contact-us', - loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule) + loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule), + data: {hasQuickContact: false} }, { path: 'get-started', diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0f677b6..f1f6ed9 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, ViewChild} from '@angular/core'; +import {ChangeDetectorRef, Component, ElementRef, ViewChild} from '@angular/core'; import {ActivatedRoute, NavigationEnd, Router} from '@angular/router'; import {EnvProperties} from './openaireLibrary/utils/properties/env-properties'; @@ -21,6 +21,7 @@ import {QuickContactComponent} from "./openaireLibrary/sharedComponents/quick-co import {AlertModal} from "./openaireLibrary/utils/modal/alert"; import {StakeholderEntities} from './openaireLibrary/monitor/entities/stakeholder'; import {ResourcesService} from "./openaireLibrary/monitor/services/resources.service"; +import {LayoutService} from "./openaireLibrary/dashboard/sharedComponents/sidebar/layout.service"; @Component({ selector: 'app-root', @@ -60,7 +61,7 @@ import {ResourcesService} from "./openaireLibrary/monitor/services/resources.ser - { if (event instanceof NavigationEnd) { - if (event.url === '/contact-us') { - this.quickContactService.setDisplay(false); - } else if (event.url !== '/contact-us' && (!this.bottomNotIntersecting || !this.displayQuickContact)) { - this.quickContactService.setDisplay(true); - } this.showGetStarted = event.url !== '/get-started'; } @@ -136,8 +135,17 @@ export class AppComponent { this.buildMenu(); this.reset(); })); + this.subscriptions.push(this.layoutService.hasQuickContact.subscribe(hasQuickContact => { + if(this.showQuickContact !== hasQuickContact) { + this.showQuickContact = hasQuickContact; + this.cdr.detectChanges(); + } + })); this.subscriptions.push(this.quickContactService.isDisplayed.subscribe(display => { - this.displayQuickContact = display; + if(this.displayQuickContact !== display) { + this.displayQuickContact = display; + this.cdr.detectChanges(); + } })); } @@ -151,7 +159,10 @@ export class AppComponent { let intersectionObserver = new IntersectionObserver(entries => { entries.forEach(entry => { // if (entry.isIntersecting && this.showQuickContact) { - this.bottomNotIntersecting = !entry.isIntersecting; + if(this.bottomNotIntersecting !== (!entry.isIntersecting)) { + this.bottomNotIntersecting = !entry.isIntersecting; + this.cdr.detectChanges(); + } }); }, options); intersectionObserver.observe(this.bottom.nativeElement); @@ -180,12 +191,8 @@ export class AppComponent { new MenuItem("stakeholders", "Browse " + this.stakeholderEntities.STAKEHOLDERS, "", "/browse", false, [], null, {}) ); this.resourcesService.setResources(this.menuItems); - let about = new MenuItem("about", "About", "", "", false, [], null, {}); - about.items = [ - new MenuItem("how-it-works", "How it works", "", "/about/how-it-works", false, [], null, {}), - new MenuItem("faqs", "FAQs", "", "/about/faqs", false, [], null, {}) - ] - this.menuItems.push(about); + this.menuItems.push(new MenuItem("support", "Support", "", "/support", false, [], null, {})); + this.menuItems.push(new MenuItem("about", "About", "", "/about", false, [], null, {})); this.bottomMenuItems = [ new MenuItem("", "About", "https://beta.openaire.eu/project-factsheets", "", false, [], [], {}), new MenuItem("", "News - Events", "https://beta.openaire.eu/news-events", "", false, [], [], {}), diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index b3b0dff..281b04a 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -66,8 +66,6 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactiv public softwareSize: any = null; public otherSize: any = null; public fundersSize: any = null; - public showQuickContact: boolean = true; - @ViewChild('AlertModal') modal; private errorMessages: ErrorMessagesComponent; private subscriptions = []; private mutationObserver: MutationObserver; @@ -102,6 +100,7 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactiv this.errorMessages = new ErrorMessagesComponent(); this.status = this.errorCodes.LOADING; this.isServer = isPlatformServer(this.platform); + this.quickContactService.setDisplay(false); } public ngOnInit() { @@ -131,6 +130,7 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactiv } ngOnDestroy() { + this.quickContactService.setDisplay(true); this.clear(); } @@ -161,13 +161,7 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit, IDeactiv }; let intersectionObserver = new IntersectionObserver(entries => { entries.forEach(entry => { - if (entry.isIntersecting && this.showQuickContact) { - this.showQuickContact = false; - this.quickContactService.setDisplay(this.showQuickContact); - } else if (!entry.isIntersecting && !this.showQuickContact) { - this.showQuickContact = true; - this.quickContactService.setDisplay(this.showQuickContact); - } + this.quickContactService.setDisplay(!entry.isIntersecting); }); }, options); if(this.contact) { diff --git a/src/app/support/support.component.html b/src/app/support/support.component.html new file mode 100644 index 0000000..fd52ea2 --- /dev/null +++ b/src/app/support/support.component.html @@ -0,0 +1,41 @@ +
+
+
+
+ +
+
+
+

How can we help you?

+
Monitor expert support team is ready and excited to help.
+ Contact Us +
+
+ + + + +
+
+
+
+
+

Frequently Asked Questions

+
+ +
+
+
+
+
+

How can we help you?

+
Monitor expert support team is ready and excited to help.
+ Contact Us +
+
+
+
+

Frequently Asked Questions

+
+ +
diff --git a/src/app/support/support.component.less b/src/app/support/support.component.less new file mode 100644 index 0000000..81749e7 --- /dev/null +++ b/src/app/support/support.component.less @@ -0,0 +1,44 @@ +@import (reference) "~../../assets/openaire-theme/less/_import-variables"; + +@faqs-curator-image-size: 136px; +@faqs-contact-us-height: 450px; + +.contact-us { + height: @faqs-contact-us-height; + + img { + position: absolute; + width: @faqs-curator-image-size; + height: @faqs-curator-image-size; + object-fit: cover; + border-radius: 18px; + + + &.one { + top: @global-medium-gutter; + right: @global-medium-gutter + (@faqs-curator-image-size/2); + transform: rotate(10deg); + } + + &.two { + bottom: @global-medium-gutter; + right: @global-medium-gutter + (@faqs-curator-image-size); + transform: rotate(-10deg); + object-position: top; + } + + &.three { + top: 0; + left: @global-medium-gutter + (@faqs-curator-image-size); + transform: rotate(-10deg); + object-position: -60px; + } + + &.four { + bottom: 2*@global-medium-gutter; + left: 2*@global-medium-gutter; + transform: rotate(-10deg); + object-position: 0; + } + } +} diff --git a/src/app/about/faqs.component.ts b/src/app/support/support.component.ts similarity index 90% rename from src/app/about/faqs.component.ts rename to src/app/support/support.component.ts index 0a27ab1..2842108 100644 --- a/src/app/about/faqs.component.ts +++ b/src/app/support/support.component.ts @@ -10,17 +10,18 @@ import {Subscriber} from "rxjs"; import {Breadcrumb} from '../openaireLibrary/utils/breadcrumbs/breadcrumbs.component'; @Component({ - selector: 'faqs', - templateUrl: 'faqs.component.html' + selector: 'support', + templateUrl: 'support.component.html', + styleUrls: ['support.component.less'] }) -export class FaqsComponent { +export class SupportComponent { public pageContents = null; public divContents = null; public url: string = null; - public pageTitle: string = "OpenAIRE - Monitor | FAQs"; - public description: string = "OpenAIRE - Monitor | FAQs"; - public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'FAQs'}]; + public pageTitle: string = "OpenAIRE - Monitor | Support"; + public description: string = "OpenAIRE - Monitor | Support"; + public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'Support'}]; public properties: EnvProperties = properties; subscriptions = []; diff --git a/src/app/support/support.module.ts b/src/app/support/support.module.ts new file mode 100644 index 0000000..8a52b81 --- /dev/null +++ b/src/app/support/support.module.ts @@ -0,0 +1,22 @@ +import {CommonModule} from "@angular/common"; +import {NgModule} from "@angular/core"; +import {RouterModule} from "@angular/router"; +import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard"; +import {SupportComponent} from "./support.component"; +import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module"; +import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service"; +import {HelperModule} from "../openaireLibrary/utils/helper/helper.module"; + +@NgModule({ + declarations: [SupportComponent], + imports: [CommonModule, RouterModule.forChild([ + { + path: '', + component: SupportComponent, + data: {extraOffset: 50} + } + ]), BreadcrumbsModule, HelperModule], + exports: [SupportComponent], + providers: [PreviousRouteRecorder, PiwikService] +}) +export class SupportModule {}