Skip to content

Commit f7dbc84

Browse files
dvoiturondvoituron
authored
Merge branch 'dev-v5' into users/dvoituron/dev-v5/public-jsmodule
2 parents 6a93ee0 + c697987 commit f7dbc84

File tree

8 files changed

+519
-10
lines changed

8 files changed

+519
-10
lines changed

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overlay/Examples/OverlayHtmlElement.razor‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<FluentSwitch @bind-Value="@FullScreen" Label="FullScreen" Margin="@Margin.Right4" />
2+
<FluentSwitch @bind-Value="@Interactive" Label="Interactive" Margin="@Margin.Right4" />
3+
<br />
4+
<FluentSelect @bind-Value="@CloseMode" Label="Close Mode" LabelPosition="LabelPosition.Before">
5+
<FluentOption Value="manual">Manual</FluentOption>
6+
<FluentOption Value="all">All</FluentOption>
7+
<FluentOption Value="inside">Inside only</FluentOption>
8+
<FluentOption Value="outside">Outside only</FluentOption>
9+
</FluentSelect>
10+
11+
<div class="container">
12+
<h3>Container</h3>
13+
<button onclick="alert('clicked')">Click Me</button>
14+
<fluent-overlay id="id1"
15+
dialog-style="background: transparent;"
16+
dialog-class="my-class"
17+
background="color-mix(in srgb, var(--colorBrandBackground) 20%, transparent)"
18+
fullscreen="@FullScreen"
19+
interactive="@Interactive"
20+
close-mode="@CloseMode">
21+
<FluentSpinner />
22+
</fluent-overlay>
23+
</div>
24+
25+
<div>
26+
<button onclick="document.getElementById('id1').show()">Show Overlay</button>
27+
<button onclick="document.getElementById('id1').close()">Close Overlay</button>
28+
</div>
29+
30+
@code
31+
{
32+
bool FullScreen = false;
33+
bool Interactive = false;
34+
string CloseMode = "all";
35+
}
36+
37+
<script>
38+
document.getElementById('id1').addEventListener('toggle', function (event) {
39+
console.log('New State:', event.detail.newState);
40+
});
41+
</script>
42+
43+
<style>
44+
.container {
45+
width: 50%;
46+
height: 100px;
47+
border: 1px dashed red;
48+
}
49+
50+
.container button {
51+
cursor: pointer;
52+
}
53+
54+
.container h3:hover {
55+
color: red;
56+
}
57+
</style>

‎examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overlay/FluentOverlay.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: Overlay
3+
route: /Overlay
4+
---
5+
6+
# Overlay HTMLElement
7+
8+
{{ OverlayHtmlElement }}

‎examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@
1717

1818
<FluentSpacer />
1919

20+
@* GitHub Logo *@
21+
<FluentButton IconStart="@(new GitHubIcon().WithColor("var(--colorNeutralForegroundOnBrand)"))"
22+
OnClick="@(() => OpenUrlInNewTabAsync("https://github.com/microsoft/fluentui-blazor/tree/dev-v5"))"
23+
Appearance="ButtonAppearance.Transparent"
24+
Title="See the Fluent UI Blazor GitHub repository" />
25+
2026
@* DarkTheme *@
2127
<FluentButton IconStart="@(new Icons.Regular.Size20.DarkTheme().WithColor("var(--colorNeutralForegroundOnBrand)"))"
2228
OnClick="@SwitchThemeAsync"

‎examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor.cs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,22 @@ private void ReloadReboot()
6464

