Skip to content

Commit

Permalink
Asset Explorer : Change message before search (#3291)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tossnet
tossnet authored Feb 2, 2025
1 parent fe69a03 commit e6e151c
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 49 deletions.
2 changes: 1 addition & 1 deletion examples/Demo/AssetExplorer/Components/Pages/EmojiExplorer.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
else
{
<FluentLabel Class="not-found">
No emoji found
@_searchResultMessage
</FluentLabel>
}
}
Expand Down
3 changes: 3 additions & 0 deletions examples/Demo/AssetExplorer/Components/Pages/EmojiExplorer.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ public partial class EmojiExplorer
private readonly EmojiSearchCriteria Criteria = new();
private EmojiInfo[] EmojisFound = Array.Empty<EmojiInfo>();
private PaginationState PaginationState = new() { ItemsPerPage = 4 * 12 };
private string _searchResultMessage = "Start search...";

[Parameter]
public string Title { get; set; } = "FluentUI Blazor - Emoji Explorers";
Expand Down Expand Up @@ -57,6 +58,8 @@ .. EmojiExtensions.AllEmojis

await PaginationState.SetTotalItemCountAsync(EmojisFound.Length);

_searchResultMessage = EmojisFound.Length == 0 ? "No emoji found." : string.Empty;

SearchInProgress = false;
}

Expand Down
94 changes: 47 additions & 47 deletions examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,54 +6,54 @@

<div class="icon-explorer" style="width: @(Width ?? "100%"); height: @(Height ?? "calc(100vh - 120px)");">

@if (!string.IsNullOrEmpty(Title))
{
<h2>@Title</h2>
}
@if (!string.IsNullOrEmpty(Title))
{
<h2>@Title</h2>
}

<FluentGrid Style="width: 100%;" Spacing="1">
<FluentGridItem Style="min-width: 200px;">
<FluentSearch @bind-Value="@Criteria.SearchTerm"
@bind-Value:after="@(() => StartNewSearchAsync(nameof(Criteria.SearchTerm)))"
Placeholder="Part of icon name..." />
</FluentGridItem>
<FluentGridItem Gap="0">
<FluentSelect TOption="int"
@bind-SelectedOption="@Criteria.Size"
@bind-SelectedOption:after="@(() => StartNewSearchAsync(nameof(Criteria.Size)))"
Style="min-width: 100px;"
Items="@AllAvailableSizes"
OptionText="@(i => i > 0 ? $"Size{i}" : "[All]")" />
</FluentGridItem>
<FluentGridItem>
<FluentSelect TOption="IconVariant"
@bind-SelectedOption="@Criteria.Variant"
@bind-SelectedOption:after="@(() => StartNewSearchAsync(nameof(Criteria.Variant)))"
Style="min-width: 100px;"
Items="@(Enum.GetValues<IconVariant>())" />
</FluentGridItem>
<FluentGridItem>
<FluentSelect TOption="Color"
@bind-SelectedOption="@Criteria.Color"
@bind-SelectedOption:after="@(() => StartNewSearchAsync(nameof(Criteria.Color)))"
Style="min-width: 100px;"
Items="@(Enum.GetValues<Color>().Where(i => i != Color.Custom))"
OptionValue="@(i => i.ToAttributeValue())" />
</FluentGridItem>
<FluentGridItem>
<FluentButton IconStart="@(new Icons.Regular.Size24.ArrowCircleRight())"
OnClick="@(() => StartNewSearchAsync(string.Empty))" />
</FluentGridItem>
</FluentGrid>
<FluentGrid Style="width: 100%;" Spacing="1">
<FluentGridItem Style="min-width: 200px;">
<FluentSearch @bind-Value="@Criteria.SearchTerm"
@bind-Value:after="@(() => StartNewSearchAsync(nameof(Criteria.SearchTerm)))"
Placeholder="Part of icon name..." />
</FluentGridItem>
<FluentGridItem Gap="0">
<FluentSelect TOption="int"
@bind-SelectedOption="@Criteria.Size"
@bind-SelectedOption:after="@(() => StartNewSearchAsync(nameof(Criteria.Size)))"
Style="min-width: 100px;"
Items="@AllAvailableSizes"
OptionText="@(i => i > 0 ? $"Size{i}" : "[All]")" />
</FluentGridItem>
<FluentGridItem>
<FluentSelect TOption="IconVariant"
@bind-SelectedOption="@Criteria.Variant"
@bind-SelectedOption:after="@(() => StartNewSearchAsync(nameof(Criteria.Variant)))"
Style="min-width: 100px;"
Items="@(Enum.GetValues<IconVariant>())" />
</FluentGridItem>
<FluentGridItem>
<FluentSelect TOption="Color"
@bind-SelectedOption="@Criteria.Color"
@bind-SelectedOption:after="@(() => StartNewSearchAsync(nameof(Criteria.Color)))"
Style="min-width: 100px;"
Items="@(Enum.GetValues<Color>().Where(i => i != Color.Custom))"
OptionValue="@(i => i.ToAttributeValue())" />
</FluentGridItem>
<FluentGridItem>
<FluentButton IconStart="@(new Icons.Regular.Size24.ArrowCircleRight())"
OnClick="@(() => StartNewSearchAsync(string.Empty))" />
</FluentGridItem>
</FluentGrid>

@* Results *@
@if (SearchInProgress)
{
<FluentProgressRing Style="width: unset; margin: 50px;" />
}
else
{
@if (IconsFound.Any())
@* Results *@
@if (SearchInProgress)
{
<FluentProgressRing Style="width: unset; margin: 50px;" />
}
else
{
@if (IconsFound.Any())
{
<FluentLabel Class="header">
Click on upper right clipboard icon in a card to copy a ready to paste <code>FluentIcon</code>
Expand All @@ -75,7 +75,7 @@
else
{
<FluentLabel Class="not-found">
No icons found
@_searchResultMessage
</FluentLabel>
}
}
Expand Down
3 changes: 3 additions & 0 deletions examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ public partial class IconExplorer
private readonly IconSearchCriteria Criteria = new();
private IconInfo[] IconsFound = Array.Empty<IconInfo>();
private PaginationState PaginationState = new() { ItemsPerPage = 4 * 12 };
private string _searchResultMessage = "Start search...";

[Parameter]
public string Title { get; set; } = "FluentUI Blazor - Icon Explorers";
Expand Down Expand Up @@ -64,6 +65,8 @@ .. IconsExtensions.AllIcons

await PaginationState.SetTotalItemCountAsync(IconsFound.Length);

_searchResultMessage = IconsFound.Length == 0 ? "No icons found." : string.Empty;

SearchInProgress = false;
}

Expand Down
1 change: 0 additions & 1 deletion examples/Demo/Shared/wwwroot/css/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,6 @@ kbd {
from {
fill-opacity: 0.1;
}

to {
fill-opacity: 1;
}
Expand Down

0 comments on commit e6e151c

Please sign in to comment.