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

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

@ -1,4 +1,5 @@
<div class="tenant-choose-dialog row"> <div class="container-fluid">
<div class="tenant-choose-dialog row">
<mat-card class="col-md-4 offset-md-4"> <mat-card class="col-md-4 offset-md-4">
<mat-card-header> <mat-card-header>
<h1 mat-card-title> {{'TENANT-CHOOSE-DIALOG.TITLE' | translate}}</h1> <h1 mat-card-title> {{'TENANT-CHOOSE-DIALOG.TITLE' | translate}}</h1>
@ -26,4 +27,5 @@
</form> </form>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div>
</div> </div>

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

@ -115,7 +115,9 @@
</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">
<div class="col-12">
<div class="frame mb-3 pt-4 pl-3 pr-5 pb-3">
<ng-container *ngIf="canFinalize && isDraftDescription(description) && !isLocked"> <ng-container *ngIf="canFinalize && isDraftDescription(description) && !isLocked">
<div class="col-12 d-flex align-items-center" (click)="finalize(description)"> <div class="col-12 d-flex align-items-center" (click)="finalize(description)">
<button mat-mini-fab class="finalize-btn"> <button mat-mini-fab class="finalize-btn">
@ -150,8 +152,12 @@
</button> </button>
</mat-menu> </mat-menu>
</div> </div>
</div>
</div>
</ng-container> </ng-container>
<div class="row frame mb-3 pt-4 pl-3 pr-3 pb-3"> <div class="row">
<div class="col-12">
<div class="frame mb-3 pt-4 pl-3 pr-3 pb-3">
<div class="col-12"> <div class="col-12">
<p class="header">{{ 'DESCRIPTION-OVERVIEW.DESCRIPTION-AUTHORS' | translate }}</p> <p class="header">{{ 'DESCRIPTION-OVERVIEW.DESCRIPTION-AUTHORS' | translate }}</p>
</div> </div>
@ -167,13 +173,11 @@
<p class="authors-role">{{ enumUtils.toDmpUserRoleString(dmpUser.role) }}</p> <p class="authors-role">{{ enumUtils.toDmpUserRoleString(dmpUser.role) }}</p>
</div> </div>
</div> </div>
<div class="col-12 authors" *ngIf="canInviteDmpUsers && description.dmp?.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner" > <div class="col-12" *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> <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"> <div *ngIf="canInviteDmpUsers" class="col-12 d-flex justify-content-center mt-2">
<button mat-raised-button class="invite-btn" (click)="openShareDialog()"> <button mat-raised-button class="invite-btn" (click)="openShareDialog()">
<mat-icon>group_add</mat-icon> <mat-icon>group_add</mat-icon>
@ -185,4 +189,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>

81
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,10 +138,15 @@
</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">
<div class="row doi-panel mb-3 pt-4 pb-3">
<div class="col d-flex align-items-center">
<span class="text-truncate">{{selectedModel.doi}}</span>
</div>
<div class="col-auto d-flex">
<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"> <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">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon> <mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button> </button>
@ -154,39 +159,50 @@
</div> </div>
</div> </div>
</ng-container> </ng-container>
<div class="frame mb-3 pt-4 pl-3 pr-5 pb-1" *ngIf="isAuthenticated()"> </div>
<div *ngIf="isDraftDmp() && canFinalizeDmp() && !isLocked"> </div>
<div class="row ml-0 mr-0 pl-4 d-flex align-items-center" (click)="finalize(dmp)"> </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"> <button mat-mini-fab class="finalize-btn">
<mat-icon class="mat-mini-fab-icon">check</mat-icon> <mat-icon class="mat-mini-fab-icon">check</mat-icon>
</button> </button>
<p class="mb-0 pl-2 finalize-txt">{{ 'DMP-OVERVIEW.ACTIONS.FINALIZE' | translate }}</p> <p class="mb-0 pl-2 finalize-txt">{{ 'DMP-OVERVIEW.ACTIONS.FINALIZE' | translate }}</p>
</div> </div>
<div class="row ml-0 mr-0 pl-4 d-flex align-items-center"> <div class="col-12 d-flex align-items-center">
<hr class="hr-line"> <hr class="hr-line">
</div> </div>
</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> <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>
<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"> <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"> <button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon> <mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
</button> </button>
<p class="mb-0 pl-2 frame-txt">{{ 'DMP-OVERVIEW.ACTIONS.REVERSE' | translate }}</p> <p class="mb-0 pl-2 frame-txt">{{ 'DMP-OVERVIEW.ACTIONS.REVERSE' | translate }}</p>
</div> </div>
<div *ngIf="canExportDmp() && fileTransformerService.availableFormats.length > 0" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center"> </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"> <button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon> <mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
</button> </button>
<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu"> <p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">{{ 'DMP-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
{{ 'DMP-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
</div> </div>
<div *ngIf="canCreateNewVersion()" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center" (click)="newVersionClicked()"> </ng-container>
<ng-container *ngIf="canCreateNewVersion()" (click)="newVersionClicked()">
<div class="col-12 d-flex align-items-center">
<button mat-mini-fab class="frame-btn"> <button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon> <mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon>
</button> </button>
<p class="mb-0 pl-2 frame-txt">{{ 'DMP-OVERVIEW.ACTIONS.NEW-VERSION' | translate }} <p class="mb-0 pl-2 frame-txt">{{ 'DMP-OVERVIEW.ACTIONS.NEW-VERSION' | translate }}</p>
</p>
</div> </div>
</ng-container>
<mat-menu #exportMenu="matMenu" xPosition="before"> <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)"> <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> <i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
@ -194,13 +210,20 @@
</button> </button>
</mat-menu> </mat-menu>
</div> </div>
<div class="frame mb-3 pt-4 pl-3 pr-3 pb-1"> </div>
<div class="row ml-0 mr-0 pl-4 pb-3"> </div>
</div>
</ng-container>
<div class="row">
<div class="col-12">
<div class="frame mb-3 pt-4 pl-4 pr-5 pb-3">
<div class="row">
<div class="col-12">
<p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p> <p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p>
</div> </div>
<div class="row ml-0 mr-0 pl-4 ml-2 pb-3 d-flex align-items-center"> <div class="col-12">
<div *ngFor="let dmpUser of dmp.dmpUsers" class="row authors"> <div *ngFor="let dmpUser of dmp.dmpUsers" class="row authors">
<div class="d-flex flex-row"> <div class="col-12 d-flex flex-row">
<button class="account_btn mr-3 pl-0"> <button class="account_btn mr-3 pl-0">
<mat-icon class="account-icon">account_circle</mat-icon> <mat-icon class="account-icon">account_circle</mat-icon>
</button> </button>
@ -212,10 +235,13 @@
<p class="authors-role">{{ enumUtils.toDmpUserRoleString(dmpUser.role) }}</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 *ngIf="canAssignDmpUsers(dmp) && dmp.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner" class="col-12">
<button (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"> </div>
<!-- <div *ngIf="canInviteDmpUsers()" class="col-12 d-flex align-items-center justify-content-center"> -->
<div class="col-12 d-flex align-items-center justify-content-center">
<button mat-raised-button class="invite-btn" (click)="openShareDialog(dmp.id,dmp.label)"> <button mat-raised-button class="invite-btn" (click)="openShareDialog(dmp.id,dmp.label)">
<mat-icon>group_add</mat-icon> <mat-icon>group_add</mat-icon>
{{'DMP-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}} {{'DMP-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}
@ -226,4 +252,7 @@
</div> </div>
</div> </div>
</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 {