brister/jsmr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source
This commit is contained in:
Brian Bicknell
2025-12-02 00:13:25 -05:00
parent de00bee801
commit e962832f24
18 changed files with 271 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
JSMR.UI.Blazor/Components/Card.razor Normal file
View File

@@ -0,0 +1,8 @@
<div class="j-card-2">
@ChildContent
</div>
@code {
[Parameter]
public RenderFragment? ChildContent { get; set; }
}

15
JSMR.UI.Blazor/Components/CircleFilters.razor
View File

@@ -1,4 +1,5 @@
@using JSMR.Application.Circles.Queries.Search @using JSMR.Application.Circles.Queries.Search
@using JSMR.UI.Blazor.Enums
@using JSMR.UI.Blazor.Filters @using JSMR.UI.Blazor.Filters
@using JSMR.UI.Blazor.Services @using JSMR.UI.Blazor.Services
@@ -8,15 +9,23 @@
Immediate="true" Immediate="true"
DebounceTime="500" DebounceTime="500"
Value="@Value.Keywords" 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>
<div class="search-filter-control-span-1"> <div class="search-filter-control-span-1">
<BitDropdown Items="CircleStatuses" <BitDropdown Items="CircleStatuses"
Placeholder="Select..." Placeholder="Select..."
TItem="BitDropdownItem<CircleStatus?>" TItem="BitDropdownItem<CircleStatus?>"
TValue="CircleStatus?" TValue="CircleStatus ?"
Value="@Value.Status" 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>
</div> </div>

4
JSMR.UI.Blazor/Components/InputPrefix.razor
View File

@@ -1,7 +1,7 @@
@using JSMR.UI.Blazor.Enums @using JSMR.UI.Blazor.Enums
<BitTooltip Text="@Tooltip"> <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> <Icon Color="Color" Size="SizeVarient.Small" Graphic="Graphic" Varient="IconVarient"></Icon>
</div> </div>
</BitTooltip> </BitTooltip>
@@ -17,7 +17,7 @@
public ColorVarient Color { get; set; } = ColorVarient.Primary; public ColorVarient Color { get; set; } = ColorVarient.Primary;
[Parameter] [Parameter]
public ColorVarient BackgroundColor { get; set; } = ColorVarient.Black; public ColorVarient BackgroundColor { get; set; } = ColorVarient.SurfaceContainerHigh;
[Parameter] [Parameter]
public string? Tooltip { get; set; } public string? Tooltip { get; set; }

27
JSMR.UI.Blazor/Components/JPagination.razor
View File

@@ -1,15 +1,23 @@
<div class="pagination"> @using JSMR.UI.Blazor.Enums
<div class="pagination">
<div> <div>
<label>@IndexInfo</label> <label>@IndexInfo</label>
</div> </div>
<MudPagination class="pager" ShowFirstButton="true" ShowLastButton="true" Count="@((int)Math.Ceiling((decimal)TotalItems / (decimal)PageSize))" Selected="@PageNumber" SelectedChanged="OnSelectedChanged" /> <MudPagination class="pager" ShowFirstButton="true" ShowLastButton="true" Count="@((int)Math.Ceiling((decimal)TotalItems / (decimal)PageSize))" Selected="@PageNumber" SelectedChanged="OnSelectedChanged" />
<div class="page-sizes"> <div class="page-sizes">
<MudSelect T="int" Value="PageSize" ValueChanged="OnPageSizeChanged" Dense="true" Variant="MudBlazor.Variant.Outlined" Margin="Margin.Dense"> @RightContent
@foreach (int value in PageSizes) <BitDropdown Items="PageSizes2"
{ Style="min-width: 7rem"
<MudSelectItem Value="@value">@value</MudSelectItem> Placeholder="Select..."
} TItem="BitDropdownItem<int>"
</MudSelect> TValue="int"
Value="PageSize"
ValueChanged="OnPageSizeChanged">
<PrefixTemplate>
<InputPrefix Graphic="Graphic.Grid" Tooltip="Page Size"></InputPrefix>
</PrefixTemplate>
</BitDropdown>
</div> </div>
</div> </div>
@@ -23,6 +31,8 @@
[Parameter] [Parameter]
public int[] PageSizes { get; set; } = [5, 10, 25, 50, 100]; 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] [Parameter]
public int PageSize { get; set; } public int PageSize { get; set; }
@@ -35,6 +45,9 @@
[Parameter] [Parameter]
public EventCallback<int> TotalItemsChanged { get; set; } 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 string IndexInfo => TotalItems == 0 ? "No items" : $"{StartIndex.ToString("n0")} - {EndIndex.ToString("n0")} of {TotalItems.ToString("n0")} items";
public int StartIndex => (PageNumber - 1) * PageSize + 1; public int StartIndex => (PageNumber - 1) * PageSize + 1;

