Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dialog enhancements (add dialog type, fix panel width setable), add MaxHeight to DemoSection #740

Merged
merged 9 commits into from
Sep 20, 2023
2 changes: 1 addition & 1 deletion examples/Demo/Shared/Components/CodeSnippet.razor
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<pre class="snippet"><code class="@Language" @ref="codeElement" style="@Style">@ChildContent</code></pre>
<pre class="snippet" style="@Style --hljs-theme-background: rgb(243, 243, 243);"><code class="@Language" @ref="codeElement">@ChildContent</code></pre>
1 change: 1 addition & 0 deletions examples/Demo/Shared/Components/CodeSnippet.razor.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
margin-bottom: 0.5rem;
border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
border-radius: calc(var(--control-corner-radius) * 1px);
overflow-y: auto;
}

::deep .hljs {
Expand Down
4 changes: 2 additions & 2 deletions examples/Demo/Shared/Components/DemoSection.razor
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,12 @@
}
else
{
label = Path.GetFileNameWithoutExtension(pair.Key);
label = Path.GetFileName(pair.Key);
id = "tab-" + Regex.Replace(label, "[#|/|\\|$|*|^]", "").ToLower() + "-" + @_ariaId;
}
<FluentTab Id="@id" Label="@label" fixed>
<Content>
<CodeSnippet Language="@TabLanguageClass(tab)">@pair.Value</CodeSnippet>
<CodeSnippet Style="@(!string.IsNullOrEmpty(MaxHeight) ? $"max-height: {MaxHeight};" : null)" Language="@TabLanguageClass(tab)">@pair.Value</CodeSnippet>
</Content>
</FluentTab>
}
Expand Down
2 changes: 1 addition & 1 deletion examples/Demo/Shared/Components/DemoSection.razor.cs
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ public partial class DemoSection : ComponentBase
public string[]? AdditionalFiles { get; set; }

[Parameter]
public bool New { get; set; }
public string MaxHeight { get; set; } = string.Empty;

