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

dmp-editor ui fixes

This commit is contained in:
Sofia Papacharalampous 2024-04-24 15:07:02 +03:00
parent 0f2e974556
commit a4c75c291d
2 changed files with 53 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
View File

@ -78,19 +78,26 @@
</div>
<div class="row">
<div class="col-auto dmp-stepper" *ngIf="this.step != 0">
<div class="stepper-title">{{'DMP-EDITOR.TITLE' | translate}}</div>
<div class="stepper-options">
<!-- <div class="col-auto dmp-stepper" *ngIf="this.step != 0"> -->
<div class="col-12 col-md-3 pr-md-0" *ngIf="this.step != 0">
<div class="row stepper-title">
<div class="col-12 pl-0">
<span>{{'DMP-EDITOR.TITLE' | translate}}</span>
</div>
</div>
<div class="row stepper-options">
<!-- try col-12 too -->
<div class="col-auto">
<ol class="stepper-list" start="1">
<div *ngIf="selectedBlueprint?.definition && this.step !== 0">
<!-- <div *ngIf="selectedBlueprint?.definition"> -->
<div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
<!-- <div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index"> -->
<ng-container *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
<li (click)="changeStep(i + 1)" [ngClass]="{'active': this.step === (i + 1), 'text-danger': hasErrors(section.id) }">{{section.label}}</li>
<ol class="descriptionsInSection">
<li *ngFor="let description of descriptionsInSection(section.id); let descriptionIndex = index" (click)="editDescription(description.id, false)" class="active-description">
<div class="d-flex flex-direction-row">
<div class="label" matTooltip="{{description.label}}">{{'DMP-EDITOR.DESCRIPTION' | translate}}: {{ description.label }}</div>
<mat-icon *ngIf="description.status !== descriptionStatusEnum.Finalized && canDeleteSection(section.id) && !formGroup.disabled" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" class="ml-2 mr-2 remove-description size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}" (click)="$event.stopPropagation(); removeDescription(description.id)">close</mat-icon>
<div (click)="$event.stopPropagation(); removeDescription(description.id)"><mat-icon *ngIf="description.status !== descriptionStatusEnum.Finalized && canDeleteSection(section.id) && !formGroup.disabled" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" class="ml-2 mr-2 remove-description size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}">close</mat-icon></div>
<mat-icon *ngIf="description.status === descriptionStatusEnum.Finalized" class="ml-2 mr-2 status-icon check-icon size-16" matTooltip="{{'TYPES.DESCRIPTION-STATUS.FINALIZED' | translate}}">check</mat-icon>
</div>
</li>
@ -102,26 +109,35 @@
</a>
</li>
</ul>
</div>
</ng-container>
</div>
</ol>
</div>
<div class="stepper-actions" *ngIf="this.step !== 0">
<div mat-raised-button type="button" class="col-auto previous stepper-btn mr-2 ml-auto" [ngClass]="{'previous-disabled': this.step === 1}" (click)="previousStep()">
</div>
<!-- TODO -->
<div class="row justify-content-around" *ngIf="this.step !== 0">
<div class="col-auto mb-1">
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 1}" (click)="previousStep()">
<span class="material-icons">chevron_left</span>
<div>{{'DMP-EDITOR.ACTIONS.PREVIOUS-STEP' | translate}}</div>
</div>
</div>
<div class="col-auto mb-1">
<div *ngIf="this.step < this.maxSteps" mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxSteps, 'next': this.step < selectedBlueprint?.definition?.sections?.length, 'description-next': this.step >= selectedBlueprint?.definition?.sections?.length }" (click)="nextStep()">
<div>{{'DMP-EDITOR.ACTIONS.NEXT-STEP' | translate}}</div>
<span class="material-icons">chevron_right</span>
</div>
</div>
<div class="col-auto pr-0" *ngIf="this.step !== 0">
</div>
<!-- TODO -->
<div class="row" *ngIf="this.step !== 0">
<div class="col-12">
<app-dmp-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup"></app-dmp-form-progress-indication>
</div>
</div>
</div>
<div class="col-auto form" id="editor-form" *ngIf="this.step !== 0">
<div class="col-12 col-md form" id="editor-form" *ngIf="this.step !== 0">
<div *ngIf="selectedBlueprint?.definition">
<div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
<div class="section-info" [hidden]="this.step !== (i + 1)">

2
dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.scss
View File

@ -243,7 +243,7 @@ mat-icon.size-16 {
// width: calc(100% - 366px);
position: relative;
left: 362px;
// left: 362px;
width: calc(100% - 366px);
overflow-y: auto;
height: calc(100vh - 218px);