48
JSMR.UI.Blazor/Components/VoiceWorkFilters.razor
View File

@@ -16,7 +16,11 @@
<BitTextField Prefix="Keywords" <BitTextField Prefix="Keywords"
Immediate="true" DebounceTime="500" Immediate="true" DebounceTime="500"
Value="@Value.Keywords" 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>
<div class="search-filter-control-span-1"> <div class="search-filter-control-span-1">
<BitDropdown Prefix="Languages" <BitDropdown Prefix="Languages"
@@ -26,7 +30,11 @@
TItem="BitDropdownItem<Language>" TItem="BitDropdownItem<Language>"
TValue="Language" TValue="Language"
Values="@Value.SupportedLanguages" 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>
<div class="search-filter-control-span-1"> <div class="search-filter-control-span-1">
<BitDropdown Prefix="Locale" <BitDropdown Prefix="Locale"
@@ -49,7 +57,11 @@
TItem="BitDropdownItem<SaleStatus?>" TItem="BitDropdownItem<SaleStatus?>"
TValue="SaleStatus ?" TValue="SaleStatus ?"
Value="@Value.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>
<div class="search-filter-control-span-1"> <div class="search-filter-control-span-1">
<BitDropdown Prefix="Circles" <BitDropdown Prefix="Circles"
@@ -58,7 +70,11 @@
TItem="BitDropdownItem<CircleStatus?>" TItem="BitDropdownItem<CircleStatus?>"
TValue="CircleStatus ?" TValue="CircleStatus ?"
Value="@Value.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>
<div class="search-filter-control-span-1"> <div class="search-filter-control-span-1">
<BitDropdown Prefix="Tags" <BitDropdown Prefix="Tags"
@@ -67,7 +83,11 @@
TItem="BitDropdownItem<TagStatus?>" TItem="BitDropdownItem<TagStatus?>"
TValue="TagStatus ?" TValue="TagStatus ?"
Value="@Value.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>
<div class="search-filter-control-span-1"> <div class="search-filter-control-span-1">
<BitDropdown Prefix="Creators" <BitDropdown Prefix="Creators"
@@ -76,7 +96,11 @@
TItem="BitDropdownItem<CreatorStatus?>" TItem="BitDropdownItem<CreatorStatus?>"
TValue="CreatorStatus ?" TValue="CreatorStatus ?"
Value="@Value.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> </div>
@if (showAdvancedFilters) @if (showAdvancedFilters)
{ {
@@ -93,7 +117,11 @@
TItem="BitDropdownItem<int>" TItem="BitDropdownItem<int>"
TValue="int" TValue="int"
Values="@Value.TagIds" 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>
<div class="search-filter-control-span-1"> <div class="search-filter-control-span-1">
<BitCheckbox Label="Include All Tags" <BitCheckbox Label="Include All Tags"
@@ -114,7 +142,11 @@
TItem="BitDropdownItem<int>" TItem="BitDropdownItem<int>"
TValue="int" TValue="int"
Values="@Value.CreatorIds" 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>
<div class="search-filter-control-span-1"> <div class="search-filter-control-span-1">
<BitCheckbox Label="Include All Creators" <BitCheckbox Label="Include All Creators"

63
JSMR.UI.Blazor/Enums/ColorVarient.cs
View File

@@ -1,7 +1,16 @@
namespace JSMR.UI.Blazor.Enums; using System.ComponentModel;
namespace JSMR.UI.Blazor.Enums;
public enum ColorVarient public enum ColorVarient
{ {
Surface,
SurfaceContainer,
SurfaceContainerHigh,
SurfaceContainerLow,
SurfaceContainerOutline,
SurfaceContainerOutlineHigh,
SurfaceContainerOutlineLow,
Primary, Primary,
Secondary, Secondary,
Black, Black,
@@ -12,3 +21,55 @@ public enum ColorVarient
Orange, Orange,
Pink Pink
} }
public static class CssUtil
{
public static string ToClassName(this ColorVarient colorVarient) => colorVarient switch
{
ColorVarient.Surface => "surface",
ColorVarient.SurfaceContainer => "surface-container",
ColorVarient.SurfaceContainerHigh => "surface-container-high",
ColorVarient.SurfaceContainerLow => "surface-container-low",
ColorVarient.SurfaceContainerOutline => "surface-container-outline",
ColorVarient.SurfaceContainerOutlineHigh => "surface-container-outline-high",
ColorVarient.SurfaceContainerOutlineLow => "surface-container-outline-low",
ColorVarient.Yellow => "text-yellow",
ColorVarient.Green => "text-green",
ColorVarient.Teal => "text-teal",
ColorVarient.Blue => "text-blue",
ColorVarient.Orange => "text-orange",
ColorVarient.Pink => "text-pink",
_ => ""
};
public static string TextClass(ColorVarient colorVarient) => colorVarient switch
{
ColorVarient.Surface => "surface",
ColorVarient.SurfaceContainer => "surface-container",
ColorVarient.SurfaceContainerHigh => "surface-container-high",
ColorVarient.SurfaceContainerLow => "surface-container-low",
ColorVarient.Yellow => "text-yellow",
ColorVarient.Green => "text-green",
ColorVarient.Teal => "text-teal",
ColorVarient.Blue => "text-blue",
ColorVarient.Orange => "text-orange",
ColorVarient.Pink => "text-pink",
_ => ""
};
//public static string TextClass(ColorVarient colorVarient) => colorVarient switch
//{
// ColorVarient.Primary => "text-primary",
// ColorVarient.Secondary => "text-secondary",
// ColorVarient.Black => "text-black",
// ColorVarient.Yellow => "text-yellow",
// ColorVarient.Green => "text-green",
// ColorVarient.Teal => "text-teal",
// ColorVarient.Blue => "text-blue",
// ColorVarient.Orange => "text-orange",
// ColorVarient.Pink => "text-pink",
// _ => ""
//};
//public static string BgClass(ColorVarient v) => /* similar */;
}

9
JSMR.UI.Blazor/Enums/Graphic.cs
View File

@@ -8,6 +8,13 @@ public enum Graphic
Headphones, Headphones,
Warning, Warning,
Heart, Heart,
Search,
Globe, Globe,
Translate Translate,
Cart,
Circle,
Tag,
Person,
Sort,
Grid
} }