/// <summary>
/// Show download links for the example sources
Expand Down
64 changes: 44 additions & 20 deletions examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml
Original file line number Diff line number Diff line change
Expand Up @@ -1823,16 +1823,6 @@
Used when not calling the <see cref="T:Microsoft.Fast.Components.FluentUI.DialogService" /> to show a dialog.
</summary>
</member>
<member name="P:Microsoft.Fast.Components.FluentUI.FluentDialog.HeaderTemplate">
<summary>
Content to render in header.
</summary>
</member>
<member name="P:Microsoft.Fast.Components.FluentUI.FluentDialog.FooterTemplate">
<summary>
Content to render in footer.
</summary>
</member>
<member name="P:Microsoft.Fast.Components.FluentUI.FluentDialog.OnDialogResult">
<summary>
The event callback invoked to return the dialog result.
Expand Down Expand Up @@ -1925,17 +1915,20 @@
</member>
<member name="P:Microsoft.Fast.Components.FluentUI.DialogParameters.TrapFocus">
<summary>
Indicates that the dialog should trap focus.
Indicates if dialog should trap focus.
Defaults to true.
</summary>
</member>
<member name="P:Microsoft.Fast.Components.FluentUI.DialogParameters.ShowTitle">
<summary>
When true, shows the title in the header.
Show the title in the header.
Defaults to true.
</summary>
</member>
<member name="P:Microsoft.Fast.Components.FluentUI.DialogParameters.ShowDismiss">
<summary>
When true, shows the dismiss button in the header.
Show the dismiss button in the header.
Defaults to true.
</summary>
</member>
<member name="P:Microsoft.Fast.Components.FluentUI.DialogParameters.PrimaryAction">
Expand Down Expand Up @@ -1989,6 +1982,11 @@
The value that labels an interactive element.
</summary>
</member>
<member name="P:Microsoft.Fast.Components.FluentUI.DialogParameters.DialogType">
<summary>
The type of dialog.
</summary>
</member>
<member name="P:Microsoft.Fast.Components.FluentUI.DialogParameters.ShowPrimaryAction">
<summary>
Gets whether the primary button is displayed or not. Depends on PrimaryAction having a value.
Expand Down Expand Up @@ -2248,12 +2246,6 @@
<param name="component">The type of the component to show</param>
<param name="parameters"><see cref="T:Microsoft.Fast.Components.FluentUI.SplashScreenContent"/> that holds the content to display</param>
</member>
<member name="M:Microsoft.Fast.Components.FluentUI.DialogService.ShowDialogAsync``2(Microsoft.Fast.Components.FluentUI.DialogParameters{``1})">
<summary>
Shows a dialog with the component type as the body
</summary>
<param name="parameters">Parameters to pass to component being displayed.</param>
</member>
<member name="M:Microsoft.Fast.Components.FluentUI.DialogService.ShowSuccessAsync(System.String,System.String)">
<summary>
Shows a success message box. Does not have a callback function.
Expand Down Expand Up @@ -2324,6 +2316,12 @@
<param name="dialogComponent">Type of component to display.</param>
<param name="parameters">Parameters to pass to component being displayed.</param>
</member>
<member name="M:Microsoft.Fast.Components.FluentUI.DialogService.ShowDialogAsync``2(Microsoft.Fast.Components.FluentUI.DialogParameters{``1})">
<summary>
Shows a dialog with the component type as the body
</summary>
<param name="parameters">Parameters to pass to component being displayed.</param>
</member>
<member name="M:Microsoft.Fast.Components.FluentUI.DialogService.ShowDialogAsync``1(System.Type,``0,Microsoft.Fast.Components.FluentUI.DialogParameters)">
<summary>
Shows a dialog with the component type as the body,
Expand Down Expand Up @@ -3506,7 +3504,8 @@
</member>
<member name="P:Microsoft.Fast.Components.FluentUI.ListComponentBase`1.OptionValue">
<summary>
Function used to determine which text to return for the selected item.
Function used to determine which value to return for the selected item.
Only for <see cref="T:Microsoft.Fast.Components.FluentUI.FluentListbox`1"/> and <see cref="T:Microsoft.Fast.Components.FluentUI.FluentSelect`1"/> components.
</summary>
</member>
<member name="P:Microsoft.Fast.Components.FluentUI.ListComponentBase`1.OptionDisabled">
Expand Down Expand Up @@ -9203,6 +9202,31 @@
A sticky header row.
</summary>
</member>
<member name="T:Microsoft.Fast.Components.FluentUI.DialogType">
<summary>
The type of <see cref="T:Microsoft.Fast.Components.FluentUI.FluentDialog"/>.
</summary>
</member>
<member name="F:Microsoft.Fast.Components.FluentUI.DialogType.Dialog">
<summary>
A normal dialog.
</summary>
</member>
<member name="F:Microsoft.Fast.Components.FluentUI.DialogType.MessageBox">
<summary>
A dialog shown as a message box.
</summary>
</member>
<member name="F:Microsoft.Fast.Components.FluentUI.DialogType.Panel">
<summary>
A dialog shown as a panel.
</summary>
</member>
<member name="F:Microsoft.Fast.Components.FluentUI.DialogType.SplashScreen">
<summary>
A dialog shown as a splash screen.
</summary>
</member>
<member name="T:Microsoft.Fast.Components.FluentUI.DividerRole">
<summary>
Defines the role of the divider.
Expand Down
26 changes: 13 additions & 13 deletions examples/Demo/Shared/Pages/Dialog/DialogPage.razor
Original file line number Diff line number Diff line change
Expand Up @@ -56,15 +56,15 @@
</p>
<CodeSnippet>
&lt;main&gt;
&lt;nav&gt;
:
&lt;/nav&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;article id=&quot;article&quot;&gt;
@@Body
&lt;/article&gt;
&lt;/div&gt;
&lt;FluentDialogProvider /&gt;
&lt;nav&gt;
:
&lt;/nav&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;article id=&quot;article&quot;&gt;
@@Body
&lt;/article&gt;
&lt;/div&gt;
&lt;FluentDialogProvider /&gt;
&lt;/main&gt;
</CodeSnippet>

Expand All @@ -76,27 +76,27 @@
<p>
Interaction with parent dialog can be made by injecting FluentDialog as Cascading Parameter. See <code>SimpleDialog.razor</code> for more details.
</p>
<DemoSection Title="DialogService with IDialogReference" Component="@typeof(DialogServiceExample)" AdditionalFiles="@(new[] {"SimpleDialog.razor"})">
<DemoSection Title="DialogService with IDialogReference" MaxHeight="500px" Component="@typeof(DialogServiceExample)" AdditionalFiles="@(new[] {"SimpleDialog.razor"})">
<Description>
This example shows how to use async methods to show a dialog and get the result back from it.
</Description>
</DemoSection>

<DemoSection Title="DialogService with EventCallback" Component="@typeof(DialogServiceCallbackExample)" AdditionalFiles="@(new[] {"SimpleDialog.razor"})">
<DemoSection Title="DialogService with EventCallback" MaxHeight="500px" Component="@typeof(DialogServiceCallbackExample)" AdditionalFiles="@(new[] {"SimpleDialog.razor"})">
<Description>
This example shows how to use an <code>EventCallback</code> parameter to get data back from the dialog.
</Description>
</DemoSection>


