[Overlay] Add FullScreenInteractiveExceptElementId (#2580)

microsoft · Aug 30, 2024 · 6e1b785 · 6e1b785
1 parent 80ad64b
commit 6e1b785
Show file tree

Hide file tree

Showing 24 changed files with 390 additions and 79 deletions.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -2765,6 +2765,9 @@
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker.ClassValue">
             <summary />
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker.PopupId">
+            <summary />
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker.Appearance">
             <summary>
             Gets or sets the design of this input.
@@ -7332,20 +7335,37 @@
         <member name="T:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay">
             <summary />
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.LibraryConfiguration">
+            <summary />
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.JSRuntime">
+            <summary />
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay._jsModule">
+            <summary />
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.ClassValue">
             <summary />
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.StyleValue">
             <summary />
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.StyleContentValue">
+            <summary />
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.Id">
+            <summary>
+            Gets or sets the unique identifier of the overlay.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.Visible">
             <summary>
             Gets or sets a value indicating whether the overlay is visible.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.VisibleChanged">
             <summary>
-            Callback for when overlay visisbility changes.
+            Callback for when overlay visibility changes.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.OnClose">
@@ -7380,13 +7400,43 @@
             Gets or sets a value indicating whether the overlay is shown full screen or bound to the containing element.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.Interactive">
+            <summary>
+            Gets or sets a value indicating whether the overlay is interactive, except for the element with the specified <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.InteractiveExceptId"/>.
+            In other words, the elements below the overlay remain usable (mouse-over, click) and the overlay will closed when clicked.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.InteractiveExceptId">
+            <summary>
+            Gets or sets the HTML identifier of the element that is not interactive when the overlay is shown.
+            This property is ignored if <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.Interactive"/> is false.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.Dismissable">
+            <summary>
+            Gets of sets a value indicating if the overlay can be dismissed by clicking on it.
+            Default is true.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.BackgroundColor">
             <summary>
             Gets or sets the background color. 
             Needs to be formatted as an HTML hex color string (#rrggbb or #rgb).
             Default is '#ffffff'.
             </summary>
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.DisposeAsync">
+            <summary>
+            Disposes the overlay.
+            </summary>
+            <returns></returns>
+        </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.InvokeOverlayInitializeAsync">
+            <summary />
+        </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.InvokeOverlayDisposeAsync">
+            <summary />
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentOverlay.CheckRGBString">
             <remarks>
             Pattern:<br/>

diff --git a/examples/Demo/Shared/Pages/Overlay/Examples/OverlayFullScreen.razor b/examples/Demo/Shared/Pages/Overlay/Examples/OverlayFullScreen.razor
@@ -2,7 +2,7 @@
 <FluentButton Appearance="Appearance.Accent" @onclick="() => visible = !visible">Show Overlay</FluentButton>
 
 <FluentOverlay @bind-Visible=@visible
-               Opacity="0.4" 
+               Opacity="0.4"
                BackgroundColor="#e8f48c"
                FullScreen="true"
                OnClose="HandleOnClose"

diff --git a/examples/Demo/Shared/Pages/Overlay/Examples/OverlayInteractive.razor b/examples/Demo/Shared/Pages/Overlay/Examples/OverlayInteractive.razor
@@ -0,0 +1,63 @@
+
+<FluentStack>
+    <FluentSwitch @bind-Value="@interactive" Label="Interactive" />
+    <FluentSwitch @bind-Value="@interactiveExceptId" Label="Exception Zone (my-zone)" Disabled="@(!interactive)" />
+    <FluentSwitch @bind-Value="@fullScreen" Label="Full screen" />
+</FluentStack>
+
+<FluentButton Appearance="Appearance.Accent"
+              Style="margin: 24px 0px;"
+              @onclick="() => visible = !visible">
+    Show Overlay
+</FluentButton>
+
+<FluentStack VerticalAlignment="VerticalAlignment.Center">
+    <FluentButton OnClick="@(e => counter++)">Increment</FluentButton>
+    <FluentLabel>Counter: @counter</FluentLabel>
+</FluentStack>
+
+<FluentOverlay @bind-Visible=@visible
+               Opacity="0.4"
+               BackgroundColor="#e8f48c"
+               FullScreen="@fullScreen"
+               Interactive="@interactive"
+               InteractiveExceptId="@(interactiveExceptId ? "my-zone" : null)"
+               OnClose="HandleOnClose"
+               PreventScroll=true>
+    @if (interactive)
+    {
+        <div id="my-zone">
+            <p>Non-interactive zone</p>
+            <FluentProgressRing />
+        </div>
+    }
+    else
+    {
+        <FluentProgressRing />
+    }
+</FluentOverlay>
+
+<style>
+    #my-zone {
+        background-color: white;
+        width: 200px;
+        height: 160px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+</style>
+
+@code {
+    bool visible = false;
+    bool interactive = true;
+    bool interactiveExceptId = true;
+    bool fullScreen = true;
+    int counter = 0;
+
+    protected void HandleOnClose()
+    {
+        DemoLogger.WriteLine("Overlay closed");
+    }
+}
diff --git a/examples/Demo/Shared/Pages/Overlay/OverlayPage.razor b/examples/Demo/Shared/Pages/Overlay/OverlayPage.razor
@@ -10,7 +10,7 @@
 
 <h2 id="example">Examples</h2>
 
-<DemoSection Title="Default" Component="typeof(OverlayDefault)" >
+<DemoSection Title="Default" Component="typeof(OverlayDefault)">
     <Description>Overlay with a default white background</Description>
 </DemoSection>
 
@@ -27,7 +27,15 @@
 </DemoSection>
 
 <DemoSection Title="Full screen" Component="typeof(OverlayFullScreen)">
-    <Description>Overlay which takes up the whole screen</Description>
+    <Description>Overlay which takes up the whole screen.</Description>
+</DemoSection>
+
+<DemoSection Title="Interactive" Component="typeof(OverlayInteractive)">
+    <Description>
+        By using the <code>Interactive</code> and <code>InteractiveExceptId</code> properties, only the targeted element will not close the <b>FluentOverlay</b> panel.
+        The user can click anywhere else to close the <b>FluentOverlay</b>.<br />
+        In this example, the <b>FluentOverlay</b> will only close when the user clicks outside the white zone and the user can increment the counter before to close the Overlay.<br />
+    </Description>
 </DemoSection>
 
 <h2 id="documentation">Documentation</h2>

diff --git a/examples/Demo/Shared/Pages/RawEventHandlers.razor b/examples/Demo/Shared/Pages/RawEventHandlers.razor
@@ -17,7 +17,7 @@
 <div>
     <h1>Menu component</h1>
     <FluentMenu>
-        <FluentMenuItem @onclick="() => PerformClick(_menuComponentItems)" role="menuitem">Menu item 1</FluentMenuItem>
+        <FluentMenuItem @onclick="() => PerformClick(_menuComponentItems)">Menu item 1</FluentMenuItem>
     </FluentMenu>
 
     @foreach (var item in _menuComponentItems)

diff --git a/src/Core/Components/DateTime/FluentDatePicker.razor b/src/Core/Components/DateTime/FluentDatePicker.razor
@@ -23,8 +23,9 @@
 
 @if (Opened)
 {
-    <FluentOverlay @bind-Visible="@Opened" Dismissable="true" FullScreen="true" />
+    <FluentOverlay @bind-Visible="@Opened" Dismissable="true" FullScreen="true" Interactive="true" InteractiveExceptId="@PopupId" />
     <FluentAnchoredRegion Anchor="@Id"
+                          Id="@PopupId"
                           HorizontalDefaultPosition="@(System.Globalization.CultureInfo.CurrentUICulture.TextInfo.IsRightToLeft ? HorizontalPosition.Left : HorizontalPosition.Right)"
                           HorizontalInset="true"
                           VerticalDefaultPosition="@VerticalPosition.Unset"

diff --git a/src/Core/Components/DateTime/FluentDatePicker.razor.cs b/src/Core/Components/DateTime/FluentDatePicker.razor.cs
@@ -26,6 +26,9 @@ protected override string? ClassValue
         }
     }
 
+    /// <summary />
+    private string PopupId => $"{Id}-popup";
+
     /// <summary>
     /// Gets or sets the design of this input.
     /// </summary>

diff --git a/src/Core/Components/Overlay/FluentOverlay.razor b/src/Core/Components/Overlay/FluentOverlay.razor
@@ -4,10 +4,11 @@
 {
     <div class="@ClassValue"
          style="@StyleValue"
-         @onclick="@OnCloseHandlerAsync" 
-         @oncontextmenu="@OnCloseHandlerAsync" 
-         @oncontextmenu:preventDefault>
-        <div style="@( $"display: flex; align-items:{Alignment.ToAttributeValue()}; justify-content: {Justification.ToAttributeValue()}; width: 100%; height: 100%")">
+         id="@Id"
+         @onclick="@OnCloseHandlerAsync"
+         @oncontextmenu="@OnCloseHandlerAsync"
+         @oncontextmenu:preventDefault="true">
+        <div style="@StyleContentValue">
             @ChildContent
         </div>
     </div>