Skip to content

[ProfileMenu] #2010

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.

Sign up for GitHub

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

Merged
vnbaaij merged 3 commits into from
May 4, 2024
Merged

[ProfileMenu] #2010

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
52dddcb
Add StartTemplate and EndTemplate
dvoituron May 4, 2024
211f7a1
Update code and update Style/Class to PopoveStyle/PopoverClass
dvoituron May 4, 2024
1ce0f23
Merge branch 'dev' into users/dvoituron/profile-menu-starttemplate
dvoituron May 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6769,6 +6769,16 @@
Using this property will override the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.FooterLink" /> property.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.StartTemplate">
<summary>
Gets or sets the content to be displayed in the start (left) section of the Profile button.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.EndTemplate">
<summary>
Gets or sets the content to be displayed in the end (right) section of the Profile button.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.Status">
<summary>
Gets or sets the status to show. See <see cref="T:Microsoft.FluentUI.AspNetCore.Components.PresenceStatus"/> for options.
Expand All @@ -6779,6 +6789,16 @@
Gets or sets the title to show on hover. If not provided, the status will be used.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.PopoverClass">
<summary>
Gets or sets the Class to apply to the Profile Popup.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.PopoverStyle">
<summary>
Gets or sets the Style to apply to the Profile Popup.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.Initials">
<summary>
Gets or sets the initials to display if no image is provided.
Expand Down Expand Up @@ -6840,6 +6860,9 @@
Event raised when the user clicks on the Footer hyperlink (e.g. View account).
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.PersonaId">
<summary />
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProgress.Min">
<summary>
Gets or sets the minimum value.
Expand Down
6 changes: 5 additions & 1 deletion examples/Demo/Shared/Pages/ProfileMenu/Examples/ProfileMenuCustomized.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
<FluentStack HorizontalAlignment="@HorizontalAlignment.End"
VerticalAlignment="@VerticalAlignment.Center"
Style="height: 48px; background: var(--neutral-layer-4); padding-inline-end: 10px; ">
<FluentProfileMenu Initials="BG">
<FluentProfileMenu Initials="BG"
Style="--fluent-profile-menu-hover: var(--neutral-stroke-focus); padding: 4px;">
<StartTemplate>
Bill Gates
</StartTemplate>
<HeaderTemplate>
<FluentLabel Typo="@Typography.Header">Login</FluentLabel>
</HeaderTemplate>
Expand Down
2 changes: 1 addition & 1 deletion examples/Demo/Shared/Pages/ProfileMenu/Examples/ProfileMenuDefault.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@
Initials="BG"
FullName="Bill Gates"
EMail="[email protected]"
Style="min-width: 330px;" />
PopoverStyle="min-width: 330px;" />
</FluentStack>
142 changes: 72 additions & 70 deletions src/Core/Components/ProfileMenu/FluentProfileMenu.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,83 +1,85 @@
@namespace Microsoft.FluentUI.AspNetCore.Components
@inherits FluentComponentBase

<div class="fluent-profile-menu" top-corner="@TopCorner">
<FluentPersona Id="@Id"
<div id="@Id" class="@ClassValue" style="@StyleValue" top-corner="@TopCorner"
@onclick="@(e => PopoverVisible = !PopoverVisible)">
@StartTemplate
<FluentPersona Id="@PersonaId"
Image="@Image"
Name="@FullName"
ImageSize="@ButtonSize"
Status="@Status"
StatusTitle="@StatusTitle"
Initials="@Initials"
Style="height: inherit;"
OnClick="@(e => PopoverVisible = !PopoverVisible)" />
Style="height: inherit;" />
@EndTemplate
</div>