6565
/// <summary />
6666
private string GetLayoutKey() => IsHomePage() ? "Home" : string.Empty;
67+
68+
/// <summary>
69+
/// Opens a URL in a new browser tab.
70+
/// </summary>
71+
private async Task OpenUrlInNewTabAsync(string url)
72+
{
73+
await JSRuntime.InvokeVoidAsync("open", url, "_blank");
74+
}
75+
76+
internal class GitHubIcon : Icon
77+
{
78+
public GitHubIcon() : base(
79+
"GitHub",
80+
IconVariant.Regular,
81+
IconSize.Size20,
82+
"<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.178 0C4.55 0 0 4.583 0 10.254c0 4.533 2.915 8.369 6.959 9.727 0.506 0.102 0.691 -0.221 0.691 -0.492 0 -0.238 -0.017 -1.053 -0.017 -1.901 -2.831 0.611 -3.421 -1.222 -3.421 -1.222 -0.455 -1.188 -1.129 -1.494 -1.129 -1.494 -0.927 -0.628 0.068 -0.628 0.068 -0.628 1.028 0.068 1.567 1.053 1.567 1.053 0.91 1.562 2.376 1.12 2.966 0.849 0.084 -0.662 0.354 -1.12 0.64 -1.375 -2.258 -0.238 -4.634 -1.12 -4.634 -5.059 0 -1.12 0.404 -2.037 1.045 -2.75 -0.101 -0.255 -0.455 -1.307 0.101 -2.716 0 0 0.859 -0.272 2.797 1.053a9.786 9.786 0 0 1 2.545 -0.34c0.859 0 1.735 0.119 2.544 0.34 1.938 -1.324 2.797 -1.053 2.797 -1.053 0.556 1.409 0.202 2.462 0.101 2.716 0.657 0.713 1.045 1.63 1.045 2.75 0 3.939 -2.376 4.804 -4.651 5.059 0.371 0.323 0.691 0.934 0.691 1.901 0 1.375 -0.017 2.479 -0.017 2.818 0 0.272 0.185 0.594 0.691 0.493 4.044 -1.358 6.959 -5.195 6.959 -9.727C20.356 4.583 15.789 0 10.178 0z\"></path>")
83+
{ }
84+
}
6785
}

‎examples/Demo/FluentUI.Demo/Properties/launchSettings.json‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
{
22
"$schema": "http://json.schemastore.org/launchsettings.json",
3-
"profiles": {
4-
"https": {
5-
"commandName": "Project",
6-
"dotnetRunMessages": true,
7-
"launchBrowser": false,
8-
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
9-
"applicationUrl": "https://localhost:7197;http://localhost:5219",
10-
"environmentVariables": {
11-
"ASPNETCORE_ENVIRONMENT": "Development"
12-
}
3+
"profiles": {
4+
"https": {
5+
"commandName": "Project",
6+
"dotnetRunMessages": true,
7+
"launchBrowser": false,
8+
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
9+
"applicationUrl": "https://localhost:7197;http://localhost:5219",
10+
"environmentVariables": {
11+
"ASPNETCORE_ENVIRONMENT": "Development"
12+
}
13+
},
14+
"launch-browser": {
15+
"commandName": "Project",
16+
"dotnetRunMessages": true,
17+
"launchBrowser": true,
18+
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
19+
"applicationUrl": "https://localhost:7197;http://localhost:5219",
20+
"environmentVariables": {
21+
"ASPNETCORE_ENVIRONMENT": "Development"
1322
}
1423
}
1524
}
25+
}

‎src/Core.Scripts/src/Components/Overlay/FluentOverlay-Styles.ts‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
export const fluentOverlayStyles: string = `
2+
:host {
3+
--overlayZIndex: 99999;
4+
--overlayBackground: '';
5+
}
6+
7+
:host dialog {
8+
border: none;
9+
background: none;
10+
z-index: var(--overlayZIndex);
11+
}
12+
13+
:focus-visible {
14+
outline: none;
15+
}
16+
17+
:host([fullscreen]) dialog {
18+
position: fixed;
19+
top: 50%;
20+
left: 50%;
21+
margin: 0;
22+
transform: translate(-50%, -50%);
23+
}
24+
25+
:host([fullscreen]) dialog::backdrop {
26+
background-color: var(--overlayBackground);
27+
}
28+
29+
:host(:not([fullscreen])):has(dialog[open]) {
30+
position: absolute;
31+
top: 0;
32+
left: 0;
33+
right: 0;
34+
bottom: 0;
35+
background-color: var(--overlayBackground);
36+
}
37+
38+
:host(:not([fullscreen])) dialog {
39+
position: fixed;
40+
margin: 0;
41+
transform: translate(-50%, -50%);
42+
}
43+
44+
:host(:not([fullscreen])) dialog::backdrop {
45+
background-color: transparent;
46+
width: 0;
47+
height: 0;
48+
}
49+
50+
:host([interactive][fullscreen]):has(dialog[open]) {
51+
position: fixed;
52+
top: 0;
53+
left: 0;
54+
right: 0;
55+
bottom: 0;
56+
z-index: calc(var(--overlayZIndex) - 1);
57+
background-color: var(--overlayBackground);
58+
}
59+
60+
:host([interactive]):has(dialog[open]) {
61+
pointer-events: none;
62+
}
63+
`;

0 commit comments

Comments
 (0)