From f3ff37c74cf06a703b31927ee9322cc65917dcf0 Mon Sep 17 00:00:00 2001 From: Alex Martzios Date: Tue, 22 Feb 2022 16:40:08 +0200 Subject: [PATCH 01/21] create quick-contact component button and modal --- .../quick-contact/quick-contact.component.css | 21 +++++++++++++++ .../quick-contact.component.html | 14 ++++++++++ .../quick-contact/quick-contact.component.ts | 14 ++++++++++ .../quick-contact/quick-contact.module.ts | 27 +++++++++++++++++++ .../quick-contact/quick-contact.service.ts | 17 ++++++++++++ 5 files changed, 93 insertions(+) create mode 100644 sharedComponents/quick-contact/quick-contact.component.css create mode 100644 sharedComponents/quick-contact/quick-contact.component.html create mode 100644 sharedComponents/quick-contact/quick-contact.component.ts create mode 100644 sharedComponents/quick-contact/quick-contact.module.ts create mode 100644 sharedComponents/quick-contact/quick-contact.service.ts diff --git a/sharedComponents/quick-contact/quick-contact.component.css b/sharedComponents/quick-contact/quick-contact.component.css new file mode 100644 index 00000000..25a56178 --- /dev/null +++ b/sharedComponents/quick-contact/quick-contact.component.css @@ -0,0 +1,21 @@ +.quick-contact { + position: fixed; + bottom: 40px; + right: 40px; +} +.quick-contact-modal { + position: absolute; + bottom: 80px; + right: 0; + width: 375px; +} + +@media (max-width: 768px) { + .quick-contact { + bottom: 20px; + right: 20px; + } + .quick-contact-modal { + width: 300px; + } +} \ No newline at end of file diff --git a/sharedComponents/quick-contact/quick-contact.component.html b/sharedComponents/quick-contact/quick-contact.component.html new file mode 100644 index 00000000..186f04d8 --- /dev/null +++ b/sharedComponents/quick-contact/quick-contact.component.html @@ -0,0 +1,14 @@ +
+ + + + HELP + +
+
+ Send a message
+ How can we help?
+ We usually respond in a few hours +
+
+
\ No newline at end of file diff --git a/sharedComponents/quick-contact/quick-contact.component.ts b/sharedComponents/quick-contact/quick-contact.component.ts new file mode 100644 index 00000000..03a4aa06 --- /dev/null +++ b/sharedComponents/quick-contact/quick-contact.component.ts @@ -0,0 +1,14 @@ +import {Component, Input, OnDestroy, OnInit} from '@angular/core'; + +@Component({ + selector: 'quick-contact', + templateUrl: 'quick-contact.component.html', + styleUrls: ['quick-contact.component.css'] +}) +export class QuickContactComponent { + public showModal: boolean = false; + + public toggleModal() { + this.showModal = !this.showModal; + } +} \ No newline at end of file diff --git a/sharedComponents/quick-contact/quick-contact.module.ts b/sharedComponents/quick-contact/quick-contact.module.ts new file mode 100644 index 00000000..0f75c7e5 --- /dev/null +++ b/sharedComponents/quick-contact/quick-contact.module.ts @@ -0,0 +1,27 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; + +import {QuickContactComponent} from './quick-contact.component'; +import {IconsModule} from '../../utils/icons/icons.module'; +import {IconsService} from '../../utils/icons/icons.service'; +import {mail} from '../../utils/icons/icons'; +import {close} from '../../utils/icons/icons'; + +@NgModule({ + imports: [ + CommonModule, FormsModule, IconsModule + ], + declarations: [ + QuickContactComponent + ], + providers:[], + exports: [ + QuickContactComponent + ] +}) +export class QuickContactModule { + constructor(private iconsService: IconsService) { + this.iconsService.registerIcons([mail,close]) + } +} diff --git a/sharedComponents/quick-contact/quick-contact.service.ts b/sharedComponents/quick-contact/quick-contact.service.ts new file mode 100644 index 00000000..0ddcdcc7 --- /dev/null +++ b/sharedComponents/quick-contact/quick-contact.service.ts @@ -0,0 +1,17 @@ +import { Injectable } from "@angular/core"; +import { BehaviorSubject, Observable } from "rxjs"; + +@Injectable({ + providedIn: "root" +}) +export class QuickContactService { + private display: BehaviorSubject = new BehaviorSubject(true); + + public get isDisplayed(): Observable { + return this.display.asObservable(); + } + + public setDisplay(display: boolean) { + this.display.next(display); + } +} \ No newline at end of file From 13fee133e4725be6e33872e50f72975bbe35d881 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Wed, 23 Feb 2022 00:37:18 +0200 Subject: [PATCH 02/21] Add new icon for restricted. Change tabs base on new guidelines. Change how-to base on new mocks --- monitor/how/how.component.css | 84 +++++++++---------- monitor/how/how.component.ts | 4 +- .../searchUtils/newSearchPage.component.html | 4 +- .../portal-search-result.component.html | 2 +- .../portal-search-result.component.ts | 2 +- .../portal-search-result.module.ts | 4 +- utils/icons/icons.ts | 5 ++ .../section-scroll.component.css | 25 ++---- .../section-scroll.component.ts | 13 +-- utils/tabs/tab.component.ts | 15 +--- utils/tabs/tabs.component.ts | 33 ++------ 11 files changed, 72 insertions(+), 119 deletions(-) diff --git a/monitor/how/how.component.css b/monitor/how/how.component.css index ecb40f6d..d662a569 100644 --- a/monitor/how/how.component.css +++ b/monitor/how/how.component.css @@ -5,6 +5,8 @@ .how .first > div:first-child:after { content: "we"; + font-size: 20px; + font-weight: 600; text-align: center; padding-bottom: 5%; position: absolute; @@ -19,17 +21,19 @@ .how .second > div:first-child { position: relative; - padding: 0 22% 0 22%; + padding: 0 10% 0 20%; } .how .second > div:first-child:after { content: "and"; + font-size: 20px; + font-weight: 600; text-align: center; padding-bottom: 5%; position: absolute; background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/2.svg"); - right: -10%; - top: 31%; + right: -17%; + top: 33%; width: 30%; background-size: contain; background-repeat: no-repeat; @@ -41,20 +45,22 @@ } .how .third > div:first-child { - padding: 0 12% 0 12%; + padding: 0 14% 0 13%; } .how .third:after { content: "on which"; + font-size: 20px; + font-weight: 600; padding-right: 30%; padding-top: 5%; padding-bottom: 5%; position: absolute; background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); - bottom: 6%; - left: 6%; + bottom: -6%; + left: 13%; transform: translateY(100%); - width: 55%; + width: 140px; background-size: contain; background-repeat: no-repeat; background-position: center; @@ -66,17 +72,19 @@ .how .fourth > div:first-child { position: relative; - padding: 0 15% 0 15%; + padding: 0 16% 0 16%; } .how .fourth> div:first-child:after { content: "and"; + font-size: 20px; + font-weight: 600; text-align: center; padding-bottom: 5%; position: absolute; background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/4.svg"); left: -18%; - top: 35%; + top: 36%; width: 30%; background-size: contain; background-repeat: no-repeat; @@ -84,7 +92,7 @@ } .how .fifth { - padding: 10% 2% 0 2%; + padding: 11% 2% 0 2%; } .how .fifth > div:first-child { @@ -93,6 +101,8 @@ .how .fifth > div:first-child:after { content: "We"; + font-size: 20px; + font-weight: 600; text-align: center; padding-bottom: 5%; position: absolute; @@ -125,7 +135,7 @@ content: ""; position: absolute; background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg"); - left: -20%; + left: -26%; top: -20%; height: 70%; width: 30%; @@ -136,32 +146,17 @@ .how .final > div:first-child:after { content: "We make visualizations, graphs, reports and deliver all in a customisable tool"; + font-size: 20px; position: absolute; - background-image: url("~src/assets/common-assets/monitor-assets/how/circle.png"); - right: -220px; - top: -20%; - width: 300px; - padding: 8% 0 5% 220px; + top: 30%; + width: 250px; + padding: 8% 0 5% 0; background-size: contain; background-repeat: no-repeat; background-position: bottom center; } } -@media only screen and (min-width: 960px) { - .how .third:after { - bottom: -6%; - } -} - -@media only screen and (min-width: 1200px) { - .how .third:after { - bottom: -10%; - left: 25%; - width: 25%; - } -} - @media only screen and (max-width: 639px) { .how .first { position: relative; @@ -171,11 +166,11 @@ .how .first:after { content: "we"; text-align: center; - padding: 25px 105px 25px 0; + padding: 10% 34% 10% 0; position: absolute; background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); left: 26%; - top: 72%; + top: 79%; background-size: contain; background-repeat: no-repeat; background-position: center; @@ -183,17 +178,17 @@ .how .second { position: relative; - padding: 0 15% 30% 15%; + padding: 0 10% 30% 10%; } .how .second:after { content: "and"; text-align: center; - padding: 25px 105px 25px 0; + padding: 10% 34% 10% 0; position: absolute; background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); left: 25%; - top: 70%; + top: 80%; background-size: contain; background-repeat: no-repeat; background-position: center; @@ -206,12 +201,13 @@ .how .third:after { content: "on which"; + font-weight: bold; text-align: center; - padding: 25px 105px 25px 0; + padding: 10% 41% 10% 0; position: absolute; background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); - left: 17%; - top: 75%; + left: 15%; + top: 83%; background-size: contain; background-repeat: no-repeat; background-position: center; @@ -229,7 +225,7 @@ .how .fourth:after { content: "and"; text-align: center; - padding: 25px 105px 25px 0; + padding: 10% 34% 10% 0; position: absolute; background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); left: 26%; @@ -247,7 +243,7 @@ .how .fifth:after { content: "We"; text-align: center; - padding: 25px 105px 25px 0; + padding: 10% 34% 10% 0; position: absolute; background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/3.svg"); left: 27%; @@ -277,8 +273,8 @@ content: ""; position: absolute; background-image: url("~src/assets/common-assets/monitor-assets/green-arrows/6.svg"); - left: 32%; - top: -80%; + left: 34%; + top: -70%; height: 70%; width: 30%; background-size: contain; @@ -288,12 +284,12 @@ .how .final > div:first-child:after { content: "We make visualizations, graphs, reports and deliver all in a customisable tool"; + text-align: center; position: absolute; - background-image: url("~src/assets/common-assets/monitor-assets/how/circle.png"); left: -62%; top: 85%; width: 300px; - padding: 12% 0 0 70%; + padding: 12% 0 0 54%; background-size: contain; background-repeat: no-repeat; background-position: center; diff --git a/monitor/how/how.component.ts b/monitor/how/how.component.ts index 174044e5..0bd51283 100644 --- a/monitor/how/how.component.ts +++ b/monitor/how/how.component.ts @@ -9,7 +9,7 @@ import {Component} from "@angular/core";
-
+
Starting from existing
research-related data sources
@@ -22,7 +22,7 @@ import {Component} from "@angular/core";
-
+
build an open, global
and trusted Research graph
diff --git a/searchPages/searchUtils/newSearchPage.component.html b/searchPages/searchUtils/newSearchPage.component.html index 6413b4c3..d85ca02f 100644 --- a/searchPages/searchUtils/newSearchPage.component.html +++ b/searchPages/searchUtils/newSearchPage.component.html @@ -112,7 +112,7 @@ ' uk-position-relative ' :(' uk-section ' ))+'}':null)">
@@ -122,7 +122,7 @@
-
+
-
diff --git a/searchPages/searchUtils/portal-search-result.component.ts b/searchPages/searchUtils/portal-search-result.component.ts index e6993534..1b733705 100644 --- a/searchPages/searchUtils/portal-search-result.component.ts +++ b/searchPages/searchUtils/portal-search-result.component.ts @@ -23,7 +23,7 @@ export class PortalSearchResultComponent implements OnInit{ @ViewChild('AlertModal') modal; visibilityIcon: Map = new Map ([ ["PRIVATE", 'incognito'], - ["RESTRICTED", 'group'] + ["RESTRICTED", 'restricted'] ]); public urlParam: string; public errorCodes: ErrorCodes = new ErrorCodes(); diff --git a/searchPages/searchUtils/portal-search-result.module.ts b/searchPages/searchUtils/portal-search-result.module.ts index 05cc15c2..ce1ebcf2 100644 --- a/searchPages/searchUtils/portal-search-result.module.ts +++ b/searchPages/searchUtils/portal-search-result.module.ts @@ -9,7 +9,7 @@ import {ManageModule} from "../../utils/manage/manage.module"; import {IconsModule} from "../../utils/icons/icons.module"; import {UrlPrefixModule} from "../../utils/pipes/url-prefix.module"; import {IconsService} from "../../utils/icons/icons.service"; -import {incognito} from "../../utils/icons/icons"; +import {incognito, restricted} from "../../utils/icons/icons"; import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module"; @NgModule({ @@ -29,6 +29,6 @@ import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module"; }) export class PortalSearchResultModule { constructor(private iconsService: IconsService) { - this.iconsService.registerIcons([incognito]) + this.iconsService.registerIcons([incognito, restricted]) } } diff --git a/utils/icons/icons.ts b/utils/icons/icons.ts index 68b434fa..6e6aadee 100644 --- a/utils/icons/icons.ts +++ b/utils/icons/icons.ts @@ -153,3 +153,8 @@ export const incognito = { name: 'incognito', data: '' } + +export const restricted = { + name: 'restricted', + data: '' +} diff --git a/utils/section-scroll/section-scroll.component.css b/utils/section-scroll/section-scroll.component.css index 083e5faa..06f037e9 100644 --- a/utils/section-scroll/section-scroll.component.css +++ b/utils/section-scroll/section-scroll.component.css @@ -1,20 +1,3 @@ -/*.section {*/ - /*position: relative;*/ - /*height: auto;*/ - /*display: flex;*/ -/*}*/ - -/*.section [top] {*/ -/* !*height: 80vh;*!*/ -/* !*border: 1px solid rebeccapurple;*!*/ -/*}*/ - -/*.section [top] {*/ -/* top: 0;*/ -/* height: auto;*/ -/* !*border: 1px solid deeppink;*!*/ -/*}*/ - [left] { position: -webkit-sticky; /* Safari */ position: sticky; @@ -33,9 +16,13 @@ } @media (max-width: 960px) { + [left] { + height: 50vh; + } + [left] .imgContainer { top: 5%; - height: 40%; + height: 80%; } [left] > * { @@ -62,4 +49,4 @@ [scroll] > * { height: 60vh; /* border: 1px solid darkorange;*/ -} \ No newline at end of file +} diff --git a/utils/section-scroll/section-scroll.component.ts b/utils/section-scroll/section-scroll.component.ts index 12f1267d..85e6a2f4 100644 --- a/utils/section-scroll/section-scroll.component.ts +++ b/utils/section-scroll/section-scroll.component.ts @@ -67,8 +67,8 @@ export class SectionScrollComponent implements AfterViewInit { threshold: this.buildThresholdList() }; Array.from(this.map.values()).forEach(value => { - this.left.set(value, document.getElementById(value)); - this.left.get(value).style.display = 'none'; + let element = document.getElementById(value); + this.left.set(value, element); }) Array.from(this.map.keys()).forEach(key => { this.scroll.set(key, document.getElementById(key)); @@ -80,15 +80,8 @@ export class SectionScrollComponent implements AfterViewInit { if (this.left.has(id) && this.lastElementId !== id) { if(entry.isIntersecting) { this.lastElementId = id; - Array.from(this.left.keys()).forEach(element => { - if (element !== id) { - this.left.get(element).style.display = 'none'; - } else { - this.left.get(element).style.display = 'block'; - } - }); } - // this.left.get(id).parentElement.style.opacity = String(entry.intersectionRatio); + this.left.get(id).parentElement.style.opacity = String(entry.intersectionRatio); } }); }, options); diff --git a/utils/tabs/tab.component.ts b/utils/tabs/tab.component.ts index 93c691f2..a544d9c3 100644 --- a/utils/tabs/tab.component.ts +++ b/utils/tabs/tab.component.ts @@ -14,23 +14,10 @@ export interface TabIcon { @Component({ selector: 'my-tab', - // styles: [ - // ` - // .pane{ - // padding: 1em; - // } - // ` - // ], template: ` - - -
+
- - - - ` }) export class TabComponent { diff --git a/utils/tabs/tabs.component.ts b/utils/tabs/tabs.component.ts index 5c176d0b..d2460efd 100644 --- a/utils/tabs/tabs.component.ts +++ b/utils/tabs/tabs.component.ts @@ -2,44 +2,29 @@ * The main component that renders single TabComponent * instances. */ - -import { - Component, - ContentChildren, - QueryList, - AfterContentInit, Output, EventEmitter, -} from '@angular/core'; - -import { TabComponent } from './tab.component'; +import {Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core'; +import {TabComponent} from './tab.component'; @Component({ selector: 'my-tabs', template: ` -
    -
  • - + -
    +
    ` }) export class TabsComponent { - + @Input() + public customClass: string; @ContentChildren(TabComponent) tabs: QueryList; @Output() public selectedActiveTab: EventEmitter = new EventEmitter(); From 1a7aee9a2f34ce04b5bc97559065ceb8e813a2ac Mon Sep 17 00:00:00 2001 From: Alex Martzios Date: Wed, 23 Feb 2022 10:46:56 +0200 Subject: [PATCH 03/21] add changes to the quick-contact component --- .../quick-contact/quick-contact.component.css | 13 +++--- .../quick-contact.component.html | 44 ++++++++++++++++--- 2 files changed, 43 insertions(+), 14 deletions(-) diff --git a/sharedComponents/quick-contact/quick-contact.component.css b/sharedComponents/quick-contact/quick-contact.component.css index 25a56178..e2af560b 100644 --- a/sharedComponents/quick-contact/quick-contact.component.css +++ b/sharedComponents/quick-contact/quick-contact.component.css @@ -3,11 +3,11 @@ bottom: 40px; right: 40px; } -.quick-contact-modal { - position: absolute; - bottom: 80px; - right: 0; - width: 375px; +.custom-avatar-circle { + width: 50px; + height: 50px; + object-fit: cover; + border: 2px solid #fff; } @media (max-width: 768px) { @@ -15,7 +15,4 @@ bottom: 20px; right: 20px; } - .quick-contact-modal { - width: 300px; - } } \ No newline at end of file diff --git a/sharedComponents/quick-contact/quick-contact.component.html b/sharedComponents/quick-contact/quick-contact.component.html index 186f04d8..ac6d3bd2 100644 --- a/sharedComponents/quick-contact/quick-contact.component.html +++ b/sharedComponents/quick-contact/quick-contact.component.html @@ -1,14 +1,46 @@
    - + HELP -
    -
    - Send a message
    - How can we help?
    - We usually respond in a few hours +
    +
    +
    + Send a message +
    +
    + + + + +
    +
    + How can we help? +
    +
    + We usually respond in a few hours. +
    +
    +
    + TODO: Contact form
    + Name
    + Email
    + Organization
    + Type
    + Comments
    + Send button
    + TODO: Contact form
    + Name
    + Email
    + Organization
    + Type
    + Comments
    + Send button
    + Organization
    + Type
    + Comments
    + Send button
    \ No newline at end of file From 31e56588271d0ed3fc64990a35ac007e7aa4b2b3 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Wed, 23 Feb 2022 12:33:43 +0200 Subject: [PATCH 04/21] Some css changes in quick contact --- .../quick-contact/quick-contact.component.css | 31 +++++++++++++------ .../quick-contact.component.html | 24 +++++++------- .../quick-contact/quick-contact.module.ts | 12 ++----- 3 files changed, 37 insertions(+), 30 deletions(-) diff --git a/sharedComponents/quick-contact/quick-contact.component.css b/sharedComponents/quick-contact/quick-contact.component.css index e2af560b..92bafd42 100644 --- a/sharedComponents/quick-contact/quick-contact.component.css +++ b/sharedComponents/quick-contact/quick-contact.component.css @@ -1,18 +1,31 @@ .quick-contact { position: fixed; - bottom: 40px; - right: 40px; + bottom: 5vh; + right: 5vw; } -.custom-avatar-circle { + +.uk-card > .uk-background-secondary:first-child { + border-radius: 4px 4px 0 0; +} + +.avatars > img { width: 50px; height: 50px; object-fit: cover; border: 2px solid #fff; } -@media (max-width: 768px) { - .quick-contact { - bottom: 20px; - right: 20px; - } -} \ No newline at end of file +.avatars > img:nth-child(n+1) { + margin-left: -5px; +} + +/* hide scrollbar but allow scrolling */ +.uk-overflow-auto { + -ms-overflow-style: none; /* for Internet Explorer, Edge */ + scrollbar-width: none; /* for Firefox */ + overflow-y: scroll; +} + +.uk-overflow-auto::-webkit-scrollbar { + display: none; /* for Chrome, Safari, and Opera */ +} diff --git a/sharedComponents/quick-contact/quick-contact.component.html b/sharedComponents/quick-contact/quick-contact.component.html index ac6d3bd2..c7690a09 100644 --- a/sharedComponents/quick-contact/quick-contact.component.html +++ b/sharedComponents/quick-contact/quick-contact.component.html @@ -1,19 +1,19 @@
    - - - - HELP + + + + Contact -
    +
    Send a message
    -
    - - - - +
    + + + +
    How can we help? @@ -22,7 +22,7 @@ We usually respond in a few hours.
    -
    +
    TODO: Contact form
    Name
    Email
    @@ -43,4 +43,4 @@ Send button
    -
    \ No newline at end of file +
    diff --git a/sharedComponents/quick-contact/quick-contact.module.ts b/sharedComponents/quick-contact/quick-contact.module.ts index 0f75c7e5..68392656 100644 --- a/sharedComponents/quick-contact/quick-contact.module.ts +++ b/sharedComponents/quick-contact/quick-contact.module.ts @@ -1,12 +1,9 @@ -import {NgModule} from '@angular/core'; -import {CommonModule} from '@angular/common'; -import {FormsModule} from '@angular/forms'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {FormsModule} from '@angular/forms'; import {QuickContactComponent} from './quick-contact.component'; import {IconsModule} from '../../utils/icons/icons.module'; -import {IconsService} from '../../utils/icons/icons.service'; -import {mail} from '../../utils/icons/icons'; -import {close} from '../../utils/icons/icons'; @NgModule({ imports: [ @@ -21,7 +18,4 @@ import {close} from '../../utils/icons/icons'; ] }) export class QuickContactModule { - constructor(private iconsService: IconsService) { - this.iconsService.registerIcons([mail,close]) - } } From ada419f8e82836c19633544aeddcc7ca31a5699b Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 24 Feb 2022 18:42:05 +0200 Subject: [PATCH 05/21] Add notification handler. Add contact-us to quick contact and make some changes in contact-us --- contact-us/contact-us.component.html | 109 ++++++++++-------- contact-us/contact-us.component.ts | 25 ++-- contact-us/contact-us.module.ts | 3 +- .../quick-contact/quick-contact.component.css | 4 + .../quick-contact.component.html | 27 +---- .../quick-contact/quick-contact.component.ts | 63 ++++++++-- .../quick-contact/quick-contact.module.ts | 4 +- utils/email/composer.ts | 2 +- utils/email/email.service.ts | 4 +- utils/notification-handler.ts | 18 +++ utils/string-utils.class.ts | 9 ++ 11 files changed, 167 insertions(+), 101 deletions(-) create mode 100644 utils/notification-handler.ts diff --git a/contact-us/contact-us.component.html b/contact-us/contact-us.component.html index 4d09f21a..4ab42840 100644 --- a/contact-us/contact-us.component.html +++ b/contact-us/contact-us.component.html @@ -1,62 +1,69 @@

    {{formTitle}}

    - -
    -
    - +
    + -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    -
    -
    +
    +
    -
    -
    - - -
    -
    - -
    +
    +
    + + +
    +
    + +
    diff --git a/contact-us/contact-us.component.ts b/contact-us/contact-us.component.ts index ebbdc9b1..04e05047 100644 --- a/contact-us/contact-us.component.ts +++ b/contact-us/contact-us.component.ts @@ -1,8 +1,7 @@ -import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {Component, EventEmitter, Input, Output} from '@angular/core'; import {FormGroup} from '@angular/forms'; import {EnvProperties} from "../utils/properties/env-properties"; -import {Observable} from "rxjs"; -import {map, startWith} from "rxjs/operators"; +import {properties} from "../../../environments/environment"; @Component({ selector: 'contact-us', @@ -10,18 +9,16 @@ import {map, startWith} from "rxjs/operators"; }) export class ContactUsComponent { - @Input() - public contactForm: FormGroup; - @Input() formTitle: string; - @Input() properties: EnvProperties; + @Input() public contactForm: FormGroup; + @Input() public formTitle: string; + @Input() public organizationTypes: string[]; + @Input() public buttonClass: string; + @Input() public alignButton: "left" | "right" | "center" = "left"; + @Input() public sendButton: string = "Send"; + @Input() public smallForm: boolean = false; + @Input() public sending: boolean = false; @Output() sendEmitter: EventEmitter = new EventEmitter(); - @Input() errorMessage; - @Input() - public organizationTypes: string[]; - @Input() - public right: boolean = true; - @Input() - public buttonClass: string; + public properties: EnvProperties = properties; public send() { this.sendEmitter.emit({ diff --git a/contact-us/contact-us.module.ts b/contact-us/contact-us.module.ts index 21def708..a365baa1 100644 --- a/contact-us/contact-us.module.ts +++ b/contact-us/contact-us.module.ts @@ -7,11 +7,12 @@ import {ReactiveFormsModule} from "@angular/forms"; import {MatAutocompleteModule} from "@angular/material/autocomplete"; import {RecaptchaModule} from "ng-recaptcha"; import {SafeHtmlPipeModule} from "../utils/pipes/safeHTMLPipe.module"; +import {LoadingModule} from "../utils/loading/loading.module"; @NgModule({ imports: [ CommonModule, RouterModule, - ReactiveFormsModule, MatAutocompleteModule, RecaptchaModule, SafeHtmlPipeModule], + ReactiveFormsModule, MatAutocompleteModule, RecaptchaModule, SafeHtmlPipeModule, LoadingModule], declarations: [ ContactUsComponent ], diff --git a/sharedComponents/quick-contact/quick-contact.component.css b/sharedComponents/quick-contact/quick-contact.component.css index 92bafd42..11492c4d 100644 --- a/sharedComponents/quick-contact/quick-contact.component.css +++ b/sharedComponents/quick-contact/quick-contact.component.css @@ -8,6 +8,10 @@ border-radius: 4px 4px 0 0; } +.uk-drop { + width: 380px; +} + .avatars > img { width: 50px; height: 50px; diff --git a/sharedComponents/quick-contact/quick-contact.component.html b/sharedComponents/quick-contact/quick-contact.component.html index c7690a09..7f133589 100644 --- a/sharedComponents/quick-contact/quick-contact.component.html +++ b/sharedComponents/quick-contact/quick-contact.component.html @@ -1,10 +1,10 @@
    - - + + Contact -
    +
    Send a message @@ -23,24 +23,9 @@
    - TODO: Contact form
    - Name
    - Email
    - Organization
    - Type
    - Comments
    - Send button
    - TODO: Contact form
    - Name
    - Email
    - Organization
    - Type
    - Comments
    - Send button
    - Organization
    - Type
    - Comments
    - Send button
    + +
    diff --git a/sharedComponents/quick-contact/quick-contact.component.ts b/sharedComponents/quick-contact/quick-contact.component.ts index 03a4aa06..490abd02 100644 --- a/sharedComponents/quick-contact/quick-contact.component.ts +++ b/sharedComponents/quick-contact/quick-contact.component.ts @@ -1,14 +1,55 @@ -import {Component, Input, OnDestroy, OnInit} from '@angular/core'; +import {Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core'; +import {FormGroup} from "@angular/forms"; +import {Subscriber} from "rxjs"; + +declare var UIkit; @Component({ - selector: 'quick-contact', - templateUrl: 'quick-contact.component.html', - styleUrls: ['quick-contact.component.css'] + selector: 'quick-contact', + templateUrl: 'quick-contact.component.html', + styleUrls: ['quick-contact.component.css'] }) -export class QuickContactComponent { - public showModal: boolean = false; - - public toggleModal() { - this.showModal = !this.showModal; - } -} \ No newline at end of file +export class QuickContactComponent implements OnInit, OnDestroy { + public showForm: boolean = false; + @Input() + public contactForm: FormGroup; + @Input() + public sending = false; + @Input() + public organizationTypes: string[] = []; + @Output() sendEmitter: EventEmitter = new EventEmitter(); + private subscriptions: any[] = []; + @ViewChild('drop') drop: ElementRef; + + ngOnInit() { + if (document !== undefined) { + this.subscriptions.push(UIkit.util.on(document, 'beforehide', '#quick-contact', (event) => { + if(this.sending) { + event.preventDefault(); + } + })); + } + } + + ngOnDestroy() { + this.subscriptions.forEach(value => { + if (value instanceof Subscriber) { + value.unsubscribe(); + } else if (value instanceof Function) { + value(); + } + }); + } + + public close() { + UIkit.drop(this.drop.nativeElement).hide(); + } + + public send(event) { + this.sendEmitter.emit(event); + } + + public toggleModal() { + this.showForm = !this.showForm; + } +} diff --git a/sharedComponents/quick-contact/quick-contact.module.ts b/sharedComponents/quick-contact/quick-contact.module.ts index 68392656..e793c4cd 100644 --- a/sharedComponents/quick-contact/quick-contact.module.ts +++ b/sharedComponents/quick-contact/quick-contact.module.ts @@ -4,10 +4,12 @@ import {FormsModule} from '@angular/forms'; import {QuickContactComponent} from './quick-contact.component'; import {IconsModule} from '../../utils/icons/icons.module'; +import {ContactUsModule} from "../../contact-us/contact-us.module"; +import {LoadingModule} from "../../utils/loading/loading.module"; @NgModule({ imports: [ - CommonModule, FormsModule, IconsModule + CommonModule, FormsModule, IconsModule, ContactUsModule, LoadingModule ], declarations: [ QuickContactComponent diff --git a/utils/email/composer.ts b/utils/email/composer.ts index 67f6b0cf..a80ba169 100644 --- a/utils/email/composer.ts +++ b/utils/email/composer.ts @@ -62,7 +62,7 @@ export class Composer { return email; } - public static composeEmailForMonitor(contactForm: any, admins: any): Email { + public static composeEmailForMonitor(contactForm: any, admins: string[]): Email { let email: Email = new Email(); email.subject = "OpenAIRE - Monitor"; diff --git a/utils/email/email.service.ts b/utils/email/email.service.ts index 92db0aed..2dab2857 100644 --- a/utils/email/email.service.ts +++ b/utils/email/email.service.ts @@ -7,7 +7,9 @@ import {Observable} from "rxjs"; import {EnvProperties} from "../properties/env-properties"; import {properties} from "../../../../environments/environment"; -@Injectable() +@Injectable({ + providedIn: 'root' +}) export class EmailService { constructor(private http:HttpClient) { diff --git a/utils/notification-handler.ts b/utils/notification-handler.ts new file mode 100644 index 00000000..ee9a175a --- /dev/null +++ b/utils/notification-handler.ts @@ -0,0 +1,18 @@ +declare var UIkit; + +export type Status = 'danger' | 'success' | 'warning'; +export type Position = 'bottom-right' | 'bottom-left' | 'bottom-center'; + +export class NotificationHandler { + private static DEFAULT_TIMEOUT: number = 60000; + private static DEFAULT_STATUS: Status = 'success'; + private static DEFAULT_POSITION: Position = 'bottom-right'; + + public static rise(message: string, status: Status = this.DEFAULT_STATUS, position: Position = this.DEFAULT_POSITION) { + UIkit.notification(message, { + status: status, + timeout: this.DEFAULT_TIMEOUT, + pos: position + }); + } +} diff --git a/utils/string-utils.class.ts b/utils/string-utils.class.ts index 97796017..e597a3a7 100644 --- a/utils/string-utils.class.ts +++ b/utils/string-utils.class.ts @@ -315,6 +315,15 @@ export class StringUtils { return Validators.pattern(StringUtils.urlRegex); } + public static validatorType(options: string[]): ValidatorFn { + return (control: AbstractControl): { [key: string]: boolean } | null => { + if (options.filter(type => type === control.value).length === 0) { + return {'type': false}; + } + return null; + } + } + public static validRoute(pages: any[], field: string, initial: string = null): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { if(control.value) { From d590732aba2a632036b006fb3de683cdb5df8ade Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 28 Feb 2022 14:38:26 +0200 Subject: [PATCH 06/21] Change navbar base on new theme --- login/userMini.component.ts | 157 +++------ sharedComponents/navigationBar.component.html | 332 ++++++++---------- sharedComponents/navigationBar.component.ts | 17 +- 3 files changed, 222 insertions(+), 284 deletions(-) diff --git a/login/userMini.component.ts b/login/userMini.component.ts index ea4caec3..00a6041f 100644 --- a/login/userMini.component.ts +++ b/login/userMini.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core'; +import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {Session, User} from './utils/helper.class'; import {RouterHelper} from '../utils/routerHelper.class'; @@ -6,72 +6,44 @@ import {Subscriber} from "rxjs"; import {MenuItem} from "../sharedComponents/menu"; import {UserManagementService} from "../services/user-management.service"; -// declare var logoutClicked; +declare var UIkit; + @Component({ selector: 'user-mini', template: ` - - - - - -
  • - + - - Sign in - - - - - - - + Sign in
  • Log out
    • +
  • Log out
@@ -172,9 +122,10 @@ export class UserMiniComponent implements OnInit, OnChanges { @Input() logOutUrl; @Input() cookieDomain; @Input() dark: boolean = false; - subscriptions = []; + @Output() closeCanvasEmitter: EventEmitter = new EventEmitter(); + private subscriptions = []; - constructor(private router: Router, private route: ActivatedRoute, private userManagementService: UserManagementService) { + constructor(private router: Router, private route: ActivatedRoute, private userManagementService: UserManagementService) { } ngOnInit() { @@ -189,7 +140,7 @@ export class UserMiniComponent implements OnInit, OnChanges { this.initUser(); } } - + ngOnDestroy() { this.subscriptions.forEach(subscription => { if (subscription instanceof Subscriber) { @@ -198,6 +149,10 @@ export class UserMiniComponent implements OnInit, OnChanges { }); } + closeCanvas() { + this.closeCanvasEmitter.emit(true); + } + initUser() { if (this.user) { this.loggedIn = true; @@ -222,14 +177,12 @@ export class UserMiniComponent implements OnInit, OnChanges { logIn() { this.userManagementService.login(); } - + isTheActiveSubMenu(menuItem: MenuItem): boolean { let currentRoute = this.router.url.split('?')[0]; - if (menuItem.route == currentRoute || menuItem.route == (currentRoute + "/") ) { - return true; - } - return false; + return menuItem.route == currentRoute || menuItem.route == (currentRoute + "/"); } + parseName() { this.firstLetters = ""; if (this.user && this.user.firstname) { diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html index d98e5150..c138489a 100644 --- a/sharedComponents/navigationBar.component.html +++ b/sharedComponents/navigationBar.component.html @@ -32,95 +32,71 @@
-
- @@ -161,12 +137,10 @@
--> -
- -
-
- +
+
-
-
- -
-
-
+ + +
diff --git a/sharedComponents/navigationBar.component.ts b/sharedComponents/navigationBar.component.ts index be35cb3e..16f4c17d 100644 --- a/sharedComponents/navigationBar.component.ts +++ b/sharedComponents/navigationBar.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnDestroy, OnInit} from '@angular/core'; +import {Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {Session, User} from '../login/utils/helper.class'; import {ConfigurationService} from '../utils/configuration/configuration.service'; @@ -7,6 +7,8 @@ import {EnvProperties} from '../utils/properties/env-properties'; import {Subscription} from 'rxjs'; import {HelpContentService} from '../services/help-content.service'; +declare var UIkit; + export interface Header { route?: string, url?: string, @@ -68,6 +70,10 @@ export class NavigationBarComponent implements OnInit, OnDestroy { sub.unsubscribe(); } } + + closeCanvas(element) { + UIkit.offcanvas(element).hide(); + } initialize() { if ((['provide', 'develop']).indexOf(this.portal) != -1) { @@ -88,13 +94,13 @@ export class NavigationBarComponent implements OnInit, OnDestroy { this.subs.push(this.config.communityInformationState.subscribe(data => { if (data) { if (data['entities']) { - for (var i = 0; i < data['entities'].length; i++) { + for (let i = 0; i < data['entities'].length; i++) { this.showEntity['' + data['entities'][i]['pid'] + ''] = data['entities'][i]['isEnabled']; } } if (data['pages']) { - for (var i = 0; i < data['pages'].length; i++) { + for (let i = 0; i < data['pages'].length; i++) { this.showPage[data['pages'][i]['route']] = data['pages'][i]['isEnabled']; } @@ -116,8 +122,7 @@ export class NavigationBarComponent implements OnInit, OnDestroy { ); } } - - + isEnabled(required, enabled) { if (!required) { return true; @@ -143,7 +148,7 @@ export class NavigationBarComponent implements OnInit, OnDestroy { count--; } } - return (count > 0) ? true : false; + return (count > 0); } private handleError(message: string, error) { From c2b6547b4c36415ff2e9b1050dcdabc80bb34973 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 28 Feb 2022 18:00:57 +0200 Subject: [PATCH 07/21] Navbar add rules if header menu and header is on center --- sharedComponents/navigationBar.component.html | 62 +++---------------- sharedComponents/navigationBar.component.ts | 9 ++- 2 files changed, 16 insertions(+), 55 deletions(-) diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html index c138489a..0724dd60 100644 --- a/sharedComponents/navigationBar.component.html +++ b/sharedComponents/navigationBar.component.html @@ -16,7 +16,6 @@ [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')" alt="BETA" style="height: 60px; width: 60px ">
-
@@ -100,43 +99,6 @@
-