From 1c4867afdc412517c77f60bde221ab730326e679 Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Tue, 25 Feb 2025 14:18:08 +0100
Subject: [PATCH] Update style

---
 .../Layouts/MainLayout.razor                  |  5 ---
 .../Layouts/MainLayout.razor.cs               | 16 ---------
 .../Pages/Games/AddType.cs                    | 13 +++++++
 .../Games/Components/GameHeader.razor.cs      |  9 +++--
 .../Pages/Games/GamesBase.razor               |  7 ++--
 .../Pages/Games/GamesBase.razor.cs            |  3 ++
 .../Components/Dropdown/DropdownContent.razor | 13 +++++++
 .../Dropdown/DropdownContent.razor.cs         | 36 +++++++++++++++++++
 .../Dropdown/DropdownContent.razor.css        | 32 +++++++++++++++++
 .../Components/Dropdown/DropdownTheme.cs      |  6 ++++
 .../Shared/Components/HeaderLayout.razor.cs   | 30 ----------------
 .../HeaderBase.razor}                         | 25 ++++++-------
 .../Shared/Headers/HeaderBase.razor.cs        | 35 ++++++++++++++++++
 .../HeaderBase.razor.css}                     | 28 ---------------
 .../GameIdeas.BlazorApp/wwwroot/css/app.css   |  5 +--
 .../GameIdeas.BlazorApp/wwwroot/index.html    |  2 +-
 16 files changed, 158 insertions(+), 107 deletions(-)
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/AddType.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs
 delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Components/HeaderLayout.razor => Headers/HeaderBase.razor} (67%)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs
 rename src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/{Components/HeaderLayout.razor.css => Headers/HeaderBase.razor.css} (71%)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor
index 651b9eb..81e4bfe 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor
@@ -2,12 +2,7 @@
 @inherits LayoutComponentBase
 
 <div class="page">
-    @if (IsLoading) {
-        <Loader />
-    }
-
     @Body
-    
 </div>
 
 <span class="orb red"></span>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.cs
