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

feat: Provide fragment to extend Profile Menu Button #1910

Closed
StephenOTT opened this issue Apr 22, 2024 · 6 comments · Fixed by #2010
Closed

feat: Provide fragment to extend Profile Menu Button #1910

StephenOTT opened this issue Apr 22, 2024 · 6 comments · Fixed by #2010
Labels
community:good-first-issue Good issues for first time contributors improvement A non-feature-adding improvement

Comments

@StephenOTT
Copy link

Consider the azure admin portal, where a similar Profile Menu is shown but with additional contextual info (the current username/email/ID and tenant) to the left of the profile menu button.

Would be good to have the ability to add a fragment to the left/right of the profile menu and have the clickable area be part of the extended fragment.

@microsoft-github-policy-service microsoft-github-policy-service bot added the triage New issue. Needs to be looked at label Apr 22, 2024
@dvoituron
Copy link
Collaborator

dvoituron commented Apr 23, 2024

You can do that using a code like this:

<FluentStack VerticalAlignment="VerticalAlignment.Center">
    <div>
        <FluentLabel Style="font-size: 11px; line-height: 14px;">Denis Voituron</FluentLabel>
        <FluentLabel Style="font-size: 11px; line-height: 14px;">Microsoft</FluentLabel>
    </div>
    <FluentProfileMenu Image="@DataSource.ImageFaces[3]"
                        Status="@PresenceStatus.Available"
                        TopCorner="true"
                        Initials="OS"
                        FullName="Olivia Smith"
                        EMail="sam@my-company.com"
                        Style="min-width: 330px;">
                        <HeaderTemplate><FluentLabel Typo="Typography.Body">My Company Corp</FluentLabel></HeaderTemplate>
                        <FooterTemplate></FooterTemplate>
    </FluentProfileMenu>
</FluentStack>

image

@StephenOTT
Copy link
Author

StephenOTT commented Apr 24, 2024

@dvoituron agreed that is an option. What i was looking for was to wrap the "Denis" text into the clickable area. So the user could click on the Profile head or the text (similar to azure admin ui)

But your code is very applicable/a very viable option

@vnbaaij vnbaaij added community:good-first-issue Good issues for first time contributors improvement A non-feature-adding improvement and removed triage New issue. Needs to be looked at labels Apr 26, 2024
@vnbaaij
Copy link
Collaborator

vnbaaij commented Apr 26, 2024

Could be a nice option to add some parameter like DisplayTemplate (of type RenderFragment?) with wich you can define what is shown in front of the image.

Seems like somthing that could be done with a community contribution. Any takers?

@ID-JA
Copy link

ID-JA commented May 3, 2024

besides the DisplayTemplate parameter, there could be an option to select the content's position. This would allow content to be rendered left or right of the image, maybe at the top or bottom, too.

@dvoituron
Copy link
Collaborator

See #2010

@vnbaaij vnbaaij linked a pull request May 16, 2024 that will close this issue
@vnbaaij
Copy link
Collaborator

vnbaaij commented May 16, 2024

Fixed with PR mentioned above

@vnbaaij vnbaaij closed this as completed May 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
community:good-first-issue Good issues for first time contributors improvement A non-feature-adding improvement
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants