Skip to content

[AppBar] Make it work in horizontal orientation as well #2760

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 14 commits into from
Oct 18, 2024
Merged

[AppBar] Make it work in horizontal orientation as well #2760

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
346933a
Initial work to make AppBar work in horizontal orientation
vnbaaij Oct 4, 2024
c028267
Remove unused code
vnbaaij Oct 4, 2024
0a97f71
- Process review comments.
vnbaaij Oct 4, 2024
9729bcd
Merge branch 'dev' into users/vnbaaij/app-bar-work
vnbaaij Oct 4, 2024
d55f8d9
Change AnchoredRegion examples so canvas can be resized
vnbaaij Oct 7, 2024
51c58cb
Merge branch 'dev' into users/vnbaaij/app-bar-work
vnbaaij Oct 8, 2024
dfd77ff
Optimize and make Overflow work better for this
vnbaaij Oct 9, 2024
7623525
Merge branch 'dev' into users/vnbaaij/app-bar-work
vnbaaij Oct 9, 2024
4902479
Refresh existing tests + add 2 new ones
vnbaaij Oct 9, 2024
d289262
Merge branch 'dev' into users/vnbaaij/app-bar-work
vnbaaij Oct 9, 2024
47465fc
Merge branch 'dev' into users/vnbaaij/app-bar-work
vnbaaij Oct 16, 2024
d88d3f4
Test id/isHorizontal state being overwirtten
vnbaaij Oct 17, 2024
20601bc
Merge branch 'dev' into users/vnbaaij/app-bar-work
vnbaaij Oct 17, 2024
d3d8133
Merge branch 'dev' into users/vnbaaij/app-bar-work
vnbaaij Oct 17, 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
5 changes: 5 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 @@ -313,6 +313,11 @@
Gets or sets if the popover shows the search box.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAppBar.Orientation">
<summary>
Gets or sets the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.Orientation"/> of the app bar.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAppBar.PopoverVisibilityChanged">
<summary>
Event to be called when the visibility of the popover changes.
Expand Down
6 changes: 3 additions & 3 deletions examples/Demo/Shared/Pages/AnchoredRegion/Examples/AnchoredRegionDynamic.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div id="viewport-default" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto">
<div id="viewport-default" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto; resize:both;">
<FluentButton Appearance=Appearance.Neutral id="anchor-default" style="margin-left:100px;margin-top:100px">anchor</FluentButton>
<FluentAnchoredRegion Anchor="anchor-default" Viewport="viewport-default"
VerticalPositioningMode="AxisPositioningMode.Dynamic"
HorizontalPositioningMode="AxisPositioningMode.Dynamic"
AutoUpdateMode="AutoUpdateMode.Anchor">
AutoUpdateMode="AutoUpdateMode.Auto">
<div style="height:100px;width:100px;background:var(--highlight-bg);" />
</FluentAnchoredRegion>
</div>
</div>
4 changes: 2 additions & 2 deletions examples/Demo/Shared/Pages/AnchoredRegion/Examples/AnchoredRegionFixed.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="fixed-header" style="height: 80px; width: 60%; background: var(--neutral-layer-4); overflow: hidden; display: flex; z-index: 10;">
<div id="fixed-header" style="height: 80px; width: 60%; background: var(--neutral-layer-4); overflow: hidden; display: flex; z-index: 10;resize:both;">
<h1>Anchored region</h1>
<FluentButton Appearance=Appearance.Neutral id="anchor-fixed" style="margin-left: 200px; margin-top: 20px; height: 20px">
anchor in fixed container
Expand All @@ -12,4 +12,4 @@
HorizontalInset="true">
<div style="height: 100%; width: 100%; background: var(--highlight-bg);">inside</div>
</FluentAnchoredRegion>
</div>
</div>
2 changes: 1 addition & 1 deletion examples/Demo/Shared/Pages/AnchoredRegion/Examples/AnchoredRegionInset.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="viewport-inset" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:scroll">
<div id="viewport-inset" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto;resize:both;">
<FluentButton Appearance=Appearance.Neutral id="anchor-inset" style="margin-left:100px;margin-top:100px">anchor</FluentButton>
<FluentAnchoredRegion Anchor="anchor-inset" Viewport="viewport-inset"
VerticalPositioningMode="AxisPositioningMode.Dynamic"
Expand Down
2 changes: 1 addition & 1 deletion examples/Demo/Shared/Pages/AnchoredRegion/Examples/AnchoredRegionLockToDefault.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="viewport-locked" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto">
<div id="viewport-locked" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto; resize:both;">
<FluentAnchoredRegion Anchor="anchor-locked" Viewport="viewport-locked"
VerticalPositioningMode="AxisPositioningMode.Locktodefault"
VerticalDefaultPosition="VerticalPosition.Bottom"
Expand Down
4 changes: 2 additions & 2 deletions examples/Demo/Shared/Pages/AnchoredRegion/Examples/AnchoredRegionRTLDynamic.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div id="viewport-rtl-dynamic" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:scroll" dir="rtl">
<div id="viewport-rtl-dynamic" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto;resize:both;" dir="rtl">
<FluentAnchoredRegion Anchor="anchor-rtl-dynamic" Viewport="viewport-rtl-dynamic"
VerticalPositioningMode="AxisPositioningMode.Dynamic"
VerticalDefaultPosition="VerticalPosition.Top"
HorizontalPositioningMode="AxisPositioningMode.Dynamic"
HorizontalDefaultPosition="HorizontalPosition.Unset"
HorizontalScaling="AxisScalingMode.Content"
VerticalScaling="AxisScalingMode.Content"
AutoUpdateMode="AutoUpdateMode.Anchor">
AutoUpdateMode="AutoUpdateMode.Auto">
<div style="height:100px;width:100px;background:var(--highlight-bg);" />
</FluentAnchoredRegion>
<FluentButton Appearance=Appearance.Neutral id="anchor-rtl-dynamic" style="margin-right:100px;margin-top:100px">anchor</FluentButton>
Expand Down
2 changes: 1 addition & 1 deletion examples/Demo/Shared/Pages/AnchoredRegion/Examples/AnchoredRegionRTLFill.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="viewport-rtl-fill" dir="rtl" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:scroll">
<div id="viewport-rtl-fill" dir="rtl" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto;resize:both;">
<FluentButton Appearance=Appearance.Neutral id="anchor-rtl-fill" style="margin-right:100px;margin-top:100px">anchor</FluentButton>
<FluentAnchoredRegion Anchor="anchor-rtl-fill" Viewport="viewport-rtl-fill"
VerticalPositioningMode="AxisPositioningMode.Dynamic"
Expand Down
2 changes: 1 addition & 1 deletion examples/Demo/Shared/Pages/AnchoredRegion/Examples/AnchoredRegionRTLStartAndEnd.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="viewport-rtl-se" dir="rtl" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:scroll">
<div id="viewport-rtl-se" dir="rtl" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto;resize:both;">
<FluentButton Appearance=Appearance.Neutral id="anchor-rtl-se" style="margin-right:100px;margin-top:100px">anchor</FluentButton>
<FluentAnchoredRegion Anchor="anchor-rtl-se" Viewport="viewport-rtl-se"
HorizontalPositioningMode="AxisPositioningMode.Locktodefault"
Expand Down
2 changes: 1 addition & 1 deletion examples/Demo/Shared/Pages/AnchoredRegion/Examples/AnchoredRegionScalingOffset.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="viewport-scaling-offset" style="height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto;position:relative;">
<div id="viewport-scaling-offset" style="height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto;position:relative;resize:both;">
<FluentButton Appearance=Appearance.Neutral id="anchor-scaling-offset" style="margin-left:100px;margin-top:100px">anchor</FluentButton>
<FluentAnchoredRegion id="region-scaling-offset" Anchor="anchor-scaling-offset" Viewport="viewport-scaling-offset"
VerticalPositioningMode="AxisPositioningMode.Dynamic"
Expand Down
2 changes: 1 addition & 1 deletion examples/Demo/Shared/Pages/AnchoredRegion/Examples/AnchoredRegionScalingUpdate.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="viewport-scaling-update" style="height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto;position:relative;">
<div id="viewport-scaling-update" style="height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto;position:relative;resize:both;">
<FluentButton Appearance=Appearance.Neutral id="anchor-scaling-update" style="margin-left:100px;margin-top:100px">anchor</FluentButton>
<FluentAnchoredRegion id="region-scaling-update" Anchor="anchor-scaling-update" Viewport="viewport-scaling-update"
VerticalPositioningMode="AxisPositioningMode.Dynamic"
Expand Down
2 changes: 1 addition & 1 deletion examples/Demo/Shared/Pages/AnchoredRegion/Examples/AnchoredRegionSizeToAnchor.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="viewport-anchor-sized" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:scroll">
<div id="viewport-anchor-sized" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto;resize:both;">
<FluentAnchoredRegion Anchor="anchor-anchor-sized" Viewport="viewport-anchor-sized"
VerticalPositioningMode="AxisPositioningMode.Dynamic"
VerticalScaling="AxisScalingMode.Anchor"
Expand Down
2 changes: 1 addition & 1 deletion examples/Demo/Shared/Pages/AnchoredRegion/Examples/AnchoredRegionStartAndEnd.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="viewport-se" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:scroll">
<div id="viewport-se" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto;resize:both;">
<FluentButton Appearance=Appearance.Neutral id="anchor-se" style="margin-left:100px;margin-top:100px">anchor</FluentButton>
<FluentAnchoredRegion Anchor="anchor-se" Viewport="viewport-se"
HorizontalPositioningMode="AxisPositioningMode.Locktodefault"
Expand Down
5 changes: 3 additions & 2 deletions examples/Demo/Shared/Pages/AnchoredRegion/Examples/AnchoredRegionThresholds.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<div id="viewport-thresholds" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:scroll">
<div id="viewport-thresholds" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto;resize:both;">
<FluentButton Appearance=Appearance.Neutral id="anchor-thresholds" style="margin-left:100px;margin-top:100px">anchor</FluentButton>
<FluentAnchoredRegion Anchor="anchor-thresholds" Viewport="viewport-thresholds"
VerticalPositioningMode="AxisPositioningMode.Dynamic"
VerticalDefaultPosition="VerticalPosition.Top"
VerticalThreshold=0
HorizontalPositioningMode="AxisPositioningMode.Dynamic"
HorizontalDefaultPosition="HorizontalPosition.Left"
HorizontalThreshold="200">
HorizontalThreshold="200"
AutoUpdateMode="AutoUpdateMode.Auto">
<div style="height:100px;width:100px;background:var(--highlight-bg);" />
</FluentAnchoredRegion>
</div>
4 changes: 2 additions & 2 deletions examples/Demo/Shared/Pages/AnchoredRegion/Examples/AnchoredRegionToggle.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="viewport-toggle-anchor" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:scroll">
<div id="viewport-toggle-anchor" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto;resize:both;">
<FluentButton Appearance=Appearance.Neutral id="toggle-anchor-anchor1" style="margin-left:100px;margin-top:100px" @onclick="ToggleAnchor">Set anchor 1</FluentButton>
<FluentButton Appearance=Appearance.Neutral id="toggle-anchor-anchor2" @onclick="ToggleAnchor">Set anchor 2</FluentButton>
<FluentAnchoredRegion id="toggle-anchor-region" Anchor="@anchor" Viewport="viewport-toggle-anchor"
Expand All @@ -20,4 +20,4 @@
{
anchor = anchor == "toggle-anchor-anchor1" ? "toggle-anchor-anchor2" : "toggle-anchor-anchor1";
}
}
}
6 changes: 3 additions & 3 deletions examples/Demo/Shared/Pages/AnchoredRegion/Examples/AnchoredRegionTogglePosition.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="viewport-toggle-positions" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:scroll">
<div id="viewport-toggle-positions" style="position:relative;height:400px;width:400px;background: var(--neutral-layer-4);overflow:auto;resize:both;">
<FluentButton Appearance=Appearance.Neutral id="anchor-toggle-positions" style="margin-left:150px;margin-top:100px">anchor</FluentButton>
<FluentAnchoredRegion id="toggle-positions-region" Anchor="anchor-toggle-positions" Viewport="viewport-toggle-positions"
VerticalPositioningMode="AxisPositioningMode.Locktodefault"
Expand Down Expand Up @@ -48,7 +48,7 @@
{
horizontalPosition = HorizontalPosition.Left;
}

}