<DemoSection Title="Dialog without using DialogService" Component="@typeof(DialogDefault)" CollocatedFiles="@(new[] {"css"})">
<DemoSection Title="Dialog without using DialogService" MaxHeight="500px" Component="@typeof(DialogDefault)" CollocatedFiles="@(new[] {"css"})">
<Description>
This example shows a simple dialog created by specifying it's content manually (see the Razor tab). Because of this, the dialog is not automatically styled.
A CSS file has been added to set the width, heigth and padding of the dialog.
</Description>
</DemoSection>

<DemoSection Title="SimpleDialog as component" Component="@typeof(DialogSimpleDialog)">
<DemoSection Title="SimpleDialog as component" MaxHeight="500px" Component="@typeof(DialogSimpleDialog)">
<Description>
For a components to be useable in a dialog, it just needs to inherit from <code>IDialogContentComponent&lt;T&gt;</code>.
They can still be used as a normal component as well. This example shows the <code>SimpleDialog</code> component from the
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@
DialogParameters<SimplePerson> parameters = new()
{
Title = $"Hello {simplePerson.Firstname}",
PrimaryAction = "",
PrimaryAction = "Yes",
PrimaryActionEnabled = false,
SecondaryAction = "",
SecondaryAction = "No",
Width = "500px",
Height = "500px",
Content = simplePerson,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ private async Task OpenPanelLeftAsync()
ShowDismiss = false,
PrimaryAction = "Maybe",
SecondaryAction = "Cancel",
Width = "300px",
Width = "500px",
};
_dialog = await DialogService.ShowPanelAsync<SimplePanel, SimplePerson>(parameters);
DialogResult result = await _dialog.Result;
Expand Down
51 changes: 28 additions & 23 deletions src/Core/Components/Dialog/FluentDialog.razor
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@namespace Microsoft.Fast.Components.FluentUI
@using Microsoft.AspNetCore.Components.Rendering
@inherits FluentComponentBase

<CascadingValue Value="this" IsFixed="true">
Expand All @@ -14,15 +15,7 @@
aria-label=@(_parameters.AriaLabel ?? AriaLabel)
@attributes=@AdditionalAttributes>
<FluentStack Orientation="Orientation.Vertical" Class="fluent-dialog-content" Style="height:100%;">
@if (HeaderTemplate is not null)
{
@HeaderTemplate
}
else if (_parameters.ShowTitle && (_parameters.Title != null || _parameters.ShowDismiss))
{
<FluentDialogHeader Title="@_parameters.Title" ShowDismiss="@_parameters.ShowDismiss" />
}

@_renderDialogHeader
<div class="fluent-dialog-body" nofooter="@(!HasButtons)" style="@(_parameters.DialogBodyStyle ?? null)">
vnbaaij marked this conversation as resolved.
Show resolved Hide resolved
@if (Instance is null)
{
Expand All @@ -33,19 +26,31 @@
<DynamicComponent Type="@Instance.ContentType" Parameters="Instance.GetParameterDictionary()" />
}
</div>
@if (FooterTemplate is not null)
{
@FooterTemplate
}
else if (HasButtons)
{
<FluentDialogFooter Alignment="@_parameters.Alignment"
PrimaryAction="@_parameters.PrimaryAction"
PrimaryActionEnabled="@_parameters.PrimaryActionEnabled"
SecondaryAction="@_parameters.SecondaryAction"
SecondaryActionEnabled="@_parameters.SecondaryActionEnabled"/>

}
@_renderDialogFooter
</FluentStack>
</fluent-dialog>
</CascadingValue>
</CascadingValue>

@code {

private void RenderHeaderContent(RenderTreeBuilder __builder)
{
@if (_parameters.ShowTitle && (_parameters.Title != null || _parameters.ShowDismiss))
{
<FluentDialogHeader Title="@_parameters.Title" ShowDismiss="@_parameters.ShowDismiss" />
}
}

private void RenderFooterContent(RenderTreeBuilder __builder)
{
@if (HasButtons)
{
<FluentDialogFooter Alignment="@_parameters.Alignment"
PrimaryAction="@_parameters.PrimaryAction"
PrimaryActionEnabled="@_parameters.PrimaryActionEnabled"
SecondaryAction="@_parameters.SecondaryAction"
SecondaryActionEnabled="@_parameters.SecondaryActionEnabled" />

}
}
}
28 changes: 11 additions & 17 deletions src/Core/Components/Dialog/FluentDialog.razor.cs
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,15 @@ namespace Microsoft.Fast.Components.FluentUI;

