lgcosta/paperless-ngx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve dashboard preview mouseover behavior

Browse Source
This commit is contained in:
shamoon 2023-12-11 23:59:57 -08:00
parent 79207a41fe
commit 0ebf526420
3 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
View File

@ -17,7 +17,7 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let doc of documents" (mouseleave)="mouseLeaveCard()">
<tr *ngFor="let doc of documents" (mouseleave)="maybeClosePopover()">
<td class="py-2 py-md-3"><a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.created_date | customDate}}</a></td>
<td class="py-2 py-md-3">
<a routerLink="/documents/{{doc.id}}" title="Edit" i18n-title class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.title | documentTitle}}</a>
@ -30,13 +30,13 @@
<div class="btn-group position-absolute top-50 end-0 translate-middle-y">
<a [href]="getPreviewUrl(doc)" title="View Preview" i18n-title target="_blank" class="btn px-4 btn-dark border-dark-subtle"
[ngbPopover]="previewContent" [popoverTitle]="doc.title | documentTitle"
autoClose="true" popoverClass="shadow popover-preview" container="body" (mouseenter)="mouseEnterPreview(doc)" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover">
autoClose="true" popoverClass="shadow popover-preview" container="body" (mouseenter)="mouseEnterPreviewButton(doc)" (mouseleave)="mouseLeavePreviewButton()" #popover="ngbPopover">
<svg class="buttonicon-xs" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#eye"/>
</svg>
</a>
<ng-template #previewContent>
<pngx-preview-popup [document]="doc"></pngx-preview-popup>
<pngx-preview-popup [document]="doc" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()"></pngx-preview-popup>
</ng-template>
<a [href]="getDownloadUrl(doc)" class="btn px-4 btn-dark border-dark-subtle" title="Download" i18n-title (click)="$event.stopPropagation()">
<svg class="buttonicon-xs" fill="currentColor">

9
src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts
View File

@ -139,15 +139,18 @@ describe('SavedViewWidgetComponent', () => {
)
component.ngOnInit()
fixture.detectChanges()
component.mouseEnterPreview(documentResults[0])
component.mouseEnterPreviewButton(documentResults[0])
expect(component.popover.isOpen()).toBeTruthy()
expect(component.popoverHidden).toBeTruthy()
tick(600)
expect(component.popoverHidden).toBeFalsy()
component.mouseLeaveCard()
component.maybeClosePopover()
component.mouseEnterPreview(documentResults[1])
component.mouseEnterPreviewButton(documentResults[1])
tick(100)
component.mouseLeavePreviewButton()
component.mouseEnterPreview()
expect(component.popover.isOpen()).toBeTruthy()
component.mouseLeavePreview()
tick(600)
expect(component.popover.isOpen()).toBeFalsy()

27
src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
View File

@ -118,8 +118,11 @@ export class SavedViewWidgetComponent
return this.documentService.getDownloadUrl(document.id)
}
mouseEnterPreview(doc: PaperlessDocument) {
this.popover = this.popovers.get(this.documents.indexOf(doc))
mouseEnterPreviewButton(doc: PaperlessDocument) {
const newPopover = this.popovers.get(this.documents.indexOf(doc))
if (this.popover !== newPopover && this.popover?.isOpen())
this.popover.close()
this.popover = newPopover
this.mouseOnPreview = true
if (!this.popover.isOpen()) {
// we're going to open but hide to pre-load content during hover delay
@ -136,14 +139,24 @@ export class SavedViewWidgetComponent
}
}
mouseLeavePreview() {
this.mouseOnPreview = false
mouseEnterPreview() {
this.mouseOnPreview = true
}
mouseLeaveCard() {
console.log('leave card')
mouseLeavePreview() {
this.mouseOnPreview = false
this.maybeClosePopover()
}
this.popover?.close()
mouseLeavePreviewButton() {
this.mouseOnPreview = false
this.maybeClosePopover()
}
maybeClosePopover() {
setTimeout(() => {
if (!this.mouseOnPreview) this.popover?.close()
}, 300)
}
getCorrespondentQueryParams(correspondentId: number): Params {