Added support for dialog-in-dialog

stavroskasidis · Oct 17, 2020 · 864ce5e · 864ce5e
1 parent b2e86b3
commit 864ce5e
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 16 deletions.
diff --git a/BlazorDialog/BlazorDialogStore.cs b/BlazorDialog/BlazorDialogStore.cs
@@ -1,6 +1,8 @@
 using System;
 using System.Collections.Generic;
+using System.Security.Cryptography.X509Certificates;
 using System.Text;
+using System.Linq;
 
 namespace BlazorDialog
 {
@@ -18,6 +20,11 @@ public Dialog GetById(string id)
             throw new ArgumentException($"No dialog found for id '{id}'", nameof(id));
         }
 
+        public int GetVisibleDialogsCount()
+        {
+            return registeredDialogs.Count(x => x.Value.GetVisibility());
+        }
+
         public void Register(Dialog blazorDialog)
         {
             if (blazorDialog?.Id == null)

diff --git a/BlazorDialog/Components/Dialog.razor b/BlazorDialog/Components/Dialog.razor
@@ -8,7 +8,7 @@
         <CascadingValue Value="this.Input" Name="DialogInput">
             @if (!IsCustom)
             {
-                <div class="blazor-dialog-container @(Centered ? "blazor-dialog-centered" : "")">
+                <div class="blazor-dialog-container @(Centered ? "blazor-dialog-centered" : "")" style="z-index:@(1050 + dialogDepth)">
                     <div class="blazor-dialog-content-wrapper @ContentWrapperCssClass @AnimationCssClass">
                         <div class="blazor-dialog-content">
                             @ChildContent
@@ -152,7 +152,7 @@
     }
 
     bool isShowingChanged = false;
-
+    int dialogDepth = 0;
     protected override async Task OnParametersSetAsync()
     {
         if (isShowingChanged && IsShowing == true && !isShowing)
@@ -163,6 +163,7 @@
                 await OnBeforeShow.InvokeAsync(args);
             }
             this.isShowing = true;
+            dialogDepth = dialogStore.GetVisibleDialogsCount();
             if (OnAfterShow.HasDelegate)
             {
                 var args = new DialogAfterShowEventArgs(this);
@@ -225,6 +226,7 @@
             await OnBeforeShow.InvokeAsync(args);
         }
         this.isShowing = true;
+        dialogDepth = dialogStore.GetVisibleDialogsCount();
         await InvokeAsync(() => StateHasChanged());
         if (OnAfterShow.HasDelegate)
         {
@@ -263,4 +265,9 @@
     {
         await this.Hide<object>(null);
     }
+
+    public bool GetVisibility()
+    {
+        return this.isShowing;
+    }
 }
diff --git a/BlazorDialog/IBlazorDialogStore.cs b/BlazorDialog/IBlazorDialogStore.cs
@@ -10,5 +10,6 @@ public interface IBlazorDialogStore
         void Register(Dialog blazorDialog);
         void Unregister(Dialog blazorDialog);
         Dialog GetById(string id);
+        int GetVisibleDialogsCount();
     }
 }
diff --git a/BlazorDialog/wwwroot/styles.css b/BlazorDialog/wwwroot/styles.css
@@ -1,6 +1,5 @@
 .blazor-dialog-container {
     position: fixed;
-    z-index: 1050;
     left: 0;
     top: 0;
     width: 100%; /* Full width */

diff --git a/TestApps/BlazorDialog.TestAppsCommon/IndexCommon.razor b/TestApps/BlazorDialog.TestAppsCommon/IndexCommon.razor
@@ -20,19 +20,6 @@
     <option value="@DialogAnimation.Zoom">@DialogAnimation.Zoom</option>
     <option value="@DialogAnimation.FadeIn">@DialogAnimation.FadeIn</option>
 </select>
-
-<Dialog Id="simple-dialog" Size="size" Centered="isCentered" Animation="animation">
-    <DialogInputProvider TInput="string">
-        <DialogBody>
-            <h4>@context.Input</h4>
-        </DialogBody>
-        <DialogFooter>
-            <button type="button" class="btn btn-primary" @onclick="@(() => context.Dialog.Hide("yes"))">Yes</button>
-            <button type="button" class="btn btn-secondary" @onclick="@(()=> context.Dialog.Hide("no"))">No</button>
-        </DialogFooter>
-    </DialogInputProvider>
-</Dialog>
-
 <Dialog Id="simple-large-dialog" Size="size" Centered="isCentered" Animation="animation">
     <DialogInputProvider TInput="string">
         <DialogHeader ShowClose="true">
@@ -60,6 +47,22 @@
     </DialogInputProvider>
 </Dialog>
 
+<Dialog Id="simple-dialog" Size="size" Centered="isCentered" Animation="animation">
+    <DialogInputProvider TInput="string">
+        <DialogBody>
+            <h4>@context.Input</h4>
+        </DialogBody>
+        <DialogFooter>
+            <button type="button" class="btn btn-primary" @onclick="@(() => context.Dialog.Hide("yes"))">Yes</button>
+            <button type="button" class="btn btn-secondary" @onclick="@(()=> context.Dialog.Hide("no"))">No</button>
+
+            <button @onclick="SimpleDialogBigOnClick">Simple Dialog Big (dialog in dialog)</button>
+        </DialogFooter>
+    </DialogInputProvider>
+</Dialog>
+
+
+
 <button @onclick="SimpleDialogOnClick">Simple Dialog</button>
 <button @onclick="SimpleDialogBigOnClick">Simple Dialog Big</button>