MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

ui fixes on dmp and description overview

This commit is contained in:
Sofia Papacharalampous 2024-04-03 12:46:21 +03:00
parent fcc3dd7609
commit da0633e4c0
4 changed files with 208 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
dmp-frontend/src/app/ui/auth/login/post-login/post-login.component.html
View File

@ -1,29 +1,31 @@
<div class="tenant-choose-dialog row"> <div class="container-fluid">
<mat-card class="col-md-4 offset-md-4"> <div class="tenant-choose-dialog row">
<mat-card-header> <mat-card class="col-md-4 offset-md-4">
<h1 mat-card-title> {{'TENANT-CHOOSE-DIALOG.TITLE' | translate}}</h1> <mat-card-header>
</mat-card-header> <h1 mat-card-title> {{'TENANT-CHOOSE-DIALOG.TITLE' | translate}}</h1>
<mat-card-content> </mat-card-header>
<form *ngIf="formGroup" class="dialog-form" (ngSubmit)="formSubmit()" [formGroup]="formGroup"> <mat-card-content>
<div class="row"> <form *ngIf="formGroup" class="dialog-form" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
<mat-form-field appearance="fill" class="col-md-12"> <div class="row">
<mat-label>{{'TENANT-CHOOSE-DIALOG.FIELDS.TENANT-CODE' | translate}}</mat-label> <mat-form-field appearance="fill" class="col-md-12">
<mat-select formControlName="tenantCode"> <mat-label>{{'TENANT-CHOOSE-DIALOG.FIELDS.TENANT-CODE' | translate}}</mat-label>
<mat-option *ngFor="let tenant of tenants" [value]="tenant.code"> <mat-select formControlName="tenantCode">
{{tenant.code}} <mat-option *ngFor="let tenant of tenants" [value]="tenant.code">
</mat-option> {{tenant.code}}
</mat-select> </mat-option>
<mat-error *ngIf="formGroup.get('tenantCode').hasError('backendError')">{{formGroup.get('tenantCode').getError('backendError')?.message}}</mat-error> </mat-select>
<mat-error *ngIf="formGroup.get('tenantCode').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('tenantCode').hasError('backendError')">{{formGroup.get('tenantCode').getError('backendError')?.message}}</mat-error>
</mat-form-field> <mat-error *ngIf="formGroup.get('tenantCode').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
</div> </mat-form-field>
<div class="col-12 pt-2">
<div class="row editor-actions">
<div class="col"><button mat-raised-button color="button" (click)="cancel()" type="button">{{'TENANT-CHOOSE-DIALOG.ACTIONS.BACK' | translate}}</button></div>
<div class="col-auto"><button mat-raised-button color="primary" (click)="save($event)" type="primary">{{'TENANT-CHOOSE-DIALOG.ACTIONS.SUBMIT' | translate}}</button></div>
</div> </div>
</div> <div class="col-12 pt-2">
</form> <div class="row editor-actions">
</mat-card-content> <div class="col"><button mat-raised-button color="button" (click)="cancel()" type="button">{{'TENANT-CHOOSE-DIALOG.ACTIONS.BACK' | translate}}</button></div>
</mat-card> <div class="col-auto"><button mat-raised-button color="primary" (click)="save($event)" type="primary">{{'TENANT-CHOOSE-DIALOG.ACTIONS.SUBMIT' | translate}}</button></div>
</div>
</div>
</form>
</mat-card-content>
</mat-card>
</div>
</div> </div>

128
dmp-frontend/src/app/ui/description/overview/description-overview.component.html
View File