<FluentPopover AnchorId="@Id"
Class="@Class"
Style="@Style"
HorizontalPosition="@HorizontalPosition.Start"
@bind-Open="@PopoverVisible"
@attributes="@AdditionalAttributes">
<Header>
@if (HeaderTemplate is null && (!string.IsNullOrEmpty(HeaderLabel) || !string.IsNullOrEmpty(HeaderButton)))
{
<FluentStack VerticalAlignment="@VerticalAlignment.Center">
@if (!string.IsNullOrEmpty(HeaderLabel))
{
<FluentLabel part="header-label">@HeaderLabel</FluentLabel>
}
@if (!string.IsNullOrEmpty(HeaderButton))
{
<FluentSpacer />
<FluentButton part="header-button" Appearance="@Appearance.Stealth" OnClick="@OnHeaderButtonClick">@HeaderButton</FluentButton>
}
</FluentStack>
}
else
{
@HeaderTemplate
}
</Header>
<FluentPopover AnchorId="@PersonaId"
Class="@PopoverClass"
Style="@PopoverStyle"
HorizontalPosition="@HorizontalPosition.Start"
@bind-Open="@PopoverVisible"
@attributes="@AdditionalAttributes">
<Header>
@if (HeaderTemplate is null && (!string.IsNullOrEmpty(HeaderLabel) || !string.IsNullOrEmpty(HeaderButton)))
{
<FluentStack VerticalAlignment="@VerticalAlignment.Center">
@if (!string.IsNullOrEmpty(HeaderLabel))
{
<FluentLabel part="header-label">@HeaderLabel</FluentLabel>
}
@if (!string.IsNullOrEmpty(HeaderButton))
{
<FluentSpacer />
<FluentButton part="header-button" Appearance="@Appearance.Stealth" OnClick="@OnHeaderButtonClick">@HeaderButton</FluentButton>
}
</FluentStack>
}
else
{
@HeaderTemplate
}
</Header>

<Body>
@if (ChildContent is null)
{
<FluentStack Style="height: 100%;">
<FluentPersona Image="@Image"
ImageSize="@ImageSize"
Initials="@Initials"
Style="align-items: normal;">
<FluentLabel part="fullname" Typo="@Typography.Header" Style="font-weight: bold;">@FullName</FluentLabel>
<FluentLabel part="email">@EMail</FluentLabel>
</FluentPersona>
<Body>
@if (ChildContent is null)
{
<FluentStack Style="height: 100%;">
<FluentPersona Image="@Image"
ImageSize="@ImageSize"
Initials="@Initials"
Style="align-items: normal;">
<FluentLabel part="fullname" Typo="@Typography.Header" Style="font-weight: bold;">@FullName</FluentLabel>
<FluentLabel part="email">@EMail</FluentLabel>
</FluentPersona>

</FluentStack>
}
else
{
@ChildContent
}
</Body>
</FluentStack>
}
else
{
@ChildContent
}
</Body>

<Footer>
@if (FooterTemplate is null && !string.IsNullOrEmpty(FooterLink))
{
<FluentStack VerticalAlignment="@VerticalAlignment.Center">
@if (!string.IsNullOrEmpty(FooterLabel))
{
<FluentLabel part="footer-label">@FooterLabel</FluentLabel>
}
@if (!string.IsNullOrEmpty(FooterLink))
{
<FluentSpacer />
<FluentAnchor part="footer-link" Appearance="@Appearance.Hypertext" Href="#" OnClick="@OnFooterLinkClick">@FooterLink</FluentAnchor>
}
</FluentStack>
}
else
{
@FooterTemplate
}
</Footer>
</FluentPopover>
</div>
<Footer>
@if (FooterTemplate is null && !string.IsNullOrEmpty(FooterLink))
{
<FluentStack VerticalAlignment="@VerticalAlignment.Center">
@if (!string.IsNullOrEmpty(FooterLabel))
{
<FluentLabel part="footer-label">@FooterLabel</FluentLabel>
}
@if (!string.IsNullOrEmpty(FooterLink))
{
<FluentSpacer />
<FluentAnchor part="footer-link" Appearance="@Appearance.Hypertext" Href="#" OnClick="@OnFooterLinkClick">@FooterLink</FluentAnchor>
}
</FluentStack>
}
else
{
@FooterTemplate
}
</Footer>
</FluentPopover>
35 changes: 35 additions & 0 deletions src/Core/Components/ProfileMenu/FluentProfileMenu.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
// ------------------------------------------------------------------------

using Microsoft.AspNetCore.Components;
using Microsoft.FluentUI.AspNetCore.Components.Utilities;

namespace Microsoft.FluentUI.AspNetCore.Components;

Expand All @@ -13,6 +14,13 @@ public FluentProfileMenu()
Id = Identifier.NewId();
}

protected string? ClassValue => new CssBuilder(Class)
.AddClass("fluent-profile-menu")
.Build();

protected string? StyleValue => new StyleBuilder(Style)
.Build();

private bool PopoverVisible { get; set; } = false;

/// <summary>
Expand Down Expand Up @@ -42,6 +50,18 @@ public FluentProfileMenu()
[Parameter]
public RenderFragment? FooterTemplate { get; set; }

/// <summary>
/// Gets or sets the content to be displayed in the start (left) section of the Profile button.
/// </summary>
[Parameter]
public RenderFragment? StartTemplate { get; set; }

/// <summary>
/// Gets or sets the content to be displayed in the end (right) section of the Profile button.
/// </summary>
[Parameter]
public RenderFragment? EndTemplate { get; set; }

/// <summary>
/// Gets or sets the status to show. See <see cref="PresenceStatus"/> for options.
/// </summary>
Expand All @@ -54,6 +74,18 @@ public FluentProfileMenu()
[Parameter]
public string? StatusTitle { get; set; }

/// <summary>
/// Gets or sets the Class to apply to the Profile Popup.
/// </summary>
[Parameter]
public virtual string? PopoverClass { get; set; } = null;

/// <summary>
/// Gets or sets the Style to apply to the Profile Popup.
/// </summary>
[Parameter]
public virtual string? PopoverStyle { get; set; } = null;

/// <summary>
/// Gets or sets the initials to display if no image is provided.
/// By default, the first letters of the <see cref="FullName"/> is used.
Expand Down Expand Up @@ -126,4 +158,7 @@ public FluentProfileMenu()
/// </summary>
[Parameter]
public EventCallback OnFooterLinkClick { get; set; }

/// <summary />
private string PersonaId => $"{Id}-persona";
}
9 changes: 9 additions & 0 deletions src/Core/Components/ProfileMenu/FluentProfileMenu.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
.fluent-profile-menu {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
cursor: pointer;
}

.fluent-profile-menu:hover {
background-color: var(--fluent-profile-menu-hover);
}

.fluent-profile-menu ::deep > .fluent-persona > .name {
display: none;
}
Expand Down
30 changes: 15 additions & 15 deletions .../Core/ProfileMenu/FluentProfileMenuTests.FluentProfileMenu_Customized.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@

<div class="fluent-profile-menu" b-rsm9d6pikk="">
<div id="xxx" class="fluent-profile-menu" blazor:onclick="1" b-rsm9d6pikk="">
<div id="xxx" class="fluent-persona" style="height: inherit;" position="end" b-n7zog0zvqi="">
<div class="initials" blazor:onclick="1" style="cursor: pointer;" b-n7zog0zvqi="">
<div class="initials" b-n7zog0zvqi="">
<div class="fluent-presence-badge" title="" b-1o8tp31nhy="">
<div style="display: table-cell; vertical-align: middle; width: 32px; min-width: 32px; height: 32px; min-height: 32px;" b-n7zog0zvqi="">DV</div>
</div>
</div>
</div>
<div class="fluent-overlay" style="cursor: auto; position: fixed; z-index: 9900;" blazor:onclick="2" blazor:oncontextmenu="3" blazor:oncontextmenu:preventdefault="" b-xkrr7evqik="">
<div style="display: flex; align-items:center; justify-content: center; width: 100%; height: 100%" b-xkrr7evqik=""></div>
</div>
<fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="start" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="bottom" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" b-2ov9fhztky="" blazor:elementreference="xxx">
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout);" b-2ov9fhztky="">
<div class="stack-vertical" style="align-items: start; justify-content: start; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
<div class="fluent-popover-content" b-qp3z8ghd2d="">
<div part="header" b-qp3z8ghd2d="">Header</div>
<div part="body" b-qp3z8ghd2d="">Body</div>
<div part="footer" b-qp3z8ghd2d="">Footer</div>
</div>
</div>
<div class="fluent-overlay" style="cursor: auto; position: fixed; z-index: 9900;" blazor:onclick="2" blazor:oncontextmenu="3" blazor:oncontextmenu:preventdefault="" b-xkrr7evqik="">
<div style="display: flex; align-items:center; justify-content: center; width: 100%; height: 100%" b-xkrr7evqik=""></div>
</div>
<fluent-anchored-region id="xxx" anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="start" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="bottom" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" b-2ov9fhztky="" blazor:elementreference="xxx">
<div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout);" b-2ov9fhztky="">
<div class="stack-vertical" style="align-items: start; justify-content: start; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
<div class="fluent-popover-content" b-qp3z8ghd2d="">
<div part="header" b-qp3z8ghd2d="">Header</div>
<div part="body" b-qp3z8ghd2d="">Body</div>
<div part="footer" b-qp3z8ghd2d="">Footer</div>
</div>
</div>
</fluent-anchored-region>
</div>
</div>
</fluent-anchored-region>
Loading