From 3696961fa99220b7f1900a6e632b34b3821a2912 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Fri, 26 Jul 2024 16:39:15 +0900
Subject: [PATCH] overlay

---
 .../Components/Layout/NavMenu.razor           |  1 +
 .../{ => Components}/CompoMessageBox.razor    |  2 +-
 .../Pages/Components/CompoOverlay.razor       | 81 +++++++++++++++++++
 3 files changed, 83 insertions(+), 1 deletion(-)
 rename BlazorFluentUI/Components/Pages/{ => Components}/CompoMessageBox.razor (99%)
 create mode 100644 BlazorFluentUI/Components/Pages/Components/CompoOverlay.razor

diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index 6af781e..751d7c1 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -69,6 +69,7 @@
                 <FluentNavLink Href="compomenu" Icon="@(new Icons.Regular.Size20.ListBar())" IconColor="Color.Accent">Menu</FluentNavLink>
                 <FluentNavLink Href="compomessagebar" Icon="@(new Icons.Regular.Size20.WindowArrowUp())" IconColor="Color.Accent">MessageBar</FluentNavLink>
                 <FluentNavLink Href="compomessagebox" Icon="@(new Icons.Regular.Size20.BoxArrowUp())" IconColor="Color.Accent">MessageBox</FluentNavLink>
+                <FluentNavLink Href="compooverlay" Icon="@(new Icons.Regular.Size20.BoxArrowUp())" IconColor="Color.Accent">Overlay</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>
diff --git a/BlazorFluentUI/Components/Pages/CompoMessageBox.razor b/BlazorFluentUI/Components/Pages/Components/CompoMessageBox.razor
similarity index 99%
rename from BlazorFluentUI/Components/Pages/CompoMessageBox.razor
rename to BlazorFluentUI/Components/Pages/Components/CompoMessageBox.razor
index e10ad1e..a943d3f 100644
--- a/BlazorFluentUI/Components/Pages/CompoMessageBox.razor
+++ b/BlazorFluentUI/Components/Pages/Components/CompoMessageBox.razor
@@ -12,7 +12,7 @@
 </div>
 
 
-<h4 class="mt-4">Message Service</h4>
+<h4 class="mt-4">Default</h4>
 <FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
     <FluentStack Orientation="Orientation.Vertical">
         <FluentButton Appearance="Appearance.Accent" OnClick="@ShowSuccessAsync">Success</FluentButton>
diff --git a/BlazorFluentUI/Components/Pages/Components/CompoOverlay.razor b/BlazorFluentUI/Components/Pages/Components/CompoOverlay.razor
new file mode 100644
index 0000000..1cd4aa2
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/Components/CompoOverlay.razor
@@ -0,0 +1,81 @@
+@page "/compooverlay"
+
+@inject IDialogService DialogService;
+
+@rendermode RenderMode.InteractiveServer
+
+<h3>MessageBox</h3>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<div>
+    <code>FluentOverlay</code>s are used to templorarily overlay screen content to focus a dialog, progress or other infomtion/interaction.
+</div>
+
+
+<h4 class="mt-4">Default</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <FluentButton Appearance="Appearance.Accent" OnClick="@(() => evisible = !evisible)">
+        Show Overlay
+    </FluentButton>
+    <FluentOverlay @bind-Visible=@evisible
+                   Opacity="0.4"
+                   Alignment="Align.Center"
+                   Justification="JustifyContent.Center">
+        <FluentProgressRing />
+    </FluentOverlay>
+</FluentCard>
+
+<h4 class="mt-4">Timed</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <FluentButton Appearance="Appearance.Accent" OnClick="@HandleTOnOpen">
+        Show Timed Overlay
+    </FluentButton>
+    <FluentOverlay @bind-Visible=@tvisible
+                   Opacity="0.4"
+                   Alignment="Align.Center"
+                   Justification="JustifyContent.Center">
+        <FluentProgressRing />
+    </FluentOverlay>
+</FluentCard>
+
+<h4 class="mt-4">Transparent</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto">
+    <FluentButton Appearance="Appearance.Accent" OnClick="@(() => tpvisible = !tpvisible)">
+        Show Transparent Overlay
+    </FluentButton>
+    <FluentOverlay @bind-Visible=@tpvisible
+                   Opacity="0"
+                   Alignment="Align.Center"
+                   Justification="JustifyContent.Center">
+        <FluentProgressRing />
+    </FluentOverlay>
+</FluentCard>
+
+<h4 class="mt-4">Full screen</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentButton Appearance="Appearance.Accent" OnClick="@(() => fvisible = !fvisible)">
+        Show Full-Screen Overlay
+    </FluentButton>
+    <FluentOverlay @bind-Visible=@fvisible
+                   Opacity="0.4"
+                   FullScreen="true"
+                   Alignment="Align.Center"
+                   Justification="JustifyContent.Center">
+        <FluentProgressRing />
+    </FluentOverlay>
+</FluentCard>
+
+@code {
+    bool evisible = false;
+
+    bool tvisible = false;
+    async Task HandleTOnOpen()
+    {
+        tvisible = true;
+        await Task.Delay(3000);
+        tvisible = false;
+    }
+
+    bool tpvisible = false;
+
+    bool fvisible = false;
+}