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

description template editor: made drag and drop more user friendly

This commit is contained in:
Sofia Papacharalampous 2024-05-28 14:37:11 +03:00
parent 7407fc6c39
commit 572f970c1e
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dmp-frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.html
View File

@ -57,10 +57,12 @@
<mat-card-content> <mat-card-content>
<mat-card-header *ngIf="(fieldset.get('id').value === selectedFieldSetId) && !viewOnly"> <mat-card-header *ngIf="(fieldset.get('id').value === selectedFieldSetId) && !viewOnly">
<mat-icon class="handle" (mousedown)="enableReordering()" <mat-icon *ngIf="reorderingMode" class="handle dragpan enabled-dragpan">drag_indicator</mat-icon>
style="display:inline-block; margin: 0px auto; cursor: grab;transform: rotate(90deg); opacity: 0.3;">drag_indicator</mat-icon> <button mat-icon-button class="ml-auto mr-auto" *ngIf="!reorderingMode" (click)="enableReordering()">
<mat-icon class="handle dragpan">drag_indicator</mat-icon>
</button>
</mat-card-header> </mat-card-header>
<app-description-template-editor-composite-field-component [reorderingMode]="reorderingMode && fieldset.get('id').value === selectedFieldSetId" [form]="fieldset" <app-description-template-editor-composite-field-component [reorderingMode]="reorderingMode" [form]="fieldset"
[viewOnly]="viewOnly" [numbering]="numbering + '.'+ (i+1)" [viewOnly]="viewOnly" [numbering]="numbering + '.'+ (i+1)"
[hasFocus]="fieldset.get('id').value === selectedFieldSetId" [hasFocus]="fieldset.get('id').value === selectedFieldSetId"
[datasetProfileId]="datasetProfileId" [datasetProfileId]="datasetProfileId"

13
dmp-frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss
View File

@ -78,3 +78,16 @@ $blue-color-light: #5cf7f2;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
} }
.dragpan {
transform: rotate(90deg);
opacity: 0.3;
&.enabled-dragpan {
display:inline-block;
margin: 0px auto;
cursor: grab;
color: var(--secondary-color);
opacity: 0.6 !important;
}
}