Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

Anu6is
Copy link
Contributor

@Anu6is Anu6is commented Nov 8, 2024

Description

Adds a possible contextual action bar implementation using Blazor Sections.

  • Adds a new parameter Contextual to MudAppBar
    • This determines if the app bar should be rendered with a SectionOutlet or not.
  • Adds a new component - MudContextualActionBar
    • The alternate app bar to be displayed
  • Adds a new Contextual App Bar section (with working example) in the App Bar documentation page
  • Requires the main App Bar and the Contextual Action Bar to be interactive
  • Excluded from UserAttributesTests as nothing is rendered until the specified Visible condition is met.
    • Confirmed that the UserAttributes inherited from MudAppBar function as expected

Resolves #104

How Has This Been Tested?

  • Unit tests
  • Test viewer component
  • Test projects (Global Interactive Server, Per Page Interactive Server, Global WASM, Per Page Interactive WASM)
Screen.Recording.2024-11-08.092917.mp4

Type of Changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation (fix or improvement to the website or code docs)

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@github-actions github-actions bot added enhancement Request for adding a new feature or enhancing existing functionality (not fixing a defect) PR: needs review labels Nov 8, 2024
@Anu6is Anu6is changed the title Contextual action bar [MudAppBar] Add contextual action bar implementation Nov 8, 2024
Copy link

codecov bot commented Nov 8, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.22%. Comparing base (12c5dec) to head (0f5bad8).
Report is 10 commits behind head on dev.

Additional details and impacted files
@@            Coverage Diff             @@
##              dev   #10210      +/-   ##
==========================================
+ Coverage   91.21%   91.22%   +0.01%     
==========================================
  Files         411      414       +3     
  Lines       12506    12547      +41     
  Branches     2439     2449      +10     
==========================================
+ Hits        11407    11446      +39     
- Misses        555      557       +2     
  Partials      544      544              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@danielchalmers
Copy link
Member

Looks cool! Is it possible to avoid the duplication of the footer, MudToolBar definitions in the markup?

@danielchalmers danielchalmers requested a review from henon November 8, 2024 16:16
@Anu6is
Copy link
Contributor Author

Anu6is commented Nov 8, 2024

I thought about that, but if I take it out of the SectionContent then your contextual bar won't be able to override any of the properties on it.

@danielchalmers
Copy link
Member

I thought about that, but if I take it out of the SectionContent then your contextual bar won't be able to override any of the properties on it.

Would using builder syntax work to move the definition to the code behind and reuse it that way? Not very familiar with SectionContent

@Anu6is
Copy link
Contributor Author

Anu6is commented Nov 8, 2024

Looked at that too but I was getting an error when it attempted to render the builder (that could have fully been on my doing something wrong though).

@ScarletKuro
Copy link
Member

Could we do something like this to avoid duplication?

@if (Bottom)
{
    @if(Contextual)
    {
        <SectionOutlet SectionId="MudAppBar.ContextualActionBar" />
        <SectionContent SectionId="MudAppBar.ContextualActionBar">
            @Footer   
        </SectionContent>
    }
    else
    {
        @Footer
    }
}
else
{
    @if(Contextual)
    {
        <SectionOutlet SectionId="MudAppBar.ContextualActionBar" />
        <SectionContent SectionId="MudAppBar.ContextualActionBar">
            @Header    
        </SectionContent>
    }
    else
    {
        @Header 
    }
}
@code {
    private RenderFragment Header =>
	    @<header @attributes="UserAttributes" class="@Classname" style="@Style">
                <MudToolBar Dense="@Dense" Gutters="@Gutters" Class="@ToolBarClassname" WrapContent="@WrapContent">
                    @ChildContent
                </MudToolBar>
            </header>;
 
    private RenderFragment Footer =>
	    @<footer @attributes="UserAttributes" class="@Classname" style="@Style">
                <MudToolBar Dense="@Dense" Gutters="@Gutters" Class="@ToolBarClassname" WrapContent="@WrapContent">
                    @ChildContent
                </MudToolBar>
            </footer>;
}

Copy link
Member

@danielchalmers danielchalmers left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like mud-appbar is a footer in the docs example and becomes a header when it changes to the green form

@Anu6is
Copy link
Contributor Author

Anu6is commented Nov 9, 2024

Left a Bottom attribute on there... started with a copy/paste from the docs example above it

Copy link
Member

@ScarletKuro ScarletKuro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@ScarletKuro
Copy link
Member

Reduced to just:

@if (Contextual)
{
    <SectionOutlet SectionId="@ContextualActionBar" />
    <SectionContent SectionId="@ContextualActionBar">
        @(Bottom ? Footer : Header)
    </SectionContent>
}
else
{
    @(Bottom ? Footer : Header)
}

if ya all don't mind

Copy link

@henon henon changed the title [MudAppBar] Add contextual action bar implementation MudAppBar: Add contextual action bar implementation Nov 10, 2024
@ScarletKuro ScarletKuro merged commit 21e9161 into MudBlazor:dev Nov 10, 2024
5 checks passed
@ScarletKuro
Copy link
Member

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Request for adding a new feature or enhancing existing functionality (not fixing a defect)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Missing contextual action bar implementation
3 participants