private void ToggleVertical()
Expand All @@ -66,4 +66,4 @@
verticalPosition = VerticalPosition.Top;
}
}
}
}
2 changes: 2 additions & 0 deletions examples/Demo/Shared/Pages/AppBar/AppBarPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@

<DemoSection Title="Default" Component="@typeof(AppBarDefault)"></DemoSection>

<DemoSection Title="Smaller icons" Component="@typeof(AppBarSmallIcons)"></DemoSection>

<DemoSection Title="From list of apps" Component="@typeof(AppBarFromListOfApps)">
<Description>
<p>Example of using the AppBar with a list of apps</p>
Expand Down
124 changes: 69 additions & 55 deletions examples/Demo/Shared/Pages/AppBar/Examples/AppBarDefault.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,90 @@
<div style="background-color: var(--neutral-layer-3); overflow: auto; resize: vertical; height: 295px; padding: 10px;">
<FluentStack Orientation="Orientation.Vertical" Style="height: 100%;">
<FluentSwitch @bind-Value="_showSearch" CheckedMessage="Show" UncheckedMessage="Hide" Label="Show search in popover" />
<FluentAppBar Style="height: 100%; background-color: var(--neutral-layer-2);" PopoverVisibilityChanged="HandlePopover" PopoverShowSearch="@_showSearch">
@{
string stylevalue = $"background-color: var(--neutral-layer-3); overflow: auto; resize: {(_vertical ? "vertical; width: 86px; height: 320px;" : "horizontal;width: 440px; height: 68px;")} padding: 10px;";
}
<FluentStack Orientation="Orientation.Vertical" Style="height: 100%;">
<FluentStack Orientation="Orientation.Horizontal">
<FluentSwitch @bind-Value="_showSearch" CheckedMessage="Show" UncheckedMessage="Hide" Label="Show search in popover" />
<FluentSwitch @bind-Value="_vertical" @bind-Value:after="@HandleOrientationChanged" CheckedMessage="Vertical" UncheckedMessage="Horizontal" Label="Orientation" />
</FluentStack>
<div style="@stylevalue">
@{
var wh = _vertical ? "height: 100%; width: 100%;" : "";
}
<FluentAppBar Orientation="@(_vertical ? Orientation.Vertical : Orientation.Horizontal)" Style="@(" background-color: var(--neutral-layer-2);")" PopoverVisibilityChanged="HandlePopover" PopoverShowSearch="@_showSearch">

