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.

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

feat: Add global search bar #1583

Merged
merged 8 commits into from
Feb 27, 2024
Merged

feat: Add global search bar #1583

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3efd8c8
feat: Add global search bar
Hona Feb 27, 2024
325db23
fix: warning
Hona Feb 27, 2024
442d624
refactor: Code review comments
Hona Feb 27, 2024
c2bb844
refactor: Move injected services to code behind
Hona Feb 27, 2024
cd5b838
Merge branch 'dev' into feat/global-search-bar
vnbaaij Feb 27, 2024
6789a5a
refactor: formatting
Hona Feb 27, 2024
08584bc
Merge branch 'dev' into feat/global-search-bar
vnbaaij Feb 27, 2024
ff6f1e6
Merge branch 'dev' into feat/global-search-bar
vnbaaij Feb 27, 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
1 change: 1 addition & 0 deletions examples/Demo/Shared/Infrastructure/ServiceCollectionExtensions.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ public static IServiceCollection AddFluentUIDemoServices(this IServiceCollection
{
services.AddScoped<CacheStorageAccessor>();
services.AddHttpClient<IStaticAssetService, HttpBasedStaticAssetService>();
services.AddSingleton<DemoNavProvider>();

return services;
}
Expand Down
13 changes: 9 additions & 4 deletions examples/Demo/Shared/Shared/DemoMainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<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">
<clipPath>
<clipPath>
<path transform="matrix(1 0 0 -1 0 216)" d="M0 216h482V0H0z"></path>
</clipPath>
<g clip-path="url(#a)">
Expand All @@ -28,6 +28,11 @@
</div>
</a>
<FluentSpacer />

<div class="search">
<DemoSearch />
</div>

<div class="links">
<FluentAnchor Appearance="Appearance.Hypertext"
Href="http://github.com/microsoft/fluentui-blazor" Target="_blank" Rel="noreferrer noopener"
Expand All @@ -51,11 +56,11 @@

<FluentMessageBarProvider Section="@App.MESSAGES_TOP" />


<CascadingValue Value=@OnRefreshTableOfContents>
@Body
</CascadingValue>

</article>
<aside>
<TableOfContents @ref=_toc />
Expand Down Expand Up @@ -86,4 +91,4 @@
</FluentFooter>

</FluentLayout>
</div>
</div>
132 changes: 7 additions & 125 deletions examples/Demo/Shared/Shared/DemoNavMenu.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,132 +1,14 @@
@inject DemoNavProvider NavProvider

<div class="navmenu">
<input type="checkbox" title="Menu expand/collapse toggle" id="navmenu-toggle" class="navmenu-icon" />
<label for="navmenu-toggle" class="navmenu-icon"><FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" Color="Color.Neutral" /></label>
<nav class="sitenav" aria-labelledby="main-menu" onclick="document.getElementById('navmenu-toggle').click()">
<FluentNavMenu Id="main-menu" Title="Main menu">
<FluentNavLink Icon="@(new Icons.Regular.Size20.Home())" Href="/" Match="NavLinkMatch.All">
<h3>Home</h3>
</FluentNavLink>

<FluentNavGroup Expanded="true" Gap="10px" Icon="@(new Icons.Regular.Size20.PersonRunning())">
<TitleTemplate><h3>Getting Started</h3></TitleTemplate>
<ChildContent>
<FluentNavLink Href="/WhatsNew" Icon="@(new Icons.Regular.Size20.Info())">What's new</FluentNavLink>
<FluentNavLink Href="/UpgradeGuide" Icon="@(new Icons.Regular.Size20.ArrowUp())">Upgrade guide</FluentNavLink>
<FluentNavLink Href="/CodeSetup" Icon="@(new Icons.Regular.Size20.DocumentOnePageSparkle())">Code setup</FluentNavLink>
<FluentNavLink Href="/Templates" Icon="@(new Icons.Regular.Size20.Classification())">Project templates</FluentNavLink>
<FluentNavLink Href="/DesignTheme" Icon="@(new Icons.Regular.Size20.DarkTheme())">Themes</FluentNavLink>
<FluentNavLink Href="/DesignTokens" Icon="@(new Icons.Regular.Size20.DesignIdeas())">Design tokens</FluentNavLink>
<FluentNavLink Href="/Reboot" Icon="@(new Icons.Regular.Size20.ArrowReset())">Reboot</FluentNavLink>
<FluentNavLink Href="/IconsAndEmoji" Icon="@(new Icons.Regular.Size20.Symbols())">Icons and Emoji</FluentNavLink>
<FluentNavGroup Title="Services" Gap="10px" Icon="@(new Icons.Regular.Size20.SettingsCogMultiple())">
<FluentNavLink Href="/DialogService" Icon="@(new Icons.Regular.Size20.AppGeneric())">DialogService</FluentNavLink>
<FluentNavLink Href="/MessageService" Icon="@(new Icons.Regular.Size20.WindowHeaderHorizontal())">MessageService</FluentNavLink>
<FluentNavLink Href="/ToastService" Icon="@(new Icons.Regular.Size20.FoodToast())">ToastService</FluentNavLink>
</FluentNavGroup>
</ChildContent>
</FluentNavGroup>

<FluentNavGroup Gap="10px" Icon="@(new Icons.Regular.Size20.ContentViewGallery())">
<TitleTemplate><h3>Layout</h3></TitleTemplate>
<ChildContent>
<FluentNavLink Href="/Header" Icon="@(new Icons.Regular.Size20.DocumentHeader())">Header</FluentNavLink>
<FluentNavLink Href="/Footer" Icon="@(new Icons.Regular.Size20.DocumentFooter())">Footer</FluentNavLink>
<FluentNavLink Href="/BodyContent" Icon="@(new Icons.Regular.Size20.ContentViewGallery())">BodyContent</FluentNavLink>
<FluentNavLink Href="/Grid" Icon="@(new Icons.Regular.Size20.Grid())">Grid</FluentNavLink>
<FluentNavLink Href="/Layout" Icon="@(new Icons.Regular.Size20.SlideLayout())">Layout</FluentNavLink>
<FluentNavLink Href="/MainLayout" Icon="@(new Icons.Regular.Size20.MatchAppLayout())">MainLayout</FluentNavLink>
<FluentNavLink Href="/Spacer" Icon="@(new Icons.Regular.Size20.Spacebar())">Spacer</FluentNavLink>
<FluentNavLink Href="/Splitter" Icon="@(new Icons.Regular.Size20.SplitVertical())">Splitter</FluentNavLink>
<FluentNavLink Href="/Stack" Icon="@(new Icons.Regular.Size20.Stack())">Stack</FluentNavLink>
</ChildContent>
</FluentNavGroup>

<FluentNavGroup Gap="10px" Icon="@(new Icons.Regular.Size20.Form())">
<TitleTemplate><h3>Form & Inputs</h3></TitleTemplate>
<ChildContent>
<FluentNavLink Href="/Forms" Icon="@(new Icons.Regular.Size20.Form())">Overview</FluentNavLink>
<FluentNavLink Href="/Checkbox" Icon="@(new Icons.Regular.Size20.CheckboxChecked())">Checkbox</FluentNavLink>
<FluentNavLink Href="/InputFile" Icon="@(new Icons.Regular.Size20.ArrowUpload())">InputFile</FluentNavLink>
<FluentNavLink Href="/NumberField" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())">Number Field</FluentNavLink>
<FluentNavLink Href="/Radio" Icon="@(new Icons.Regular.Size20.RadioButton())">Radio</FluentNavLink>
<FluentNavLink Href="/RadioGroup" Icon="@(new Icons.Regular.Size20.RadioButton())">Radio Group</FluentNavLink>
<FluentNavLink Href="/Search" Icon="@(new Icons.Regular.Size20.SearchSquare())">Search</FluentNavLink>
<FluentNavLink Href="/Slider" Icon="@(new Icons.Regular.Size20.Options())">Slider</FluentNavLink>
<FluentNavLink Href="/Switch" Icon="@(new Icons.Regular.Size20.ToggleLeft())">Switch</FluentNavLink>
<FluentNavLink Href="/TextArea" Icon="@(new Icons.Regular.Size20.TextboxMore())">TextArea</FluentNavLink>
<FluentNavLink Href="/TextField" Icon="@(new Icons.Regular.Size20.Textbox())">Text Field</FluentNavLink>
<FluentNavLink Href="/DateTime#fluenttimepicker-class" Icon="@(new Icons.Regular.Size20.Clock())">Time picker</FluentNavLink>
</ChildContent>
</FluentNavGroup>

