Merge pull request #2057 from ORCID/8823-qa-hover-effects-and-styling…

…-in-summary-page-not-implemented 8823 qa hover effects and styling in summary page not implemented
ORCID · Aug 31, 2023 · 01bc47c · 01bc47c
2 parents 8039501 + 96eccd6
commit 01bc47c
Show file tree

Hide file tree

Showing 14 changed files with 172 additions and 20 deletions.
diff --git a/src/app/trusted-summary/component/summary-panel/summary-panel.component.html b/src/app/trusted-summary/component/summary-panel/summary-panel.component.html
@@ -1,7 +1,12 @@
-<div class="card-container" *ngIf="activitiesToDisplay?.length">
+<div
+  class="card-container"
+  *ngIf="activitiesToDisplay?.length"
+  [ngClass]="{ hover: hoverEffect }"
+>
   <ng-container *ngFor="let activity of activitiesToDisplay; last as isLast">
     <div
       class="activity-container"
+      (click)="goToUrl(activity.url)"
       [ngClass]="{
         'with-border': !isLast || acitivityCountOverflow,
         'padding-botton': !isLast || acitivityCountOverflow
@@ -30,8 +35,8 @@
               target="_blank"
               rel="noopener noreferrer"
               href="{{ activity.url }}"
-              >{{ activity.organizationName }}</a
-            >
+              >{{ activity.organizationName }}
+            </a>
           </h3>
           <h3
             *ngIf="activity.organizationName && !activity.url"

diff --git a/src/app/trusted-summary/component/summary-panel/summary-panel.component.scss b/src/app/trusted-summary/component/summary-panel/summary-panel.component.scss
@@ -64,13 +64,22 @@
   border-bottom: 2px solid;
 }
 