<FluentAppBarItem Href="/AppBarDefault"
Match="NavLinkMatch.All"
IconRest="ResourcesIcon()"
IconActive="ResourcesIcon(active: true)"
Text="Resources" />
Match="NavLinkMatch.All"
IconRest="ResourcesIcon()"
IconActive="ResourcesIcon(active: true)"
Text="Resources" />
<FluentAppBarItem Href="/AppBar"
IconRest="ConsoleLogsIcon()"
IconActive="ConsoleLogsIcon(active: true)"
Text="Console Logs" />
IconRest="ConsoleLogsIcon()"
IconActive="ConsoleLogsIcon(active: true)"
Text="Console Logs" />

<FluentAppBarItem Href="/StructuredLogs"
IconRest="StructuredLogsIcon()"
IconActive="StructuredLogsIcon(active: true)"
Text="Logs"
Tooltip="Structured Logs"
Count="4"/>
IconRest="StructuredLogsIcon()"
IconActive="StructuredLogsIcon(active: true)"
Text="Logs"
Tooltip="Structured Logs"
Count="4"/>
<FluentAppBarItem Href="/Traces"
IconRest="TracesIcon()"
IconActive="TracesIcon(active: true)"
Text="Traces" />
IconRest="TracesIcon()"
IconActive="TracesIcon(active: true)"
Text="Traces" />
<FluentAppBarItem Href="/Metrics"
IconRest="MetricsIcon()"
IconActive="MetricsIcon(active: true)"
Text="Metrics" />
IconRest="MetricsIcon()"
IconActive="MetricsIcon(active: true)"
Text="Metrics" />
<FluentAppBarItem Href="/AppBarPage"
IconRest="ResourcesIcon()"
IconActive="ResourcesIcon(active: true)"
Text="Resources 2" />
IconRest="ResourcesIcon()"
IconActive="ResourcesIcon(active: true)"
Text="Resources 2" />
<FluentAppBarItem Href="/AppBar"
IconRest="ConsoleLogsIcon()"
IconActive="ConsoleLogsIcon(active: true)"
Text="Console Logs 2" />
IconRest="ConsoleLogsIcon()"
IconActive="ConsoleLogsIcon(active: true)"
Text="Console Logs 2" />

