diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor index dd434a7..9a1cfc0 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor +++ b/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 @ResourcesKey.GamesIdeas - +
-
+ + + diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs index 60ab45d..92aff27 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs +++ b/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(); + } } \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor index c222be4..c948e2d 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor @@ -22,11 +22,9 @@ - + Theme="SelectListTheme.Navigation" AlignRight=true>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs index a854eaf..0f5f2d9 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs +++ b/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? 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); } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.js b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.js index 3f2b25b..ef50573 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.js +++ b/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; } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor new file mode 100644 index 0000000..cc66ca4 --- /dev/null +++ b/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 + +
+
+ @if (Closable) + { + + } + @ChildContent +
+
+ + \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs new file mode 100644 index 0000000..2b18c50 --- /dev/null +++ b/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;"; +} \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css new file mode 100644 index 0000000..dee8bf6 --- /dev/null +++ b/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; +} diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor index f94456b..91c332f 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor +++ b/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 +
- @ClearIcon + @Icons.Shared.Close;
} diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs index 5b8ddfd..3ee67df 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs +++ b/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.Search => new MarkupString(Icons.Search.Glass), + SearchInputIcon.Dropdown => Icons.Search.Triangle, + SearchInputIcon.Search => Icons.Search.Glass, _ => new MarkupString() }; } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs index ffcd07b..375fa2f 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs @@ -17,10 +17,11 @@ public partial class SelectList private bool IsContentOpen = false; - private void HandleButtonClicked() - { + public void Close() => + IsContentOpen = false; + + private void HandleButtonClicked() => IsContentOpen = !IsContentOpen; - } private void HandleContentClosed() { diff --git a/src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs similarity index 62% rename from src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs index 5c2f030..26ade56 100644 --- a/src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs +++ b/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 + - "" + - CloseBraket; - - public const string Glass = OpenBraket + + public readonly static MarkupString Glass = new(OpenBraket + "" + - CloseBraket; + CloseBraket); - public const string Triangle = OpenBraket + + public readonly static MarkupString Triangle = new(OpenBraket + "" + - CloseBraket; + CloseBraket); + } + + public static class Shared + { + public readonly static MarkupString Close = new(OpenBraket + + "" + + CloseBraket); } }