Better hover & keyboard interaction

This commit is contained in:
shamoon
2024-04-01 00:05:40 -07:00
parent 7a73ce8ad3
commit 7737b24d7d
3 changed files with 50 additions and 10 deletions

View File

@@ -9,11 +9,15 @@
</form>
<ng-template #resultItemTemplate let-item="item" let-nameProp="nameProp" let-type="type" let-icon="icon">
<div #resultItem ngbDropdownItem class="py-2 d-flex align-items-center focus-ring border-0 cursor-pointer" tabindex="-1" (click)="primaryAction(type, item)">
<div #resultItem ngbDropdownItem class="py-2 d-flex align-items-center focus-ring border-0 cursor-pointer" tabindex="-1"
(click)="primaryAction(type, item)"
(mouseenter)="onItemHover($event)">
<i-bs width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></i-bs>
<span class="text-truncate">{{item[nameProp]}}</span>
<div class="btn-group ms-auto">
<button #primaryButton type="button" class="btn btn-sm btn-outline-primary d-flex" (click)="primaryAction(type, item); $event.stopPropagation()">
<button #primaryButton type="button" class="btn btn-sm btn-outline-primary d-flex"
(click)="primaryAction(type, item); $event.stopPropagation()"
(mouseenter)="onButtonHover($event)">
@if (type === 'document' || type === 'workflow' || type === 'customField' || type === 'group' || type === 'user') {
<i-bs width="1em" height="1em" name="pencil"></i-bs>
<span class="">&nbsp;<ng-container i18n>Edit</ng-container></span>
@@ -23,7 +27,9 @@
}
</button>
@if (type !== 'workflow' && type !== 'customField' && type !== 'group' && type !== 'user') {
<button #secondaryButton type="button" class="btn btn-sm btn-outline-primary d-flex" (click)="secondaryAction(type, item); $event.stopPropagation()">
<button #secondaryButton type="button" class="btn btn-sm btn-outline-primary d-flex"
(click)="secondaryAction(type, item); $event.stopPropagation()"
(mouseenter)="onButtonHover($event)">
@if (type === 'document') {
<i-bs width="1em" height="1em" name="download"></i-bs>
<span class="">&nbsp;<ng-container i18n>Download</ng-container></span>