From 53d05bf54f084727d7ec05ea7babeb2ef16fb849 Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Wed, 20 Apr 2022 17:40:18 +0300 Subject: [PATCH] [Explore & Library & Common Assets | new-theme]: Updates related to result landing redesign. 1. fos.component.css: Removed rule "mark.highlighted" and ".custom-bottom-border" updated with variables. 2. feedback.component.html: Updated width of email input for small screens. 3. parsingFunctions.class.ts: In "parseAllSubjects()" method, comment otherSubjects and push them in subjects. 4. showIdentifiers.component.ts: Updated classes in . 5. showSubjects.component.ts: "Subjects by Vocabulary" and "Subjects" separated & view more functionality added in "Subjects". 6. resultLanding.component: a. Added button and modal for (share in social media). b. View more functionality for related organizations. c. Graph and feedback section sticky. d. Added checks for summary tab and right sidebar. e. In small screens made right sidebar offcanvas. 7. resultLanding.module.ts: Updated iconsService.registerIcons to register link, graph, quotes. 8. orcid-work.component.ts: Added visually-hidden in icon buttons for landing | Updated classes in and use buttons of alert instead of custom. 9. no-load-paging.component.ts: Use new component for results and pages number and set uk-flex-right in (default is center). 10. cookie-law.css: In ".cookie-law-wrapper" increased z-index from 100 to 1000. 11. showAuthors.component.ts: Removed shadow from search button | Updated classes in . 12. icons.ts: Added "quotes" svg. 13. alert.ts: Updated modal to have header - body - footer (theme was updated too) | classTitle input set default to "uk-background-primary-opacity" | @Input() overflowBody: boolean = true; added to add overflow in body. 14. paging.module.ts: Added ResultsAndPagesNumComponent in declarations and exports. 15. pagingFormatter.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them. 16. pagingFormatterNoLoad.component.ts: Add "uk-invisible" to previous and next buttons instead of hiding them | Set customClasses default to "uk-flex-center". 17. tabs.component.ts: Updated margins/ paddings | Added @Input() offsetForSticky:number=0; to compare with the top distance for isSticky. 18. resultsAndPagesNum.component.ts: [NEW] Component to show number of results, number of pages and current page (used in paging). 19. landing-utils.css: a. Moved variables in .landing instead of :root. b. Added variable --landing-light-color-rgb: var(--light-color-rgb); c. Added glass filter in #graph_and_feedback. d. Set z-index of #main-tabs-div and #graph_and_feedback to 979 (default 980 caused problems with metrics box). e. Added padding-bottom: 80px and margin-top: 80px in .landing-sections. f. Added top rule for #right-sidebar-switcher. g. Added custom width rules for .landing-left-sidebar-width. 20. css-rules.txt: Added cookie-law-wrapper: 1000 info for z-index 21. explore-custom.css: Added variable --background-primary-rgb: var(--explore-color-rgb); --- landingPages/feedback/feedback.component.html | 2 +- .../landing-utils/parsingFunctions.class.ts | 17 +- .../showIdentifiers.component.ts | 5 +- .../landing-utils/showSubjects.component.ts | 129 ++++--- .../result/resultLanding.component.html | 323 +++++++++--------- .../result/resultLanding.component.ts | 65 +++- landingPages/result/resultLanding.module.ts | 4 +- orcid/orcid-work.component.ts | 103 +++--- .../searchUtils/no-load-paging.component.ts | 14 +- sharedComponents/cookie-law/cookie-law.css | 2 +- utils/authors/showAuthors.component.ts | 15 +- utils/icons/icons.ts | 12 + utils/modal/alert.ts | 50 +-- utils/paging.module.ts | 3 + utils/pagingFormatter.component.ts | 4 +- utils/pagingFormatterNoLoad.component.ts | 8 +- utils/resultsAndPagesNum.component.ts | 33 ++ utils/tabs/tabs.component.ts | 7 +- 18 files changed, 472 insertions(+), 324 deletions(-) create mode 100644 utils/resultsAndPagesNum.component.ts diff --git a/landingPages/feedback/feedback.component.html b/landingPages/feedback/feedback.component.html index 784c4c03..b51831ba 100644 --- a/landingPages/feedback/feedback.component.html +++ b/landingPages/feedback/feedback.component.html @@ -52,7 +52,7 @@
-
+
Please leave us your E-mail to notify you about the reporting status.
diff --git a/landingPages/landing-utils/parsingFunctions.class.ts b/landingPages/landing-utils/parsingFunctions.class.ts index 929911a8..66c0bb7d 100644 --- a/landingPages/landing-utils/parsingFunctions.class.ts +++ b/landingPages/landing-utils/parsingFunctions.class.ts @@ -641,14 +641,19 @@ export class ParsingFunctions { } classifiedSubjects.get(this.notebook_label).push(this.notebook_value); } else { - if (otherSubjects == undefined) { - otherSubjects = new Map(); - } + // if (otherSubjects == undefined) { + // otherSubjects = new Map(); + // } + // + // if (!otherSubjects.has(subject.classname)) { + // otherSubjects.set(subject.classname, new Array()); + // } + // otherSubjects.get(classname).push(content); - if (!otherSubjects.has(subject.classname)) { - otherSubjects.set(subject.classname, new Array()); + if (subjects == undefined) { + subjects = new Array(); } - otherSubjects.get(classname).push(content); + subjects.push(content); } } } diff --git a/landingPages/landing-utils/showIdentifiers.component.ts b/landingPages/landing-utils/showIdentifiers.component.ts index 71b71fb1..420fae97 100644 --- a/landingPages/landing-utils/showIdentifiers.component.ts +++ b/landingPages/landing-utils/showIdentifiers.component.ts @@ -47,9 +47,8 @@ import {properties} from "../../../../environments/environment"; View all
- -
+ +
diff --git a/landingPages/landing-utils/showSubjects.component.ts b/landingPages/landing-utils/showSubjects.component.ts index 847f3ee7..dcbcf2d9 100644 --- a/landingPages/landing-utils/showSubjects.component.ts +++ b/landingPages/landing-utils/showSubjects.component.ts @@ -1,46 +1,69 @@ -import {Component, Input} from '@angular/core'; +import { + ChangeDetectorRef, + Component, + ElementRef, + HostListener, + Input, + QueryList, + ViewChild, + ViewChildren +} from '@angular/core'; import {properties} from "../../../../environments/environment"; @Component({ selector: 'showSubjects', - template: ` -
- Subjects -
-
-
- -
- - {{key}}: - - - {{subject}} - - {{subject}} - - - -
- -
- - free text keywords: - {{subjects.join(', ')}} - , - - - - {{otherSubjects.get(key).join(', ')}} - , - - - -
+ template: ` + +
+ Subjects by Vocabulary
-
+
+ + + {{key}}: + + + + {{subject}} + + {{subject}} + + + +
+ + +
+ Subjects +
+ +
+ View all +
+ + + +
+

{{subjects.join(', ')}}

+ + + + + + + + + +
+ + + +
+ +
+ ` }) @@ -48,10 +71,18 @@ export class ShowSubjectsComponent { @Input() subjects: string[]; @Input() otherSubjects: Map; @Input() classifiedSubjects: Map; + isLarge: boolean = false; properties = properties; specialSubjects = []; + @ViewChildren("content", { read: ElementRef }) content: QueryList; + @ViewChild('subjectsModal') subjectsModal; - constructor() { + @HostListener('window:resize', ['$event']) + onResize(event) { + this.checkLarge(); + } + + constructor(private cdr: ChangeDetectorRef) { if(properties.dashboard == "explore") { this.specialSubjects = [ // "Physics::Optics", @@ -79,10 +110,30 @@ export class ShowSubjectsComponent { ngOnInit() { } + ngAfterViewInit() { + this.checkLarge(); + } + + checkLarge() { + let overflow = 42; + if(typeof document !== "undefined" && this.content) { + let element = this.content.find(content => content.nativeElement.id === "content"); + this.isLarge = (element && element.nativeElement.offsetHeight > overflow); + this.cdr.detectChanges(); + } + } + public getKeys(map) { return Array.from(map.keys()); } getSubjectParameter(param){ return {'f0':'resultsubject','fv0':'"' +(param)+'"', size:50}; } + + public openSubjectsModal() { + this.subjectsModal.cancelButton = false; + this.subjectsModal.okButton = false; + this.subjectsModal.alertTitle = "Subjects"; + this.subjectsModal.open(); + } } diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html index f59e7e24..e12756d4 100644 --- a/landingPages/result/resultLanding.component.html +++ b/landingPages/result/resultLanding.component.html @@ -1,14 +1,22 @@ -
+
+
+ +
+ +
+
+
-
-
+
-
+ +
Actions
    - - - - - +
  • + + + + + +
  • - +
    • @@ -45,14 +57,7 @@ [title]="'Cite this '+getTypeName()" [attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'"> - - - - + @@ -84,12 +89,38 @@
-
- -
+
+ +
+ +
+ + + Powered by OpenAIRE Research Graph + + + . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} + +
+ +
+ Anything wrong? + Report an Issue +
+
+ + +
+ +
+ +
+ + @@ -144,14 +175,12 @@
-
-
- -
- + +
-
+
- @@ -203,49 +232,29 @@
-
Related {{openaireEntities.ORGANIZATIONS}}
- -
- +
Related {{openaireEntities.ORGANIZATIONS}}
+ +
+ View more
-
- View less +
+ View less
- -
-
-
-
-
-
-
- - +
+ *ngFor="let item of resultLandingInfo.references.slice((referencesPage-1)*pageSize, referencesPage*pageSize)">

{{item.name}} @@ -259,11 +268,11 @@

- - +
@@ -273,32 +282,33 @@
- - -
+ +
-
+
{{keyIn}}
- + {{keyIn}}
- - +
@@ -332,45 +342,54 @@
+
-
- -
- graph - - Powered by OpenAIRE Research Graph - - - . Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}} - -
- -
- Anything wrong? - Report an Issue -
-
+
+ -
-
+ + +
+
+ +
+ +
+
+
+ +
+
+ +
+
+ +
- +
+ && (properties.environment == 'beta' || properties.environment == 'development') && (!viewAll || viewAll=='egiNotebook')"> - - eosc_logo - + + eosc_logo + EOSC SERVICE: EGI NOTEBOOK
- - + +
@@ -381,73 +400,39 @@
- +
- +
- - - - + + + + - +
- - + +
-
-
+ +
-
-
-
- - -
- -
- -
-
-
-
- -
- - - - - - - -
- -
- -
-
+ [(showForm)]="showFeedback">
+ #AlertModalDeletedByInference large="true"> @@ -455,7 +440,6 @@ -
-
- - + + + + + + + + + + + +
{{relatedClass}} - - +
- - +
diff --git a/landingPages/result/resultLanding.component.ts b/landingPages/result/resultLanding.component.ts index 994d8852..991e92e5 100644 --- a/landingPages/result/resultLanding.component.ts +++ b/landingPages/result/resultLanding.component.ts @@ -38,9 +38,9 @@ export class ResultLandingComponent { enermapsId; @ViewChild('linkModal') linkModal; @ViewChild('citeModal') citeModal; + @ViewChild('addThisModal') addThisModal; @ViewChild('AlertModalDeletedByInference') alertModalDeletedByInference; @ViewChild('relationModal') relationModal; - @ViewChild('organizationModal') organizationModal; public deleteByInferenceOpened: boolean = false; @Input() public resultFromInput: boolean = false; @Input() public resultLandingInfo: ResultLandingInfo; @@ -50,7 +50,11 @@ export class ResultLandingComponent { public title: string; /*Show all organizations*/ - public showAll: boolean = false; + public viewAllOrganizations: boolean = false; + public lessBtnOrganizations: boolean = false; + public thresholdOrganizations: number = 5; + @ViewChild('organizationsModal') organizationsModal; + // Links for SEO public linkToLandingPage: string = null; @@ -84,7 +88,6 @@ export class ResultLandingComponent { public relatedResultsNum: number = 0; // Message variables - public warningMessage = ""; public errorMessage = ""; public showLoading: boolean = true; @@ -120,12 +123,15 @@ export class ResultLandingComponent { public filteredRelatedResults: RelationResult[]; public offset: number; + @ViewChild("graph_and_feedback") graph_and_feedback; public viewAll: string = ""; public noCommunities: boolean = false; public stickyHeader: boolean = false; + public rightSidebarOffcanvasClicked: boolean = false; + constructor(private _resultLandingService: ResultLandingService, private _vocabulariesService: ISVocabulariesService, private _piwikService: PiwikService, @@ -209,6 +215,13 @@ export class ResultLandingComponent { this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-height')); } + calcGraphOffset() { + if(this.graph_and_feedback && window) { + return window.innerHeight-this.graph_and_feedback.nativeElement.offsetHeight+"px"; + } + return 0; + } + private initMetaAndLinks(type: string) { if (type == "publication") { this.type = "publication"; @@ -311,7 +324,6 @@ export class ResultLandingComponent { } private getProvenanceVocabularyAndResultLandingInfo() { - this.warningMessage = ''; this.errorMessage = ''; this.showLoading = true; @@ -331,7 +343,7 @@ export class ResultLandingComponent { } private setActiveTab() { - if (this.hasPrimaryInfo || this.hasSecondaryInfo) { + if (this.hasPrimaryInfo) { this.activeTab = 'summary'; } else if (this.resultLandingInfo.references && this.resultLandingInfo.references.length > 0) { this.activeTab = 'references'; @@ -443,6 +455,8 @@ export class ResultLandingComponent { this.showLoading = false; this.setActiveTab(); + + this.cdr.detectChanges(); }, err => { this.handleError("Error getting " + this.type + " for " + (this.id ? ("id: " + this.id) : ("pid: " + this.identifier.id + " ("+this.identifier.class+")")), err); @@ -474,13 +488,22 @@ export class ResultLandingComponent { public get hasPrimaryInfo(): boolean { return !!this.resultLandingInfo && ( (!!this.resultLandingInfo.description && this.resultLandingInfo.description.length > 0) - || !!this.resultLandingInfo.identifiers || !!this.resultLandingInfo.subjects + || !!this.resultLandingInfo.subjects || (!!this.resultLandingInfo.organizations && this.resultLandingInfo.organizations.length > 0)); } - public get hasSecondaryInfo(): boolean { - return (this.resultLandingInfo.fundedByProjects && this.resultLandingInfo.fundedByProjects.length > 0) || - (this.resultLandingInfo.contexts && this.resultLandingInfo.contexts.length > 0) || + public get hasRightSidebarInfo(): boolean { + return (this.resultLandingInfo.showEgiNotebookButton && properties.adminToolsPortalType == 'explore' + && (properties.environment == 'beta' || properties.environment == 'development')) + || + (this.resultLandingInfo.sdg && this.resultLandingInfo.sdg.length > 0) + || + (this.resultLandingInfo.fos && this.resultLandingInfo.fos.length > 0) + || + (this.resultLandingInfo.fundedByProjects && this.resultLandingInfo.fundedByProjects.length > 0) + || + (this.resultLandingInfo.contexts && this.resultLandingInfo.contexts.length > 0 && !this.noCommunities) + || (this.resultLandingInfo.hostedBy_collectedFrom && this.resultLandingInfo.hostedBy_collectedFrom.length > 0); } @@ -683,6 +706,14 @@ export class ResultLandingComponent { this.citeModal.alertTitle = "Cite this " + this.getTypeName(); this.citeModal.open(); } + + public openAddThisModal() { + this.addThisModal.cancelButton = false; + this.addThisModal.okButton = false; + this.addThisModal.alertTitle = "Share this " + this.getTypeName() + " in your social networks"; + this.addThisModal.open(); + } + private addNoIndexFilter() { let allow = this.checkIfAllowed(this.resultLandingInfo); if(!allow) { @@ -794,4 +825,20 @@ export class ResultLandingComponent { this.relatedPage = 1; this.filteredRelatedResults = this.resultLandingInfo.relatedResults.filter(result => !this.relatedClassSelected || result.relationName.toLowerCase() == this.relatedClassSelected.toLowerCase()); } + + public viewAllOrganizationsClick() { + this.viewAllOrganizations = true; + if(this.resultLandingInfo.organizations.length <= this.thresholdOrganizations*2) { + this.lessBtnOrganizations = true; + } else { + this.openOrganizationsModal(); + } + } + + public openOrganizationsModal() { + this.organizationsModal.cancelButton = false; + this.organizationsModal.okButton = false; + this.organizationsModal.alertTitle = "Related Organizations"; + this.organizationsModal.open(); + } } diff --git a/landingPages/result/resultLanding.module.ts b/landingPages/result/resultLanding.module.ts index 336079c6..949b8d83 100644 --- a/landingPages/result/resultLanding.module.ts +++ b/landingPages/result/resultLanding.module.ts @@ -33,7 +33,7 @@ import {MatFormFieldModule} from "@angular/material/form-field"; import {MatSelectModule} from "@angular/material/select"; import {IconsModule} from "../../utils/icons/icons.module"; import {IconsService} from "../../utils/icons/icons.service"; -import {link, orcid_add, orcid_bin} from "../../utils/icons/icons"; +import {graph, link, quotes} from "../../utils/icons/icons"; @NgModule({ imports: [ @@ -56,6 +56,6 @@ import {link, orcid_add, orcid_bin} from "../../utils/icons/icons"; }) export class ResultLandingModule { constructor(private iconsService: IconsService) { - this.iconsService.registerIcons([link]) + this.iconsService.registerIcons([link, graph, quotes]) } } diff --git a/orcid/orcid-work.component.ts b/orcid/orcid-work.component.ts index 28262b41..53fdada4 100644 --- a/orcid/orcid-work.component.ts +++ b/orcid/orcid-work.component.ts @@ -63,8 +63,8 @@ declare var UIkit: any; [class.uk-disabled]="showLoading || !isLoggedIn || !pids" [class.uk-text-muted]="!isLoggedIn || !pids" (mouseover)="hoverEvent($event)" (mouseout)="hoverEvent($event)"> - - + + @@ -78,36 +78,35 @@ declare var UIkit: any; [class.uk-disabled]="showLoading || !isLoggedIn || !pids" [class.uk-text-muted]="!isLoggedIn || !pids" (mouseover)="hoverEvent($event, 'delete')" (mouseout)="hoverEvent($event, 'delete')"> - - + + - -
+ +
{{requestGrantMessage}}
-
- - - + + + + + - - - + + -
+ + + + + + +
@@ -164,9 +163,8 @@ declare var UIkit: any; - -
+ +
@@ -263,33 +261,30 @@ declare var UIkit: any;
- -
-
- This research outcome is the result of merged research outcomes in OpenAIRE. -

- You have already added {{this.putCodes?.length}} works in your ORCID record related to the merged research outcome. -
- If you continue with delete action, all these works will be deleted. -
-
- If you continue with update action, all these works will be deleted and a new merged work will be added instead. -
+ +
+ This research outcome is the result of merged research outcomes in OpenAIRE. +

+ You have already added {{this.putCodes?.length}} works in your ORCID record related to the merged research outcome. +
+ If you continue with delete action, all these works will be deleted.
- -
- - - +
+ If you continue with update action, all these works will be deleted and a new merged work will be added instead.
+ + + + + + + + + + + + ` }) @@ -690,8 +685,10 @@ export class OrcidWorkComponent { } openGrantModal(title: string) { - this.grantModal.cancelButton = false; - this.grantModal.okButton = false; + this.grantModal.cancelButton = true; + this.grantModal.okButton = true; + this.grantModal.okButtonText = "Grant OpenAIRE"; + this.grantModal.okButtonLeft = false; this.grantModal.alertTitle = title; this.grantModal.open(); } @@ -723,8 +720,10 @@ export class OrcidWorkComponent { } openPropagationModal(title: string) { - this.propagationModal.cancelButton = false; - this.propagationModal.okButton = false; + this.propagationModal.cancelButton = true; + this.propagationModal.okButton = true; + this.propagationModal.okButtonText = "Continue"; + this.propagationModal.okButtonLeft = false; this.propagationModal.alertTitle = title; this.propagationModal.open(); } diff --git a/searchPages/searchUtils/no-load-paging.component.ts b/searchPages/searchUtils/no-load-paging.component.ts index 9438d821..0a425836 100644 --- a/searchPages/searchUtils/no-load-paging.component.ts +++ b/searchPages/searchUtils/no-load-paging.component.ts @@ -3,18 +3,12 @@ import {Component, Input, Output, EventEmitter} from '@angular/core'; @Component({ selector: 'no-load-paging', template: ` -
-
-
- {{totalResults | number}} - {{type}}, page - {{page}} - of - {{paging.getTotalPages() | number}} -
+
+
+
diff --git a/sharedComponents/cookie-law/cookie-law.css b/sharedComponents/cookie-law/cookie-law.css index 12a7af3a..60a330b9 100644 --- a/sharedComponents/cookie-law/cookie-law.css +++ b/sharedComponents/cookie-law/cookie-law.css @@ -21,7 +21,7 @@ bottom: 0; left: 0; width: 100%; - z-index: 100; + z-index: 1000; font-smooth: always; -webkit-font-smoothing: antialiased; text-align: center; diff --git a/utils/authors/showAuthors.component.ts b/utils/authors/showAuthors.component.ts index 5b70860e..36bae34a 100644 --- a/utils/authors/showAuthors.component.ts +++ b/utils/authors/showAuthors.component.ts @@ -64,7 +64,7 @@ import {properties} from "../../../../environments/environment"; {{author.fullName}} in OpenAIRE
- @@ -89,14 +89,11 @@ import {properties} from "../../../../environments/environment"; View less authors
- -
- - - -
+ + + + ` diff --git a/utils/icons/icons.ts b/utils/icons/icons.ts index fe3f2fe4..a62fe561 100644 --- a/utils/icons/icons.ts +++ b/utils/icons/icons.ts @@ -221,3 +221,15 @@ export const link = { } /** Add new icon under this line to be sure that it will be added on preview */ + +export const quotes = { + name: 'quotes', + data: '\n' + + ' \n' + + ' \n' + + ' ' +} \ No newline at end of file diff --git a/utils/modal/alert.ts b/utils/modal/alert.ts index c4a2705b..c1ddcff6 100644 --- a/utils/modal/alert.ts +++ b/utils/modal/alert.ts @@ -7,33 +7,38 @@ declare var UIkit: any; selector: 'modal-alert', template: `
-
-
- -
{{alertTitle}}
-
+ +
-
- -
-
- - - - - - +
+
+ +
+
+ + + + + + +
@@ -47,9 +52,10 @@ declare var UIkit: any; */ export class AlertModal { @Input() id: string = "modal"; - @Input() classTitle: string = ""; + @Input() classTitle: string = "uk-background-primary-opacity"; @Input() classBody: string = ""; @Input() large: boolean = false; + @Input() overflowBody: boolean = true; /** * Caption for the title. */ diff --git a/utils/paging.module.ts b/utils/paging.module.ts index 19c79dd4..768a1be2 100644 --- a/utils/paging.module.ts +++ b/utils/paging.module.ts @@ -7,6 +7,7 @@ import {pagingFormatterNoLoad} from './pagingFormatterNoLoad.component'; import {PagingFormatter} from './pagingFormatter.component'; import {IconsModule} from "./icons/icons.module"; +import {ResultsAndPagesNumComponent} from "./resultsAndPagesNum.component"; @NgModule({ @@ -14,10 +15,12 @@ import {IconsModule} from "./icons/icons.module"; CommonModule, FormsModule, RouterModule, IconsModule ], declarations: [ + ResultsAndPagesNumComponent, pagingFormatterNoLoad, PagingFormatter, ], exports: [ + ResultsAndPagesNumComponent, pagingFormatterNoLoad, PagingFormatter, ] diff --git a/utils/pagingFormatter.component.ts b/utils/pagingFormatter.component.ts index e3a38c81..c9982898 100644 --- a/utils/pagingFormatter.component.ts +++ b/utils/pagingFormatter.component.ts @@ -8,7 +8,7 @@ import {properties} from "../../../environments/environment"; template: `