+.activity-container:hover {
+  cursor: pointer;
+  a {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
 .body-wrapper {
   margin-inline-start: 27px;
 }
 
 mat-icon {
   min-width: 25px;
   margin-inline-end: 3px;
+
   img {
     margin-top: 2px;
     display: block;

diff --git a/src/app/trusted-summary/component/summary-panel/summary-panel.component.scss-theme.scss b/src/app/trusted-summary/component/summary-panel/summary-panel.component.scss-theme.scss
@@ -8,6 +8,24 @@
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
 
+  .card-container.hover {
+    border-color: mat.get-color-from-palette($primary, 500);
+  }
+
+  .activity-container:hover {
+    a {
+      text-decoration: underline;
+      cursor: pointer;
+      color: map-get($foreground, 'brand-primary-dark');
+    }
+
+    svg {
+      path {
+        fill: map-get($foreground, 'brand-primary-dark');
+      }
+    }
+  }
+
   .verified {
     color: mat.get-color-from-palette($accent, 400);
   }

diff --git a/src/app/trusted-summary/component/summary-panel/summary-panel.component.spec.ts b/src/app/trusted-summary/component/summary-panel/summary-panel.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { SummaryPanelComponent } from './summary-panel.component'
+import { WINDOW_PROVIDERS } from 'src/app/cdk/window'
 
 describe('SummaryPanelComponent', () => {
   let component: SummaryPanelComponent
@@ -9,7 +10,7 @@ describe('SummaryPanelComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [SummaryPanelComponent],
-      providers: [],
+      providers: [WINDOW_PROVIDERS],
     }).compileComponents()
 
     fixture = TestBed.createComponent(SummaryPanelComponent)

diff --git a/src/app/trusted-summary/component/summary-panel/summary-panel.component.ts b/src/app/trusted-summary/component/summary-panel/summary-panel.component.ts
@@ -1,5 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Inject, Input, OnInit } from '@angular/core'
 import { Subject } from 'rxjs'
+import { WINDOW } from 'src/app/cdk/window'
 import { ActivitySummary } from 'src/app/types/trust-summary'
 
 @Component({
@@ -20,10 +21,13 @@ export class SummaryPanelComponent implements OnInit {
   @Input() moreLabel: string = ''
   @Input() moreLabelSingular: string = ''
   @Input() showToPresent = true
+  @Input() hoverEffect = false
   activitiesToDisplay: ActivitySummary[]
   acitivityCountOverflow: boolean
   unsubscribe = new Subject()
 
+  constructor(@Inject(WINDOW) private _window: Window) {}
+
   ngOnDestroy(): void {
     this.unsubscribe.next()
     this.unsubscribe.complete()
@@ -37,4 +41,10 @@ export class SummaryPanelComponent implements OnInit {
       this.acitivityCountOverflow = this.count > 3
     }
   }
+  goToUrl(url?: string) {
+    if (!url) {
+      return
+    }
+    this._window.open(url, '_blank')
+  }
 }
diff --git a/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.html b/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.html
@@ -1,11 +1,16 @@
-<div class="card-container" *ngIf="simpleActivities?.length">
+<div
+  class="card-container"
+  *ngIf="simpleActivities?.length"
+  [ngClass]="{ hover: hoverEffect }"
+>
   <ng-container *ngFor="let element of simpleActivities; last as isLast">
     <div
       class="activity-container"
       [ngClass]="{
         'with-border': !isLast,
         'padding-botton': !isLast
       }"
+      (click)="goToUrl(element.url)"
     >
       <div class="header">
         <div class="header-title">

diff --git a/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.scss b/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.scss
@@ -10,6 +10,14 @@
   background-color: white;
 }
 
+.activity-container:hover {
+  cursor: pointer;
+  a {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
 .activity-container.padding-botton {
   padding-bottom: 16px;
 }

diff --git a/...ted-summary/component/summary-simple-panel/summary-simple-panel.component.scss-theme.scss b/...ted-summary/component/summary-simple-panel/summary-simple-panel.component.scss-theme.scss
@@ -8,6 +8,24 @@
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
 
+  .card-container.hover {
+    border-color: mat.get-color-from-palette($primary, 500);
+  }
+
+  .activity-container:hover {
+    a {
+      text-decoration: underline;
+      cursor: pointer;
+      color: map-get($foreground, 'brand-primary-dark');
+    }
+
+    svg {
+      path {
+        fill: map-get($foreground, 'brand-primary-dark');
+      }
+    }
+  }
+
   .verified {
     color: mat.get-color-from-palette($accent, 400);
   }

diff --git a/...app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.spec.ts b/...app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { SummarySimplePanelComponent } from './summary-simple-panel.component'
+import { WINDOW_PROVIDERS } from 'src/app/cdk/window'
 
 describe('SummarySimplePanelComponent', () => {
   let component: SummarySimplePanelComponent
@@ -9,6 +10,7 @@ describe('SummarySimplePanelComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [SummarySimplePanelComponent],
+      providers: [WINDOW_PROVIDERS],
     }).compileComponents()
 
     fixture = TestBed.createComponent(SummarySimplePanelComponent)

diff --git a/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.ts b/src/app/trusted-summary/component/summary-simple-panel/summary-simple-panel.component.ts
@@ -1,7 +1,8 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core'
 import { Subject } from 'rxjs'
 import { takeUntil } from 'rxjs/operators'
 import { PlatformInfoService } from 'src/app/cdk/platform-info'
+import { WINDOW } from 'src/app/cdk/window'
 
 export interface SimpleActivityModel {
   verified?: boolean
@@ -28,14 +29,22 @@ export class SummarySimplePanelComponent implements OnInit {
   @Input() count: number = 0
   @Input() moreLabel: string = ''
   @Input() moreLabelSingular: string = ''
+  @Input() hoverEffect = false
 
   @Input() overflowUrl: string = ''
   unsubscribe = new Subject()
   mobile: boolean
   acitivityCountOverflow = false
+  constructor(@Inject(WINDOW) private _window: Window) {}
 
   ngOnInit(): void {
     this.acitivityCountOverflow = this.simpleActivities.length > 3
     this.simpleActivities = this.simpleActivities.slice(0, 3)
   }
+  goToUrl(url?: string) {
+    if (!url) {
+      return
+    }
+    this._window.open(url, '_blank')
+  }
 }
diff --git a/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.html b/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.html
@@ -32,7 +32,7 @@
     <div *ngIf="trustedSummary">
       <a
         class="orc-font-body-small cursor-pointer header-name"
-        href="{{ trustedSummary.orcid }}"
+        href="{{ trustedSummary.orcid || orcid }}"
         target="_blank"
         rel="noopener noreferrer"
       >
@@ -118,8 +118,14 @@ <h1 class="orc-font-body-large">
           href="{{ trustedSummary.orcid }}#affiliations"
           target="_blank"
           rel="noopener noreferrer"
+          (mouseenter)="affiliationsHover = true"
+          (mouseleave)="affiliationsHover = false"
         >
-          <h2 class="orc-font-small-print" i18n="@@summary.affiliations">
+          <h2
+            class="orc-font-small-print"
+            i18n="@@summary.affiliations"
+            [ngClass]="{ 'hover-effect': affiliationsHover }"
+          >
             AFFILIATIONS
           </h2>
         </a>
@@ -129,6 +135,7 @@ <h2 class="orc-font-small-print" i18n="@@summary.affiliations">
           [count]="trustedSummary.employmentAffiliationsCount"
           [moreLabel]="labelMoreAffiliations"
           [moreLabelSingular]="labelMoreAffiliation"
+          [hoverEffect]="affiliationsHover"
         ></app-summary-panel>
       </ng-container>
       <ng-container *ngIf="lastUpdateDate || creationDateWithOffset">
@@ -187,10 +194,21 @@ <h2 class="orc-font-small-print" i18n="@@summary.keyDates">
           href="{{ trustedSummary.orcid }}#works"
           target="_blank"
           rel="noopener noreferrer"
+          (mouseenter)="worksHover = true"
+          (mouseleave)="worksHover = false"
         >
-          <h2 class="orc-font-small-print" i18n="@@summary.works">WORKS</h2>
+          <h2
+            class="orc-font-small-print"
+            i18n="@@summary.works"
+            [ngClass]="{
+              'hover-effect': worksHover
+            }"
+          >
+            WORKS
+          </h2>
         </a>
         <app-summary-simple-panel
+          [hoverEffect]="worksHover"
           [simpleActivities]="works"
         ></app-summary-simple-panel>
       </ng-container>
@@ -199,12 +217,21 @@ <h2 class="orc-font-small-print" i18n="@@summary.works">WORKS</h2>
           href="{{ trustedSummary.orcid }}#peer-reviews"
           target="_blank"
           rel="noopener noreferrer"
+          (mouseenter)="peerReviewsHover = true"
+          (mouseleave)="peerReviewsHover = false"
         >
-          <h2 class="orc-font-small-print" i18n="@@summary.peerReviews">
+          <h2
+            [ngClass]="{
+              'hover-effect': peerReviewsHover
+            }"
+            class="orc-font-small-print"
+            i18n="@@summary.peerReviews"
+          >
             PEER REVIEWS
           </h2>
         </a>
         <app-summary-simple-panel
+          [hoverEffect]="peerReviewsHover"
           [simpleActivities]="peerReviews"
         ></app-summary-simple-panel>
       </ng-container>
@@ -213,11 +240,22 @@ <h2 class="orc-font-small-print" i18n="@@summary.peerReviews">
           href="{{ trustedSummary.orcid }}#funding"
           target="_blank"
           rel="noopener noreferrer"
+          (mouseenter)="fundsHover = true"
+          (mouseleave)="fundsHover = false"
         >
-          <h2 class="orc-font-small-print" i18n="@@summary.funding">FUNDING</h2>
+          <h2
+            class="orc-font-small-print"
+            [ngClass]="{
+              'hover-effect': fundsHover
+            }"
+            i18n="@@summary.funding"
+          >
+            FUNDING
+          </h2>
         </a>
 
         <app-summary-simple-panel
+          [hoverEffect]="fundsHover"
           [simpleActivities]="funds"
         ></app-summary-simple-panel>
       </ng-container>
@@ -234,15 +272,21 @@ <h2 class="orc-font-small-print" i18n="@@summary.funding">FUNDING</h2>
           href="{{ trustedSummary.orcid }}#professional-activities"
           target="_blank"
           rel="noopener noreferrer"
+          (mouseenter)="professionalActivitiesHover = true"
+          (mouseleave)="professionalActivitiesHover = false"
         >
           <h2
             class="orc-font-small-print"
             i18n="@@summary.professionalActivites"
+            [ngClass]="{
+              'hover-effect': professionalActivitiesHover
+            }"
           >
             PROFESSIONAL ACTIVITIES
           </h2>
         </a>
         <app-summary-panel
+          [hoverEffect]="professionalActivitiesHover"
           [url]="trustedSummary?.orcid + '#professional-activities'"
           [activitySummary]="trustedSummary.professionalActivities"
           [count]="trustedSummary.professionalActivitiesCount"
@@ -255,8 +299,14 @@ <h2 class="orc-font-small-print" i18n="@@summary.funding">FUNDING</h2>
           href="{{ trustedSummary.orcid }}#other-identifiers"
           target="_blank"
           rel="noopener noreferrer"
+          (mouseenter)="externalIdentifiersHover = true"
+          (mouseleave)="externalIdentifiersHover = false"
         >
-          <h2 class="orc-font-small-print" i18n="@@summary.otherids">
+          <h2
+            class="orc-font-small-print"
+            i18n="@@summary.otherids"
+            [ngClass]="{ 'hover-effect': externalIdentifiersHover }"
+          >
             OTHER IDENTIFIERS
           </h2>
         </a>
@@ -266,6 +316,7 @@ <h2 class="orc-font-small-print" i18n="@@summary.otherids">
           [overflowUrl]="trustedSummary?.orcid + '#other-identifiers'"
           [moreLabel]="labelMoreOtherIdentifiers"
           [moreLabelSingular]="labelMoreOtherIdentifier"
+          [hoverEffect]="externalIdentifiersHover"
         ></app-summary-simple-panel>
       </ng-container>
     </div>

diff --git a/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.scss b/src/app/trusted-summary/pages/trusted-summary/trusted-summary.component.scss
@@ -175,11 +175,7 @@ a {
     gap: 8px;
   }
 
-  h1 {
-    color: #fff;
-  }
-
-  h2 {
-    color: black;
+  h2.hover-effect {
+    text-decoration: underline;
   }
 }