<FluentAppBarItem Href="/StructuredLogs"
IconRest="StructuredLogsIcon()"
IconActive="StructuredLogsIcon(active: true)"
Text="Structured Logs 2" />
IconRest="StructuredLogsIcon()"
IconActive="StructuredLogsIcon(active: true)"
Text="Structured Logs 2" />
<FluentAppBarItem Href="/Traces"
IconRest="TracesIcon()"
IconActive="TracesIcon(active: true)"
Text="Traces 2" />
IconRest="TracesIcon()"
IconActive="TracesIcon(active: true)"
Text="Traces 2" />
<FluentAppBarItem Href="/Metrics"
IconRest="MetricsIcon()"
IconActive="MetricsIcon(active: true)"
Text="Metrics 2" />
IconRest="MetricsIcon()"
IconActive="MetricsIcon(active: true)"
Text="Metrics 2" />
<FluentAppBarItem Href="/AppBarPage"
IconRest="ResourcesIcon()"
IconActive="ResourcesIcon(active: true)"
Text="Resources 3" />
IconRest="ResourcesIcon()"
IconActive="ResourcesIcon(active: true)"
Text="Resources 3" />
<FluentAppBarItem Href="/AppBar"
IconRest="ConsoleLogsIcon()"
IconActive="ConsoleLogsIcon(active: true)"
Text="Console Logs 3" />
IconRest="ConsoleLogsIcon()"
IconActive="ConsoleLogsIcon(active: true)"
Text="Console Logs 3" />

