SharpRSS/WebSharpRSS/Shared/CategoryGuide.razor

127 lines
4.0 KiB
Plaintext

@using WebSharpRSS.Models
@using CodeHollow.FeedReader
<style>
.cat-item {
background: var(--background-color);
tab-index: 0;
width: 100%;
display: flex;
position: relative;
box-sizing: border-box;
text-align: start;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 12px;
justify-content: flex-start;
text-decoration: none;
}
.cat-item:hover {
background: var(--hover-bg-color);
}
.cat-item-text {
flex: 1 1 auto;
min-width: 0;
}
.cat-item-icon {
display: inline-flex;
min-width: 56px;
flex-shrink: 0;
}
.feed-item {
background: var(--background-color);
tab-index: 0;
width: 100%;
display: flex;
position: relative;
box-sizing: border-box;
text-align: start;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 30px;
justify-content: flex-start;
text-decoration: none;
}
.feed-item:hover {
background: var(--hover-bg-color);
}
.feed-item-text {
flex: 1 1 auto;
min-width: 0;
}
.feed-item-icon {
display: inline-flex;
min-width: 56px;
flex-shrink: 0;
}
</style>
<div>
<MudText>@HeaderText</MudText>
@foreach (CategoryGuideItem catItem in Categories)
{
<div>
<div @onclick="@(() => ItemClicked(catItem))" class="cat-item mud-ripple" style="--hover-bg-color: @catItem.CategoryHexColor; --background-color: @(catItem.IsSelected ? catItem.CategoryHexColor : "transparent")">
<div class="cat-item-icon">
<MudIcon Class="pointer-events-none" Icon="@catItem.CategoryIcon" Size="Size.Medium"/>
</div>
<div class="cat-item-text">
<MudText Class="pointer-events-none" Typo="Typo.subtitle1">@catItem.CategoryTitle</MudText>
</div>
</div>
@* Feeds *@
@if (catItem.IsExpanded && catItem.FeedItems != null)
{
foreach (FeedGuideItem feedItem in catItem.FeedItems)
{
<div @onclick="() => ItemClicked(feedItem)" class="feed-item mud-ripple" style="--hover-bg-color: @catItem.CategoryHexColor; --background-color: @(feedItem.IsSelected ? catItem.CategoryHexColor : "transparent")">
<div class="feed-item-icon">
<MudImage ObjectFit="ObjectFit.Contain" Src="http://www.google.com/s2/favicons?domain=wikipedia.com"/>
</div>
<div class="feed-item-text">
<MudText Class="pointer-events-none">@feedItem.Feed.Title</MudText>
</div>
</div>
}
}
</div>
}
</div>
@code {
[Parameter]
public string HeaderText { get; set; }
[Parameter]
public HashSet<CategoryGuideItem> Categories { get; set; } = new HashSet<CategoryGuideItem>();
[Parameter]
public Action<CategoryGuideItem>? CatItemClicked { get; set; }
[Parameter]
public Action<FeedGuideItem>? FeedItemClicked { get; set; }
ISelectableGuideItem? _selectedCategory;
void ItemClicked(ISelectableGuideItem categoryItem)
{
categoryItem.IsExpanded = !categoryItem.IsExpanded;
if (_selectedCategory != categoryItem)
{
if (_selectedCategory != null)
_selectedCategory.IsSelected = false;
_selectedCategory = categoryItem;
_selectedCategory.IsSelected = true;
}
switch (categoryItem)
{
case CategoryGuideItem catGuideItem:
CatItemClicked?.Invoke(catGuideItem);
break;
case FeedGuideItem feedGuideItem:
FeedItemClicked?.Invoke(feedGuideItem);
break;
}
}
}