[Library | new-theme]: orcid.module.ts: Removed IconsService | orcid-work.component.ts: Updated icons (remove -> delete & preview -> visibility) & grouped tooltips wherever possible (background css not ready) & Removed unused css & Updated orcid buttons for landing page & [Bug fix] Update how "isLoggedIn" is calculated (userManagementService.getUserInfo() instead of Session).

orcid/orcid-work.component.ts

@@ -9,32 +9,19 @@ import {Session} from "../login/utils/helper.class";
 import {LoginErrorCodes} from "../login/utils/guardHelper.class";
 import {ExternalIDV3_0, WorkV3_0} from "./orcidWork";
 import {EnvProperties} from "../utils/properties/env-properties";
+import {UserManagementService} from "../services/user-management.service";
 
 declare var UIkit: any;
 
 @Component({
   styles: [
-    '.add-orcid-button { background-color: #a6ce39; color: #fff; border: 1px solid #a6ce39; } ' +
+    '.loading-action-button { width: 36px; height: 36px; }'
-    '.add-orcid-button:hover { background-color: #b6d65c; border-color: #b6d65c; } ' +
-    '.delete-orcid-button { background-color: #fff; color: #ff3d33; border: 1px solid #ff3d33 }' +
-    '.delete-orcid-button:hover { color: #ff0d00; border-color: #ff0d00; } ' +
-    ' a:not(:hover) .orcid-color { color: #a6ce39; }' +
-
-    '.loading-action-button { width: 36px; height: 36px; }' +
-
-    '.orcid-button { background-color: #fff; border: 1px solid #a6ce39; } ' +
-    '.orcid-button:hover { background-color: #e0f0d5; } ' +
-
-    'a.orcid_icon_opacity:hover > .uk-icon { opacity: 0.8; } '
   ],
   selector: 'orcid-work',
   template: `
     <ng-container *ngIf="pageType == 'search'">
       <span *ngIf="!putCodes || putCodes.length == 0"
-            [attr.uk-tooltip]="(!isLoggedIn) 
+            [attr.uk-tooltip]="(!isLoggedIn) ? tooltipNoLoggedInUser : tooltipAdd"
-                      ? 'Only logged in users can add or delete a work from their ORCID record '
-                    : ('Add this work to your ORCID record' + 
-                        ((properties.environment == 'beta') ? '. The action will affect your real ORCID iD.' : ''))"
             class="uk-align-right uk-margin-remove-bottom">
 
       <a (click)="currentAction='add'; saveWorkPreparation();"
@@ -42,7 +29,7 @@ declare var UIkit: any;
           <icon *ngIf="!showLoading" name="add" ratio="1"></icon>
           <span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
           <span class="uk-margin-small-left uk-flex uk-flex-middle">Add to&#160;
-            <span class="orcid-color uk-flex uk-flex-middle">
+            <span class="uk-flex uk-flex-middle">
               <span>ORCID&#160;</span>
               <img  class="" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"  style="width:16px; height:16px" loading="lazy">{{" "}}
             </span>
@@ -51,17 +38,14 @@ declare var UIkit: any;
       </span>
 
       <span *ngIf="putCodes && putCodes.length > 0"
-            [attr.uk-tooltip]="(!isLoggedIn) 
+            [attr.uk-tooltip]="(!isLoggedIn) ? tooltipNoLoggedInUser : tooltipDelete"
-                      ? 'Only logged in users can add or delete a work from their ORCID record '
-                    : ('Delete this work from your ORCID record' + 
-                        ((properties.environment == 'beta') ? '. The action will affect your real ORCID iD.' : ''))"
             class="uk-align-right uk-margin-remove-bottom">
         <a (click)="currentAction='delete'; deleteWorks();"
             [class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ (showLoading ? 'uk-disabled' : '')">
-          <icon *ngIf="!showLoading" name="remove" ratio="0.8"></icon>
+          <icon *ngIf="!showLoading" name="delete" ratio="0.8"></icon>
           <span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
           <span class="uk-margin-small-left uk-flex uk-flex-middle">Delete from&#160;
-            <span class="orcid-color space uk-flex uk-flex-middle">
+            <span class="space uk-flex uk-flex-middle">
               <span>ORCID&#160;</span>
               <img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">{{" "}}
             </span>
@@ -72,44 +56,29 @@ declare var UIkit: any;
 
     <ng-container *ngIf="pageType == 'landing'">
       <span *ngIf="!putCodes || putCodes.length == 0"
-            [attr.uk-tooltip]="(!pids || !isLoggedIn) 
+            [attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip'"
-                      ? (!pids?'Only resources with a PID (persistent identifier) like DOI, handle, PMID can be added or deleted from your ORCID record'
+            [title]="(!pids || !isLoggedIn)  ? (!pids ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipAdd"
-                      : 'Only logged in users can add or delete a work from their ORCID record ')
-                    : ('Add this work to your ORCID record' + ((properties.environment == 'beta') ? '. The action will affect your real ORCID iD.' : ''))"
             [class]="(!pids || !isLoggedIn) ? 'half-opacity' : ''">
         <a (click)="currentAction='add'; saveWorkPreparation();"
-           [class]="'orcid_icon_opacity uk-link-text uk-text-bold uk-text-uppercase '+ (showLoading ? 'uk-disabled' : '') + (!isLoggedIn || !pids ? 'uk-disabled uk-text-muted' : '')">
+           [class]="(showLoading ? 'uk-disabled' : '') + (!isLoggedIn || !pids ? 'uk-disabled uk-text-muted' : '')">
-          <span *ngIf="!showLoading" class="uk-icon">
+          <span *ngIf="!showLoading" class="uk-icon-button uk-icon landing-action-button landing-action-button-orcid">
-            <img src="assets/common-assets/common/orcid_add.svg" style="width: 42px; height: 42px" loading="lazy" alt="add orcid">
+            <img src="assets/common-assets/common/orcid_add.svg" style="width: 22px; height: 22px" loading="lazy" alt="add orcid">
           </span>
           <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
             [top_margin]="false"></loading></span>
-<!--          <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Add to&#160;-->
-<!--            <span class="orcid-color">-->
-<!--              ORCID-->
-<!--            </span>-->
-<!--          </span>-->
         </a>
       </span>
 
       <span *ngIf="putCodes && putCodes.length > 0"
-            [attr.uk-tooltip]="(!pids || !isLoggedIn) 
+            [attr.uk-tooltip]="(!pids || !isLoggedIn) ? (!pids?tooltipNoPid : tooltipNoLoggedInUser) : tooltipDelete"
-                    ? (!pids?'Only resources with a PID (persistent identifier) like DOI, handle, PMID can be added or deleted from your ORCID record'
-                    : 'Only logged in users can add or delete a work from their ORCID record ')
-                  : ('Delete this work from your ORCID record' + ((properties.environment == 'beta') ? '. The action will affect your real ORCID iD.' : ''))"
             [class]="(!pids || !isLoggedIn) ? 'half-opacity' : ''">
       <a (click)="currentAction='delete'; deleteWorks();"
-         [class]="'orcid_icon_opacity uk-link-text uk-text-bold uk-text-uppercase '+ (showLoading ? 'uk-disabled' : '') + (!isLoggedIn || !pids ? 'uk-disabled uk-text-muted' : '')">
+         [class]="(showLoading ? 'uk-disabled' : '') + (!isLoggedIn || !pids ? 'uk-disabled uk-text-muted' : '')">
-        <span *ngIf="!showLoading" class="uk-icon uk-preserve">
+        <span *ngIf="!showLoading" class="uk-icon-button uk-icon landing-action-button landing-action-button-orcid">
           <img src="assets/common-assets/common/orcid_bin.svg" style="width: 42px; height: 42px" loading="lazy">
         </span>
         <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
           [top_margin]="false"></loading></span>
-<!--        <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Delete from&#160;-->
-<!--            <span class="orcid-color">-->
-<!--              ORCID-->
-<!--            </span>-->
-<!--          </span>-->
       </a>
     </span>
     </ng-container>
@@ -152,7 +121,7 @@ declare var UIkit: any;
                     : 'View this work from your ORCID record'">
         <a (click)="currentAction='get'; getOrcidWorks()"
            [class]="'uk-button action uk-flex uk-flex-middle '+ ((showLoading || !putCodes || putCodes.length == 0) ? 'uk-disabled' : '')">
-          <icon *ngIf="!showLoading || currentAction!='get'" name="preview" ratio="1"></icon>
+          <icon *ngIf="!showLoading || currentAction!='get'" name="visibility" ratio="1"></icon>
           
           <span *ngIf="showLoading && currentAction=='get'" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
           <span class="uk-margin-small-left">View ORCID work</span>
@@ -172,7 +141,7 @@ declare var UIkit: any;
       </span>
 
       <span *ngIf="!putCodes || putCodes.length == 0"
-            [attr.uk-tooltip]="'Add this work to your ORCID record' + ((properties.environment == 'beta') ? '. The action will affect your real ORCID iD.' : '')">
+            [attr.uk-tooltip]="tooltipAdd">
         <a (click)="currentAction='add'; saveWorkPreparation();"
            [class]="'uk-button action uk-margin-top uk-flex uk-flex-middle '+ (showLoading ? 'uk-disabled' : '')">
           <icon *ngIf="!showLoading || currentAction!='add'" name="add" ratio="1"></icon>
@@ -182,10 +151,10 @@ declare var UIkit: any;
       </span>
 
       <span *ngIf="putCodes && putCodes.length > 0"
-            [attr.uk-tooltip]="'Delete this work from your ORCID record' + ((properties.environment == 'beta') ? '. The action will affect your real ORCID iD.' : '')">
+            [attr.uk-tooltip]="tooltipDelete">
         <a (click)="currentAction='delete'; deleteWorks();"
            [class]="'uk-button action uk-margin-top uk-flex uk-flex-middle '+ (showLoading ? 'uk-disabled' : '')">
-          <icon *ngIf="!showLoading || currentAction!='delete'" name="remove" ratio="1"></icon>
+          <icon *ngIf="!showLoading || currentAction!='delete'" name="delete" ratio="1"></icon>
           <span *ngIf="showLoading && currentAction=='delete'" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
           <span class="uk-margin-small-left">Delete from ORCID</span>
         </a>
@@ -352,7 +321,7 @@ export class OrcidWorkComponent {
   public orcidWorks: any[] = [];
   public window: any;
 
-  public isLoggedIn: boolean = Session.isLoggedIn();
+  public isLoggedIn: boolean = false;
 
   public currentAction: string = "";
 
@@ -361,7 +330,8 @@ export class OrcidWorkComponent {
   constructor(private route: ActivatedRoute,
               private _router: Router,
               private orcidService: OrcidService,
-              private resultLandingService: ResultLandingService) {
+              private resultLandingService: ResultLandingService,
+              private userManagementService: UserManagementService) {
     if(typeof document !== 'undefined') {
       this.tokenUrl = properties.orcidTokenURL
         + "client_id="+properties.orcidClientId
@@ -373,9 +343,18 @@ export class OrcidWorkComponent {
   }
 
   ngOnInit() {
-    if(!this.givenPutCode && this.isLoggedIn) {
+    this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
+      if (user) {
+        this.isLoggedIn = true;
+        if(!this.givenPutCode) {
           this.getPutCode();
         }
+      } else {
+        this.isLoggedIn = false;
+      }
+    }, error => {
+      this.isLoggedIn = false;
+    }));
   }
 
   ngOnDestroy() {
@@ -790,4 +769,20 @@ export class OrcidWorkComponent {
     }
     this.showLoading = false;
   }
+
+  get tooltipAdd() {
+    return "Add this work to your <span class=\"text-orcid\">ORCID</span> record" + ((properties.environment == "beta") ? ". The action will affect your real ORCID iD." : "");
+  }
+
+  get tooltipDelete() {
+    return "Delete this work from your <span class=\"text-orcid\">ORCID</span> record" + ((properties.environment == "beta") ? ". The action will affect your real ORCID iD." : "");
+  }
+
+  get tooltipNoPid() {
+    return "Only resources with a PID (persistent identifier) like DOI, handle, PMID can be added or deleted from your ORCID record";
+  }
+
+  get tooltipNoLoggedInUser() {
+    return "Only logged in users can add or delete a work from their ORCID record";
+  }
 }

orcid/orcid.module.ts

@@ -13,8 +13,6 @@ import {ResultLandingService} from '../landingPages/result/resultLanding.service
 import {LoadingModule} from '../utils/loading/loading.module';
 import {ResultLandingUtilsModule} from '../landingPages/landing-utils/resultLandingUtils.module';
 import {IconsModule} from '../utils/icons/icons.module';
-import {IconsService} from '../utils/icons/icons.service';
-import {add, preview, refresh, remove} from '../utils/icons/icons';
 
 @NgModule({
   imports: [
@@ -37,7 +35,5 @@ import {add, preview, refresh, remove} from '../utils/icons/icons';
 
 
 export class OrcidModule{
-  constructor(private iconsService: IconsService) {
+  constructor() {}
-    this.iconsService.registerIcons([add, remove, preview, refresh]);
-  }
 }