[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).

2022-04-12 14:36:31 +03:00 · 2022-04-12 14:36:31 +03:00 · 7d2990d08b
parent fe3f62b9bd
commit 7d2990d08b
2 changed files with 51 additions and 60 deletions
--- a/orcid/orcid-work.component.ts
+++ b/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; } ' +
-    '.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; } '
+    '.loading-action-button { width: 36px; height: 36px; }'
  ],
  selector: 'orcid-work',
  template: `
    <ng-container *ngIf="pageType == 'search'">
      <span *ngIf="!putCodes || putCodes.length == 0"
-            [attr.uk-tooltip]="(!isLoggedIn) 
-                      ? '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.' : ''))"
+            [attr.uk-tooltip]="(!isLoggedIn) ? tooltipNoLoggedInUser : tooltipAdd"
            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) 
-                      ? '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.' : ''))"
+            [attr.uk-tooltip]="(!isLoggedIn) ? tooltipNoLoggedInUser : tooltipDelete"
            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) 
-                      ? (!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 ')
-                    : ('Add this work to your ORCID record' + ((properties.environment == 'beta') ? '. The action will affect your real ORCID iD.' : ''))"
+            [attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip'"
+            [title]="(!pids || !isLoggedIn)  ? (!pids ? tooltipNoPid : tooltipNoLoggedInUser) : tooltipAdd"
            [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' : '')">
-          <span *ngIf="!showLoading" class="uk-icon">
-            <img src="assets/common-assets/common/orcid_add.svg" style="width: 42px; height: 42px" loading="lazy" alt="add orcid">
+           [class]="(showLoading ? 'uk-disabled' : '') + (!isLoggedIn || !pids ? 'uk-disabled uk-text-muted' : '')">
+          <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: 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) 
-                    ? (!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.' : ''))"
+            [attr.uk-tooltip]="(!pids || !isLoggedIn) ? (!pids?tooltipNoPid : tooltipNoLoggedInUser) : tooltipDelete"
            [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' : '')">
-        <span *ngIf="!showLoading" class="uk-icon uk-preserve">
+         [class]="(showLoading ? 'uk-disabled' : '') + (!isLoggedIn || !pids ? 'uk-disabled uk-text-muted' : '')">
+        <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";
+  }
 }
--- a/orcid/orcid.module.ts
+++ b/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) {
-    this.iconsService.registerIcons([add, remove, preview, refresh]);
-  }
+  constructor() {}
 }