public partial class FluentDialog : FluentComponentBase //, IDisposable
{
private const string DEFAULT_WIDTH = "500px";
private const string DEFAULT_DIALOG_WIDTH = "500px";
private const string DEFAULT_PANEL_WIDTH = "340px";
private const string DEFAULT_HEIGHT = "unset";
private DialogParameters _parameters = default!;
private bool _hidden;

private readonly RenderFragment _renderDialogHeader;
private readonly RenderFragment _renderDialogFooter;

[CascadingParameter]
private InternalDialogContext? DialogContext { get; set; } = default!;

Expand Down Expand Up @@ -80,18 +84,6 @@ public bool Hidden
[Parameter]
public RenderFragment? ChildContent { get; set; }

/// <summary>
/// Content to render in header.
/// </summary>
[Parameter]
public RenderFragment? HeaderTemplate { get; set; }

/// <summary>
/// Content to render in footer.
/// </summary>
[Parameter]
public RenderFragment? FooterTemplate { get; set; }

/// <summary>
/// The event callback invoked to return the dialog result.
/// </summary>
Expand All @@ -100,22 +92,24 @@ public bool Hidden

protected string? ClassValue => new CssBuilder(Class)
.AddClass("fluent-dialog-main")
.AddClass("right", () => _parameters.Alignment == HorizontalAlignment.Right)
.AddClass("left", () => _parameters.Alignment == HorizontalAlignment.Left)
.AddClass("right", () => _parameters.DialogType == DialogType.Panel && _parameters.Alignment == HorizontalAlignment.Right)
vnbaaij marked this conversation as resolved.
Show resolved Hide resolved
.AddClass("left", () => _parameters.DialogType == DialogType.Panel && _parameters.Alignment == HorizontalAlignment.Left)
.Build();

protected string? StyleValue => new StyleBuilder(Style)
.AddStyle("position", "absolute")
.AddStyle("top", "50%", () => _parameters.Alignment == HorizontalAlignment.Center)
.AddStyle("left", "50%", () => _parameters.Alignment == HorizontalAlignment.Center)
.AddStyle("--dialog-width", _parameters.Width ?? DEFAULT_WIDTH, () => _parameters.Alignment == HorizontalAlignment.Center)
.AddStyle("--dialog-width", _parameters.Width ?? DEFAULT_DIALOG_WIDTH, () => _parameters.Alignment == HorizontalAlignment.Center)
.AddStyle("--dialog-width", _parameters.Width ?? DEFAULT_PANEL_WIDTH, () => _parameters.DialogType == DialogType.Panel)
.AddStyle("--dialog-height", _parameters.Height ?? DEFAULT_HEIGHT, () => _parameters.Alignment == HorizontalAlignment.Center)
.Build();

[DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(DialogEventArgs))]
public FluentDialog()
{

_renderDialogHeader = RenderHeaderContent;
_renderDialogFooter = RenderFooterContent;
}

protected override void OnInitialized()
Expand Down
4 changes: 2 additions & 2 deletions src/Core/Components/Dialog/FluentDialogFooter.razor
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
@namespace Microsoft.Fast.Components.FluentUI
@inherits FluentComponentBase

<div class="@(Alignment == HorizontalAlignment.Center ? "fluent-dialog-footer-normal" : "fluent-dialog-footer-bottom")">
<div class="fluent-dialog-footer">
<FluentStack Orientation="Orientation.Horizontal"
HorizontalAlignment="@(Alignment == HorizontalAlignment.Center ? HorizontalAlignment.Right : HorizontalAlignment.Left)">
HorizontalAlignment="@(Dialog!.Instance.Parameters.Alignment == HorizontalAlignment.Center ? HorizontalAlignment.Right : HorizontalAlignment.Left)">
@if (ShowPrimaryAction)
{
<FluentButton title="@PrimaryAction"
Expand Down
11 changes: 1 addition & 10 deletions src/Core/Components/Dialog/FluentDialogFooter.razor.css
Original file line number Diff line number Diff line change
@@ -1,13 +1,4 @@
.fluent-dialog-footer-bottom {
font-size: 14px;
font-weight: normal;
margin: 20px;
width: calc(100% - 40px);
position: fixed;
bottom: 0px;
}

.fluent-dialog-footer-normal {
.fluent-dialog-footer {
font-size: 14px;
font-weight: normal;
margin: 20px;
Expand Down