deleted file mode 100644
index bb4f4af..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.cs
+++ /dev/null
@@ -1,16 +0,0 @@
-
-using System.Net.Http.Json;
-using GameIdeas.Resources;
-
-namespace GameIdeas.BlazorApp.Layouts
-{
-    public partial class MainLayout
-    {
-        public bool IsLoading { get; set; } = true;
-
-        protected override void OnInitialized()
-        {
-            IsLoading = false;
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/AddType.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/AddType.cs
new file mode 100644
index 0000000..014b039
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/AddType.cs
@@ -0,0 +1,13 @@
+namespace GameIdeas.BlazorApp.Pages.Games;
+
+public enum AddType
+{
+    Manual,
+    Auto
+}
+
+public class AddTypeParams(AddType addType, string label)
+{
+    public AddType AddType { get; set; } = addType;
+    public string? Label { get; set; } = label;
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameHeader.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameHeader.razor.cs
index 40de90c..b57f847 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameHeader.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameHeader.razor.cs
@@ -1,7 +1,6 @@
-namespace GameIdeas.BlazorApp.Pages.Games.Components
-{
-    public partial class GameHeader
-    {
+namespace GameIdeas.BlazorApp.Pages.Games.Components;
+
+public partial class GameHeader
+{
 
-    }
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
index 2e117ad..87718be 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
@@ -1,14 +1,15 @@
 @page "/Games"
 @using GameIdeas.BlazorApp.Layouts
 @using GameIdeas.BlazorApp.Shared.Components
+@using GameIdeas.BlazorApp.Shared.Headers
 @using GameIdeas.Resources
 
 @layout MainLayout
 
 <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
 
-<HeaderLayout>
+<HeaderBase>
     <Body>
-        <div class="temp">Prout</div>
+        <div>PROUT</div>
     </Body>
-</HeaderLayout>
+</HeaderBase>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
index cde8f1f..45197e2 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
@@ -1,5 +1,8 @@
+using GameIdeas.BlazorApp.Shared.Headers;
+
 namespace GameIdeas.BlazorApp.Pages.Games;
 
 public partial class GamesBase ()
 {
+    private HeaderBase? Header;
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor
new file mode 100644
index 0000000..16bfa51
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor
@@ -0,0 +1,13 @@
+@typeparam TItem
+
+<div @ref=Content class="dropdown-container" tabindex="1000"
+        @onfocusout=HandlerDropdownAddFocusOut>
+    <div class="dropdown-content @(ContentVisile ? string.Empty : "invisible") @(Enum.GetName(Theme)?.ToLower())">
+        @foreach (var item in Items)
+        {
+            <div class="drowdown-element @(Enum.GetName(Theme)?.ToLower())" @onclick=HandleItemClicked>
+                @(LabelSelector != null ? LabelSelector.Invoke(item) : item?.ToString())
+            </div>
+        }
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs
new file mode 100644
index 0000000..cb65ee1
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs
@@ -0,0 +1,36 @@
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Dropdown;
+
+public partial class DropdownContent<TItem>
+{
+    [Parameter] public TItem? Value { get; set; }
+    [Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
+    [Parameter] public IEnumerable<TItem> Items { get; set; } = [];
+    [Parameter] public Func<TItem, string>? LabelSelector { get; set; }
+    [Parameter] public DropdownTheme Theme { get; set; }
+
+    private bool ContentVisile = false;
+    private DateTime ContentLastFocusOut = DateTime.Now;
+    private ElementReference Content;
+
+    public async Task OpenAsync()
+    {
+        if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2))
+        {
+            await Content.FocusAsync();
+            ContentVisile = true;
+        }
+    }
+
+    public void Close() => ContentVisile = false;
+
+    private void HandlerDropdownAddFocusOut()
+    {
+        ContentLastFocusOut = DateTime.Now;
+        ContentVisile = false;
+    }
+
+    private async Task HandleItemClicked() => await ValueChanged.InvokeAsync(Value);
+
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css
new file mode 100644
index 0000000..daa617b
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css
@@ -0,0 +1,32 @@
+.dropdown-content {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--small-radius);
+    position: fixed;
+    animation-name: fade-in;
+    animation-duration: 0.4s
+}
+
+.drowdown-element {
+    width: fit-content;
+}
+
+    .drowdown-element:hover {
+        cursor: pointer;
+    }
+
+.invisible {
+    display: none;
+}
+
+.dropdown-content.navigation {
+    gap: 4px;
+    background: var(--violet);
+    box-shadow: var(--drop-shadow);
+    padding: 4px;
+}
+
+    .drowdown-element.navigation:hover {
+        color: var(--light-grey);
+    }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs
new file mode 100644
index 0000000..ac5c666
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs
@@ -0,0 +1,6 @@
+namespace GameIdeas.BlazorApp.Shared.Components.Dropdown;
+
+public enum DropdownTheme
+{
+    Navigation
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs
deleted file mode 100644
index 7692452..0000000
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs
+++ /dev/null
@@ -1,30 +0,0 @@
-using Microsoft.AspNetCore.Components;
-
-namespace GameIdeas.BlazorApp.Shared.Components;
-
-public partial class HeaderLayout : LayoutComponentBase
-{
-    private bool AddButtonsVisile = false;
-    private DateTime AddButtonsLastOut = DateTime.Now;
-    private ElementReference DropdownAdd;
-
-    private void HandleIconClicked()
-    {
-        throw new NotImplementedException();
-    }
-
-    private async Task HandleMoreAddClickedAsync()
-    {
-        if (DateTime.Now - AddButtonsLastOut >= TimeSpan.FromSeconds(0.2))
-        {
-            await DropdownAdd.FocusAsync();
-            AddButtonsVisile = true;
-        }
-    }
-
-    private void HandlerDropdownAddFocusOut()
-    {
-        AddButtonsLastOut = DateTime.Now;
-        AddButtonsVisile = false;
-    }
-}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor
similarity index 67%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor
index 24bcc9d..66b78f5 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor
@@ -1,5 +1,6 @@
-@using GameIdeas.Resources
-@inherits LayoutComponentBase
+@using GameIdeas.BlazorApp.Shared.Components.Dropdown
+@using GameIdeas.BlazorApp.Pages.Games
+@using GameIdeas.Resources
 
 <div class="header-tab">
     <div class="icon-container" @onclick="HandleIconClicked">
@@ -16,24 +17,18 @@
                         <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
                     </svg>
                 </div>
-                <div class="second-button button" @onclick=HandleMoreAddClickedAsync>
+                <div class="second-button button" @onclick=HandleMoreButton>
                     <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                         <path d="M1 3H23L12 22" />
                     </svg>
                 </div>
             </div>
-            
-            <div @ref=DropdownAdd class="dropdown-container" tabindex="1000"
-                 @onfocusout=HandlerDropdownAddFocusOut>
-                <div class="dropdown-more-add @(AddButtonsVisile ? string.Empty : "invisible")">
-                    <div class="drowdown-more-element">
-                        @ResourcesKey.ManualAdd
-                    </div>
-                    <div class="drowdown-more-element">
-                        @ResourcesKey.AutoAdd
-                    </div>
-                </div>
-            </div> 
+            <DropdownContent @ref="DropdownAdd"
+                TItem="AddTypeParams"
+                ValueChanged=HandleAddTypeClickedAsync
+                Items="AddTypes"
+                LabelSelector="(addtype => addtype.Label)"
+                Theme="DropdownTheme.Navigation" />
         </div>
         <div class="icon-container">
             <svg class="account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs
new file mode 100644
index 0000000..8f651e4
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs
@@ -0,0 +1,35 @@
+using GameIdeas.BlazorApp.Pages.Games;
+using GameIdeas.BlazorApp.Shared.Components.Dropdown;
+using GameIdeas.Resources;
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Headers;
+
+public partial class HeaderBase
+{
+    [Parameter] public RenderFragment? Body { get; set; }
+    [Parameter] public EventCallback<AddType> AddTypeChanged { get; set; }
+
+    private DropdownContent<AddTypeParams>? DropdownAdd;
+    private readonly IEnumerable<AddTypeParams> AddTypes =
+    [
+        new AddTypeParams(AddType.Manual, ResourcesKey.ManualAdd),
+        new AddTypeParams(AddType.Auto, ResourcesKey.AutoAdd)
+    ];
+
+    private void HandleIconClicked()
+    {
+        throw new NotImplementedException();
+    }
+    private async Task HandleMoreButton()
+    {
+        if (DropdownAdd != null)
+        {
+            await DropdownAdd.OpenAsync();
+        }
+    }
+    private async Task HandleAddTypeClickedAsync(AddTypeParams value)
+    {
+        await AddTypeChanged.InvokeAsync(value.AddType);
+    }
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.css
similarity index 71%
rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.css
rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.css
index 321d27b..3648621 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.css
@@ -70,34 +70,6 @@
         cursor: pointer;
     }
 
-
 .account-icon {
     fill: var(--light-grey);
-}
-
-.dropdown-more-add {
-    margin-top: 0px;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    background: var(--violet);
-    box-shadow: var(--drop-shadow);
-    border-radius: var(--small-radius);
-    position: fixed;
-    padding: 4px;
-    animation-name: fade-in;
-    animation-duration: 0.4s
-}
-
-.drowdown-more-element {
-    width: fit-content;
-}
-
-.drowdown-more-element:hover {
-    color: var(--light-grey);
-    cursor: pointer;
-}
-
-.invisible {
-    display: none;
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
index 3bd1fab..176e5f1 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
@@ -29,10 +29,6 @@ html, body, #app {
     overflow: hidden;
 }
 
-/*#app {
-    background: var(--background);
-}*/
-
 h1:focus {
     outline: none;
 }
@@ -69,6 +65,7 @@ a, .btn-link {
 
 #blazor-error-ui {
     color-scheme: light only;
+    color: #000;
     background: lightyellow;
     bottom: 0;
     box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html
index 0c6c62d..4d324bb 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Game Ideas</title>
-    <base href="/Games" />
+    <base href="/" />
     <link rel="stylesheet" href="css/app.css" />
     <link rel="icon" type="image/png" href="icon.png" />
     <link href="GameIdeas.BlazorApp.styles.css" rel="stylesheet" />