<FluentAppBarItem Href="/StructuredLogs"
IconRest="StructuredLogsIcon()"
IconActive="StructuredLogsIcon(active: true)"
Text="Structured Logs 3" />
IconRest="StructuredLogsIcon()"
IconActive="StructuredLogsIcon(active: true)"
Text="Structured Logs 3" />
<FluentAppBarItem Href="/Traces"
IconRest="TracesIcon()"
IconActive="TracesIcon(active: true)"
Text="Traces 3" />
IconRest="TracesIcon()"
IconActive="TracesIcon(active: true)"
Text="Traces 3" />
<FluentAppBarItem Href="/Metrics"
IconRest="MetricsIcon()"
IconActive="MetricsIcon(active: true)"
Text="Metrics 3" />
IconRest="MetricsIcon()"
IconActive="MetricsIcon(active: true)"
Text="Metrics 3" />
</FluentAppBar>
</FluentStack>
</div>
</div>
</FluentStack>


@code {

private bool _vertical = true;
private bool _showSearch = true;

private static Icon ResourcesIcon(bool active = false) =>
Expand All @@ -99,4 +108,9 @@
: new Icons.Regular.Size24.ChartMultiple();

private void HandlePopover(bool visible) => DemoLogger.WriteLine($"Popover visibility changed to {visible}");

private void HandleOrientationChanged()
{
DemoLogger.WriteLine($"Orientation changed to {(_vertical ? "vertical" : "horizontal") }");
}
}
Loading