hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-18 07:23:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

[DURACOM-237] - Refactoring html based on @angular/cdk/drag-drop

Browse Source
This commit is contained in:
Simone Ramundi
2024-02-29 16:14:32 +01:00
parent 3807a3563c
commit 0c80b1a366
1 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/shared/form/chips/chips.component.html
View File

@@ -1,20 +1,17 @@
<div [className]="'float-left w-100 ' + wrapperClass"> <div [className]="'float-left w-100 ' + wrapperClass">
<div role="list" class="nav nav-pills d-flex flex-column flex-sm-row"> <div role="list" class="nav nav-pills d-flex flex-column flex-sm-row" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onDrop($event)">
<ng-container *ngFor="let c of chips.getChips(); let i = index"> <ng-container *ngFor="let c of chips.getChips(); let i = index">
<ng-template #tipContent> <ng-template #tipContent>
<p class="text-left p-0 m-0" *ngFor="let tip of tipText"> <p class="text-left p-0 m-0" *ngFor="let tip of tipText">
{{tip}} {{tip}}
</p> </p>
</ng-template> </ng-template>
<div role="listitem" class="nav-item mr-2 mb-1" cdkDrag (cdkDragStarted)="onDrag($event)"
<div role="listitem" class="nav-item mr-2 mb-1" #t="ngbTooltip"
#t="ngbTooltip" triggers="manual"
triggers="manual" [ngbTooltip]="tipContent"
[ngbTooltip]="tipContent" (mouseover)="showTooltip(t, i)"
(dragstart)="t.close();onDragStart(i)" (mouseout)="t.close()">
(dragend)="onDragEnd(i)"
(mouseover)="showTooltip(t, i)"
(mouseout)="t.close()">
<a class="flex-sm-fill text-sm-center nav-link active bg-info" <a class="flex-sm-fill text-sm-center nav-link active bg-info"
href="javascript:void(0);" href="javascript:void(0);"
[ngClass]="{'chip-selected disabled': (editable && c.editMode) || dragged == i}" [ngClass]="{'chip-selected disabled': (editable && c.editMode) || dragged == i}"
@@ -33,13 +30,19 @@
[authorityValue]="c.item[icon.metadata] || c.item" [authorityValue]="c.item[icon.metadata] || c.item"
[visibleWhenAuthorityEmpty]="icon.visibleWhenAuthorityEmpty" [visibleWhenAuthorityEmpty]="icon.visibleWhenAuthorityEmpty"
aria-hidden="true" aria-hidden="true"
(dragstart)="t.close();"
(mouseover)="showTooltip(t, i, icon.metadata)" (mouseover)="showTooltip(t, i, icon.metadata)"
(mouseout)="t.close()"></i> (mouseout)="t.close()"></i>
</ng-container> </ng-container>
<p class="chip-label text-truncate d-table-cell">{{c.display}}</p><i class="fas fa-times ml-2" (click)="removeChips($event, i)" [title]="'chips.remove' | translate"></i> <p class="chip-label text-truncate d-table-cell">{{c.display}}</p><i class="fas fa-times ml-2" (click)="removeChips($event, i)" [title]="'chips.remove' | translate"></i>
</span> </span>
</a> </a>
<div class="example-custom-placeholder" *cdkDragPlaceholder>
<div class="example-drag-preview nav-item mr-2 mb-1" *ngIf="(isDragging | async)">
{{ c.display }}
</div>
</div>
</div> </div>
</ng-container> </ng-container>
<div [class.chips-sort-ignore]="(isDragging | async)" class="flex-grow-1"> <div [class.chips-sort-ignore]="(isDragging | async)" class="flex-grow-1">