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

styling changes 

*dmp-bluprint-editor header, dmp sections (in progress)
This commit is contained in:
Sofia Papacharalampous 2024-03-15 18:05:00 +02:00
parent c0aaa00eb5
commit 030f59ac06
2 changed files with 171 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<!-- <div class="main-content"> -->
<div class="container-fluid dmp-blueprint-editor d-flex align-items-center">
<div class="container-fluid dmp-blueprint-editor d-flex flex-column">
<div class="row align-items-center mb-4" *ngIf="formGroup">
<div class="col-auto">
<h3 *ngIf="!isFinalized && !isNewVersion && isNew">{{'DMP-BLUEPRINT-EDITOR.TITLE.NEW' | translate}}</h3>
@ -91,22 +91,21 @@
</div>
<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropFields($event, sectionIndex)">
<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="d-flex align-items-center mb-4" [cdkDragDisabled]="formGroup.disabled">
<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="sections-wrapper d-flex align-items-center mb-4" [cdkDragDisabled]="formGroup.disabled">
<div class="section-fields-wrapper">
<div class="d-flex align-items-baseline">
<div class="mr-1">
<span style="font-size: 15px;">{{fieldIndex + 1}}</span>
<div class="section-field-index">
<span style="font-size: 18px;">{{fieldIndex + 1}}</span>
</div>
<div [hidden]="viewOnly" class="mr-1">
<div [hidden]="viewOnly" class="section-field-delete">
<button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
<div class="mr-1"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
</div>
<div class="section-field-sortable"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
<div class="d-flex flex-wrap mt-1">
<div class="col-auto w-100 mt-3">
<div class="section-field-category">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.CATEGORY' | translate}}</mat-label>
<mat-select [formControl]="field.get('category')" [disabled]="field.disabled" (selectionChange)="fieldCategoryChanged(sectionIndex, fieldIndex)">
@ -116,7 +115,7 @@
<mat-error *ngIf="field.get('category').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System">
<div class="section-field-system-type" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SYSTEM-FIELD-TYPE' | translate}}</mat-label>
<mat-select [formControl]="field.get('systemFieldType')" [disabled]="field.disabled">
@ -126,7 +125,7 @@
<mat-error *ngIf="field.get('systemFieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra">
<div class="section-field-data-type" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
<mat-select [formControl]="field.get('dataType')">
@ -138,7 +137,7 @@
<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType">
<div class="section-field-reference-type" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}</mat-label>
<app-single-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}" [required]="true" [formControl]="field.get('referenceTypeId')" [configuration]="referenceTypeService.singleAutocompleteConfiguration"></app-single-auto-complete>
@ -146,7 +145,7 @@
<mat-error *ngIf="field.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col" *ngIf="field.get('category').value != null">
<div class="section-field-label" *ngIf="field.get('category').value != null">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-LABEL' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="field.get('label')">
@ -154,7 +153,7 @@
<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col" *ngIf="field.get('category').value != null">
<div class="section-field-placeholder" *ngIf="field.get('category').value != null">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-PLACEHOLDER' | translate}}</mat-label>
<input matInput type="text" name="placeholder" [formControl]="field.get('placeholder')">
@ -162,7 +161,7 @@
<mat-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col" *ngIf="field.get('category').value != null">
<div class="section-field-description" *ngIf="field.get('category').value != null">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-DESCRIPTION' | translate}}</mat-label>
<input matInput type="text" name="description" [formControl]="field.get('description')">
@ -170,7 +169,7 @@
<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto w-100" *ngIf="field.get('category').value != null">
<div class="section-field-semantics" *ngIf="field.get('category').value != null">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}</mat-label>
<app-multiple-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}" [hidePlaceholder]="true" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="field.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
@ -179,7 +178,7 @@
<mat-error *ngIf="field.get('semantics').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="w-100 col-auto" *ngIf="field.get('category').value != null">
<div class="section-field-required" *ngIf="field.get('category').value != null">
<mat-checkbox [disabled]="field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Title || field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Description" [formControl]="field.get('required')"><span>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-REQUIRED' | translate}}</span></mat-checkbox>
<mat-error *ngIf="field.get('required').hasError('backendError')">{{field.get('required').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('required').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
@ -193,7 +192,7 @@
<div class="col-12">
<div class="row d-flex flex-column">
<div class="col-auto">
<div class="col-auto pl-2">
<mat-checkbox [formControl]="section.get('hasTemplates')" (change)="removeAllDescriptionTemplates($event, sectionIndex)">
{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}
</mat-checkbox>

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

@ -118,19 +118,158 @@
}
.field-delete{
align-items: center;
align-items: center;
display: flex;
cursor: pointer;
cursor: pointer;
.field-delete-icon{
font-size: 1.2em;
width: 14px;
color: var(--primary-color);
}
.field-delete-text{
font-size: 1em;
margin-left: 0.5em;
color: var(--primary-color);
}
}
.field-delete-icon{
font-size: 1.2em;
width: 14px;
color: var(--primary-color);
}
.field-delete-text{
font-size: 1em;
margin-left: 0.5em;
color: var(--primary-color);
}
}
.section-fields-wrapper {
width: 100%;
margin-top: 1.0rem;
display: flex;
flex-wrap: wrap; // ??
align-items: center;
@media (max-width: 1470px) {
flex-direction: column;
align-items: flex-start;
}
.section-field-index {
width: auto;
@media (max-width: 1470px) {
margin-left: 1.1rem;
// margin-left: 1.6rem;
}
}
.section-field-delete {
width: auto;
@media (max-width: 1470px) {
// margin-left: 0.5rem;
}
}
.section-field-sortable {
width: auto;
margin-top: 0.5rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0.7rem;
// margin-left: 1.2rem;
}
}
.section-field-category {
width: 10.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
}
}
.section-field-system-type {
width: 9.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
}
}
.section-field-data-type {
width: 9.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
}
}
.section-field-reference-type {
width: 9.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
}
}
.section-field-label {
width: 10.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
width: 100%;
}
}
.section-field-placeholder {
width: 10.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
}
}
.section-field-description {
width: 10.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
}
}
.section-field-semantics {
width: 12.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
}
}
.section-field-required {
width: 10.0rem;
margin-left: 0.5rem;
@media (max-width: 1470px) {
margin-top: 0;
width: 100%;
}
}
}