Added various icons to use for input prefixes. Updated pagination cocmponent.

2025-12-02 00:13:25 -05:00
parent de00bee801
commit e962832f24
18 changed files with 271 additions and 31 deletions
--- a/JSMR.UI.Blazor/Components/Card.razor
+++ b/JSMR.UI.Blazor/Components/Card.razor
@@ -0,0 +1,8 @@
+<div class="j-card-2">
+    @ChildContent
+</div>
+
+@code {
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+}
--- a/JSMR.UI.Blazor/Components/CircleFilters.razor
+++ b/JSMR.UI.Blazor/Components/CircleFilters.razor
@@ -1,4 +1,5 @@
@using JSMR.Application.Circles.Queries.Search
+@using JSMR.UI.Blazor.Enums
@using JSMR.UI.Blazor.Filters
@using JSMR.UI.Blazor.Services

@@ -8,15 +9,23 @@
                      Immediate="true"
                      DebounceTime="500"
                      Value="@Value.Keywords"
-                      ValueChanged="@(value => Update(Value with { Keywords = value }))" />
+                      ValueChanged="@(value => Update(Value with { Keywords = value }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Search" Tooltip="Search"></InputPrefix>
+            </PrefixTemplate>
+        </BitTextField>
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Items="CircleStatuses"
                     Placeholder="Select..."
                     TItem="BitDropdownItem<CircleStatus?>"
-                     TValue="CircleStatus?"
+                     TValue="CircleStatus ?"
                     Value="@Value.Status"
-                     ValueChanged="@(value => Update(Value with { Status = value }))" />
+                     ValueChanged="@(value => Update(Value with { Status = value }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Circle" Tooltip="Circles"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
 </div>

@@ -27,7 +36,7 @@
    [Parameter]
    public EventCallback<CircleFilterState> ValueChanged { get; set; }

