Implementing guide ui

WebSharpRSS/Models/CategoryGuideItem.cs

@@ -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 };
     }
 }

WebSharpRSS/Shared/CategoryGuide.razor

@@ -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)
+    {
+        
+    }
+
+}

WebSharpRSS/Shared/SideGuide.razor

@@ -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 CategoryGuideItem() { CategoryTitle = "Social", CategoryIcon = Icons.Material.Filled.People });
-        Categories.Add(new CategoryTreeItem() { CategoryTitle = "Blogs", CategoryIcon = Icons.Material.Filled.RssFeed });
+        Categories.Add(new CategoryGuideItem() { CategoryTitle = "Blogs", CategoryIcon = Icons.Material.Filled.RssFeed, CategoryHexColor = Colors.Green.Accent1 });
-        Categories.Add(new CategoryTreeItem() { CategoryTitle = "Tech", CategoryIcon = Icons.Material.Filled.Computer });
+        Categories.Add(new CategoryGuideItem() { CategoryTitle = "Tech", CategoryIcon = Icons.Material.Filled.Computer, CategoryHexColor = Colors.Brown.Lighten1 });
-        Categories.Add(new CategoryTreeItem() { CategoryTitle = "News", CategoryIcon = Icons.Material.Filled.Newspaper });
+        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();
+    }
+
 }

WebSharpRSS/wwwroot/css/site.css

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