[Components Doc] use of new components tels FluentLayout, FluentHeade…

…r.. (#888) * Update InputFileByCode.razor * WIP update layout * use of new components tels FluentLayout, FluentHeader.. * delete unused css * changes based on comments * fixe the aside element regardless the Y scroll position * improve Aside element --------- Co-authored-by: Christophe Peugnet <[email protected]> Co-authored-by: Vincent Baaij <[email protected]>
microsoft · Oct 27, 2023 · 6a46caa · 6a46caa
1 parent e875687
commit 6a46caa
Show file tree

Hide file tree

Showing 6 changed files with 236 additions and 284 deletions.
diff --git a/examples/Demo/Server/Pages/_Layout.cshtml b/examples/Demo/Server/Pages/_Layout.cshtml
@@ -21,8 +21,8 @@
             }
         }
     </style>
-    <link href="_content/FluentUI.Demo.Shared/css/site.css" rel="stylesheet" />
     <link href="FluentUI.Demo.Server.styles.css" rel="stylesheet" />
+    <link href="_content/FluentUI.Demo.Shared/css/site.css" rel="stylesheet" />
 
     <!-- Monaco editor -->
     <link rel="stylesheet" data-name="vs/editor/editor.main" href="_content/Microsoft.Fast.Components.FluentUI/lib/monaco-editor/min/vs/editor/editor.main.min.css">

diff --git a/examples/Demo/Shared/Shared/DemoMainLayout.razor b/examples/Demo/Shared/Shared/DemoMainLayout.razor
@@ -3,12 +3,12 @@
 @using Microsoft.AspNetCore.Components
 @using System.Runtime.InteropServices
 @namespace FluentUI.Demo.Shared
-@inherits LayoutComponentBase
 
 <PageTitle>Fluent UI Blazor components demo page</PageTitle>
 
-<div id="container" @ref="container">
-    <header>
+<div @ref="container">
+<FluentLayout>
+    <FluentHeader>
         <div class="logo" role="presentation" aria-hidden="true" itemprop="logo" itemscope="itemscope">
             <svg xmlns="http://www.w3.org/2000/svg" width="108" height="23" viewBox="72 72 337 74" preserveAspectRatio="xMidYMin slice">
                 <g data-name="MS-symbol">
@@ -26,56 +26,69 @@
             </svg>
 
         </div>
+        <FluentSpacer />
         <div class="notifications">
             <NotificationCenter />
         </div>
         <div class="settings">
             <SiteSettings />
         </div>
-    </header>
-    <main>
-        <input type="checkbox" id="menu-toggle" checked=@menuchecked @onclick=HandleChecked />
+    </FluentHeader>
+
+    <FluentStack Orientation="Orientation.Horizontal" Width="100%">
         <label for="menu-toggle" class="menu-icon">
             <FluentIcon Icon="Icons.Regular.Size24.Navigation" />
-        </label>
-        <nav>
+        </label> 
+        <input type="checkbox" id="menu-toggle" checked=@menuchecked @onclick=HandleChecked />
+
+        <nav style="height: Calc(100vh - 90px);"
+             onclick="document.getElementById('menu-toggle').click()">
             <DemoNavMenu />
         </nav>
-        <div class="content">
-            <article id="article">
-
-                <FluentMessageBarContainer Section="@App.MESSAGES_TOP" />
-
-                <ErrorBoundary @ref="errorBoundary">
-                    <ChildContent>
-                        <CascadingValue Value=@OnRefreshTableOfContents>
-                            @Body
-                        </CascadingValue>
-                    </ChildContent>
-                    <ErrorContent Context="ex">
-                        <div class="blazor-error-boundary">@ex.Message</div>
-                    </ErrorContent>
-                </ErrorBoundary>
-            </article>
-            <aside>
-                <TableOfContents @ref=_toc/>
-                <ConsoleLog />
-            </aside>
-        </div>
-    </main>
-    <FluentToastContainer MaxToastCount="10"  />
-    <FluentDialogProvider />
-    <FluentTooltipProvider />
-    <footer>
+
+        <FluentBodyContent Style="height: Calc(100dvh - 90px);">
+            <div class="content">
+                <article id="article">
+
+                    <FluentMessageBarContainer Section="@App.MESSAGES_TOP" />
+
+                    <ErrorBoundary @ref="errorBoundary">
+                        <ChildContent>
+                            <CascadingValue Value=@OnRefreshTableOfContents>
+                                @Body
+                            </CascadingValue>
+                        </ChildContent>
+                        <ErrorContent Context="ex">
+                            <div class="blazor-error-boundary">@ex.Message</div>
+                        </ErrorContent>
+                    </ErrorBoundary>
+                </article>
+                <aside>
+                    <TableOfContents @ref=_toc />
+                    <ConsoleLog />
+                </aside>
+
+                <FluentToastContainer MaxToastCount="10" />
+                <FluentDialogProvider />
+                <FluentTooltipProvider />
+
+            </div>
+        </FluentBodyContent>
+    </FluentStack>
+
+    <FluentFooter Style="@("height: 40px; color: white;")">
         <div class="version">
             <small>
                 Version: @_version
                 &nbsp;-&nbsp;
                 <a href="https://dotnet.microsoft.com/en-us/learn/aspnet/what-is-aspnet-core">Powered by @RuntimeInformation.FrameworkDescription</a>
             </small>
         </div>
+        <FluentSpacer />
         <div class="copy">
             <small>Microsoft © 2023. All rights reserved.</small>
         </div>
-    </footer>
+    </FluentFooter>
+
+</FluentLayout>
 </div>
diff --git a/examples/Demo/Shared/Shared/DemoMainLayout.razor.cs b/examples/Demo/Shared/Shared/DemoMainLayout.razor.cs
@@ -11,6 +11,9 @@ namespace FluentUI.Demo.Shared;
 
 public partial class DemoMainLayout : IAsyncDisposable
 {
+    [Parameter]
+    public RenderFragment? Body { get; set; }
+
     private OfficeColor _selectedColorOption;
     private string? _version;