-    List<BitDropdownItem<CircleStatus?>> CircleStatuses = 
+    List<BitDropdownItem<CircleStatus?>> CircleStatuses =
    [
        new() { Text = "Not Blacklisted", Value = CircleStatus.NotBlacklisted },
        new() { Text = "Favorites",       Value = CircleStatus.Favorited      },
--- a/JSMR.UI.Blazor/Components/InputPrefix.razor
+++ b/JSMR.UI.Blazor/Components/InputPrefix.razor
@@ -1,7 +1,7 @@
@using JSMR.UI.Blazor.Enums

 <BitTooltip Text="@Tooltip">
-    <div class="j-input-prefix background-color-@BackgroundColor.ToString().ToLower()">
+    <div class="j-input-prefix background-color-@BackgroundColor.ToClassName()">
        <Icon Color="Color" Size="SizeVarient.Small" Graphic="Graphic" Varient="IconVarient"></Icon>
    </div>
 </BitTooltip>
@@ -17,7 +17,7 @@
    public ColorVarient Color { get; set; } = ColorVarient.Primary;

    [Parameter]
-    public ColorVarient BackgroundColor { get; set; } = ColorVarient.Black;
+    public ColorVarient BackgroundColor { get; set; } = ColorVarient.SurfaceContainerHigh;

    [Parameter]
    public string? Tooltip { get; set; }
--- a/JSMR.UI.Blazor/Components/JPagination.razor
+++ b/JSMR.UI.Blazor/Components/JPagination.razor
@@ -1,15 +1,23 @@
-<div class="pagination">
+@using JSMR.UI.Blazor.Enums
+
+<div class="pagination">
    <div>
        <label>@IndexInfo</label>
    </div>
    <MudPagination class="pager" ShowFirstButton="true" ShowLastButton="true" Count="@((int)Math.Ceiling((decimal)TotalItems / (decimal)PageSize))" Selected="@PageNumber" SelectedChanged="OnSelectedChanged" />
    <div class="page-sizes">
-        <MudSelect T="int" Value="PageSize" ValueChanged="OnPageSizeChanged" Dense="true" Variant="MudBlazor.Variant.Outlined" Margin="Margin.Dense">
-            @foreach (int value in PageSizes)
-            {
-                <MudSelectItem Value="@value">@value</MudSelectItem>
-            }
-        </MudSelect>
+        @RightContent
+        <BitDropdown Items="PageSizes2"
+                     Style="min-width: 7rem"
+                     Placeholder="Select..."
+                     TItem="BitDropdownItem<int>"
+                     TValue="int"
+                     Value="PageSize"
+                     ValueChanged="OnPageSizeChanged">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Grid" Tooltip="Page Size"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
 </div>

@@ -23,6 +31,8 @@
    [Parameter]
    public int[] PageSizes { get; set; } = [5, 10, 25, 50, 100];

+    List<BitDropdownItem<int>> PageSizes2 => [.. PageSizes.Select(x => new BitDropdownItem<int>() { Text = x.ToString(), Value = x })];
+
    [Parameter]
    public int PageSize { get; set; }

@@ -35,6 +45,9 @@
    [Parameter]
    public EventCallback<int> TotalItemsChanged { get; set; }

+    [Parameter]
+    public RenderFragment? RightContent { get; set; }
+
    public string IndexInfo => TotalItems == 0 ? "No items" : $"{StartIndex.ToString("n0")} - {EndIndex.ToString("n0")} of {TotalItems.ToString("n0")} items";

    public int StartIndex => (PageNumber - 1) * PageSize + 1;
--- a/JSMR.UI.Blazor/Components/VoiceWorkFilters.razor
+++ b/JSMR.UI.Blazor/Components/VoiceWorkFilters.razor
@@ -16,7 +16,11 @@
        <BitTextField Prefix="Keywords"
                      Immediate="true" DebounceTime="500"
                      Value="@Value.Keywords"
-                      ValueChanged="@(value => Update(Value with { Keywords = value }))" />
+                      ValueChanged="@(value => Update(Value with { Keywords = value }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Search" Tooltip="Keywords"></InputPrefix>
+            </PrefixTemplate>
+        </BitTextField>
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Languages"
@@ -26,7 +30,11 @@
                     TItem="BitDropdownItem<Language>"
                     TValue="Language"
                     Values="@Value.SupportedLanguages"
-                     ValuesChanged="@(values => Update(Value with { SupportedLanguages = [.. values] }))" />
+                     ValuesChanged="@(values => Update(Value with { SupportedLanguages = [.. values] }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Translate" Tooltip="Supported Languages"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Locale"
@@ -36,10 +44,10 @@
                     TValue="Locale"
                     Value="@Value.Locale"
                     ValueChanged="@(value => Update(Value with { Locale = value }))">
-                        <PrefixTemplate>
-                            <InputPrefix Graphic="Graphic.Globe" Tooltip="Locale"></InputPrefix>
-                        </PrefixTemplate>
-                     </BitDropdown>
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Globe" Tooltip="Locale"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
    <!-- Row 2 -->
    <div class="search-filter-control-span-1">
@@ -49,7 +57,11 @@
                     TItem="BitDropdownItem<SaleStatus?>"
                     TValue="SaleStatus ?"
                     Value="@Value.SaleStatus"
-                     ValueChanged="@(value => Update(Value with { SaleStatus = value }))" />
+                     ValueChanged="@(value => Update(Value with { SaleStatus = value }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Cart" Tooltip="Keywords"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Circles"
@@ -58,7 +70,11 @@
                     TItem="BitDropdownItem<CircleStatus?>"
                     TValue="CircleStatus ?"
                     Value="@Value.CircleStatus"
-                     ValueChanged="@(value => Update(Value with { CircleStatus = value }))" />
+                     ValueChanged="@(value => Update(Value with { CircleStatus = value }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Circle" Tooltip="Circles"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Tags"
@@ -67,7 +83,11 @@
                     TItem="BitDropdownItem<TagStatus?>"
                     TValue="TagStatus ?"
                     Value="@Value.TagStatus"
-                     ValueChanged="@(value => Update(Value with { TagStatus = value }))" />
+                     ValueChanged="@(value => Update(Value with { TagStatus = value }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Tag" Tooltip="Tags"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
    <div class="search-filter-control-span-1">
        <BitDropdown Prefix="Creators"
@@ -76,7 +96,11 @@
                     TItem="BitDropdownItem<CreatorStatus?>"
                     TValue="CreatorStatus ?"
                     Value="@Value.CreatorStatus"
-                     ValueChanged="@(value => Update(Value with { CreatorStatus = value }))" />
+                     ValueChanged="@(value => Update(Value with { CreatorStatus = value }))">
+            <PrefixTemplate>
+                <InputPrefix Graphic="Graphic.Person" Tooltip="Creators"></InputPrefix>
+            </PrefixTemplate>
+        </BitDropdown>
    </div>
    @if (showAdvancedFilters)
    {
@@ -93,7 +117,11 @@
                         TItem="BitDropdownItem<int>"
                         TValue="int"
                         Values="@Value.TagIds"
-                         ValuesChanged="@(values => Update(Value with { TagIds = [.. values] }))" />
+                         ValuesChanged="@(values => Update(Value with { TagIds = [.. values] }))">
+                <PrefixTemplate>
+                    <InputPrefix Graphic="Graphic.Tag" Tooltip="Tags"></InputPrefix>
+                </PrefixTemplate>
+            </BitDropdown>
        </div>
        <div class="search-filter-control-span-1">
            <BitCheckbox Label="Include All Tags"
@@ -114,7 +142,11 @@
                         TItem="BitDropdownItem<int>"
                         TValue="int"
                         Values="@Value.CreatorIds"
-                         ValuesChanged="@(values => Update(Value with { CreatorIds = [.. values] }))" />
+                         ValuesChanged="@(values => Update(Value with { CreatorIds = [.. values] }))">
+                <PrefixTemplate>
+                    <InputPrefix Graphic="Graphic.Person" Tooltip="Creators"></InputPrefix>
+                </PrefixTemplate>
+            </BitDropdown>
        </div>
        <div class="search-filter-control-span-1">
            <BitCheckbox Label="Include All Creators"