Chore: refactor loading stuff to be more DRY

diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf
index d37d90dca4682ad962c9456239ea6321b6c8bafa..d0023595758f51f2dff974845a228a249d53586b 100644 (file)
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
@@ -5177,7 +5177,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-card-small/document-card-small.component.ts</context>
-          <context context-type="linenumber">79</context>
+          <context context-type="linenumber">89</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2504502765849142619" datatype="html">

diff --git a/src-ui/src/app/components/admin/trash/trash.component.html b/src-ui/src/app/components/admin/trash/trash.component.html
index f1e065c2cc4b8687293c67171c0543fdcd03b177..55388d4cddc5836af9dd805f89d3f296aebffd38 100644 (file)
--- a/src-ui/src/app/components/admin/trash/trash.component.html
+++ b/src-ui/src/app/components/admin/trash/trash.component.html
@@ -47,7 +47,7 @@
                 </tr>
             }
             @for (document of documentsInTrash; track document.id) {
-                <tr (click)="toggleSelected(document); $event.stopPropagation();" (mouseleave)="popupPreview.close()" class="data-row" [class.reveal]="reveal">
+                <tr (click)="toggleSelected(document); $event.stopPropagation();" (mouseleave)="popupPreview.close()" class="data-row fade" [class.show]="show">
                     <td>
                     <div class="form-check m-0 ms-2 me-n2">
                         <input type="checkbox" class="form-check-input" id="{{document.id}}" [checked]="selectedDocuments.has(document.id)" (click)="toggleSelected(document); $event.stopPropagation();">

diff --git a/src-ui/src/app/components/admin/trash/trash.component.scss b/src-ui/src/app/components/admin/trash/trash.component.scss
index 648aa7f4d77dfa9b3ee96908ef794c570d1d06ae..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644 (file)
--- a/src-ui/src/app/components/admin/trash/trash.component.scss
+++ b/src-ui/src/app/components/admin/trash/trash.component.scss
@@ -1,8 +0,0 @@
-.data-row {
-    opacity: 0;
-    transition: opacity .2s;
-}
-
-.reveal {
-    opacity: 1;
-}

diff --git a/src-ui/src/app/components/admin/trash/trash.component.ts b/src-ui/src/app/components/admin/trash/trash.component.ts
index 5f312cc505f18c90d2bfbb4c93f2fae6ef4159df..543717f6bdfe03930e327c4733298bdbd053d46f 100644 (file)
--- a/src-ui/src/app/components/admin/trash/trash.component.ts
+++ b/src-ui/src/app/components/admin/trash/trash.component.ts
@@ -50,7 +50,7 @@ export class TrashComponent
         delay(100)
       )
       .subscribe(() => {
-        this.reveal = true
+        this.show = true
       })
   }
 

diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
index 2cce1a848033ca182c21a0312e407d43fb18c14a..e52272787833afab27c5d0d1afd932858b160e29 100644 (file)
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
@@ -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)"

diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss
index 54156b448f01a6b8224d2e317e13f140a0828887..0228e796c3ca20f8ace8d496fe4f4a5071203f4b 100644 (file)
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss
@@ -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;
 }
 

diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
index fccf007b590fcb55c2a074d7c3e3ab3b5d99f770..db89df138ce0a8a8ebd1cd19d4302f493b2be7a5 100644 (file)
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
@@ -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)

diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
index 5f0091dc5df6057d7dc510401865210932c277c5..5ec00f50051cf2ab5b6dc3882c1103cdacbecc8e 100644 (file)
--- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
@@ -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">

diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss
index 521a97c6b7270ade5e1f16c267a5432e42c6626c..4efdb0876bf868a0ca351e30240b337771b0970d 100644 (file)
--- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss
+++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss
@@ -1,12 +1,3 @@
 i-bs {
     cursor: move;
 }
-
-.card {
-    opacity: 0;
-    transition: opacity .2s;
-}
-
-.reveal {
-    opacity: 1;
-}

diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts
index cfd7edb3da933fd7aa0fd2a78003b02d6df87342..b6e8d85157a1b521388e1a96cac8993681bb8776 100644 (file)
--- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts
+++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts
@@ -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()
   })
 })

diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts
index 0ebe3b5ea4bec86d1977b0a691ae39d2a69bf6aa..dbef53da85027f35a4bfd9796874e1ae5bece7eb 100644 (file)
--- a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts
@@ -25,7 +25,7 @@ export class WidgetFrameComponent
 
   ngAfterViewInit(): void {
     setTimeout(() => {
-      this.reveal = true
+      this.show = true
     }, 100)
   }
 }

diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index 810fea0294e06fad7751346da76c991089e3a95d..46399aa3271f5078f2f3d9f7b3c59d30da7a6d0b 100644 (file)
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -1,4 +1,4 @@
-<div class="card document-card-large mb-3 shadow-sm bg-light placeholder-glow" [class.card-selected]="selected" [class.document-card]="selectable" (mouseleave)="mouseLeaveCard()">
+<div class="card document-card-large mb-3 shadow-sm bg-light placeholder-glow fade" [class.show]="show" [class.card-selected]="selected" [class.document-card]="selectable" (mouseleave)="mouseLeaveCard()">
   <div class="row g-0">
     <div class="col-md-2 doc-img-container rounded-start" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit()">
       @if (document) {

diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
index 8905d3ff233cfdf2c67432a8a7c1e305f9aec176..9fca1140df2d7280314dc4fc8d9d36f2ad3ebbea 100644 (file)
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
@@ -71,6 +71,14 @@ describe('DocumentCardLargeComponent', () => {
     component = fixture.componentInstance
     component.document = doc
     fixture.detectChanges()
+    jest.useFakeTimers()
+  })
+
+  it('should show the card', () => {
+    expect(component.show).toBeFalsy()
+    component.ngAfterViewInit()
+    jest.advanceTimersByTime(100)
+    expect(component.show).toBeTruthy()
   })
 
   it('should display a document', () => {

diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
index d33cef9f372b53b759521cd0af54e4740e0a5daa..de655ec2ea528ed82085cb0fc3a7ec68b49f0b77 100644 (file)
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   Component,
   EventEmitter,
   Input,
@@ -13,7 +14,7 @@ import {
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
 
 @Component({
@@ -21,7 +22,10 @@ import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.
   templateUrl: './document-card-large.component.html',
   styleUrls: ['./document-card-large.component.scss'],
 })
-export class DocumentCardLargeComponent extends ComponentWithPermissions {
+export class DocumentCardLargeComponent
+  extends LoadingComponentWithPermissions
+  implements AfterViewInit
+{
   DisplayField = DisplayField
 
   constructor(
@@ -70,6 +74,12 @@ export class DocumentCardLargeComponent extends ComponentWithPermissions {
   mouseOnPreview = false
   popoverHidden = true
 
+  ngAfterViewInit(): void {
+    setInterval(() => {
+      this.show = true
+    }, 100)
+  }
+
   get searchScoreClass() {
     if (this.document.__search_hit__) {
       if (this.document.__search_hit__.score > 0.7) {

diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index 7b1b9bc936640577839b4fc94f60ee3a4b6f0d40..cde273dfec28286612ca1b6f918f6f6f6a9ff7d3 100644 (file)
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -1,4 +1,4 @@
-<div class="col p-2 h-100">
+<div class="col p-2 h-100 fade" [class.show]="show">
   <div class="card h-100 shadow-sm document-card" [class.placeholder-glow]="!document" [class.card-selected]="selected" (mouseleave)="mouseLeaveCard()">
     <div class="border-bottom doc-img-container rounded-top" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit(this)">
       @if (document) {

diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts
index 7bdb0c3f804579164d977b23d0d2cb48eb2a59d6..c9a232c5cfda37d3bfb762586a450108a576fddf 100644 (file)
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts
@@ -85,6 +85,14 @@ describe('DocumentCardSmallComponent', () => {
     component = fixture.componentInstance
     component.document = Object.assign({}, doc)
     fixture.detectChanges()
+    jest.useFakeTimers()
+  })
+
+  it('should show the card', () => {
+    expect(component.show).toBeFalsy()
+    component.ngAfterViewInit()
+    jest.advanceTimersByTime(100)
+    expect(component.show).toBeTruthy()
   })
 
   it('should display page count', () => {

diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
index f8705fa8e64ed0b4139e75a2d3c839ccd60feed6..44f7e69cb7df09ec7c65c0bff51acb46a971e5fe 100644 (file)
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   Component,
   EventEmitter,
   Input,
@@ -14,7 +15,7 @@ import {
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
 
 @Component({
@@ -22,7 +23,10 @@ import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.
   templateUrl: './document-card-small.component.html',
   styleUrls: ['./document-card-small.component.scss'],
 })
-export class DocumentCardSmallComponent extends ComponentWithPermissions {
+export class DocumentCardSmallComponent
+  extends LoadingComponentWithPermissions
+  implements AfterViewInit
+{
   DisplayField = DisplayField
 
   constructor(
@@ -63,6 +67,12 @@ export class DocumentCardSmallComponent extends ComponentWithPermissions {
 
   @ViewChild('popupPreview') popupPreview: PreviewPopupComponent
 
+  ngAfterViewInit(): void {
+    setInterval(() => {
+      this.show = true
+    }, 50)
+  }
+
   getIsThumbInverted() {
     return this.settingsService.get(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED)
   }

diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
index ae7c1f5f0080e1ee5817d899ee0295aab425b705..32c2a1908598e554098d358e73439036414685bb 100644 (file)
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
@@ -1,6 +1,6 @@
 <div class="row flex-wrap row-gap-3" tourAnchor="tour.documents-filter-editor">
   <div class="col">
-    <div class="form-inline d-flex align-items-center fade" [class.reveal]="reveal">
+    <div class="form-inline d-flex align-items-center fade" [class.show]="show">
       <div class="input-group input-group-sm flex-fill w-auto flex-nowrap">
         <div ngbDropdown>
           <button class="btn btn-sm btn-outline-primary" ngbDropdownToggle>{{textFilterTargetName}}</button>
@@ -36,7 +36,7 @@
     <div class="d-flex flex-wrap gap-3">
       <div class="d-flex flex-wrap gap-2">
         @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.Tag) && tags.length > 0) {
-          <pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Tags" icon="tag-fill" i18n-title
+          <pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Tags" icon="tag-fill" i18n-title
           filterPlaceholder="Filter tags" i18n-filterPlaceholder
           [items]="tags"
           [manyToOne]="true"
@@ -49,7 +49,7 @@
           shortcutKey="t"></pngx-filterable-dropdown>
         }
         @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.Correspondent) && correspondents.length > 0) {
-          <pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Correspondent" icon="person-fill" i18n-title
+          <pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Correspondent" icon="person-fill" i18n-title
           filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
           [items]="correspondents"
           [(selectionModel)]="correspondentSelectionModel"
@@ -61,7 +61,7 @@
           shortcutKey="y"></pngx-filterable-dropdown>
         }
         @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.DocumentType) && documentTypes.length > 0) {
-            <pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Document type" icon="file-earmark-fill" i18n-title
+            <pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Document type" icon="file-earmark-fill" i18n-title
             filterPlaceholder="Filter document types" i18n-filterPlaceholder
             [items]="documentTypes"
             [(selectionModel)]="documentTypeSelectionModel"
@@ -73,7 +73,7 @@
             shortcutKey="u"></pngx-filterable-dropdown>
         }
         @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.StoragePath) && storagePaths.length > 0) {
-          <pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Storage path" icon="folder-fill" i18n-title
+          <pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Storage path" icon="folder-fill" i18n-title
           filterPlaceholder="Filter storage paths" i18n-filterPlaceholder
           [items]="storagePaths"
           [(selectionModel)]="storagePathSelectionModel"
@@ -86,12 +86,12 @@
         }
 
         @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.CustomField) && customFields.length > 0) {
-          <pngx-custom-fields-query-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Custom fields" icon="ui-radios" i18n-title
+          <pngx-custom-fields-query-dropdown class="flex-fill fade" [class.show]="show" title="Custom fields" icon="ui-radios" i18n-title
           [(selectionModel)]="customFieldQueriesModel"
           (selectionModelChange)="updateRules()"
           ></pngx-custom-fields-query-dropdown>
         }
-        <pngx-dates-dropdown class="flex-fill fade" [class.reveal]="reveal"
+        <pngx-dates-dropdown class="flex-fill fade" [class.show]="show"
           title="Dates" i18n-title
           (datesSet)="updateRules()"
           [(createdDateBefore)]="dateCreatedBefore"
@@ -101,7 +101,7 @@
           [(addedDateAfter)]="dateAddedAfter"
           [(addedRelativeDate)]="dateAddedRelativeDate">
         </pngx-dates-dropdown>
-        <pngx-permissions-filter-dropdown class="flex-fill fade" [class.reveal]="reveal"
+        <pngx-permissions-filter-dropdown class="flex-fill fade" [class.show]="show"
           title="Permissions" i18n-title
           (ownerFilterSet)="updateRules()"
         [(selectionModel)]="permissionsSelectionModel"></pngx-permissions-filter-dropdown>

diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss
index 5304721c698a9b702a7fbdfafae2a014dacec649..82ad7e7a5a620c7b34239165ebe0da029d659809 100644 (file)
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss
@@ -25,7 +25,3 @@ input[type="text"] {
 .z-10 {
   z-index: 10;
 }
-
-.reveal {
-  opacity: 1;
-}

diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
index e34e6652498220c343576fac33ff6b1ff06a5986..f9e5ec36e954fcae7a6cd8c19c293d4b714fd258 100644 (file)
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
@@ -961,7 +961,7 @@ export class FilterEditorComponent
     this.loadingCount++
     if (this.loadingCount == this.loadingCountTotal) {
       this.loading = false
-      this.reveal = true
+      this.show = true
     }
   }
 

diff --git a/src-ui/src/app/components/loading-component/loading.component.spec.ts b/src-ui/src/app/components/loading-component/loading.component.spec.ts
index 091745ce98297df0d278c18da5aecbc1926ecf19..82ae0a01401bd0b70dd7a8e2c9ca3482874be2c7 100644 (file)
--- a/src-ui/src/app/components/loading-component/loading.component.spec.ts
+++ b/src-ui/src/app/components/loading-component/loading.component.spec.ts
@@ -29,8 +29,8 @@ describe('LoadingComponentWithPermissions', () => {
     expect(component.loading).toBeTruthy()
   })
 
-  it('should have reveal set to false by default', () => {
-    expect(component.reveal).toBeFalsy()
+  it('should have show set to false by default', () => {
+    expect(component.show).toBeFalsy()
   })
 
   it('should call next and complete on unsubscribeNotifier with itself on destroy', () => {

diff --git a/src-ui/src/app/components/loading-component/loading.component.ts b/src-ui/src/app/components/loading-component/loading.component.ts
index dcd8340a4bf6792061fd48c845b054c5822f58ed..62c963c1dd61c545cb5c830f3cbec1432b51fc4e 100644 (file)
--- a/src-ui/src/app/components/loading-component/loading.component.ts
+++ b/src-ui/src/app/components/loading-component/loading.component.ts
@@ -8,7 +8,7 @@ export abstract class LoadingComponentWithPermissions
   implements OnDestroy
 {
   public loading: boolean = true
-  public reveal: boolean = false
+  public show: boolean = false
 
   protected unsubscribeNotifier: Subject<any> = new Subject()
 

diff --git a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html
index 291520b831de4d3c7a4e34bb2d77b355f32f4c69..185e9da3532afb11c4a26f0d985821b110c8e726 100644 (file)
--- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html
+++ b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.html
@@ -13,7 +13,7 @@
 <ul class="list-group">
 
   <li class="list-group-item">
-    <div class="row reveal">
+    <div class="row">
       <div class="col" i18n>Name</div>
       <div class="col" i18n>Data Type</div>
       <div class="col" i18n>Actions</div>
@@ -29,7 +29,7 @@
 
   @for (field of fields; track field) {
     <li class="list-group-item">
-      <div class="row" [class.reveal]="reveal">
+      <div class="row fade" [class.show]="show">
         <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editField(field)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.CustomField)">{{field.name}}</button></div>
         <div class="col d-flex align-items-center">{{getDataType(field)}}</div>
         <div class="col">

diff --git a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.scss b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.scss
index 22a61847c453dcc3de58413f773dbb598716f384..dfdd204330e1b4ef8f9e4daf70003f480c4902d4 100644 (file)
--- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.scss
+++ b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.scss
@@ -2,12 +2,3 @@
 .d-block.d-sm-none .dropdown-toggle::after {
     display: none;
 }
-
-.list-group-item .row {
-    opacity: 0;
-    transition: opacity .2s;
-}
-
-.list-group-item .reveal {
-    opacity: 1;
-}

diff --git a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts
index 7bf4066b9d0bb43021192cb7f75c1687ba02a903..106a8872151bf4b40236670facaf1c5065d3c4e7 100644 (file)
--- a/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts
+++ b/src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts
@@ -54,7 +54,7 @@ export class CustomFieldsComponent
         delay(100)
       )
       .subscribe(() => {
-        this.reveal = true
+        this.show = true
         this.loading = false
       })
   }

diff --git a/src-ui/src/app/components/manage/mail/mail.component.html b/src-ui/src/app/components/manage/mail/mail.component.html
index 090afe0cda5f7602e20bd35b0001f99ac55e9147..9b6fe04235538cb4cd873b3815a34a75fd8d4dca 100644 (file)
--- a/src-ui/src/app/components/manage/mail/mail.component.html
+++ b/src-ui/src/app/components/manage/mail/mail.component.html
@@ -26,7 +26,7 @@
   </h4>
   <ul class="list-group">
     <li class="list-group-item">
-      <div class="row reveal">
+      <div class="row">
         <div class="col" i18n>Name</div>
         <div class="col" i18n>Server</div>
         <div class="col d-none d-sm-block" i18n>Username</div>
@@ -43,7 +43,7 @@
 
     @for (account of mailAccounts; track account) {
       <li class="list-group-item">
-        <div class="row" [class.reveal]="revealAccounts">
+        <div class="row fade" [class.show]="showAccounts">
           <div class="col d-flex align-items-center">
             <button class="btn btn-link p-0 text-start" type="button" (click)="editMailAccount(account)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailAccount)">
               {{account.name}}@switch (account.account_type) {
@@ -99,7 +99,7 @@
   </h4>
   <ul class="list-group">
     <li class="list-group-item">
-      <div class="row reveal">
+      <div class="row">
         <div class="col" i18n>Name</div>
         <div class="col d-none d-sm-block" i18n>Sort Order</div>
         <div class="col" i18n>Account</div>
@@ -117,7 +117,7 @@
 
     @for (rule of mailRules; track rule) {
       <li class="list-group-item">
-        <div class="row" [class.reveal]="revealRules">
+        <div class="row fade" [class.show]="showRules">
           <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editMailRule(rule)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailRule)">{{rule.name}}</button></div>
           <div class="col d-flex align-items-center d-none d-sm-flex">{{rule.order}}</div>
           <div class="col d-flex align-items-center">{{(mailAccountService.getCached(rule.account) | async)?.name}}</div>

diff --git a/src-ui/src/app/components/manage/mail/mail.component.scss b/src-ui/src/app/components/manage/mail/mail.component.scss
index d18ed3d30b1e5530be6f532fe66fcdd4abe8f445..0c1f432aaf8107cb2c09708b1142be86863604b7 100644 (file)
--- a/src-ui/src/app/components/manage/mail/mail.component.scss
+++ b/src-ui/src/app/components/manage/mail/mail.component.scss
@@ -2,12 +2,3 @@
 .d-block.d-sm-none .dropdown-toggle::after {
   display: none;
 }
-
-.list-group-item .row {
-  opacity: 0;
-  transition: opacity .2s;
-}
-
-.list-group-item .reveal {
-  opacity: 1;
-}

diff --git a/src-ui/src/app/components/manage/mail/mail.component.ts b/src-ui/src/app/components/manage/mail/mail.component.ts
index d4bbf77c4209c79c58dc48de2671e2172ba6cb95..dce23b4b6b417c26f27547f717a8a0261ecf457e 100644 (file)
--- a/src-ui/src/app/components/manage/mail/mail.component.ts
+++ b/src-ui/src/app/components/manage/mail/mail.component.ts
@@ -48,9 +48,9 @@ export class MailComponent
   }
 
   public loadingRules: boolean = true
-  public revealRules: boolean = false
+  public showRules: boolean = false
   public loadingAccounts: boolean = true
-  public revealAccounts: boolean = false
+  public showAccounts: boolean = false
 
   constructor(
     public mailAccountService: MailAccountService,
@@ -85,7 +85,7 @@ export class MailComponent
       .subscribe({
         next: () => {
           this.loadingAccounts = false
-          this.revealAccounts = true
+          this.showAccounts = true
         },
         error: (e) => {
           this.toastService.showError(
@@ -108,7 +108,7 @@ export class MailComponent
       .subscribe({
         next: (r) => {
           this.loadingRules = false
-          this.revealRules = true
+          this.showRules = true
         },
         error: (e) => {
           this.toastService.showError($localize`Error retrieving mail rules`, e)

diff --git a/src-ui/src/app/components/manage/management-list/management-list.component.html b/src-ui/src/app/components/manage/management-list/management-list.component.html
index 7d464749112d1e54368364342a4670085773f757..ca4e93095b4fa9a0e7ba8f14ae265fab8f8a7724 100644 (file)
--- a/src-ui/src/app/components/manage/management-list/management-list.component.html
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.html
@@ -53,7 +53,7 @@
         </tr>
       }
       @for (object of data; track object) {
-        <tr (click)="toggleSelected(object); $event.stopPropagation();" class="data-row" [class.reveal]="reveal">
+        <tr (click)="toggleSelected(object); $event.stopPropagation();" class="data-row fade" [class.show]="show">
           <td>
             <div class="form-check m-0 ms-2 me-n2">
               <input type="checkbox" class="form-check-input" id="{{typeName}}{{object.id}}" [checked]="selectedObjects.has(object.id)" (click)="toggleSelected(object); $event.stopPropagation();">

diff --git a/src-ui/src/app/components/manage/management-list/management-list.component.scss b/src-ui/src/app/components/manage/management-list/management-list.component.scss
index 79db7e74fff1a956a55d066069d77ad350460a47..aa2871d68abbd4a435409a7b8d2084cd3267177f 100644 (file)
--- a/src-ui/src/app/components/manage/management-list/management-list.component.scss
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.scss
@@ -10,12 +10,3 @@ tbody tr:last-child td {
 .form-check {
     min-height: 0;
 }
-
-.data-row {
-    opacity: 0;
-    transition: opacity .2s;
-}
-
-.reveal {
-    opacity: 1;
-}

diff --git a/src-ui/src/app/components/manage/management-list/management-list.component.ts b/src-ui/src/app/components/manage/management-list/management-list.component.ts
index 164b2fa527e714a883cfba4007d8d404090ca092..75af9f94c7a32392e8484273ca76d41cf5e8fdd8 100644 (file)
--- a/src-ui/src/app/components/manage/management-list/management-list.component.ts
+++ b/src-ui/src/app/components/manage/management-list/management-list.component.ts
@@ -153,7 +153,7 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
         delay(100)
       )
       .subscribe(() => {
-        this.reveal = true
+        this.show = true
         this.loading = false
       })
   }

diff --git a/src-ui/src/app/components/manage/workflows/workflows.component.html b/src-ui/src/app/components/manage/workflows/workflows.component.html
index 10c0cc80d74636f72d77684ad3a9f0fb619b51ad..085de71ea62eeacaf6d57d8b1049f412def8130c 100644 (file)
--- a/src-ui/src/app/components/manage/workflows/workflows.component.html
+++ b/src-ui/src/app/components/manage/workflows/workflows.component.html
@@ -13,7 +13,7 @@
 <ul class="list-group">
 
   <li class="list-group-item">
-    <div class="row reveal">
+    <div class="row">
       <div class="col" i18n>Name</div>
       <div class="col d-none d-sm-flex" i18n>Sort order</div>
       <div class="col" i18n>Status</div>
@@ -31,7 +31,7 @@
 
   @for (workflow of workflows; track workflow.id) {
     <li class="list-group-item">
-      <div class="row" [class.reveal]="reveal">
+      <div class="row fade" [class.show]="show">
         <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editWorkflow(workflow)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.Workflow)">{{workflow.name}}</button></div>
         <div class="col d-flex align-items-center d-none d-sm-flex"><code>{{workflow.order}}</code></div>
         <div class="col d-flex align-items-center">
@@ -77,6 +77,6 @@
     </li>
   }
   @if (!loading && workflows.length === 0) {
-    <li class="list-group-item" [class.reveal]="reveal" i18n>No workflows defined.</li>
+    <li class="list-group-item" [class.show]="show" i18n>No workflows defined.</li>
   }
 </ul>

diff --git a/src-ui/src/app/components/manage/workflows/workflows.component.scss b/src-ui/src/app/components/manage/workflows/workflows.component.scss
index d18ed3d30b1e5530be6f532fe66fcdd4abe8f445..0c1f432aaf8107cb2c09708b1142be86863604b7 100644 (file)
--- a/src-ui/src/app/components/manage/workflows/workflows.component.scss
+++ b/src-ui/src/app/components/manage/workflows/workflows.component.scss
@@ -2,12 +2,3 @@
 .d-block.d-sm-none .dropdown-toggle::after {
   display: none;
 }
-
-.list-group-item .row {
-  opacity: 0;
-  transition: opacity .2s;
-}
-
-.list-group-item .reveal {
-  opacity: 1;
-}

diff --git a/src-ui/src/app/components/manage/workflows/workflows.component.ts b/src-ui/src/app/components/manage/workflows/workflows.component.ts
index 1c04ff5d122eed7e60837d145577bbec37822d92..5178a04f790e278da57cc87ab6c35a67cd97c8e2 100644 (file)
--- a/src-ui/src/app/components/manage/workflows/workflows.component.ts
+++ b/src-ui/src/app/components/manage/workflows/workflows.component.ts
@@ -47,7 +47,7 @@ export class WorkflowsComponent
         delay(100)
       )
       .subscribe(() => {
-        this.reveal = true
+        this.show = true
         this.loading = false
       })
   }