MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Trunk | Library]: orcid-work.component.ts: Icons for adding/ deleting works updated with the new ones. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60417 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2021-02-14 22:42:05 +00:00
parent 878ea565ad
commit bca4986523
1 changed files with 86 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
orcid/orcid-work.component.ts
View File

@ -22,7 +22,9 @@ declare var UIkit: any;
'.loading-action-button { width: 36px; height: 36px; }' + '.loading-action-button { width: 36px; height: 36px; }' +
'.orcid-button { background-color: #fff; border: 1px solid #a6ce39; } ' + '.orcid-button { background-color: #fff; border: 1px solid #a6ce39; } ' +
'.orcid-button:hover { background-color: #e0f0d5; } ' '.orcid-button:hover { background-color: #e0f0d5; } ' +
'a.orcid_icon_opacity:hover > .uk-icon { opacity: 0.8; } '
], ],
selector: 'orcid-work', selector: 'orcid-work',
template: ` template: `
@ -36,14 +38,14 @@ declare var UIkit: any;
<!-- [class]="'uk-margin-right uk-flex uk-flex-middle '+ (showLoading ? 'uk-disabled' : '')">--> <!-- [class]="'uk-margin-right uk-flex uk-flex-middle '+ (showLoading ? 'uk-disabled' : '')">-->
<svg *ngIf="!showLoading" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" <svg *ngIf="!showLoading" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"
data-svg="plus"> data-svg="plus">
<rect x="7" y="1" width="1" height="13" fill="#A6CE39"></rect> <rect x="7" y="1" width="1" height="13"></rect>
<rect x="1" y="7" width="13" height="1" fill="#A6CE39"></rect> <rect x="1" y="7" width="13" height="1"></rect>
</svg> </svg>
<span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span> <span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
<span class="uk-margin-small-left">Add to <span class="uk-margin-small-left uk-flex uk-flex-middle">Add to
<span class="orcid-color"> <span class="orcid-color space uk-flex uk-flex-middle">
<img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}} <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}
ORCID <span class="space">ORCID</span>
</span> </span>
</span> </span>
<!-- <span class="uk-margin-small-left">Add to <span class="orcid-color">ORCID</span></span>--> <!-- <span class="uk-margin-small-left">Add to <span class="orcid-color">ORCID</span></span>-->
@ -62,19 +64,20 @@ declare var UIkit: any;
<!-- <rect height="1" width="13" y="7" x="1" fill="#FF3D33"></rect>--> <!-- <rect height="1" width="13" y="7" x="1" fill="#FF3D33"></rect>-->
<!-- </svg>--> <!-- </svg>-->
<span *ngIf="!showLoading" class="uk-icon uk-preserve"> <span *ngIf="!showLoading" class="uk-icon uk-preserve">
<svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"> <!-- <svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash">-->
<polyline fill="none" stroke="#666" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline> <!-- <polyline fill="none" stroke="#666" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline>-->
<polyline fill="none" stroke="#666" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline> <!-- <polyline fill="none" stroke="#666" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline>-->
<rect x="8" y="7" width="1" height="9" color="#666"></rect> <!-- <rect x="8" y="7" width="1" height="9" color="#666"></rect>-->
<rect x="11" y="7" width="1" height="9" color="#666"></rect> <!-- <rect x="11" y="7" width="1" height="9" color="#666"></rect>-->
<rect x="2" y="3" width="16" height="1" color="#666"></rect> <!-- <rect x="2" y="3" width="16" height="1" color="#666"></rect>-->
</svg> <!-- </svg>-->
<img src="assets/common-assets/common/bin.svg" width="13">
</span> </span>
<span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span> <span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
<span class="uk-margin-small-left">Delete from <span class="uk-margin-small-left uk-flex uk-flex-middle">Delete from
<span class="orcid-color"> <span class="orcid-color space uk-flex uk-flex-middle">
<img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}} <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}
ORCID <span class="space">ORCID</span>
</span> </span>
</span> </span>
</a> </a>
@ -89,18 +92,20 @@ declare var UIkit: any;
: 'Add this work to your ORCID record'" : 'Add this work to your ORCID record'"
[class]="(!pids || !isLoggedIn) ? 'half-opacity' : ''"> [class]="(!pids || !isLoggedIn) ? 'half-opacity' : ''">
<a (click)="saveWorkPreparation();" <a (click)="saveWorkPreparation();"
[class]="'uk-link-text uk-text-bold uk-text-uppercase '+ (showLoading ? 'uk-disabled' : '') + (!isLoggedIn || !pids ? 'uk-disabled uk-text-muted' : '')"> [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-button add-orcid-button uk-icon"> <!-- uk-icon-button add-orcid-button -->
<svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" data-svg="plus"> <span *ngIf="!showLoading" class="uk-icon">
<rect x="7.5" y="1" width="1" height="15" fill="#A6CE39"></rect> <!-- <svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" data-svg="plus">-->
<rect x="1" y="7.5" width="15" height="1" fill="#A6CE39"></rect> <!-- <rect x="7.5" y="1" width="1" height="15" fill="#A6CE39"></rect>-->
</svg> <!-- <rect x="1" y="7.5" width="15" height="1" fill="#A6CE39"></rect>-->
<!-- </svg>-->
<img src="assets/common-assets/common/orcid_add.png" width="40" height="40">
</span> </span>
<span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
[top_margin]="false"></loading></span> [top_margin]="false"></loading></span>
<span class="uk-margin-small-left">Add to <span class="uk-margin-small-left">Add to
<span class="orcid-color"> <span class="orcid-color">
<img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}} <!-- <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}-->
ORCID ORCID
</span> </span>
</span> </span>
@ -115,26 +120,28 @@ declare var UIkit: any;
: 'Delete this work from your ORCID record'" : 'Delete this work from your ORCID record'"
[class]="(!pids || !isLoggedIn) ? 'half-opacity' : ''"> [class]="(!pids || !isLoggedIn) ? 'half-opacity' : ''">
<a (click)="deleteWorks();" <a (click)="deleteWorks();"
[class]="'uk-link-text uk-text-bold uk-text-uppercase '+ (showLoading ? 'uk-disabled' : '') + (!isLoggedIn || !pids ? 'uk-disabled uk-text-muted' : '')"> [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-button delete-orcid-button uk-icon">--> <!-- <span *ngIf="!showLoading" class="uk-icon-button delete-orcid-button uk-icon">-->
<!-- <svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" data-svg="minus">--> <!-- <svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" data-svg="minus">-->
<!-- <rect height="1" width="15" y="7.5" x="1" fill="#FF3D33"></rect>--> <!-- <rect height="1" width="15" y="7.5" x="1" fill="#FF3D33"></rect>-->
<!-- </svg>--> <!-- </svg>-->
<!-- </span>--> <!-- </span>-->
<span *ngIf="!showLoading" class="uk-icon-button delete-orcid-button uk-icon uk-preserve"> <!-- uk-icon-button delete-orcid-button-->
<svg width="15" height="15" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"> <span *ngIf="!showLoading" class="uk-icon uk-preserve">
<polyline fill="none" stroke="#FF3D33" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline> <!-- <svg width="15" height="15" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash">-->
<polyline fill="none" stroke="#FF3D33" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline> <!-- <polyline fill="none" stroke="#FF3D33" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline>-->
<rect x="8" y="7" width="1" height="9" color="#FF3D33"></rect> <!-- <polyline fill="none" stroke="#FF3D33" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline>-->
<rect x="11" y="7" width="1" height="9" color="#FF3D33"></rect> <!-- <rect x="8" y="7" width="1" height="9" color="#FF3D33"></rect>-->
<rect x="2" y="3" width="16" height="1" color="#FF3D33"></rect> <!-- <rect x="11" y="7" width="1" height="9" color="#FF3D33"></rect>-->
</svg> <!-- <rect x="2" y="3" width="16" height="1" color="#FF3D33"></rect>-->
<!-- </svg>-->
<img src="assets/common-assets/common/orcid_bin.png" width="40" height="40">
</span> </span>
<span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
[top_margin]="false"></loading></span> [top_margin]="false"></loading></span>
<span class="uk-margin-small-left">Delete from <span class="uk-margin-small-left">Delete from
<span class="orcid-color"> <span class="orcid-color">
<img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}} <!-- <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}-->
ORCID ORCID
</span> </span>
</span> </span>
@ -174,52 +181,12 @@ declare var UIkit: any;
<img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}} <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}
ORCID ACTIONS ORCID ACTIONS
</div> </div>
<span *ngIf="!putCodes || putCodes.length == 0"
uk-tooltip="Add this work to your ORCID record">
<a (click)="currentAction='add'; saveWorkPreparation();"
[class]="'uk-button action uk-flex uk-flex-middle '+ (showLoading ? 'uk-disabled' : '')">
<svg *ngIf="!showLoading || currentAction!='add'" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"
data-svg="plus">
<rect x="7" y="1" width="1" height="13" fill="#A6CE39"></rect>
<rect x="1" y="7" width="13" height="1" fill="#A6CE39"></rect>
</svg>
<span *ngIf="showLoading && currentAction=='add'" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
<span class="uk-margin-small-left">Add to ORCID</span>
<!-- <span class="uk-margin-small-left">Add to <span class="orcid-color">ORCID</span></span>-->
</a>
</span>
<span *ngIf="putCodes && putCodes.length > 0"
uk-tooltip="Delete this work from your ORCID record">
<a (click)="currentAction='delete'; deleteWorks();"
[class]="'uk-button action uk-flex uk-flex-middle '+ (showLoading ? 'uk-disabled' : '')">
<!-- <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}-->
<!-- <svg *ngIf="!showLoading || currentAction!='delete'" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"-->
<!-- data-svg="minus">-->
<!-- <rect height="1" width="13" y="7" x="1" fill="#FF3D33"></rect>-->
<!-- </svg>-->
<span *ngIf="!showLoading || currentAction!='delete'" class="uk-icon uk-preserve">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash">
<polyline fill="none" stroke="#FF3D33" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline>
<polyline fill="none" stroke="#FF3D33" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline>
<rect x="8" y="7" width="1" height="9" color="#FF3D33"></rect>
<rect x="11" y="7" width="1" height="9" color="#FF3D33"></rect>
<rect x="2" y="3" width="16" height="1" color="#FF3D33"></rect>
</svg>
</span>
<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>
<!-- <span class="uk-margin-small-left">Delete from <span class="orcid-color">ORCID</span></span>-->
</a>
</span>
<span [attr.uk-tooltip]="(!putCodes || putCodes.length == 0) <span [attr.uk-tooltip]="(!putCodes || putCodes.length == 0)
? 'This work is currently deleted.' ? 'This work is currently deleted.'
: 'Show this work from your ORCID record'"> : 'View this work from your ORCID record'">
<a (click)="currentAction='get'; getOrcidWorks()" <a (click)="currentAction='get'; getOrcidWorks()"
[class]="'uk-button action uk-margin-top uk-flex uk-flex-middle '+ ((showLoading || !putCodes || putCodes.length == 0) ? 'uk-disabled' : '')"> [class]="'uk-button action uk-flex uk-flex-middle '+ ((showLoading || !putCodes || putCodes.length == 0) ? 'uk-disabled' : '')">
<!-- <svg *ngIf="!showLoading" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"--> <!-- <svg *ngIf="!showLoading" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"-->
<!-- data-svg="plus">--> <!-- data-svg="plus">-->
<!-- <rect x="7" y="1" width="1" height="13" fill="#A6CE39"></rect>--> <!-- <rect x="7" y="1" width="1" height="13" fill="#A6CE39"></rect>-->
@ -234,7 +201,7 @@ declare var UIkit: any;
</span> </span>
<span *ngIf="showLoading && currentAction=='get'" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span> <span *ngIf="showLoading && currentAction=='get'" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
<span class="uk-margin-small-left">Show ORCID work</span> <span class="uk-margin-small-left">View ORCID work</span>
<!-- <span class="uk-margin-small-left">Show <span class="orcid-color">ORCID</span> work</span>--> <!-- <span class="uk-margin-small-left">Show <span class="orcid-color">ORCID</span> work</span>-->
</a> </a>
</span> </span>
@ -256,6 +223,48 @@ declare var UIkit: any;
<!-- <span class="uk-margin-small-left">Update <span class="orcid-color">ORCID</span> work</span>--> <!-- <span class="uk-margin-small-left">Update <span class="orcid-color">ORCID</span> work</span>-->
</a> </a>
</span> </span>
<span *ngIf="!putCodes || putCodes.length == 0"
uk-tooltip="Add this work to your ORCID record">
<a (click)="currentAction='add'; saveWorkPreparation();"
[class]="'uk-button action uk-margin-top uk-flex uk-flex-middle '+ (showLoading ? 'uk-disabled' : '')">
<svg *ngIf="!showLoading || currentAction!='add'" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"
data-svg="plus">
<rect x="7" y="1" width="1" height="13"></rect>
<rect x="1" y="7" width="13" height="1"></rect>
</svg>
<span *ngIf="showLoading && currentAction=='add'" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
<span class="uk-margin-small-left">Add to ORCID</span>
<!-- <span class="uk-margin-small-left">Add to <span class="orcid-color">ORCID</span></span>-->
</a>
</span>
<span *ngIf="putCodes && putCodes.length > 0"
uk-tooltip="Delete this work from your ORCID record">
<a (click)="currentAction='delete'; deleteWorks();"
[class]="'uk-button action uk-margin-top uk-flex uk-flex-middle '+ (showLoading ? 'uk-disabled' : '')">
<!-- <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="">{{" "}}-->
<!-- <svg *ngIf="!showLoading || currentAction!='delete'" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"-->
<!-- data-svg="minus">-->
<!-- <rect height="1" width="13" y="7" x="1" fill="#FF3D33"></rect>-->
<!-- </svg>-->
<span *ngIf="!showLoading || currentAction!='delete'" class="uk-icon uk-preserve">
<!-- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash">-->
<!-- <polyline fill="none" stroke="#FF3D33" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline>-->
<!-- <polyline fill="none" stroke="#FF3D33" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline>-->
<!-- <rect x="8" y="7" width="1" height="9" color="#FF3D33"></rect>-->
<!-- <rect x="11" y="7" width="1" height="9" color="#FF3D33"></rect>-->
<!-- <rect x="2" y="3" width="16" height="1" color="#FF3D33"></rect>-->
<!-- </svg>-->
<img src="assets/common-assets/common/bin.svg" width="16">
</span>
<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>
<!-- <span class="uk-margin-small-left">Delete from <span class="orcid-color">ORCID</span></span>-->
</a>
</span>
</ng-container> </ng-container>
<modal-alert #workModal [classTitle]="'landing-modal-header uk-padding-small'" <modal-alert #workModal [classTitle]="'landing-modal-header uk-padding-small'"