2023-04-30 20:13:14 +02:00
|
|
|
@using CodeHollow.FeedReader
|
2023-05-12 23:58:49 +02:00
|
|
|
@using SharpRss.Models
|
|
|
|
@using ToolQit
|
|
|
|
@using ToolQit.Containers
|
|
|
|
@using ToolQit.Extensions
|
2023-05-15 15:53:08 +02:00
|
|
|
@using WebSharpRSS.Models;
|
2023-04-30 20:13:14 +02:00
|
|
|
<style>
|
|
|
|
.cat-item {
|
2023-05-04 20:59:25 +02:00
|
|
|
background: var(--background-color);
|
|
|
|
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;
|
2023-04-30 20:13:14 +02:00
|
|
|
}
|
|
|
|
.cat-item:hover {
|
2023-05-04 20:59:25 +02:00
|
|
|
background: var(--hover-bg-color);
|
2023-04-30 20:13:14 +02:00
|
|
|
}
|
|
|
|
.cat-item-text {
|
2023-05-04 20:59:25 +02:00
|
|
|
flex: 1 1 auto;
|
|
|
|
min-width: 0;
|
2023-04-30 20:13:14 +02:00
|
|
|
}
|
|
|
|
.cat-item-icon {
|
2023-05-04 20:59:25 +02:00
|
|
|
display: inline-flex;
|
|
|
|
min-width: 56px;
|
|
|
|
flex-shrink: 0;
|
2023-04-30 20:13:14 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.feed-item {
|
2023-05-04 20:59:25 +02:00
|
|
|
background: var(--background-color);
|
|
|
|
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;
|
2023-04-30 20:13:14 +02:00
|
|
|
}
|
|
|
|
.feed-item:hover {
|
2023-05-04 20:59:25 +02:00
|
|
|
background: var(--hover-bg-color);
|
2023-04-30 20:13:14 +02:00
|
|
|
}
|
2023-05-04 20:59:25 +02:00
|
|
|
.feed-item-text {
|
|
|
|
flex: 1 1 auto;
|
|
|
|
min-width: 0;
|
|
|
|
}
|
|
|
|
.feed-item-icon {
|
|
|
|
display: inline-flex;
|
|
|
|
min-width: 56px;
|
|
|
|
flex-shrink: 0;
|
|
|
|
}
|
|
|
|
|
2023-04-30 20:13:14 +02:00
|
|
|
</style>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
<MudText>@HeaderText</MudText>
|
2023-05-15 15:53:08 +02:00
|
|
|
@foreach (GuideItemModel guideModel in GuideItems)
|
2023-04-30 20:13:14 +02:00
|
|
|
{
|
2023-05-15 15:53:08 +02:00
|
|
|
<GuideItem Model="@guideModel" ItemClicked="ItemClicked"/>
|
|
|
|
#if false
|
2023-04-30 20:13:14 +02:00
|
|
|
<div>
|
2023-05-15 15:53:08 +02:00
|
|
|
<div @onclick="@(() => guideItem.ItemClick())" class="cat-item mud-ripple" style="--hover-bg-color: @Colors.Blue.Accent1; --background-color: @(guideItem.IsSelected ? Colors.Blue.Accent2 : "transparent")">
|
2023-04-30 20:13:14 +02:00
|
|
|
<div class="cat-item-icon">
|
2023-05-15 15:53:08 +02:00
|
|
|
@if (guideItem.FaviconUrl != null)
|
|
|
|
{
|
|
|
|
<MudImage ObjectFit="ObjectFit.ScaleDown" Src="@guideItem.FaviconUrl" />
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
<MudIcon Class="pointer-events-none" Icon="@guideItem.Icon" Size="Size.Medium" />
|
|
|
|
}
|
|
|
|
|
2023-04-30 20:13:14 +02:00
|
|
|
</div>
|
|
|
|
<div class="cat-item-text">
|
2023-05-15 15:53:08 +02:00
|
|
|
<MudText Class="pointer-events-none" Typo="Typo.subtitle1">@guideItem.Title</MudText>
|
2023-04-30 20:13:14 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@* Feeds *@
|
2023-05-15 15:53:08 +02:00
|
|
|
@if (guideItem.IsExpanded && guideItem.Feeds != null)
|
2023-04-30 20:13:14 +02:00
|
|
|
{
|
2023-05-15 15:53:08 +02:00
|
|
|
foreach (FeedModel feed in guideItem.Feeds)
|
2023-04-30 20:13:14 +02:00
|
|
|
{
|
2023-05-12 23:58:49 +02:00
|
|
|
if (feed == null || feed.Base == null) continue;
|
|
|
|
<div @onclick="() => ItemClicked(feed)" class="feed-item mud-ripple" style="--hover-bg-color: @Colors.Blue.Accent1; --background-color: @(feed.IsSelected ? Colors.Blue.Accent2 : "transparent")">
|
2023-05-04 20:59:25 +02:00
|
|
|
<div class="feed-item-icon">
|
2023-05-12 23:58:49 +02:00
|
|
|
@*@if (!guideFeed.FaviconUrl.IsNullEmptyWhiteSpace())
|
|
|
|
{
|
|
|
|
<MudImage ObjectFit="ObjectFit.ScaleDown" Src="@guideFeed.FaviconUrl"/>
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
<MudIcon Icon="@Icons.Material.Filled.RssFeed" Size="Size.Medium"/>
|
|
|
|
}*@
|
|
|
|
<MudIcon Icon="@Icons.Material.Filled.RssFeed" Size="Size.Medium"/>
|
2023-05-04 20:59:25 +02:00
|
|
|
</div>
|
|
|
|
<div class="feed-item-text">
|
2023-05-12 23:58:49 +02:00
|
|
|
<MudText Class="pointer-events-none">@feed.Base.Title</MudText>
|
2023-04-30 20:13:14 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</div>
|
2023-05-15 15:53:08 +02:00
|
|
|
#endif
|
2023-04-30 20:13:14 +02:00
|
|
|
}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
@code {
|
|
|
|
[Parameter]
|
2023-05-15 15:53:08 +02:00
|
|
|
public string HeaderText { get; set; } = string.Empty;
|
2023-04-30 20:13:14 +02:00
|
|
|
[Parameter]
|
2023-05-15 15:53:08 +02:00
|
|
|
public HashSet<GuideItemModel> GuideItems { get; set; } = new HashSet<GuideItemModel>();
|
2023-04-30 20:13:14 +02:00
|
|
|
[Parameter]
|
2023-05-12 23:58:49 +02:00
|
|
|
public Action<CategoryModel>? CatItemClicked { get; set; }
|
2023-05-04 20:59:25 +02:00
|
|
|
[Parameter]
|
2023-05-12 23:58:49 +02:00
|
|
|
public Action<FeedModel>? FeedItemClicked { get; set; }
|
|
|
|
|
2023-05-15 15:53:08 +02:00
|
|
|
GuideItemModel? _selectedItem;
|
2023-04-30 20:13:14 +02:00
|
|
|
|
2023-05-15 15:53:08 +02:00
|
|
|
void ItemClicked(GuideItemModel model)
|
2023-04-30 20:13:14 +02:00
|
|
|
{
|
2023-05-15 15:53:08 +02:00
|
|
|
model.IsExpanded = !model.IsExpanded;
|
|
|
|
if (_selectedItem != model)
|
2023-04-30 20:13:14 +02:00
|
|
|
{
|
2023-05-12 23:58:49 +02:00
|
|
|
if (_selectedItem != null)
|
|
|
|
_selectedItem.IsSelected = false;
|
2023-05-15 15:53:08 +02:00
|
|
|
_selectedItem = model;
|
2023-05-12 23:58:49 +02:00
|
|
|
_selectedItem.IsSelected = true;
|
2023-04-30 20:13:14 +02:00
|
|
|
}
|
2023-05-15 15:53:08 +02:00
|
|
|
if (model.Feeds != null && model.Feeds.Count >= 1)
|
|
|
|
{
|
|
|
|
if (model.CategoryModel != null)
|
|
|
|
CatItemClicked?.Invoke(model.CategoryModel);
|
|
|
|
}
|
|
|
|
else
|
2023-05-04 21:04:44 +02:00
|
|
|
{
|
2023-05-15 15:53:08 +02:00
|
|
|
if (model.FeedModel != null)
|
|
|
|
FeedItemClicked?.Invoke(model.FeedModel);
|
2023-05-04 21:04:44 +02:00
|
|
|
}
|
2023-04-30 20:13:14 +02:00
|
|
|
}
|
|
|
|
}
|