hmaxnl/SharpRSS
1
0
Fork 0
mirror of https://github.com/hmaxnl/SharpRSS.git synced 2024-09-19 17:44:20 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Implementing guide ui

Browse Source
This commit is contained in:
Max 2023-04-30 20:13:14 +02:00
parent fd72011480
commit 4ad5fd7adb
4 changed files with 136 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
WebSharpRSS/Models/CategoryTreeItem.cs → WebSharpRSS/Models/CategoryGuideItem.cs
View File

@ -3,11 +3,20 @@ using CodeHollow.FeedReader;
namespace WebSharpRSS.Models
{
public class CategoryTreeItem
public class CategoryGuideItem
{
public string CategoryTitle { get; set; }
public string CategoryIcon { get; set; }
private string _hexColor;
public string CategoryHexColor
{
get => _hexColor;
set => _hexColor = value.Insert(7, "80");
}
public bool IsExpanded { get; set; }
public bool IsSelected { get; set; }
public HashSet<Feed> Feeds { get; set; } = new HashSet<Feed>() { FeedReader.ReadAsync("http://fedoramagazine.org/feed/").Result };
}
}

102
WebSharpRSS/Shared/CategoryGuide.razor Normal file
View File

@ -0,0 +1,102 @@
@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;
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: 1;
}
.feed-item:hover {
background: var(--hover-bg-color);
}
</style>
<div>
<MudText>@HeaderText</MudText>
@foreach (CategoryGuideItem catItem in Categories)
{
<div>
<div @onclick="@(() => CatItemClicked(catItem))" class="cat-item mud-ripple" style="--hover-bg-color: @catItem.CategoryHexColor; --background-color: @(catItem.IsSelected ? catItem.CategoryHexColor : "transparent")">
@*<MudListItem Icon="@catItem.CategoryIcon">@catItem.CategoryTitle</MudListItem>*@
<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.Feeds != null)
{
foreach (Feed feed in catItem.Feeds)
{
<div class="cat-item mud-ripple" style="--hover-bg-color: @catItem.CategoryHexColor">
@* Items *@
<div @onclick="() => FeedItemClicked(feed)">
@* Image *@
<MudText Class="pointer-events-none">@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> HandleCat { get; set; }
CategoryGuideItem? _selectedCategory;
void CatItemClicked(CategoryGuideItem categoryItem)
{
categoryItem.IsExpanded = !categoryItem.IsExpanded;
if (_selectedCategory != categoryItem)
{
if (_selectedCategory != null)
_selectedCategory.IsSelected = false;
_selectedCategory = categoryItem;
_selectedCategory.IsSelected = true;
}
//TODO: Handle click!
HandleCat(categoryItem);
}
void FeedItemClicked(Feed feed)
{
}
}

33
WebSharpRSS/Shared/SideGuide.razor
View File

@ -2,16 +2,24 @@
@using MudBlazor.Utilities
@using CodeHollow.FeedReader
@using Serilog
<style>
.cat-item{
background: transparent;
}
.cat-item:hover{
background: @Colors.Blue.Accent1;
}
</style>
<MudStack Spacing="2">
<MudNavMenu>
<MudNavLink Href="/" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
</MudNavMenu>
<MudList DisableGutters="true" Clickable="true" Color="Color.Warning" SelectedItemChanged="Callback">
<CategoryGuide Categories="Categories" HandleCat="HandleCat"/>
@*<MudList DisableGutters="true" Clickable="true" Color="Color.Warning" SelectedItemChanged="Callback">
<MudListSubheader>
Categories
</MudListSubheader>
@foreach (CategoryTreeItem cat in Categories)
@foreach (CategoryGuideItem cat in Categories)
{
/* Category item*/
<MudListItem Class="pl-4" Text="@cat.CategoryTitle" Icon="@cat.CategoryIcon" @bind-Expanded="@cat.IsExpanded">
@ -30,29 +38,34 @@
</NestedList>
</MudListItem>
}
</MudList>
</MudList>*@
</MudStack>
@code {
public HashSet<CategoryTreeItem> Categories = new HashSet<CategoryTreeItem>();
public HashSet<CategoryGuideItem> Categories = new HashSet<CategoryGuideItem>();
protected override void OnInitialized()
{
Log.Verbose("Setting up test data");
Categories.Add(new CategoryTreeItem() { CategoryTitle = "Social", CategoryIcon = Icons.Material.Filled.People });
Categories.Add(new CategoryTreeItem() { CategoryTitle = "Blogs", CategoryIcon = Icons.Material.Filled.RssFeed });
Categories.Add(new CategoryTreeItem() { CategoryTitle = "Tech", CategoryIcon = Icons.Material.Filled.Computer });
Categories.Add(new CategoryTreeItem() { CategoryTitle = "News", CategoryIcon = Icons.Material.Filled.Newspaper });
Categories.Add(new CategoryGuideItem() { CategoryTitle = "Social", CategoryIcon = Icons.Material.Filled.People });
Categories.Add(new CategoryGuideItem() { CategoryTitle = "Blogs", CategoryIcon = Icons.Material.Filled.RssFeed, CategoryHexColor = Colors.Green.Accent1 });
Categories.Add(new CategoryGuideItem() { CategoryTitle = "Tech", CategoryIcon = Icons.Material.Filled.Computer, CategoryHexColor = Colors.Brown.Lighten1 });
Categories.Add(new CategoryGuideItem() { CategoryTitle = "News", CategoryIcon = Icons.Material.Filled.Newspaper, CategoryHexColor = Colors.Red.Accent1 });
}
private void Callback(MudListItem obj)
{
switch (obj.Value)
{
case CategoryTreeItem catTreeItem:
case CategoryGuideItem catTreeItem:
break;
case Feed feed:
break;
}
}
private void HandleCat(CategoryGuideItem obj)
{
//throw new NotImplementedException();
}
}

1
WebSharpRSS/wwwroot/css/site.css
View File

@ -1,3 +1,4 @@
/* Blazor */
#blazor-error-ui {
background: lightyellow;
bottom: 0;