<FluentNavGroup Gap="10px" Icon="@(new Icons.Regular.Size20.PuzzleCubePiece())">
<TitleTemplate><h3>Components</h3></TitleTemplate>
<ChildContent>
<FluentNavLink Href="/FluentComponentBase" Icon="@(new Icons.Regular.Size20.PuzzleCubePiece())">Overview</FluentNavLink>
<FluentNavLink Href="/Accordion" Icon="@(new Icons.Regular.Size20.TextCollapse())">Accordion</FluentNavLink>
<FluentNavLink Href="/Anchor" Icon="@(new Icons.Regular.Size20.Link())">Anchor</FluentNavLink>
<FluentNavLink Href="/AnchoredRegion" Icon="@(new Icons.Regular.Size20.LinkSquare())">Anchored Region</FluentNavLink>
<FluentNavGroup Expanded="true" Title="Badge" Gap="10px" Icon="@(new Icons.Regular.Size20.Tag())">
<FluentNavLink Href="/Badge" Icon="@(new Icons.Regular.Size20.Badge())">Badge</FluentNavLink>
<FluentNavLink Href="/CounterBadge" Icon="@(new Icons.Regular.Size20.NumberCircle1())">CounterBadge</FluentNavLink>
<FluentNavLink Href="/PresenceBadge" Icon="@(new Icons.Regular.Size20.PresenceAvailable())">PresenceBadge</FluentNavLink>
</FluentNavGroup>
<FluentNavLink Href="/Breadcrumb" Icon="@(new Icons.Regular.Size20.DocumentChevronDouble())">Breadcrumb</FluentNavLink>
<FluentNavLink Href="/Button" Icon="@(new Icons.Regular.Size20.ControlButton())">Button</FluentNavLink>
<FluentNavLink Href="/Card" Icon="@(new Icons.Regular.Size20.ContactCardGroup())">Card</FluentNavLink>
<FluentNavLink Href="/DataGrid" Icon="@(new Icons.Regular.Size20.Grid())">Data grid</FluentNavLink>
<FluentNavLink Href="/DateTime" Icon="@(new Icons.Regular.Size20.CalendarLtr())">Date & Time</FluentNavLink>
<FluentNavLink Href="/Dialog" Icon="@(new Icons.Regular.Size20.AppGeneric())">Dialog</FluentNavLink>
<FluentNavLink Href="/Divider" Icon="@(new Icons.Regular.Size20.DividerShort())">Divider</FluentNavLink>
<FluentNavLink Href="/Drag" Icon="@(new Icons.Regular.Size20.Drag())">Drag and Drop</FluentNavLink>
<FluentNavLink Href="/Emoji" Icon="@(new Icons.Regular.Size20.EmojiSmileSlight())">Emoji</FluentNavLink>
<FluentNavLink Href="/Flipper" Icon="@(new Icons.Regular.Size20.Navigation())">Flipper</FluentNavLink>
<FluentNavLink Href="/Highlighter" Icon="@(new Icons.Regular.Size20.Highlight())">Highlighter</FluentNavLink>
<FluentNavLink Href="/HorizontalScroll" Icon="@(new Icons.Regular.Size20.ArrowForward())">Horizontal Scroll</FluentNavLink>
<FluentNavLink Href="/Icon" Icon="@(new Icons.Regular.Size20.Symbols())">Icon</FluentNavLink>
<FluentNavLink Href="/Label" Icon="@(new Icons.Regular.Size20.DoorTag())">Label</FluentNavLink>
<FluentNavGroup Expanded="true" Title="List" Gap="10px" Icon="@(new Icons.Regular.Size20.List())">
<FluentNavLink Href="/Autocomplete" Icon="@(new Icons.Regular.Size20.ArrowAutofitContent())">Autocomplete</FluentNavLink>
<FluentNavLink Href="/Combobox" Icon="@(new Icons.Regular.Size20.BoxEdit())">Combobox</FluentNavLink>
<FluentNavLink Href="/Listbox" Icon="@(new Icons.Regular.Size20.List())">Listbox</FluentNavLink>
<FluentNavLink Href="/Select" Icon="@(new Icons.Regular.Size20.GroupList())">Select</FluentNavLink>
<FluentNavLink Href="/Option" Icon="@(new Icons.Regular.Size20.MultiselectRtl())">Option</FluentNavLink>
</FluentNavGroup>
<FluentNavLink Href="/Menu" Icon="@(new Icons.Regular.Size20.Navigation())">Menu</FluentNavLink>
<FluentNavLink Href="/MenuButton" Icon="@(new Icons.Regular.Size20.ChevronCircleDown())">MenuButton</FluentNavLink>
<FluentNavLink Href="/MessageBar" Icon="@(new Icons.Regular.Size20.WindowHeaderHorizontal())">MessageBar</FluentNavLink>
<FluentNavLink Href="/MessageBox" Icon="@(new Icons.Regular.Size20.MegaphoneLoud())">MessageBox</FluentNavLink>
<FluentNavLink Href="/NavMenu" Icon="@(new Icons.Regular.Size20.Navigation())">NavMenu</FluentNavLink>
<FluentNavLink Href="/NavMenuTree" Icon="@(new Icons.Regular.Size20.Navigation())">NavMenuTree</FluentNavLink>
<FluentNavLink Href="/Overflow" Icon="@(new Icons.Regular.Size20.MultiselectRtl())">Overflow</FluentNavLink>
<FluentNavLink Href="/Overlay" Icon="@(new Icons.Regular.Size20.CursorHover())">Overlay</FluentNavLink>
<FluentNavLink Href="/Panel" Icon="@(new Icons.Regular.Size20.PanelRight())">Panel</FluentNavLink>
<FluentNavLink Href="/Persona" Icon="@(new Icons.Regular.Size20.PersonAvailable())">Persona</FluentNavLink>
<FluentNavLink Href="/Popover" Icon="@(new Icons.Regular.Size20.TooltipQuote())">Popover</FluentNavLink>
<FluentNavLink Href="/Progress" Icon="@(new Icons.Regular.Size20.SquareHint())">Progress</FluentNavLink>
<FluentNavLink Href="/ProgressRing" Icon="@(new Icons.Regular.Size20.ArrowClockwiseDashes())">Progress Ring</FluentNavLink>
<FluentNavLink Href="/Skeleton" Icon="@(new Icons.Regular.Size20.Shortpick())">Skeleton</FluentNavLink>
<FluentNavLink Href="/SortableList" Icon="@(new Icons.Regular.Size20.ArrowSort())">Sortable List</FluentNavLink>
<FluentNavLink Href="/SplashScreen" Icon="@(new Icons.Regular.Size20.Drop())">SplashScreen</FluentNavLink>
<FluentNavLink Href="/Tabs" Icon="@(new Icons.Regular.Size20.TabDesktop())">Tabs</FluentNavLink>
<FluentNavLink Href="/Toast" Icon="@(new Icons.Regular.Size20.FoodToast())">Toast</FluentNavLink>
<FluentNavLink Href="/Toolbar" Icon="@(new Icons.Regular.Size20.WrenchScrewdriver())">Toolbar</FluentNavLink>
<FluentNavLink Href="/Tooltip" Icon="@(new Icons.Regular.Size20.TooltipQuote())">Tooltip</FluentNavLink>
<FluentNavLink Href="/TreeView" Icon="@(new Icons.Regular.Size20.TextBulletListTree())">Tree View</FluentNavLink>
<FluentNavLink Href="/Wizard" Icon="@(new Icons.Regular.Size20.ArrowStepInRight())">Wizard</FluentNavLink>
</ChildContent>
</FluentNavGroup>

