Skip to content

Commit e6e151c

Browse files
tossnettossnet
authored
Asset Explorer : Change message before search (#3291)
1 parent fe69a03 commit e6e151c

File tree

5 files changed

+54
-49
lines changed

5 files changed

+54
-49
lines changed

‎examples/Demo/AssetExplorer/Components/Pages/EmojiExplorer.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
else
5959
{
6060
<FluentLabel Class="not-found">
61-
No emoji found
61+
@_searchResultMessage
6262
</FluentLabel>
6363
}
6464
}

‎examples/Demo/AssetExplorer/Components/Pages/EmojiExplorer.razor.cs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ public partial class EmojiExplorer
1111
private readonly EmojiSearchCriteria Criteria = new();
1212
private EmojiInfo[] EmojisFound = Array.Empty<EmojiInfo>();
1313
private PaginationState PaginationState = new() { ItemsPerPage = 4 * 12 };
14+
private string _searchResultMessage = "Start search...";
1415

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

5859
await PaginationState.SetTotalItemCountAsync(EmojisFound.Length);
5960

61+
_searchResultMessage = EmojisFound.Length == 0 ? "No emoji found." : string.Empty;
62+
6063
SearchInProgress = false;
6164
}
6265

‎examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -6,54 +6,54 @@
66

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

9-
@if (!string.IsNullOrEmpty(Title))
10-
{
11-
<h2>@Title</h2>
12-
}
9+
@if (!string.IsNullOrEmpty(Title))
10+
{
11+
<h2>@Title</h2>
12+
}
1313

14-
<FluentGrid Style="width: 100%;" Spacing="1">
15-
<FluentGridItem Style="min-width: 200px;">
16-
<FluentSearch @bind-Value="@Criteria.SearchTerm"
17-
@bind-Value:after="@(() => StartNewSearchAsync(nameof(Criteria.SearchTerm)))"
18-
Placeholder="Part of icon name..." />
19-
</FluentGridItem>
20-
<FluentGridItem Gap="0">
21-
<FluentSelect TOption="int"
22-
@bind-SelectedOption="@Criteria.Size"
23-
@bind-SelectedOption:after="@(() => StartNewSearchAsync(nameof(Criteria.Size)))"
24-
Style="min-width: 100px;"
25-
Items="@AllAvailableSizes"
26-
OptionText="@(i => i > 0 ? $"Size{i}" : "[All]")" />
27-
</FluentGridItem>
28-
<FluentGridItem>
29-
<FluentSelect TOption="IconVariant"
30-
@bind-SelectedOption="@Criteria.Variant"
31-
@bind-SelectedOption:after="@(() => StartNewSearchAsync(nameof(Criteria.Variant)))"
32-
Style="min-width: 100px;"
33-
Items="@(Enum.GetValues<IconVariant>())" />
34-
</FluentGridItem>
35-
<FluentGridItem>
36-
<FluentSelect TOption="Color"
37-
@bind-SelectedOption="@Criteria.Color"
38-
@bind-SelectedOption:after="@(() => StartNewSearchAsync(nameof(Criteria.Color)))"
39-
Style="min-width: 100px;"
40-
Items="@(Enum.GetValues<Color>().Where(i => i != Color.Custom))"
41-
OptionValue="@(i => i.ToAttributeValue())" />
42-
</FluentGridItem>
43-
<FluentGridItem>
44-
<FluentButton IconStart="@(new Icons.Regular.Size24.ArrowCircleRight())"
45-
OnClick="@(() => StartNewSearchAsync(string.Empty))" />
46-
</FluentGridItem>
47-
</FluentGrid>
14+
<FluentGrid Style="width: 100%;" Spacing="1">
15+
<FluentGridItem Style="min-width: 200px;">
16+
<FluentSearch @bind-Value="@Criteria.SearchTerm"
17+
@bind-Value:after="@(() => StartNewSearchAsync(nameof(Criteria.SearchTerm)))"
18+
Placeholder="Part of icon name..." />
19+
</FluentGridItem>
20+
<FluentGridItem Gap="0">
21+
<FluentSelect TOption="int"
22+
@bind-SelectedOption="@Criteria.Size"
23+
@bind-SelectedOption:after="@(() => StartNewSearchAsync(nameof(Criteria.Size)))"
24+
Style="min-width: 100px;"
25+
Items="@AllAvailableSizes"
26+
OptionText="@(i => i > 0 ? $"Size{i}" : "[All]")" />
27+
</FluentGridItem>
28+
<FluentGridItem>
29+
<FluentSelect TOption="IconVariant"
30+
@bind-SelectedOption="@Criteria.Variant"
31+
@bind-SelectedOption:after="@(() => StartNewSearchAsync(nameof(Criteria.Variant)))"
32+
Style="min-width: 100px;"
33+
Items="@(Enum.GetValues<IconVariant>())" />
34+
</FluentGridItem>
35+
<FluentGridItem>
36+
<FluentSelect TOption="Color"
37+
@bind-SelectedOption="@Criteria.Color"
38+
@bind-SelectedOption:after="@(() => StartNewSearchAsync(nameof(Criteria.Color)))"
39+
Style="min-width: 100px;"
40+
Items="@(Enum.GetValues<Color>().Where(i => i != Color.Custom))"
41+
OptionValue="@(i => i.ToAttributeValue())" />
42+
</FluentGridItem>
43+
<FluentGridItem>
44+
<FluentButton IconStart="@(new Icons.Regular.Size24.ArrowCircleRight())"
45+
OnClick="@(() => StartNewSearchAsync(string.Empty))" />
46+
</FluentGridItem>
47+
</FluentGrid>
4848

49-
@* Results *@
50-
@if (SearchInProgress)
51-
{
52-
<FluentProgressRing Style="width: unset; margin: 50px;" />
53-
}
54-
else
55-
{
56-
@if (IconsFound.Any())
49+
@* Results *@
50+
@if (SearchInProgress)
51+
{
52+
<FluentProgressRing Style="width: unset; margin: 50px;" />
53+
}
54+
else
55+
{
56+
@if (IconsFound.Any())
5757
{
5858
<FluentLabel Class="header">
5959
Click on upper right clipboard icon in a card to copy a ready to paste <code>FluentIcon</code>
@@ -75,7 +75,7 @@
7575
else
7676
{
7777
<FluentLabel Class="not-found">
78-
No icons found
78+
@_searchResultMessage
7979
</FluentLabel>
8080
}
8181
}

‎examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor.cs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ public partial class IconExplorer
1212
private readonly IconSearchCriteria Criteria = new();
1313
private IconInfo[] IconsFound = Array.Empty<IconInfo>();
1414
private PaginationState PaginationState = new() { ItemsPerPage = 4 * 12 };
15+
private string _searchResultMessage = "Start search...";
1516

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

6566
await PaginationState.SetTotalItemCountAsync(IconsFound.Length);
6667

68+
_searchResultMessage = IconsFound.Length == 0 ? "No icons found." : string.Empty;
69+
6770
SearchInProgress = false;
6871
}
6972

‎examples/Demo/Shared/wwwroot/css/site.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -315,7 +315,6 @@ kbd {
315315
from {
316316
fill-opacity: 0.1;
317317
}
318-
319318
to {
320319
fill-opacity: 1;
321320
}

0 commit comments

Comments
 (0)