Added initial components.
This commit is contained in:
34
JSMR.UI.Blazor/Components/Icon.razor
Normal file
34
JSMR.UI.Blazor/Components/Icon.razor
Normal file
@@ -0,0 +1,34 @@
|
||||
@using JSMR.UI.Blazor.Enums
|
||||
|
||||
<div class="@GetIconClasses()"></div>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public Graphic Graphic { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public SizeVarient Size { get; set; } = SizeVarient.Medium;
|
||||
|
||||
[Parameter]
|
||||
public IconVarient Varient { get; set; } = IconVarient.None;
|
||||
|
||||
[Parameter]
|
||||
public ColorVarient Color { get; set; }
|
||||
|
||||
private string GetIconClasses()
|
||||
{
|
||||
string graphic = Varient == IconVarient.None
|
||||
? Graphic.ToString().ToLower()
|
||||
: $"{Graphic.ToString().ToLower()}-{Varient.ToString().ToLower()}";
|
||||
|
||||
List<string> classNames =
|
||||
[
|
||||
$"j-icon",
|
||||
$"j-icon-{graphic}",
|
||||
$"j-icon-size-{Size.ToString().ToLower()}",
|
||||
$"background-color-{Color.ToString().ToLower()}"
|
||||
];
|
||||
|
||||
return string.Join(" ", classNames);
|
||||
}
|
||||
}
|
||||
24
JSMR.UI.Blazor/Components/InputPrefix.razor
Normal file
24
JSMR.UI.Blazor/Components/InputPrefix.razor
Normal file
@@ -0,0 +1,24 @@
|
||||
@using JSMR.UI.Blazor.Enums
|
||||
|
||||
<BitTooltip Text="@Tooltip">
|
||||
<div class="j-input-prefix background-color-@BackgroundColor.ToString().ToLower()">
|
||||
<Icon Color="Color" Size="SizeVarient.Small" Graphic="Graphic" Varient="IconVarient"></Icon>
|
||||
</div>
|
||||
</BitTooltip>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public Graphic Graphic { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public IconVarient IconVarient { get; set; } = IconVarient.None;
|
||||
|
||||
[Parameter]
|
||||
public ColorVarient Color { get; set; } = ColorVarient.Primary;
|
||||
|
||||
[Parameter]
|
||||
public ColorVarient BackgroundColor { get; set; } = ColorVarient.Black;
|
||||
|
||||
[Parameter]
|
||||
public string? Tooltip { get; set; }
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
@using JSMR.Application.VoiceWorks.Queries.Search
|
||||
@using JSMR.Domain.Enums
|
||||
@using JSMR.UI.Blazor.Enums
|
||||
@using JSMR.UI.Blazor.Services
|
||||
@using System.Globalization
|
||||
|
||||
@@ -54,26 +55,38 @@
|
||||
}
|
||||
@* <div class="j-icon-2 j-icon-2-flag-@GetFlagClassSuffix(Product)"></div> *@
|
||||
<div class="j-spacer"></div>
|
||||
<div class="j-product-indicators">
|
||||
<BitStack Horizontal="true" Gap="0.5rem" VerticalAlign="BitAlignment.End" HorizontalAlign="BitAlignment.End">
|
||||
@if (Product.IsValid != true)
|
||||
{
|
||||
<div class="j-product-indicator j-product-indicator-invalid">
|
||||
<div class="j-icon j-icon-warning-fill"></div>
|
||||
</div>
|
||||
<ProductIndicator Graphic="Graphic.Warning" IconVarient="IconVarient.Fill" Color="ColorVarient.Orange" BackgroundColor="ColorVarient.Black"></ProductIndicator>
|
||||
}
|
||||
@if (Product.OriginalProductId is not null)
|
||||
{
|
||||
<ProductIndicator Graphic="Graphic.Translate" Color="ColorVarient.Primary" BackgroundColor="ColorVarient.Black"></ProductIndicator>
|
||||
}
|
||||
@if (Product.Favorite)
|
||||
{
|
||||
<div class="j-product-indicator j-product-indicator-favorite">
|
||||
<div class="j-icon j-icon-heart-fill"></div>
|
||||
</div>
|
||||
<ProductIndicator Graphic="Graphic.Star" Color="ColorVarient.Pink" BackgroundColor="ColorVarient.Black"></ProductIndicator>
|
||||
}
|
||||
@if (Product.HasTrial || Product.HasChobit)
|
||||
{
|
||||
<div class="j-trial-container">
|
||||
<div class="j-icon j-icon-headphones"></div>
|
||||
</div>
|
||||
<ProductIndicator Graphic="Graphic.Headphones" Color="ColorVarient.Blue" BackgroundColor="ColorVarient.Black"></ProductIndicator>
|
||||
}
|
||||
</div>
|
||||
</BitStack>
|
||||
@* <div class="j-product-indicators">
|
||||
@if (Product.IsValid != true)
|
||||
{
|
||||
<ProductIndicator Graphic="Graphic.Warning" IconVarient="IconVarient.Fill" Color="ColorVarient.Orange" BackgroundColor="ColorVarient.Black"></ProductIndicator>
|
||||
}
|
||||
@if (Product.Favorite)
|
||||
{
|
||||
<ProductIndicator Graphic="Graphic.Star" Color="ColorVarient.Pink" BackgroundColor="ColorVarient.Black"></ProductIndicator>
|
||||
}
|
||||
@if (Product.HasTrial || Product.HasChobit)
|
||||
{
|
||||
<ProductIndicator Graphic="Graphic.Headphones" Color="ColorVarient.Blue" BackgroundColor="ColorVarient.Black"></ProductIndicator>
|
||||
}
|
||||
</div> *@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
22
JSMR.UI.Blazor/Components/ProductIndicator.razor
Normal file
22
JSMR.UI.Blazor/Components/ProductIndicator.razor
Normal file
@@ -0,0 +1,22 @@
|
||||
@using JSMR.UI.Blazor.Enums
|
||||
|
||||
<div class="j-product-indicator border-color-@Color.ToString().ToLower() background-color-@BackgroundColor.ToString().ToLower()">
|
||||
<Icon Color="Color" Size="SizeVarient.Small" Graphic="Graphic" Varient="IconVarient"></Icon>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public Graphic Graphic { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public IconVarient IconVarient { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public ColorVarient Color { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public ColorVarient BackgroundColor { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public bool Clickable { get; set; }
|
||||
}
|
||||
@@ -35,7 +35,11 @@
|
||||
TItem="BitDropdownItem<Locale>"
|
||||
TValue="Locale"
|
||||
Value="@Value.Locale"
|
||||
ValueChanged="@(value => Update(Value with { Locale = value }))" />
|
||||
ValueChanged="@(value => Update(Value with { Locale = value }))">
|
||||
<PrefixTemplate>
|
||||
<InputPrefix Graphic="Graphic.Globe" Tooltip="Locale"></InputPrefix>
|
||||
</PrefixTemplate>
|
||||
</BitDropdown>
|
||||
</div>
|
||||
<!-- Row 2 -->
|
||||
<div class="search-filter-control-span-1">
|
||||
|
||||
Reference in New Issue
Block a user