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

refactor mulitselect mode to use labels instead of buttons

Browse Source
This commit is contained in:
Art Lowel
2023-04-27 14:10:43 +02:00
parent da7c980ab1
commit a5c300aebd
2 changed files with 43 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
View File

@@ -25,20 +25,28 @@
<button type="button" class="btn btn-default" cdkTreeNodeToggle>
<span class="fas fa-angle-right fa-2x invisible" aria-hidden="true"></span>
</button>
<button class="btn btn-outline-link btn-sm text-left"
[class.text-success]="node.isSelected"
[disabled]="!node.item?.selectable"
[ngbTooltip]="node.item?.otherInformation?.note"
[openDelay]="500"
container="body"
(click)="onSelect(node.item)">
<span *ngIf="multiSelect" class="form-check">
<label *ngIf="multiSelect" class="d-flex align-items-center m-0 p-0 form-check"
[class.text-success]="node.isSelected"
[ngbTooltip]="node.item?.otherInformation?.note"
[openDelay]="500"
container="body"
>
<!-- checkbox (click) needs to be stopped, to prevent that button (click) gets called twice -->
<input class="form-check-input" type="checkbox" id="leaf-node-checkbox_{{node.item.id}}"
[checked]="node.isSelected" (click)="$event.stopPropagation()">
<label class="form-check-label" for="leaf-node-checkbox_{{node.item.id}}">{{node.item.display}}</label>
</span>
<span *ngIf="!multiSelect">{{node.item.display}}</span>
<input class="mr-2" type="checkbox"
[disabled]="!node.item?.selectable"
[checked]="node.isSelected"
(change)="onSelect(node.item)"
>
<span>{{node.item.display}}</span>
</label>
<button *ngIf="!multiSelect" class="btn btn-outline-link btn-sm text-left"
[class.text-success]="node.isSelected"
[disabled]="!node.item?.selectable"
[ngbTooltip]="node.item?.otherInformation?.note"
[openDelay]="500"
container="body"
(click)="onSelect(node.item)">
<span>{{node.item.display}}</span>
</button>
</cdk-tree-node>
@@ -51,21 +59,28 @@
aria-hidden="true"></span>
</button>
<button class="btn btn-outline-link btn-sm text-left"
<label *ngIf="multiSelect" class="d-flex align-items-center m-0 p-0 form-check"
[class.text-success]="node.isSelected"
[disabled]="!node.item?.selectable"
[ngbTooltip]="node.item?.otherInformation?.note"
[openDelay]="500"
container="body"
(click)="onSelect(node.item)">
<span *ngIf="multiSelect" class="form-check">
container="body">
<!-- checkbox (click) needs to be stopped, to prevent that button (click) gets called twice -->
<input class="form-check-input" type="checkbox" id="expandable-node-checkbox_{{node.item.id}}"
[checked]="node.isSelected" (click)="$event.stopPropagation()">
<label class="form-check-label" for="expandable-node-checkbox_{{node.item.id}}">{{node.item.display}}</label>
</span>
<span *ngIf="!multiSelect">{{node.item.display}}</span>
</button>
<input class="mr-2" type="checkbox"
[disabled]="!node.item?.selectable"
[checked]="node.isSelected"
(change)="onSelect(node.item)"
>
<span>{{node.item.display}}</span>
</label>
<button *ngIf="!multiSelect" class="btn btn-outline-link btn-sm text-left"
[class.text-success]="node.isSelected"
[disabled]="!node.item?.selectable"
[ngbTooltip]="node.item?.otherInformation?.note"
[openDelay]="500"
container="body"
(click)="onSelect(node.item)">
<span>{{node.item.display}}</span>
</button>
</cdk-tree-node>
<cdk-tree-node *cdkTreeNodeDef="let node; when: isLoadMore" cdkTreeNodePadding>

4
src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.scss
View File

@@ -5,3 +5,7 @@
cdk-tree .btn:focus {
box-shadow: none !important;
}
label {
cursor: pointer;
}