mjasin/Nexus.Reader
1
0
Fork 0
Code Issues 9 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: replace CSS spinners with SVG icons and improve disabled button styling in SelectionAiPanel

Browse Source
This commit is contained in:
Marek Jaisński
2026-06-03 19:43:21 +02:00
parent 89fa5cac19
commit 41cc9f8f21
2 changed files with 18 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/NexusReader.UI.Shared/Components/Molecules/SelectionAiPanel.razor
+10 -4
View File
@@ -9,12 +9,15 @@
@if (IsVisible)
{
<div class="selection-ai-panel @(_positionBelow ? "below" : "")" style="@_style">
<button class="toolbar-btn primary @(IsLoadingSummary ? "loading" : "") @(IsAnyLoading ? "disabled" : "")"
<button id="summary-btn" class="toolbar-btn primary @(IsLoadingSummary ? "loading" : "") @(IsAnyLoading ? "disabled cursor-not-allowed opacity-50" : "")"
disabled="@IsAnyLoading"
@onclick="RequestSummaryAsync">
@if (IsLoadingSummary)
{
<span class="spinner-inline"></span>
<svg class="animate-spin h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" style="animation: spin 1s linear infinite; width: 14px; height: 14px; color: currentColor; display: inline-block; margin-right: 4px;">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" style="opacity: 0.25;"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" style="opacity: 0.75;"></path>
</svg>
<span class="btn-text">Podsumowywanie...</span>
}
else
@@ -24,12 +27,15 @@
}
</button>
<div class="toolbar-divider"></div>
<button class="toolbar-btn secondary @(IsLoadingQuiz ? "loading" : "") @(IsAnyLoading ? "disabled" : "")"
<button id="quiz-btn" class="toolbar-btn secondary @(IsLoadingQuiz ? "loading" : "") @(IsAnyLoading ? "disabled cursor-not-allowed opacity-50" : "")"
disabled="@IsAnyLoading"
@onclick="GenerateQuizAsync">
@if (IsLoadingQuiz)
{
<span class="spinner-inline"></span>
<svg class="animate-spin h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" style="animation: spin 1s linear infinite; width: 14px; height: 14px; color: currentColor; display: inline-block; margin-right: 4px;">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" style="opacity: 0.25;"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" style="opacity: 0.75;"></path>
</svg>
<span class="btn-text">Generowanie...</span>
}
else
src/NexusReader.UI.Shared/Components/Molecules/SelectionAiPanel.razor.css
+8
View File
@@ -109,3 +109,11 @@
}
}
.opacity-50 {
opacity: 0.5 !important;
}
.cursor-not-allowed {
cursor: not-allowed !important;
}