<FluentNavGroup Icon="@(new Icons.Regular.Size20.Beaker())" Gap="10px">
<TitleTemplate><h3>Incubation lab</h3></TitleTemplate>
<ChildContent>
<FluentNavLink Href="/Lab/Overview" Icon="@(new Icons.Regular.Size20.Beaker())">Overview</FluentNavLink>
<FluentNavLink Href="/Lab/MarkdownSection" Icon="@(new Icons.Regular.Size20.ArrowSortDown())">MarkdownSection</FluentNavLink>
<FluentNavLink Href="/Lab/TableOfContents" Icon="@(new Icons.Regular.Size20.DocumentTextLink())">TableOfContents</FluentNavLink>
<FluentNavLink Href="/MultiSplitter" Icon="@(new Icons.Regular.Size20.SplitHorizontal())">Multi Splitter</FluentNavLink>
<FluentNavLink Href="/KeyCode" Icon="@(new Icons.Regular.Size20.Keyboard())">KeyCode</FluentNavLink>
</ChildContent>
</FluentNavGroup>
@foreach(var item in NavProvider.NavMenuItems)
{
<DemoNavMenuItem Value="item"/>
}
</FluentNavMenu>
</nav>
</div>
</div>
34 changes: 34 additions & 0 deletions examples/Demo/Shared/Shared/DemoNavMenuItem.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
ο»Ώ@using NavLink = FluentUI.Demo.Shared.NavLink

@switch(Value)
{
case NavGroup group:
<FluentNavGroup Expanded="@group.Expanded" Gap="@group.Gap" Icon="@group.Icon">
<TitleTemplate>
<h3>@group.Title</h3></TitleTemplate>
<ChildContent>
@foreach(var item in group.Children)
{
<DemoNavMenuItem Value="item" />
}
</ChildContent>
</FluentNavGroup>
break;
case NavLink:
<FluentNavLink Icon="@Value.Icon" Href="@Value.Href" Match="@Value.Match">
@if (Value.Match is NavLinkMatch.All)
{
<h3>@Value.Title</h3>
}
else
{
@Value.Title
}
</FluentNavLink>
break;
}

@code {
[Parameter, EditorRequired]
public required NavItem Value { get; set; }
}
Loading
Loading