BlazorStart/Start/Client/Components/BookmarkGroup.razor
2021-12-07 17:34:47 -08:00

80 lines
2.3 KiB
Plaintext

@using System.Drawing
@using Fluxor
@using Start.Client.Store.State
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@inject IState<RootState> state
@inject IDispatcher dispatch
<div class="card bookmarkGroup">
<div class="card-header" style="background-color: @this.Group.Color">
<h2 class="card-title h6 d-inline-block @this.ForegroundTitleColorClass">
@this.Group.Title
</h2>
</div>
<div class="card-body">
<ul class="bookmarks">
@if (this.Group.Bookmarks == null || !this.Group.Bookmarks.Any())
{
<li class="noBookmarksItem">
<div class="empty">
<div class="empty-icon">
<i class="icon icon-bookmark"></i>
</div>
<p class="empty-title h6">No Bookmarks</p>
<div class="empty-action">
<button type="button" class="btn btn-primary">
<i class="icon icon-plus"></i> Create Bookmark
</button>
</div>
</div>
</li>
}
else
{
foreach (BookmarkDto bookmark in this.Group.Bookmarks)
{
<Bookmark Model="bookmark" />
}
@if (this.state.Value.EditMode)
{
<li class="addBookmarkItem">
<button type="button" class="addBookmarkButton btn">
<i class="icon icon-plus"></i>
Create Bookmark
</button>
</li>
}
}
</ul>
</div>
</div>
@code
{
[Parameter]
public BookmarkGroupDto Group { get; set; } = null!;
protected string ForegroundTitleColorClass
{
get
{
const int threshold = 105;
Color bgColor = ColorTranslator.FromHtml(this.Group.Color);
double val = Math.Floor((bgColor.R * .299) + (bgColor.G * 0.587) + (bgColor.B * 0.114));
if ((255 - val) < threshold)
return "text-dark";
return "text-light";
}
}
protected void OnCreateBookmarkClicked()
{
// Placeholder
}
}