feat(core): Dialog add fade transition for multiple dialogs (#8950)

taiga-family · Sep 10, 2024 · 5843da5 · 5843da5
1 parent c8bdaf0
commit 5843da5
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 37 deletions.
diff --git a/projects/core/components/dialog/dialogs.component.ts b/projects/core/components/dialog/dialogs.component.ts
@@ -1,26 +1,19 @@
-import {CommonModule} from '@angular/common';
-import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {NgForOf} from '@angular/common';
+import {ChangeDetectionStrategy, Component, inject, type Signal} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
 import {TuiFocusTrap} from '@taiga-ui/cdk/directives/focus-trap';
 import type {TuiPopover} from '@taiga-ui/cdk/services';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {tuiHost} from '@taiga-ui/core/animations';
 import {TuiScrollControls, TuiScrollRef} from '@taiga-ui/core/components/scrollbar';
-import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';
-import type {Observable} from 'rxjs';
+import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 
 import {TUI_DIALOGS} from './dialog.tokens';
 
 @Component({
     standalone: true,
     selector: 'tui-dialogs',
-    imports: [
-        CommonModule,
-        PolymorpheusOutlet,
-        PolymorpheusTemplate,
-        TuiFocusTrap,
-        TuiScrollControls,
-        TuiScrollRef,
-    ],
+    imports: [NgForOf, PolymorpheusOutlet, TuiFocusTrap, TuiScrollControls, TuiScrollRef],
     templateUrl: './dialogs.template.html',
     styleUrls: ['./dialogs.style.less'],
     // So that we do not force OnPush on custom dialogs
@@ -33,6 +26,8 @@ import {TUI_DIALOGS} from './dialog.tokens';
 })
 export class TuiDialogs {
     protected readonly el = tuiInjectElement();
-    protected readonly dialogs$: Observable<ReadonlyArray<TuiPopover<any, any>>> =
-        inject(TUI_DIALOGS);
+    protected readonly dialogs: Signal<ReadonlyArray<TuiPopover<any, any>>> = toSignal(
+        inject(TUI_DIALOGS),
+        {initialValue: []},
+    );
 }
diff --git a/projects/core/components/dialog/dialogs.style.less b/projects/core/components/dialog/dialogs.style.less
@@ -22,6 +22,7 @@
 
 .t-overlay,
 .t-dialog {
+    .transition(filter);
     .scrollbar-hidden();
     .fullsize(fixed, inset);
 
@@ -38,19 +39,21 @@
 
 .t-dialog {
     position: sticky;
-    pointer-events: auto;
     overscroll-behavior: none;
+    filter: brightness(0.25);
 }
 
 .t-overlay {
     .transition(opacity);
 
     background: var(--tui-service-backdrop);
     backdrop-filter: var(--tui-backdrop, none);
+    opacity: 0;
 }
 
-.t-dialog:last-of-type {
-    z-index: 1;
+.t-dialog:last-child {
+    pointer-events: auto;
+    filter: none;
 }
 
 .t-scrollbars {

diff --git a/projects/core/components/dialog/dialogs.template.html b/projects/core/components/dialog/dialogs.template.html
@@ -1,20 +1,17 @@
-<ng-container *ngIf="dialogs$ | async as dialogs">
-    <section
-        *ngFor="let item of dialogs"
-        aria-modal="true"
-        role="dialog"
-        tuiFocusTrap
-        tuiScrollRef
-        class="t-dialog"
-        @tuiHost
-        [attr.aria-labelledby]="item.id"
-        [class.t-dialog_closing]="!dialogs.length"
-    >
-        <ng-container *polymorpheusOutlet="item.component; context: item" />
-        <tui-scroll-controls class="t-scrollbars" />
-    </section>
-    <div
-        class="t-overlay"
-        [style.opacity]="dialogs.length"
-    ></div>
-</ng-container>
+<div
+    class="t-overlay"
+    [style.opacity]="dialogs().length"
+></div>
+<section
+    *ngFor="let item of dialogs()"
+    aria-modal="true"
+    role="dialog"
+    tuiFocusTrap
+    tuiScrollRef
+    class="t-dialog"
+    @tuiHost
+    [attr.aria-labelledby]="item.id"
+>
+    <ng-container *polymorpheusOutlet="item.component; context: item" />
+    <tui-scroll-controls class="t-scrollbars" />
+</section>