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

Fixed side bar UI.

Browse Source
This commit is contained in:
Max 2023-05-04 20:59:25 +02:00
parent 4ad5fd7adb
commit 493d20820a
5 changed files with 86 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
WebSharpRSS/Models/CategoryGuideItem.cs
View File

@ -3,7 +3,7 @@ using CodeHollow.FeedReader;
namespace WebSharpRSS.Models
{
public class CategoryGuideItem
public class CategoryGuideItem : ISelectableGuideItem
{
public string CategoryTitle { get; set; }
public string CategoryIcon { get; set; }
@ -17,6 +17,6 @@ namespace WebSharpRSS.Models
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 };
public HashSet<FeedGuideItem> FeedItems { get; set; } = new HashSet<FeedGuideItem>() { new FeedGuideItem(FeedReader.ReadAsync("http://fedoramagazine.org/feed/").Result) };
}
}

15
WebSharpRSS/Models/FeedGuideItem.cs Normal file
View File

@ -0,0 +1,15 @@
using CodeHollow.FeedReader;
namespace WebSharpRSS.Models
{
public class FeedGuideItem : ISelectableGuideItem
{
public FeedGuideItem(Feed feed)
{
Feed = feed;
}
public readonly Feed Feed;
public bool IsSelected { get; set; }
public bool IsExpanded { get; set; }
}
}

14
WebSharpRSS/Models/FeedTreeItem.cs
View File

@ -1,14 +0,0 @@
using System.Collections.Generic;
using CodeHollow.FeedReader;
namespace WebSharpRSS.Models
{
public class FeedTreeItem
{
public FeedTreeItem(Feed feed)
{
_feed = feed;
}
private readonly Feed _feed;
}
}

8
WebSharpRSS/Models/ISelectableGuideItem.cs Normal file
View File

@ -0,0 +1,8 @@
namespace WebSharpRSS.Models
{
public interface ISelectableGuideItem
{
public bool IsSelected { get; set; }
public bool IsExpanded { get; set; }
}
}

101
WebSharpRSS/Shared/CategoryGuide.razor
View File

@ -2,39 +2,61 @@
@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;
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);
background: var(--hover-bg-color);
}
.cat-item-text {
flex: 1 1 auto;
min-width: 0;
flex: 1 1 auto;
min-width: 0;
}
.cat-item-icon {
display: inline-flex;
min-width: 56px;
flex-shrink: 0;
display: inline-flex;
min-width: 56px;
flex-shrink: 0;
}
.feed-item {
background: var(--background-color);
tab-index: 1;
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);
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>
@ -42,8 +64,7 @@
@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 @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>
@ -52,15 +73,16 @@
</div>
</div>
@* Feeds *@
@if (catItem.IsExpanded && catItem.Feeds != null)
@if (catItem.IsExpanded && catItem.FeedItems != null)
{
foreach (Feed feed in catItem.Feeds)
foreach (FeedGuideItem feedItem in catItem.FeedItems)
{
<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 @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>
}
@ -76,10 +98,12 @@
public HashSet<CategoryGuideItem> Categories { get; set; } = new HashSet<CategoryGuideItem>();
[Parameter]
public Action<CategoryGuideItem> HandleCat { get; set; }
[Parameter]
public Action<FeedGuideItem> FeedItemClicked { get; set; }
CategoryGuideItem? _selectedCategory;
ISelectableGuideItem? _selectedCategory;
void CatItemClicked(CategoryGuideItem categoryItem)
void ItemClicked(ISelectableGuideItem categoryItem)
{
categoryItem.IsExpanded = !categoryItem.IsExpanded;
@ -90,13 +114,10 @@
_selectedCategory = categoryItem;
_selectedCategory.IsSelected = true;
}
//TODO: Handle click!
HandleCat(categoryItem);
// Handle the click.
if (categoryItem is CategoryGuideItem catGuideItem)
HandleCat(catGuideItem);
/*if (categoryItem is FeedGuideItem feedGuideItem)
FeedItemClicked(feedGuideItem);*/
}
void FeedItemClicked(Feed feed)
{
}
}