Skip to content

Asset Explorer : Change message before search #3291

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
dvoituron merged 15 commits into from
Feb 2, 2025
Merged

Asset Explorer : Change message before search #3291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
e5761c8
Update InputFileByCode.razor
tossnet Oct 18, 2023
e897ffc
Merge branch 'microsoft:dev' into dev
tossnet Oct 18, 2023
7e02d3d
Merge branch 'microsoft:dev' into dev
tossnet Oct 31, 2023
0c06195
Merge branch 'microsoft:dev' into dev
tossnet Nov 2, 2023
436b983
Merge branch 'microsoft:dev' into dev
tossnet Nov 6, 2023
a62f2d0
Merge branch 'microsoft:dev' into dev
tossnet Nov 15, 2023
d8a65b2
Merge branch 'microsoft:dev' into dev
tossnet Nov 19, 2023
df7391b
Merge branch 'microsoft:dev' into dev
tossnet Apr 9, 2024
21af613
Merge branch 'microsoft:dev' into dev
tossnet Apr 16, 2024
642b642
Merge branch 'microsoft:dev' into dev
tossnet Sep 26, 2024
cb60728
Merge branch 'microsoft:dev' into dev
tossnet Nov 28, 2024
31f4b05
replacement of the loading circle by a css animation with the logo
Nov 28, 2024
d1a2fa6
Merge branch 'dev' into users/tossnet/change-current-loading-for-a-an…
vnbaaij Nov 28, 2024
c6b8491
AssetExplorer Change first message
Feb 2, 2025
6541695
Merge branch 'dev' into users/tossenet/assetExplorer-change-message-b…
vnbaaij Feb 2, 2025
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
2 changes: 1 addition & 1 deletion examples/Demo/AssetExplorer/Components/Pages/EmojiExplorer.razor
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading