Add popup component

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor

@@ -3,22 +3,25 @@
 @using GameIdeas.BlazorApp.Pages.Games.Filter
 @using GameIdeas.BlazorApp.Pages.Games.Header
 @using GameIdeas.BlazorApp.Shared.Components
+@using GameIdeas.BlazorApp.Shared.Components.Popup
 @using GameIdeas.Resources
 
 @layout MainLayout
 
 <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
 
-<GameHeader>
+<GameHeader AddTypeChanged="HandleAddClicked">
     <GameFilter @bind-DisplayType=DisplayType
                 @bind-GameFilterParams=GameFilterParams />
 </GameHeader>
 
 <div class="container">
     <div class="content">
-
     </div>
 
     <AdvancedGameFilter @bind-GameFilterParams=GameFilterParams />
 </div>
 
+<Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked">
+    
+</Popup>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs

@@ -1,4 +1,5 @@
 using GameIdeas.BlazorApp.Pages.Games.Filter;
+using GameIdeas.BlazorApp.Shared.Components.Popup;
 using GameIdeas.BlazorApp.Shared.Models;
 
 namespace GameIdeas.BlazorApp.Pages.Games;
@@ -7,4 +8,22 @@ public partial class GameBase ()
 {
     private DisplayType DisplayType = DisplayType.List;
     private GameFilterParams GameFilterParams = new();
+    private Popup? ManualAddPopup;
+    private void HandleAddClicked(AddType addType)
+    {
+        switch (addType)
+        {
+            case AddType.Manual:
+                ManualAddPopup?.Open();
+                break;
+            case AddType.Auto:
+                break;
+            default:
+                break;
+        }
+    }
+    private void HandleBackdropManualAddClicked()
+    {
+        ManualAddPopup?.Close();
+    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor

@@ -22,11 +22,9 @@
                         <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
                     </svg>
                 </div>
-                <SelectList TItem="AddType"
+                <SelectList @ref="SelectListAdd" TItem="AddType" Items="SelectElements"
-                            Items="SelectElements"
                             ValueChanged=HandleAddTypeClickedAsync
-                            Theme="SelectListTheme.Navigation"
+                            Theme="SelectListTheme.Navigation" AlignRight=true>
-                            AlignRight=true>
                     <div class="second-button button">
                         <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                             <path d="M1 3H23L12 22" />

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs

@@ -1,4 +1,5 @@
 using GameIdeas.BlazorApp.Shared.Components.Account;
+using GameIdeas.BlazorApp.Shared.Components.Select;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.BlazorApp.Shared.Models;
 using GameIdeas.Resources;
@@ -18,6 +19,7 @@ public partial class GameHeader : ComponentBase
     ];
 
     private AccountSettings? AccountSettings;
+    private SelectList<AddType>? SelectListAdd;
 
     private void HandleIconClicked()
     {
@@ -26,6 +28,7 @@ public partial class GameHeader : ComponentBase
 
     private async Task HandleAddTypeClickedAsync(AddType value)
     {
+        SelectListAdd?.Close();
         await AddTypeChanged.InvokeAsync(value);
     }
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.js

@@ -1,3 +1,3 @@
 window.setBodyOverflow = (overflow) => {
-    document.getElementsByTagName('html')[0].style.overflow = overflow;
+    document.getElementsByClassName('page')[0].style.overflow = overflow;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor

@@ -0,0 +1,15 @@
+@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
+@using GameIdeas.BlazorApp.Shared.Constants
+
+<div class="popup-wrapper" style="@GetDisplayStyle()">
+    <div class="popup-content">
+        @if (Closable)
+        {
+            <button @onclick="HandleBackdropFilterClicked">@Icons.Shared.Close</button>
+        }
+        @ChildContent
+    </div>  
+</div>
+
+<BackdropFilter @ref="BackdropFilter" OnClick="HandleBackdropFilterClicked" CloseOnClick="@Closable"
+                AllowBodyScroll="false" Color="BackdropFilterColor.Overlay" />

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs

@@ -0,0 +1,49 @@
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Popup;
+
+public partial class Popup
+{
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public bool IsDrawerOpen { get; set; }
+    [Parameter] public EventCallback BackdropFilterClicked { get; set; }
+    [Parameter] public bool Closable { get; set; } = true;
+
+    private BackdropFilter.BackdropFilter? BackdropFilter;
+    public bool IsOpen { get; set; }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        await base.OnParametersSetAsync();
+        if (BackdropFilter?.IsVisible == true && IsOpen)
+        {
+            await BackdropFilter.Hide();
+        }
+
+        if (BackdropFilter?.IsVisible == false && IsOpen)
+        {
+            await BackdropFilter.Show();
+        }
+    }
+
+    public async Task Open()
+    {
+        IsOpen = true;
+        await BackdropFilter?.Show()!;
+        StateHasChanged();
+    }
+
+    public async Task Close()
+    {
+        IsOpen = false;
+        await BackdropFilter?.Hide()!;
+        StateHasChanged();
+    }
+
+    private async Task HandleBackdropFilterClicked()
+    {
+        await BackdropFilterClicked.InvokeAsync();
+    }
+
+    private string GetDisplayStyle() => IsOpen ? "display: flex;" : "display: none;";
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css

@@ -0,0 +1,27 @@
+.popup-wrapper {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: var(--index-popup);
+}
+
+.popup-content {
+    position: relative;
+    background-color: var(--dropdown-content);
+    padding: 10px;
+    border-radius: var(--big-radius);
+    box-shadow: var(--drop-shadow);
+}
+
+.popup-content button{
+    top: 10px;
+    right: 10px;
+    position: absolute;
+    background: transparent;
+    border: none;
+    outline: none;
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor

@@ -1,4 +1,6 @@
-@using GameIdeas.Shared.Constants
+@using GameIdeas.BlazorApp.Shared.Constants
+@using GameIdeas.Shared.Constants
+
 <div class="search-container">
     <input @ref=InputText
            type="text"
@@ -13,7 +15,7 @@
         @if (!string.IsNullOrEmpty(Text))
         {
             <div class="clear-icon" @onclick=HandleClearClicked>
-                @ClearIcon
+                @Icons.Shared.Close;
             </div>
         }
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs

@@ -1,3 +1,4 @@
+using GameIdeas.BlazorApp.Shared.Constants;
 using GameIdeas.Shared.Constants;
 using Microsoft.AspNetCore.Components;
 
@@ -14,7 +15,6 @@ public partial class SearchInput
     [Parameter] public SearchInputIcon Icon { get; set; }
 
     private ElementReference InputText;
-    private readonly MarkupString ClearIcon = new(Icons.Search.Clear);
 
     protected override void OnInitialized()
     {
@@ -52,8 +52,8 @@ public partial class SearchInput
     {
         return Icon switch
         {
-            SearchInputIcon.Dropdown => new MarkupString(Icons.Search.Triangle),
+            SearchInputIcon.Dropdown => Icons.Search.Triangle,
-            SearchInputIcon.Search => new MarkupString(Icons.Search.Glass),
+            SearchInputIcon.Search => Icons.Search.Glass,
             _ => new MarkupString()
         };
     }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs

@@ -17,10 +17,11 @@ public partial class SelectList<TItem>
 
     private bool IsContentOpen = false;
 
-    private void HandleButtonClicked()
+    public void Close() =>
-    {
+        IsContentOpen = false;
+
+    private void HandleButtonClicked() =>
         IsContentOpen = !IsContentOpen;
-    }
 
     private void HandleContentClosed()
     {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs

@@ -1,4 +1,6 @@
-namespace GameIdeas.Shared.Constants;
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Constants;
 
 public static class Icons
 {
@@ -8,16 +10,19 @@ public static class Icons
 
     public static class Search
     {
-        public const string Clear = OpenBraket +
+        public readonly static MarkupString Glass = new(OpenBraket +
-            "<path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />" +
-            CloseBraket;
-
-        public const string Glass = OpenBraket +
             "<path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />" +
-            CloseBraket;
+            CloseBraket);
 
-        public const string Triangle = OpenBraket +
+        public readonly static MarkupString Triangle = new(OpenBraket +
             "<path d=\"M1 3H23L12 22\" />" +
-            CloseBraket;
+            CloseBraket);
+    }
+
+    public static class Shared
+    {
+        public readonly static MarkupString Close = new(OpenBraket +
+            "<path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />" +
+            CloseBraket);
     }
 }