29
JSMR.UI.Blazor/Pages/VoiceWorks.razor
View File

@@ -2,6 +2,7 @@
@using JSMR.Application.Common.Search @using JSMR.Application.Common.Search
@using JSMR.Application.VoiceWorks.Queries.Search @using JSMR.Application.VoiceWorks.Queries.Search
@using JSMR.UI.Blazor.Components @using JSMR.UI.Blazor.Components
@using JSMR.UI.Blazor.Enums
@using JSMR.UI.Blazor.Filters @using JSMR.UI.Blazor.Filters
@using JSMR.UI.Blazor.Services @using JSMR.UI.Blazor.Services
@using JSMR.UI.Blazor.Shared @using JSMR.UI.Blazor.Shared
@@ -23,10 +24,36 @@
PageNumberChanged="@(pageNumber => UpdateAsync(State with { PageNumber = pageNumber }))" PageNumberChanged="@(pageNumber => UpdateAsync(State with { PageNumber = pageNumber }))"
PageSize="@State.PageSize" PageSize="@State.PageSize"
PageSizeChanged="@(pageSize => UpdateAsync(State with { PageSize = pageSize, PageNumber = 1 }))" PageSizeChanged="@(pageSize => UpdateAsync(State with { PageSize = pageSize, PageNumber = 1 }))"
@bind-TotalItems="Result.TotalItems" /> @bind-TotalItems="Result.TotalItems">
<RightContent>
<BitDropdown Items="sortOptions"
Style="min-width: 17rem"
Placeholder="Select..."
TItem="BitDropdownItem<VoiceWorkSort>"
TValue="VoiceWorkSort"
Value="@State.Sort"
ValueChanged="@(value => UpdateAsync(State with { Sort = value }))">
<PrefixTemplate>
<InputPrefix Graphic="Graphic.Sort" Tooltip="Sort"></InputPrefix>
</PrefixTemplate>
</BitDropdown>
</RightContent>
</JPagination>
} }
@code { @code {
[Inject]
ILookupDataService Lookups { get; set; } = default!;
List<BitDropdownItem<VoiceWorkSort>> sortOptions = [];
protected override async Task OnInitializedAsync()
{
sortOptions = Lookups.GetSortOptions();
await base.OnInitializedAsync();
}
protected override VoiceWorkFilterState ParseStateFromUri(string absoluteUri) protected override VoiceWorkFilterState ParseStateFromUri(string absoluteUri)
=> VoiceWorkFilterState.FromQuery(new Uri(absoluteUri).Query); => VoiceWorkFilterState.FromQuery(new Uri(absoluteUri).Query);

58
JSMR.UI.Blazor/wwwroot/css/app.css
View File

@@ -224,11 +224,13 @@ code {
.pagination > .page-sizes { .pagination > .page-sizes {
justify-content: flex-end; justify-content: flex-end;
display: inline-flex; display: inline-flex;
align-items: center;
gap: 1rem;
} }
.pagination > .page-sizes > * { /*.pagination > .page-sizes > * {
max-width: 6rem; max-width: 6rem;
} }*/
/* Circle */ /* Circle */
.j-circle-image-container { .j-circle-image-container {
@@ -351,6 +353,14 @@ code {
background-image: var(--card-background-image); background-image: var(--card-background-image);
} }
.j-card-2 {
background-image: linear-gradient(0deg, var(--surface-container-low), var(--surface-container-high));
border-top-color: var(--surface-container-outline-high);
border-left-color: var(--surface-container-outline);
border-right-color: var(--surface-container-outline);
border-bottom-color: var(--surface-container-outline-low);
}
/* Input */ /* Input */
.j-input-prefix { .j-input-prefix {
display: flex; display: flex;
@@ -658,6 +668,10 @@ code {
mask-image: url("../svg/warning-fill.svg"); mask-image: url("../svg/warning-fill.svg");
} }
.j-icon-search {
mask-image: url("../svg/search.svg");
}
.j-icon-globe { .j-icon-globe {
mask-image: url("../svg/globe.svg"); mask-image: url("../svg/globe.svg");
} }
@@ -666,6 +680,30 @@ code {
mask-image: url("../svg/translate.svg"); mask-image: url("../svg/translate.svg");
} }
.j-icon-cart {
mask-image: url("../svg/shopping-cart.svg");
}
.j-icon-circle {
mask-image: url("../svg/circle.svg");
}
.j-icon-tag {
mask-image: url("../svg/tag.svg");
}
.j-icon-person {
mask-image: url("../svg/person.svg");
}
.j-icon-sort {
mask-image: url("../svg/sort.svg");
}
.j-icon-grid {
mask-image: url("../svg/grid-view.svg");
}
.j-icon-2 { .j-icon-2 {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@@ -720,6 +758,22 @@ code {
} }
/* Background Colors */ /* Background Colors */
.background-color-surface {
background-color: var(--color-black);
}
.background-color-surface-container {
background-color: var(--surface-container);
}
.background-color-surface-container-high {
background-color: var(--surface-container-high);
}
.background-color-surface-container-low {
background-color: var(--surface-container-low);
}
.background-color-black { .background-color-black {
background-color: var(--color-black); background-color: var(--color-black);
} }

7
JSMR.UI.Blazor/wwwroot/css/theme-frozen.css
View File

@@ -53,8 +53,13 @@
/* Background Colors */ /* Background Colors */
--background-color-primary: rgb(57, 79, 94); --background-color-primary: rgb(57, 79, 94);
--background-color-secondary: rgb(30, 53, 69); --background-color-secondary: rgb(30, 53, 69);
/* Official */ /* Official */
--surface: rgb(16, 36, 50);
--surface-container-high: rgb(57, 79, 94);
--surface-container-low: rgb(30, 53, 69);
--surface-container-outline-high: rgb(83, 99, 109);
--surface-container-outline: rgb(72, 88, 99);
--surface-container-outline-low: rgb(63, 78, 88);
} }
/* /*

3
JSMR.UI.Blazor/wwwroot/svg/circle.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 212 B

3
JSMR.UI.Blazor/wwwroot/svg/grid-view.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
<path d="M120-520v-320h320v320H120Zm0 400v-320h320v320H120Zm400-400v-320h320v320H520Zm0 400v-320h320v320H520ZM200-600h160v-160H200v160Zm400 0h160v-160H600v160Zm0 400h160v-160H600v160Zm-400 0h160v-160H200v160Zm400-400Zm0 240Zm-240 0Zm0-240Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 358 B

3
JSMR.UI.Blazor/wwwroot/svg/person-fill.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 221 B

3
JSMR.UI.Blazor/wwwroot/svg/person.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 374 B

3
JSMR.UI.Blazor/wwwroot/svg/search.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 314 B

3
JSMR.UI.Blazor/wwwroot/svg/shopping-cart.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5M3.14 5l1.25 5h8.22l1.25-5zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0m9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 452 B

3
JSMR.UI.Blazor/wwwroot/svg/sort.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
<path d="M120-240v-80h240v80H120Zm0-200v-80h480v80H120Zm0-200v-80h720v80H120Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 196 B

3
JSMR.UI.Blazor/wwwroot/svg/tag.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3">
<path d="M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM513-160l286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm220 160Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 467 B