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

styling changes in progress 

*dmp overview
This commit is contained in:
Sofia Papacharalampous 2024-04-02 19:08:46 +03:00
parent 27e6677a21
commit 7fe36b1505
4 changed files with 113 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<div class="main-content description-overview pl-5 pr-5"> <div class="main-content pl-5 pr-5">
<div class="container-fluid pl-0 pr-0"> <div class="container-fluid pl-0 pr-0">
<div *ngIf="description"> <div *ngIf="description">
<a class="row mb-2 pl-1" (click)="goBack()" role="button"> <a class="row mb-2 pl-1" (click)="goBack()" role="button">

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

@ -3,10 +3,6 @@
padding: 2em; padding: 2em;
} }
.description-overview {
// margin-top: 5rem;
}
// ********ICONS******** // ********ICONS********
.back-icon { .back-icon {

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

@ -6,36 +6,37 @@
<p class="label-txt pointer">{{'DMP-OVERVIEW.ACTIONS.BACK' | translate}}</p> <p class="label-txt pointer">{{'DMP-OVERVIEW.ACTIONS.BACK' | translate}}</p>
</a> </a>
<div class="row"> <div class="row">
<div class="col-md-8 col-lg-8 pl-4"> <div class="col-12 col-lg-8 pl-2">
<div class="row"> <div class="row">
<span class="dmp-logo">{{ 'DMP-OVERVIEW.TITLE' | translate }}</span> <div class="col-auto"><span class="dmp-logo">{{ 'DMP-OVERVIEW.TITLE' | translate }}</span></div>
<p class="dmp-label ml-3 mb-0">{{ dmp.label }}</p> <div class="col-auto d-flex"><span class="dmp-label">{{ dmp.label }}</span></div>
</div> </div>
<div class="row d-flex align-items-center mt-3 mb-4 label-txt"> <div class="row align-items-center mt-3 mb-4 label-txt">
<div *ngIf="isUserDmpRelated()" class="d-flex"> <div *ngIf="isUserDmpRelated()" class="col-auto d-flex">
<p class="ml-0 mb-0 label2-txt"> <p class="ml-0 mb-0 label2-txt">{{ enumUtils.toDmpUserRolesString(dmpService.getCurrentUserRolesInDmp(dmp?.dmpUsers)) }}
{{ enumUtils.toDmpUserRolesString(dmpService.getCurrentUserRolesInDmp(dmp?.dmpUsers)) }}
</div> </div>
<span *ngIf="isUserDmpRelated() && (isPublishedDmp() || isLocked)" class="ml-2 mr-2">.</span> <div *ngIf="isUserDmpRelated() && (isPublishedDmp() || isLocked)" class="col-auto"><span>.</span></div>
<div *ngIf="isPublishedDmp()" class="d-flex flex-row"> <div *ngIf="isPublishedDmp()" class="col-auto d-flex flex-row">
<mat-icon class="status-icon">public</mat-icon> <mat-icon class="status-icon">public</mat-icon>
{{'DMP-OVERVIEW.PUBLIC' | translate}} {{'DMP-OVERVIEW.PUBLIC' | translate}}
</div> </div>
<span *ngIf="isPublishedDmp() && isLocked" class="ml-2 mr-2">.</span> <div *ngIf="isPublishedDmp() && isLocked" class="col-auto"><span>.</span></div>
<div *ngIf="isLocked" class="d-flex flex-row"> <div *ngIf="isLocked" class="col-auto d-flex flex-row">
<mat-icon class="status-icon">lock_outline</mat-icon> <mat-icon class="status-icon">lock_outline</mat-icon>
{{'DMP-OVERVIEW.LOCKED' | translate}} {{'DMP-OVERVIEW.LOCKED' | translate}}
</div> </div>
<mat-form-field appearance="outline" subscriptSizing="dynamic" class="dense-3 versions-select ml-3 mr-3"> <div class="col-auto">
<mat-form-field appearance="outline" subscriptSizing="dynamic" class="dense-3 versions-select">
<mat-select placeholder="{{'DMP-OVERVIEW.VERSION' | translate}} {{dmp.version}}" [(ngModel)]="version" (ngModelChange)="versionChanged(version.id)"> <mat-select placeholder="{{'DMP-OVERVIEW.VERSION' | translate}} {{dmp.version}}" [(ngModel)]="version" (ngModelChange)="versionChanged(version.id)">
<mat-option *ngFor="let version of pastVersions" [value]="version"> <mat-option *ngFor="let version of pastVersions" [value]="version">
{{'DMP-OVERVIEW.VERSION' | translate}} {{version.version}}</mat-option> {{'DMP-OVERVIEW.VERSION' | translate}} {{version.version}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div class="d-flex mr-4">{{'DMP-OVERVIEW.EDITED' | translate}} : </div>
<div class="col-auto d-flex">{{'DMP-OVERVIEW.EDITED' | translate}} :
{{dmp.updatedAt | dateTimeCultureFormatter: "d MMMM y"}} {{dmp.updatedAt | dateTimeCultureFormatter: "d MMMM y"}}
</div> </div>
<div class="d-flex mr-4"> <div class="col-auto d-flex">
<div *ngIf="dmp.status== dmpStatusEnum.Finalized" class="d-flex flex-row uppercase"> <div *ngIf="dmp.status== dmpStatusEnum.Finalized" class="d-flex flex-row uppercase">
<mat-icon class="status-icon">check</mat-icon> <mat-icon class="status-icon">check</mat-icon>
{{'DMP-OVERVIEW.FINALISED' | translate}} {{'DMP-OVERVIEW.FINALISED' | translate}}
@ -44,68 +45,86 @@
</div> </div>
<div class="row"> <div class="row">
<!-- <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"> -->
<button *ngIf="canEditDmp() && !isLocked" (click)="editClicked()" 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">
<button (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">create</mat-icon> <mat-icon class="mat-mini-fab-icon">create</mat-icon>
</button> </button>
<button *ngIf="canCloneDmp()" (click)="cloneClicked()" mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above"> </div>
<div *ngIf="canCloneDmp()" class="col-auto pr-0">
<button (click)="cloneClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.CLONE' | 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>
<button *ngIf="canDeleteDmp() && !isLocked" (click)="deleteClicked()" mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above"> </div>
<div *ngIf="canDeleteDmp() && !isLocked" class="col-auto pr-0">
<button (click)="deleteClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">delete</mat-icon> <mat-icon class="mat-mini-fab-icon">delete</mat-icon>
</button> </button>
</div> </div>
<div *ngIf="referenceService.hasRerefenceOfTypes(dmp?.dmpReferences, [this.referenceTypeService.getGrantReferenceType()])">
<div class="row header">{{'DMP-OVERVIEW.GRANT' | translate}}</div>
<div class="row dmp-label">{{referenceService.getReferencesForTypesFirstSafe(dmp?.dmpReferences, [this.referenceTypeService.getGrantReferenceType()])?.reference?.label}}</div>
</div> </div>
<div class="row header">{{'DESCRIPTION-OVERVIEW.RESEARCHERS' | translate}}</div> <ng-container *ngIf="referenceService.hasRerefenceOfTypes(dmp?.dmpReferences, [this.referenceTypeService.getGrantReferenceType()])">
<div class="row header"><div class="col-auto">{{'DMP-OVERVIEW.GRANT' | translate}}</div></div>
<div class="row dmp-label"><div class="col-auto">{{referenceService.getReferencesForTypesFirstSafe(dmp?.dmpReferences, [this.referenceTypeService.getGrantReferenceType()])?.reference?.label}}</div></div>
</ng-container>
<div class="row header"><div class="col-auto">{{'DESCRIPTION-OVERVIEW.RESEARCHERS' | translate}}</div></div>
<div class="row"> <div class="row">
<div *ngFor="let dmpReference of researchers let last = last"> <div class="col-12">
<span *ngIf="isOrcid(dmpReference.reference)"> <ng-container *ngFor="let dmpReference of researchers let last = last">
<ng-container *ngIf="isOrcid(dmpReference.reference)">
<div class="d-inline-block">
<a href="{{ getOrcidPathForResearcher(dmpReference.reference?.reference) }}" target="blank" class="researcher"> <a href="{{ getOrcidPathForResearcher(dmpReference.reference?.reference) }}" target="blank" class="researcher">
<div class="id-btn">&nbsp;</div> <span class="id-btn">&nbsp;</span>
<div *ngIf="!last">{{ dmpReference.reference?.label }}, </div> <span *ngIf="!last">{{ dmpReference.reference?.label }},</span><span>&nbsp;</span>
<div *ngIf="last">{{ dmpReference.reference?.label }}</div> <span *ngIf="last">{{ dmpReference.reference?.label }}</span>
</a> </a>
</span>
<span *ngIf="!isOrcid(dmpReference.reference)">
<div *ngIf="!last">{{ dmpReference.reference?.label }}, </div>
<div *ngIf="last">{{ dmpReference.reference?.label }}</div>
</span>
</div> </div>
<span *ngIf="!researchers || researchers.length === 0" class="material-icons">horizontal_rule</span> </ng-container>
<ng-container *ngIf="!isOrcid(dmpReference.reference)" class="col-auto pr-0">
<div class="d-inline-block">
<span *ngIf="!last">{{ dmpReference.reference?.label }},</span><span>&nbsp;</span>
<span *ngIf="last">{{ dmpReference.reference?.label }}</span>
</div> </div>
<div class="row header">{{'DMP-OVERVIEW.DESCRIPTION' | translate}}</div> </ng-container>
</ng-container>
</div>
<div *ngIf="!researchers || researchers.length === 0" class="col-12"><span class="material-icons">horizontal_rule</span></div>
</div>
<div class="row header"><div class="col-12">{{'DMP-OVERVIEW.DESCRIPTION' | translate}}</div></div>
<div class="row" *ngIf="dmp.description"> <div class="row" *ngIf="dmp.description">
<div class="col-12">
<p class="desc-txt" [innerHTML]="dmp.description"></p> <p class="desc-txt" [innerHTML]="dmp.description"></p>
</div> </div>
</div>
<div class="row" *ngIf="!dmp.description"> <div class="row" *ngIf="!dmp.description">
<div class="col-12">
<span class="material-icons">horizontal_rule</span> <span class="material-icons">horizontal_rule</span>
</div> </div>
<div class="row header">{{'DMP-OVERVIEW.DESCRIPTIONS' | translate}}</div> </div>
<div class="d-flex flex-column"> <div class="row header"><div class="col-12">{{'DMP-OVERVIEW.DESCRIPTIONS' | translate}}</div></div>
<div *ngFor="let description of dmp.descriptions"> <div class="row">
<a class="row description" [routerLink]="isPublicView ? ['/descriptions/overview/public/' + description.id] : ['/descriptions/overview/' + description.id]" target="_blank"> <ng-container *ngFor="let description of dmp.descriptions">
<button mat-raised-button class="mb-2 mr-2 pl-0 pr-0 h-100"> <div class="col-12 col-lg-7 mt-1">
<div matTooltip="{{ description.label }}" class="col-auto" [ngClass]="{'description-btn': description.status === descriptionStatusEnum.Draft, 'description-finalized-btn': description.status === descriptionStatusEnum.Finalized}"> <a class="w-100 description" [routerLink]="isPublicView ? ['/descriptions/overview/public/' + description.id] : ['/descriptions/overview/' + description.id]" target="_blank">
<button class="w-100" [ngClass]="{'dmp-btn': description.status === descriptionStatusEnum.Draft, 'dmp-finalized-btn': description.status === descriptionStatusEnum.Finalized}">
<div matTooltip="{{ description.label }}" class="d-flex align-items-center justify-content-between">
<div class="description-btn-label">{{ description.label }}</div> <div class="description-btn-label">{{ description.label }}</div>
<mat-icon>launch</mat-icon> <mat-icon>launch</mat-icon>
</div> </div>
</button> </button>
</a> </a>
</div> </div>
<div class="row" *ngIf="!dmp.descriptions || dmp.descriptions.length === 0"> </ng-container>
<div class="col-12" *ngIf="!dmp.descriptions || dmp.descriptions.length === 0">
<span class="material-icons">horizontal_rule</span> <span class="material-icons">horizontal_rule</span>
</div> </div>
</div> </div>
<div class="row mt-2 add-description-txt" *ngIf="!isLocked"> <!-- <div class="row mt-2 add-description-txt" *ngIf="!isLocked">
<a class="add-description-btn" *ngIf="canEditDmp()" [routerLink]="['/plans/edit/' + dmp.id]" target="_blank"> <a class="add-description-btn" *ngIf="canEditDmp()" [routerLink]="['/plans/edit/' + dmp.id]" target="_blank">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
{{'DMP-OVERVIEW.ACTIONS.ADD-DESCRIPTION' | translate}} {{'DMP-OVERVIEW.ACTIONS.ADD-DESCRIPTION' | translate}}
</a> </a>
</div> -->
</div> </div>
</div> <div class="col-12 col-lg-4">
<div class="col-md-4 col-lg-4 p-0">
<ng-container *ngIf="!hasDoi(dmp)"> <ng-container *ngIf="!hasDoi(dmp)">
<div class="row ml-0 mr-0 mb-3"> <div class="row ml-0 mr-0 mb-3">
<span class="col-auto pl-0">{{'DMP-OVERVIEW.DOI-PROVIDED' | translate}}: </span> <span class="col-auto pl-0">{{'DMP-OVERVIEW.DOI-PROVIDED' | translate}}: </span>

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

@ -5,10 +5,6 @@
padding: 2em; padding: 2em;
} }
.dmp-overview {
//margin-top: 5rem;
}
// ********ICONS******** // ********ICONS********
.back-icon { .back-icon {
@ -47,7 +43,7 @@
} }
.description-btn { .description-btn {
width: 36.1em; // width: 36.1em;
padding: 0 1.1em; padding: 0 1.1em;
background-color: var(--secondary-color); background-color: var(--secondary-color);
border-radius: 4px; border-radius: 4px;
@ -57,7 +53,7 @@
} }
.description-finalized-btn { .description-finalized-btn {
width: 36.1em; // width: 36.1em;
padding: 0 1.1em; padding: 0 1.1em;
background-color: #b2f772; background-color: #b2f772;
border-radius: 4px; border-radius: 4px;
@ -178,19 +174,20 @@
} }
.desc-txt { .desc-txt {
width: 48.25em; // width: 48.25em;
font-size: 1em; font-size: 1em;
color: #212121; color: #212121;
margin-bottom: 1.875em; margin-bottom: 1.875em;
} }
.description { // .description {
width: fit-content; // width: fit-content;
} // }
.description-btn-label { .description-btn-label {
margin-right: 1em; margin-right: 1em;
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: #212121;
@ -331,3 +328,21 @@
.select-repo { .select-repo {
border-bottom: 1px solid #212121; border-bottom: 1px solid #212121;
} }
.dmp-btn {
min-height: 2.3em;
background-color: var(--secondary-color);
border-radius: 4px;
flex-direction: row;
justify-content: space-between;
border: none;
}
.dmp-finalized-btn {
min-height: 2.3em;
background-color: #b2f772;
border-radius: 4px;
flex-direction: row;
justify-content: space-between;
border: none;
}