@ -115,70 +115,76 @@
</div> </div>
<div class="col-12 col-lg-4"> <div class="col-12 col-lg-4">
<ng-container *ngIf="isAuthenticated()"> <ng-container *ngIf="isAuthenticated()">
<div class="row frame mb-3 pt-4 pl-3 pr-5 pb-3"> <div class="row">
<ng-container *ngIf="canFinalize && isDraftDescription(description) && !isLocked"> <div class="col-12">
<div class="col-12 d-flex align-items-center" (click)="finalize(description)"> <div class="frame mb-3 pt-4 pl-3 pr-5 pb-3">
<button mat-mini-fab class="finalize-btn"> <ng-container *ngIf="canFinalize && isDraftDescription(description) && !isLocked">
<mat-icon class="mat-mini-fab-icon check-icon">check</mat-icon> <div class="col-12 d-flex align-items-center" (click)="finalize(description)">
</button> <button mat-mini-fab class="finalize-btn">
<p class="mb-0 pl-2 frame-txt">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.FINALIZE' | translate }}</p> <mat-icon class="mat-mini-fab-icon check-icon">check</mat-icon>
</div> </button>
<div class="col-12 d-flex align-items-center"> <p class="mb-0 pl-2 frame-txt">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.FINALIZE' | translate }}</p>
<hr class="hr-line"> </div>
</div> <div class="col-12 d-flex align-items-center">
</ng-container> <hr class="hr-line">
<ng-container *ngIf="hasReversableStatus(description)"> </div>
<div class="col-12 mb-3 d-flex align-items-center" (click)="reverseFinalization(description)"> </ng-container>
<button mat-mini-fab class="frame-btn"> <ng-container *ngIf="hasReversableStatus(description)">
<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon> <div class="col-12 mb-3 d-flex align-items-center" (click)="reverseFinalization(description)">
</button> <button mat-mini-fab class="frame-btn">
<p class="mb-0 mr-0 pl-2 frame-txt">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.REVERSE' | translate }}</p> <mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
</div> </button>
</ng-container> <p class="mb-0 mr-0 pl-2 frame-txt">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.REVERSE' | translate }}</p>
<ng-container *ngIf="fileTransformerService.availableFormats.length > 0"> </div>
<div class="col-12 d-flex align-items-center"> </ng-container>
<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu"> <ng-container *ngIf="fileTransformerService.availableFormats.length > 0">
<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon> <div class="col-12 d-flex align-items-center">
</button> <button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate }}</p> <mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
</div> </button>
</ng-container> <p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
<mat-menu #exportMenu="matMenu" xPosition="before"> </div>
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDescription(description.id, fileTransformer.repositoryId, fileTransformer.format)"> </ng-container>
<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i> <mat-menu #exportMenu="matMenu" xPosition="before">
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.format.toUpperCase() | translate}}</span> <button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDescription(description.id, fileTransformer.repositoryId, fileTransformer.format)">
</button> <i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
</mat-menu> <span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.format.toUpperCase() | translate}}</span>
</div> </button>
</ng-container> </mat-menu>
<div class="row frame mb-3 pt-4 pl-3 pr-3 pb-3">
<div class="col-12">
<p class="header">{{ 'DESCRIPTION-OVERVIEW.DESCRIPTION-AUTHORS' | translate }}</p>
</div>
<div class="col-12">
<div *ngFor="let dmpUser of description.dmp?.dmpUsers" class="row authors">
<div class="col-12 d-flex flex-row">
<button class="account_btn mr-3 pl-0">
<mat-icon class="account-icon">account_circle</mat-icon>
</button>
<div>
<p class="authors-label">{{ dmpUser.user?.name }}</p>
<p *ngIf="isUserAuthor(dmpUser.user?.id)">({{ 'DESCRIPTION-OVERVIEW.YOU' | translate }})</p>
<p class="authors-role">{{ enumUtils.toDmpUserRoleString(dmpUser.role) }}</p>
</div>
</div>
<div class="col-12 authors" *ngIf="canInviteDmpUsers && description.dmp?.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner" >
<div class="d-flex flex-row">
<button (click)="removeUserFromDmp(dmpUser)" class="remove-btn">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="canInviteDmpUsers" class="col-12 d-flex justify-content-center mt-2"> </ng-container>
<button mat-raised-button class="invite-btn" (click)="openShareDialog()"> <div class="row">
<mat-icon>group_add</mat-icon> <div class="col-12">
{{'DESCRIPTION-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}} <div class="frame mb-3 pt-4 pl-3 pr-3 pb-3">
</button> <div class="col-12">
<p class="header">{{ 'DESCRIPTION-OVERVIEW.DESCRIPTION-AUTHORS' | translate }}</p>
</div>
<div class="col-12">
<div *ngFor="let dmpUser of description.dmp?.dmpUsers" class="row authors">
<div class="col-12 d-flex flex-row">
<button class="account_btn mr-3 pl-0">
<mat-icon class="account-icon">account_circle</mat-icon>
</button>
<div>
<p class="authors-label">{{ dmpUser.user?.name }}</p>
<p *ngIf="isUserAuthor(dmpUser.user?.id)">({{ 'DESCRIPTION-OVERVIEW.YOU' | translate }})</p>
<p class="authors-role">{{ enumUtils.toDmpUserRoleString(dmpUser.role) }}</p>
</div>
</div>
<div class="col-12" *ngIf="canInviteDmpUsers && description.dmp?.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner" >
<button (click)="removeUserFromDmp(dmpUser)" class="remove-btn">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}</button>
</div>
</div>
</div>
<div *ngIf="canInviteDmpUsers" class="col-12 d-flex justify-content-center mt-2">
<button mat-raised-button class="invite-btn" (click)="openShareDialog()">
<mat-icon>group_add</mat-icon>
{{'DESCRIPTION-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

187
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
View File

@ -43,7 +43,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row" *ngIf="(canEditDmp() && !isLocked) || canCloneDmp() || (canDeleteDmp() && !isLocked)">
<!-- <button *ngIf="isDraftDmp(dmp) && isDmpOwner(dmp) && !isLocked" (click)="editClicked(dmp)" mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above"> --> <!-- <button *ngIf="isDraftDmp(dmp) && isDmpOwner(dmp) && !isLocked" (click)="editClicked(dmp)" mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above"> -->
<div *ngIf="canEditDmp() && !isLocked" class="col-auto pr-0"> <div *ngIf="canEditDmp() && !isLocked" class="col-auto pr-0">
<button (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above"> <button (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
@ -100,7 +100,7 @@
</div> </div>
</div> </div>
<div class="row header"><div class="col-12">{{'DMP-OVERVIEW.DESCRIPTIONS' | translate}}</div></div> <div class="row header"><div class="col-12">{{'DMP-OVERVIEW.DESCRIPTIONS' | translate}}</div></div>
<div class="row"> <div class="row mb-4">
<ng-container *ngFor="let description of dmp.descriptions"> <ng-container *ngFor="let description of dmp.descriptions">
<div class="col-12 col-lg-7 mt-1"> <div class="col-12 col-lg-7 mt-1">
<a class="w-100 description" [routerLink]="isPublicView ? ['/descriptions/overview/public/' + description.id] : ['/descriptions/overview/' + description.id]" target="_blank"> <a class="w-100 description" [routerLink]="isPublicView ? ['/descriptions/overview/public/' + description.id] : ['/descriptions/overview/' + description.id]" target="_blank">
@ -126,8 +126,8 @@
</div> </div>
<div class="col-12 col-lg-4"> <div class="col-12 col-lg-4">
<ng-container *ngIf="!hasDoi(dmp)"> <ng-container *ngIf="!hasDoi(dmp)">
<div class="row ml-0 mr-0 mb-3"> <div class="row mb-3">
<span class="col-auto pl-0">{{'DMP-OVERVIEW.DOI-PROVIDED' | translate}}: </span> <div class="col-auto"><span>{{'DMP-OVERVIEW.DOI-PROVIDED' | translate}}: </span></div>
<ng-container *ngIf="selectedModel"> <ng-container *ngIf="selectedModel">
<div class="col"> <div class="col">
<mat-select class="select-repo" [placeholder]="selectedModel.repositoryId"> <mat-select class="select-repo" [placeholder]="selectedModel.repositoryId">
@ -138,89 +138,118 @@
</div> </div>
</ng-container> </ng-container>
</div> </div>
<div class="row d-flex flex-column ml-0 mr-0 mb-3"> <div class="row align-items-center">
<div *ngIf="dmp.entityDois && selectedModel" class="doi-panel"> <div class="col-12">
<span class="ml-3 mr-3">{{selectedModel.doi}}</span> <ng-container *ngIf="dmp.entityDois && selectedModel">
<div class="d-flex justify-content-end ml-3"> <div class="container">
<button (click)="copyDoi(selectedModel.doi)" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.COPY' | translate}}" matTooltipPosition="above"> <div class="row doi-panel mb-3 pt-4 pb-3">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon> <div class="col d-flex align-items-center">
</button> <span class="text-truncate">{{selectedModel.doi}}</span>
<button *ngIf="depositRepos?.length > 0" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.VISIT-WEBSITE' | translate}}" matTooltipPosition="above"> </div>
<a [href]="createDoiLink(selectedModel)" class="doi-link" target="_blank"> <div class="col-auto d-flex">
<mat-icon class="mat-mini-fab-icon">launch</mat-icon> <button (click)="copyDoi(selectedModel.doi)" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.COPY' | translate}}" matTooltipPosition="above">
</a> <mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button> </button>
<button *ngIf="depositRepos?.length > 0" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.VISIT-WEBSITE' | translate}}" matTooltipPosition="above">
<a [href]="createDoiLink(selectedModel)" class="doi-link" target="_blank">
<mat-icon class="mat-mini-fab-icon">launch</mat-icon>
</a>
</button>
</div>
</div>
</div>
</ng-container>
</div>
</div>
</ng-container>
<ng-container *ngIf="isAuthenticated()">
<div class="row">
<div class="col-12">
<div class="frame mb-3 pt-4 pl-4 pr-5 pb-3">
<div class="row">
<ng-container *ngIf="isDraftDmp() && canFinalizeDmp() && !isLocked">
<div class="col-12 d-flex align-items-center" (click)="finalize(dmp)">
<button mat-mini-fab class="finalize-btn">
<mat-icon class="mat-mini-fab-icon">check</mat-icon>
</button>
<p class="mb-0 pl-2 finalize-txt">{{ 'DMP-OVERVIEW.ACTIONS.FINALIZE' | translate }}</p>
</div>
<div class="col-12 d-flex align-items-center">
<hr class="hr-line">
</div>
</ng-container>
<app-dmp-deposit-dropdown *ngIf="(hasDoi(dmp) || moreDeposit()) && isFinalizedDmp(dmp) && !this.isPublicView && canDepositDmp(dmp) && inputRepos.length > 0" [inputRepos]="inputRepos" [dmp]="dmp" (outputReposEmitter)="afterDeposit($event)"></app-dmp-deposit-dropdown>
<ng-container *ngIf="isFinalizedDmp(dmp) && hasDoi(dmp) && !isPublishedDmp(dmp) && canFinalizeDmp(dmp)" (click)="reverseFinalization()">
<div class="col-12 d-flex align-items-center">
<button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
</button>
<p class="mb-0 pl-2 frame-txt">{{ 'DMP-OVERVIEW.ACTIONS.REVERSE' | translate }}</p>
</div>
</ng-container>
<ng-container *ngIf="canExportDmp() && fileTransformerService.availableFormats.length > 0">
<div class="col-12 d-flex align-items-center">
<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
</button>
<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">{{ 'DMP-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
</div>
</ng-container>
<ng-container *ngIf="canCreateNewVersion()" (click)="newVersionClicked()">
<div class="col-12 d-flex align-items-center">
<button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon>
</button>
<p class="mb-0 pl-2 frame-txt">{{ 'DMP-OVERVIEW.ACTIONS.NEW-VERSION' | translate }}</p>
</div>
</ng-container>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDmp(dmp.id, fileTransformer.repositoryId, fileTransformer.format)">
<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer?.format?.toUpperCase() | translate}}</span>
</button>
</mat-menu>
</div>
</div> </div>
</div> </div>
</div> </div>
</ng-container> </ng-container>
<div class="frame mb-3 pt-4 pl-3 pr-5 pb-1" *ngIf="isAuthenticated()"> <div class="row">
<div *ngIf="isDraftDmp() && canFinalizeDmp() && !isLocked"> <div class="col-12">
<div class="row ml-0 mr-0 pl-4 d-flex align-items-center" (click)="finalize(dmp)"> <div class="frame mb-3 pt-4 pl-4 pr-5 pb-3">
<button mat-mini-fab class="finalize-btn"> <div class="row">
<mat-icon class="mat-mini-fab-icon">check</mat-icon> <div class="col-12">
</button> <p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p>
<p class="mb-0 pl-2 finalize-txt">{{ 'DMP-OVERVIEW.ACTIONS.FINALIZE' | translate }}</p> </div>
</div> <div class="col-12">
<div class="row ml-0 mr-0 pl-4 d-flex align-items-center"> <div *ngFor="let dmpUser of dmp.dmpUsers" class="row authors">
<hr class="hr-line"> <div class="col-12 d-flex flex-row">
</div> <button class="account_btn mr-3 pl-0">
</div> <mat-icon class="account-icon">account_circle</mat-icon>
<app-dmp-deposit-dropdown *ngIf="(hasDoi(dmp) || moreDeposit()) && isFinalizedDmp(dmp) && !this.isPublicView && canDepositDmp(dmp) && inputRepos.length > 0" [inputRepos]="inputRepos" [dmp]="dmp" (outputReposEmitter)="afterDeposit($event)"></app-dmp-deposit-dropdown> </button>
<div *ngIf="isFinalizedDmp(dmp) && hasDoi(dmp) && !isPublishedDmp(dmp) && canFinalizeDmp(dmp)" (click)="reverseFinalization()" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center"> <div>
<button mat-mini-fab class="frame-btn"> <p class="authors-label">{{ dmpUser.user?.name }}
<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon> <span *ngIf="isUserAuthor(dmpUser.user?.id)">
</button> ({{ 'DMP-OVERVIEW.YOU' | translate }})</span>
<p class="mb-0 pl-2 frame-txt">{{ 'DMP-OVERVIEW.ACTIONS.REVERSE' | translate }}</p> </p>
</div> <p class="authors-role">{{ enumUtils.toDmpUserRoleString(dmpUser.role) }}</p>
<div *ngIf="canExportDmp() && fileTransformerService.availableFormats.length > 0" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center"> </div>
<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu"> </div>
<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon> <div *ngIf="canAssignDmpUsers(dmp) && dmp.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner" class="col-12">
</button> <button (click)="removeUserFromDmp(dmpUser)" class="remove-btn">{{ 'DMP-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}</button>
<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu"> </div>
{{ 'DMP-OVERVIEW.ACTIONS.EXPORT' | translate }}</p> </div>
</div> </div>
<div *ngIf="canCreateNewVersion()" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center" (click)="newVersionClicked()"> <!-- <div *ngIf="canInviteDmpUsers()" class="col-12 d-flex align-items-center justify-content-center"> -->
<button mat-mini-fab class="frame-btn"> <div class="col-12 d-flex align-items-center justify-content-center">
<mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon> <button mat-raised-button class="invite-btn" (click)="openShareDialog(dmp.id,dmp.label)">
</button> <mat-icon>group_add</mat-icon>
<p class="mb-0 pl-2 frame-txt">{{ 'DMP-OVERVIEW.ACTIONS.NEW-VERSION' | translate }} {{'DMP-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}
</p> </button>
</div>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDmp(dmp.id, fileTransformer.repositoryId, fileTransformer.format)">
<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer?.format?.toUpperCase() | translate}}</span>
</button>
</mat-menu>
</div>
<div class="frame mb-3 pt-4 pl-3 pr-3 pb-1">
<div class="row ml-0 mr-0 pl-4 pb-3">
<p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p>
</div>
<div class="row ml-0 mr-0 pl-4 ml-2 pb-3 d-flex align-items-center">
<div *ngFor="let dmpUser of dmp.dmpUsers" class="row authors">
<div class="d-flex flex-row">
<button class="account_btn mr-3 pl-0">
<mat-icon class="account-icon">account_circle</mat-icon>
</button>
<div>
<p class="authors-label">{{ dmpUser.user?.name }}
<span *ngIf="isUserAuthor(dmpUser.user?.id)">
({{ 'DMP-OVERVIEW.YOU' | translate }})</span>
</p>
<p class="authors-role">{{ enumUtils.toDmpUserRoleString(dmpUser.role) }}</p>
</div> </div>
</div> </div>
<button *ngIf="canAssignDmpUsers(dmp) && dmp.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner" (click)="removeUserFromDmp(dmpUser)" class="remove-btn">{{ 'DMP-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}</button>
</div> </div>
</div> </div>
<div *ngIf="canInviteDmpUsers()" class="row mt-3 mb-3 d-flex align-items-center justify-content-center">
<button mat-raised-button class="invite-btn" (click)="openShareDialog(dmp.id,dmp.label)">
<mat-icon>group_add</mat-icon>
{{'DMP-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}
</button>
</div>
</div> </div>
</div> </div>
</div> </div>

6
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
View File

@ -11,7 +11,7 @@
opacity: 0.4; opacity: 0.4;
} }
.mat-mini-fab { .mat-mdc-mini-fab {
width: 2.5em; width: 2.5em;
height: 2.5em; height: 2.5em;
background-color: var(--primary-color); background-color: var(--primary-color);
@ -216,7 +216,7 @@
} }
.doi-panel { .doi-panel {
height: 3.5em; // height: 3.5em;
background: #fafafa; background: #fafafa;
border: 1px solid #d1d1d1; border: 1px solid #d1d1d1;
border-radius: 4px; border-radius: 4px;
@ -233,7 +233,7 @@
box-shadow: 0px 1px 5px #00000026; box-shadow: 0px 1px 5px #00000026;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
min-width: 18.5em; //min-width: 18.5em;
} }
.frame-txt { .frame-txt {