paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-08-10 00:18:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Chore: refactor loading stuff to be more DRY

Browse Source
This commit is contained in:
shamoon
2024-12-09 12:36:48 -08:00
parent c2e34b36ce
commit 0a7c296194
34 changed files with 87 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@
<a class="btn-link text-decoration-none" header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>
}
<div content class="wrapper" [class.reveal]="reveal">
<div content class="wrapper fade" [class.show]="show">
@if (displayMode === DisplayMode.TABLE) {
<table class="table table-hover mb-0 mt-n2 align-middle">
<thead>
@@ -33,7 +33,7 @@
<tr>
@for (field of displayFields; track field; let j = $index) {
<td class="py-2 py-md-3 position-relative" [ngClass]="{ 'd-none d-md-table-cell': j > 1 }">
@if (loading && reveal) {
@if (loading && show) {
<div class="placeholder-glow text-start">
<span class="placeholder bg-secondary w-50" [ngStyle]="{ opacity: 1 - (i * 1/documents.length) }"></span>
</div>
@@ -94,9 +94,9 @@
@for (d of documents; track d.id; let i = $index) {
<pngx-document-card-small
class="p-0"
[ngStyle]="{ opacity: !loading && reveal ? 1 : 1 - (i * 1/documents.length) }"
[ngStyle]="{ opacity: !loading && show ? 1 : 1 - (i * 1/documents.length) }"
(dblClickDocument)="openDocumentDetail(d)"
[document]="!loading && reveal ? d : null"
[document]="!loading && show ? d : null"
[displayFields]="displayFields"
(clickTag)="clickTag($event)"
(clickCorrespondent)="clickCorrespondent($event)"
@@ -110,8 +110,8 @@
@for (d of documents; track d.id; let i = $index) {
<pngx-document-card-large
(dblClickDocument)="openDocumentDetail(d)"
[document]="!loading && reveal ? d : null"
[ngStyle]="{ opacity: !loading && reveal ? 1 : 1 - (i * 1/documents.length) }"
[document]="!loading && show ? d : null"
[ngStyle]="{ opacity: !loading && show ? 1 : 1 - (i * 1/documents.length) }"
[displayFields]="displayFields"
(clickTag)="clickTag($event)"
(clickCorrespondent)="clickCorrespondent($event)"

4
src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss
View File

@@ -2,13 +2,11 @@
transition: all .3s ease-out;
overflow: hidden;
max-height: 0;
opacity: .1;
width: 100%;
}
.reveal {
.show {
max-height: 1000px;
opacity: 1;
overflow: visible;
}

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

@@ -140,7 +140,7 @@ export class SavedViewWidgetComponent
.pipe(
takeUntil(this.unsubscribeNotifier),
tap((result) => {
this.reveal = true
this.show = true
this.documents = result.results
}),
delay(500)

2
src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
View File

@@ -1,4 +1,4 @@
<div class="card shadow-sm bg-light fade" [class.reveal]="reveal" cdkDrag [cdkDragDisabled]="!draggable" cdkDragPreviewContainer="parent">
<div class="card shadow-sm bg-light fade" [class.show]="show" cdkDrag [cdkDragDisabled]="!draggable" cdkDragPreviewContainer="parent">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex">

9
src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss
View File

@@ -1,12 +1,3 @@
i-bs {
cursor: move;
}
.card {
opacity: 0;
transition: opacity .2s;
}
.reveal {
opacity: 1;
}

6
src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts
View File

@@ -53,9 +53,9 @@ describe('WidgetFrameComponent', () => {
expect(fixture.debugElement.query(By.css('.spinner-border'))).not.toBeNull()
})
it('should reveal', () => {
expect(component.reveal).toBeFalsy()
it('should show', () => {
expect(component.show).toBeFalsy()
jest.advanceTimersByTime(100)
expect(component.reveal).toBeTruthy()
expect(component.show).toBeTruthy()
})
})

2
src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts
View File

@@ -25,7 +25,7 @@ export class WidgetFrameComponent
ngAfterViewInit(): void {
setTimeout(() => {
this.reveal = true
this.show = true
}, 100)
}
}