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> </tr>
</thead> </thead>
<tbody> <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}}" 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"> <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> <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"> <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" <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" [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"> <svg class="buttonicon-xs" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#eye"/> <use xlink:href="assets/bootstrap-icons.svg#eye"/>
</svg> </svg>
</a> </a>
<ng-template #previewContent> <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> </ng-template>
<a [href]="getDownloadUrl(doc)" class="btn px-4 btn-dark border-dark-subtle" title="Download" i18n-title (click)="$event.stopPropagation()"> <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"> <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() component.ngOnInit()
fixture.detectChanges() fixture.detectChanges()
component.mouseEnterPreview(documentResults[0]) component.mouseEnterPreviewButton(documentResults[0])
expect(component.popover.isOpen()).toBeTruthy() expect(component.popover.isOpen()).toBeTruthy()
expect(component.popoverHidden).toBeTruthy() expect(component.popoverHidden).toBeTruthy()
tick(600) tick(600)
expect(component.popoverHidden).toBeFalsy() expect(component.popoverHidden).toBeFalsy()
component.mouseLeaveCard() component.maybeClosePopover()
component.mouseEnterPreview(documentResults[1]) component.mouseEnterPreviewButton(documentResults[1])
tick(100) tick(100)
component.mouseLeavePreviewButton()
component.mouseEnterPreview()
expect(component.popover.isOpen()).toBeTruthy()
component.mouseLeavePreview() component.mouseLeavePreview()
tick(600) tick(600)
expect(component.popover.isOpen()).toBeFalsy() 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) return this.documentService.getDownloadUrl(document.id)
} }
mouseEnterPreview(doc: PaperlessDocument) { mouseEnterPreviewButton(doc: PaperlessDocument) {
this.popover = this.popovers.get(this.documents.indexOf(doc)) 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 this.mouseOnPreview = true
if (!this.popover.isOpen()) { if (!this.popover.isOpen()) {
// we're going to open but hide to pre-load content during hover delay // we're going to open but hide to pre-load content during hover delay
@ -136,14 +139,24 @@ export class SavedViewWidgetComponent
} }
} }
mouseLeavePreview() { mouseEnterPreview() {
this.mouseOnPreview = false this.mouseOnPreview = true
} }
mouseLeaveCard() { mouseLeavePreview() {
console.log('leave card') 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 { getCorrespondentQueryParams(correspondentId: number): Params {