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

description editor ui fixes

This commit is contained in:
Sofia Papacharalampous 2024-04-25 14:07:58 +03:00
parent 10a8e93803
commit 279ae95b5a
4 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
dmp-frontend/src/app/ui/description/editor/description-editor.component.html
View File

@ -78,48 +78,64 @@
</div> </div>
</div> </div>
<div class="row editor-content"> <div class="row editor-content">
<div class="col-auto description-stepper"> <div class="col-12 col-md-3 pr-md-0">
<div class="stepper-back d-flex flex-direction-row"> <div class="stepper-back row">
<div class="d-flex align-items-center pr-2 back-to-dmp" (click)="backToDmp()"> <div class="col-auto d-flex align-items-center back-to-dmp" (click)="backToDmp()">
<mat-icon class="back-icon pointer">chevron_left</mat-icon> <mat-icon class="back-icon pointer">chevron_left</mat-icon>
<span class="pointer">{{'DESCRIPTION-EDITOR.ACTIONS.BACK-TO' | translate}}</span> <span class="pointer">{{'DESCRIPTION-EDITOR.ACTIONS.BACK-TO' | translate}}</span>
</div> </div>
<div class="col-auto dmp-label ml-3">{{'DESCRIPTION-EDITOR.DMP' | translate}}</div> <div class="col-auto dmp-label ml-1">{{'DESCRIPTION-EDITOR.DMP' | translate}}</div>
</div>
<div class="row stepper-title"> <div class="col-auto"><span>{{'DESCRIPTION-EDITOR.TOC.TITLE' | translate}}</span></div></div>
<div class="row stepper-options" id="stepper-options">
<div class="col-12 stepper-list">
<div class="row" *ngIf="!descriptionInfoValid()">
<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0, 'text-danger': countErrorsOfBaseInfoPage > 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} <span *ngIf="countErrorsOfBaseInfoPage > 0">({{ countErrorsOfBaseInfoPage }})</span></div>
</div>
<div class="row" *ngIf="descriptionInfoValid()">
<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
</div> </div>
<div class="stepper-title">{{'DESCRIPTION-EDITOR.TOC.TITLE' | translate}}</div>
<div class="stepper-options" id="stepper-options">
<div class="col stepper-list">
<div (click)="table0fContents.onToCentrySelected()" *ngIf="!descriptionInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0, 'text-danger': countErrorsOfBaseInfoPage > 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} <span *ngIf="countErrorsOfBaseInfoPage > 0">({{ countErrorsOfBaseInfoPage }})</span></div>
<div (click)="table0fContents.onToCentrySelected()" *ngIf="descriptionInfoValid()" class="main-info" [ngClass]="{'active': this.step === 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
<div class="row toc-pane-container" #boundary> <div class="row toc-pane-container" #boundary>
<div #spacer></div> <div #spacer></div>
<div class="col-12">
<app-table-of-contents [visibilityRulesService]="visibilityRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents [showErrors]="showtocentriesErrors" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hasFocus]="step > 0" [formGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" (entrySelected)="changeStep($event.entry, $event.execute)" [pageToFieldSetMap]="pageToFieldSetMap"></app-table-of-contents> <app-table-of-contents [visibilityRulesService]="visibilityRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents [showErrors]="showtocentriesErrors" [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" [hasFocus]="step > 0" [formGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" (entrySelected)="changeStep($event.entry, $event.execute)" [pageToFieldSetMap]="pageToFieldSetMap"></app-table-of-contents>
</div> </div>
</div> </div>
</div> </div>
<div class="stepper-actions"> </div>
<div mat-raised-button type="button" class="col-auto previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()"> <div class="row mt-2 stepper-actions justify-content-around">
<div class="col-auto mb-1">
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
<span class="material-icons">chevron_left</span> <span class="material-icons">chevron_left</span>
<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div> <div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
</div> </div>
</div>
<div *ngIf="this.step < this.maxStep" mat-raised-button type="button" class="col-auto stepper-btn description-next ml-auto" (click)="nextStep()"> <div *ngIf="this.step < this.maxStep" class="col-auto mb-1">
<div mat-raised-button type="button" class="stepper-btn description-next ml-auto" (click)="nextStep()">
<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div> <div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
<span class="material-icons">chevron_right</span> <span class="material-icons">chevron_right</span>
</div> </div>
<div *ngIf="!formGroup.get('descriptionTemplateId').value" mat-raised-button type="button" class="col-auto stepper-btn description-next next-disabled ml-auto"> </div>
<div *ngIf="!formGroup.get('descriptionTemplateId').value" class="col-auto mb-1">
<div mat-raised-button type="button" class="stepper-btn description-next next-disabled ml-auto">
<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div> <div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
<span class="material-icons">chevron_right</span> <span class="material-icons">chevron_right</span>
</div> </div>
<button [disabled]="saving" (click)="saveAndClose()" *ngIf="(step === maxStep) && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto"> </div>
<div *ngIf="(step === maxStep) && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" class="col-auto mb-1">
<button [disabled]="saving" (click)="saveAndClose()" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }} {{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}
</button> </button>
</div> </div>
<div class="col-auto pr-0"> </div>
<div class="row">
<div class="col-12">
<app-form-progress-indication class="col-12" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [isDescriptionEditor]="true"></app-form-progress-indication> <app-form-progress-indication class="col-12" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [isDescriptionEditor]="true"></app-form-progress-indication>
</div> </div>
</div> </div>
<div class="col-auto form" id="description-editor-form"> </div>
<div class="col-12 col-md form" id="description-editor-form">
<app-description-base-fields-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [description]="item" (formChanged)="formChanged()" (refresh)="fireRefreshDataEvent($event)"></app-description-base-fields-editor-component> <app-description-base-fields-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [description]="item" (formChanged)="formChanged()" (refresh)="fireRefreshDataEvent($event)"></app-description-base-fields-editor-component>
<app-description-form <app-description-form
*ngIf="formGroup && formGroup.get('properties')" *ngIf="formGroup && formGroup.get('properties')"

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

@ -280,7 +280,7 @@
height: calc(100vh - 600px); height: calc(100vh - 600px);
overflow-y: auto; overflow-y: auto;
.main-info { .main-info {
padding-left: .2rem; // padding-left: .2rem;
color: #21212194; color: #21212194;
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
@ -381,7 +381,7 @@
// width: calc(100% - 366px); // width: calc(100% - 366px);
position: relative; position: relative;
left: 362px; // left: 362px;
width: calc(100% - 366px); width: calc(100% - 366px);
overflow-y: auto; overflow-y: auto;
height: calc(100vh - 218px); height: calc(100vh - 218px);

8
dmp-frontend/src/app/ui/description/editor/table-of-contents/table-of-contents.component.scss
View File

@ -74,7 +74,7 @@ span {
// width: 100%; // width: 100%;
// } // }
.internal-table{ // .internal-table{
max-width: 320px; // max-width: 320px;
min-width: 320px; // min-width: 320px;
} // }

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

@ -114,7 +114,6 @@
</ol> </ol>
</div> </div>
</div> </div>
<!-- TODO -->
<div class="row justify-content-around" *ngIf="this.step !== 0"> <div class="row justify-content-around" *ngIf="this.step !== 0">
<div class="col-auto mb-1"> <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()"> <div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 1}" (click)="previousStep()">
@ -129,7 +128,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- TODO -->
<div class="row" *ngIf="this.step !== 0"> <div class="row" *ngIf="this.step !== 0">
<div class="col-12"> <div class="col-12">
<app-dmp-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup"></app-dmp-form-progress-indication> <app-dmp-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup"></app-dmp-form-progress-indication>