From e5761c82c96668c09cf0d9d185783e05879cd923 Mon Sep 17 00:00:00 2001 From: Christophe Peugnet Date: Wed, 18 Oct 2023 15:26:20 +0200 Subject: [PATCH 1/3] Update InputFileByCode.razor --- .../Demo/Shared/Pages/InputFile/Examples/InputFileByCode.razor | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/Demo/Shared/Pages/InputFile/Examples/InputFileByCode.razor b/examples/Demo/Shared/Pages/InputFile/Examples/InputFileByCode.razor index c4823f8915..fac0104eef 100644 --- a/examples/Demo/Shared/Pages/InputFile/Examples/InputFileByCode.razor +++ b/examples/Demo/Shared/Pages/InputFile/Examples/InputFileByCode.razor @@ -1,5 +1,6 @@  Date: Thu, 28 Nov 2024 16:16:03 +0100 Subject: [PATCH 2/3] replacement of the loading circle by a css animation with the logo --- examples/Demo/Client/wwwroot/index.html | 11 ++++-- examples/Demo/Shared/wwwroot/css/site.css | 45 +++++++++++++++++------ 2 files changed, 42 insertions(+), 14 deletions(-) diff --git a/examples/Demo/Client/wwwroot/index.html b/examples/Demo/Client/wwwroot/index.html index 9783c281a5..b275fa7e28 100644 --- a/examples/Demo/Client/wwwroot/index.html +++ b/examples/Demo/Client/wwwroot/index.html @@ -10,6 +10,7 @@ + @@ -36,9 +37,13 @@
- - - + + + + + + +
diff --git a/examples/Demo/Shared/wwwroot/css/site.css b/examples/Demo/Shared/wwwroot/css/site.css index 8db088145f..15feed2986 100644 --- a/examples/Demo/Shared/wwwroot/css/site.css +++ b/examples/Demo/Shared/wwwroot/css/site.css @@ -252,6 +252,7 @@ kbd { content: "An error has occurred: " } +/* Animate the blazor FluentUI during the loading */ .loading-progress { position: relative; display: block; @@ -260,25 +261,47 @@ kbd { margin: 20vh auto 1rem auto; } - .loading-progress circle { - fill: none; - stroke: var( --neutral-fill-layer-rest); - stroke-width: 0.6rem; - transform-origin: 50% 50%; - transform: rotate(-90deg); +#logo-anim path:nth-child(1) { + stroke-dasharray: 2000; + stroke-dashoffset: 2000; + stroke-width: 1.25em; + fill: #682A7B; + fill-opacity: 0.1; + animation: line-anim 2s ease forwards, fill-anim 1s ease forwards 1.5s; +} + +#logo-anim path:nth-child(2) { + stroke-width: 1.25em; + stroke-dasharray: 2000; + stroke-dashoffset: 2000; + fill: #4A81C3; + fill-opacity: 0.1; + animation: line-anim 2s ease forwards, fill-anim 3s ease forwards 1.2s; +} + +@keyframes line-anim { + to { + stroke-dashoffset: 0; + stroke-width: 0; + } +} + +@keyframes fill-anim { + from { + fill-opacity: 0.1; } - .loading-progress circle:last-child { - stroke: #1b6ec2; - stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; - transition: stroke-dasharray 0.05s ease-in-out; - } + to { + fill-opacity: 1; + } +} .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; + margin-top:80px; } .loading-progress-text:after { From c6b8491404c56942eb13f3f95868ef65988f41c9 Mon Sep 17 00:00:00 2001 From: Christophe Peugnet Date: Sun, 2 Feb 2025 18:20:28 +0100 Subject: [PATCH 3/3] AssetExplorer Change first message --- .../Components/Pages/EmojiExplorer.razor | 2 +- .../Components/Pages/EmojiExplorer.razor.cs | 3 + .../Components/Pages/IconExplorer.razor | 94 +++++++++---------- .../Components/Pages/IconExplorer.razor.cs | 3 + 4 files changed, 54 insertions(+), 48 deletions(-) diff --git a/examples/Demo/AssetExplorer/Components/Pages/EmojiExplorer.razor b/examples/Demo/AssetExplorer/Components/Pages/EmojiExplorer.razor index fd9d197e0e..132930b053 100644 --- a/examples/Demo/AssetExplorer/Components/Pages/EmojiExplorer.razor +++ b/examples/Demo/AssetExplorer/Components/Pages/EmojiExplorer.razor @@ -58,7 +58,7 @@ else { - No emoji found + @_searchResultMessage } } diff --git a/examples/Demo/AssetExplorer/Components/Pages/EmojiExplorer.razor.cs b/examples/Demo/AssetExplorer/Components/Pages/EmojiExplorer.razor.cs index 42d7d356d3..7e326d62f6 100644 --- a/examples/Demo/AssetExplorer/Components/Pages/EmojiExplorer.razor.cs +++ b/examples/Demo/AssetExplorer/Components/Pages/EmojiExplorer.razor.cs @@ -11,6 +11,7 @@ public partial class EmojiExplorer private readonly EmojiSearchCriteria Criteria = new(); private EmojiInfo[] EmojisFound = Array.Empty(); private PaginationState PaginationState = new() { ItemsPerPage = 4 * 12 }; + private string _searchResultMessage = "Start search..."; [Parameter] public string Title { get; set; } = "FluentUI Blazor - Emoji Explorers"; @@ -57,6 +58,8 @@ .. Emojis.AllEmojis await PaginationState.SetTotalItemCountAsync(EmojisFound.Length); + _searchResultMessage = EmojisFound.Length == 0 ? "No emoji found." : string.Empty; + SearchInProgress = false; } diff --git a/examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor b/examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor index 059dc10414..028cb97418 100644 --- a/examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor +++ b/examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor @@ -6,54 +6,54 @@
- @if (!string.IsNullOrEmpty(Title)) - { -

@Title

- } + @if (!string.IsNullOrEmpty(Title)) + { +

@Title

+ } - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - @* Results *@ - @if (SearchInProgress) - { - - } - else - { - @if (IconsFound.Any()) + @* Results *@ + @if (SearchInProgress) + { + + } + else + { + @if (IconsFound.Any()) { Click on upper right clipboard icon in a card to copy a ready to paste FluentIcon @@ -75,7 +75,7 @@ else { - No icons found + @_searchResultMessage } } diff --git a/examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor.cs b/examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor.cs index 06dd73a6a2..f5339e4671 100644 --- a/examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor.cs +++ b/examples/Demo/AssetExplorer/Components/Pages/IconExplorer.razor.cs @@ -12,6 +12,7 @@ public partial class IconExplorer private readonly IconSearchCriteria Criteria = new(); private IconInfo[] IconsFound = Array.Empty(); private PaginationState PaginationState = new() { ItemsPerPage = 4 * 12 }; + private string _searchResultMessage = "Start search..."; [Parameter] public string Title { get; set; } = "FluentUI Blazor - Icon Explorers"; @@ -64,6 +65,8 @@ .. Icons.AllIcons await PaginationState.SetTotalItemCountAsync(IconsFound.Length); + _searchResultMessage = IconsFound.Length == 0 ? "No icons found." : string.Empty; + SearchInProgress = false; }