From 772c0fda66cf9164bb8a4a2910e901a805809e8b Mon Sep 17 00:00:00 2001 From: Egamorf Date: Sun, 20 Apr 2025 21:40:35 +0200 Subject: [PATCH] Rework user menu --- .../Pages/Games/Header/GameHeader.razor | 11 +---- .../Pages/Games/Header/GameHeader.razor.cs | 9 +--- .../Pages/Games/Header/GameHeader.razor.css | 11 +---- .../Pages/User/Components/Login.razor | 29 +++++++++++ .../Pages/User/Components/Login.razor.cs | 29 +++++++++++ .../User/Components/Login.razor.css} | 44 +---------------- .../User/Components}/LoginValidator.cs | 4 +- .../Pages/User/UserMenu.razor | 27 ++++++++++ .../Pages/User/UserMenu.razor.cs | 21 ++++++++ .../Pages/User/UserMenu.razor.css | 48 ++++++++++++++++++ .../Components/Account/AccountSettings.razor | 49 ------------------- .../Account/AccountSettings.razor.cs | 47 ------------------ .../Shared/Constants/Icons.cs | 4 ++ 13 files changed, 167 insertions(+), 166 deletions(-) create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor.cs rename src/GameIdeas/Client/GameIdeas.BlazorApp/{Shared/Components/Account/AccountSettings.razor.css => Pages/User/Components/Login.razor.css} (59%) rename src/GameIdeas/Client/GameIdeas.BlazorApp/{Shared/Components/Account => Pages/User/Components}/LoginValidator.cs (70%) create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor.cs create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor.css delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs 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 2e55110..d62b74a 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor @@ -1,5 +1,5 @@ @using GameIdeas.BlazorApp.Pages.Games -@using GameIdeas.BlazorApp.Shared.Components.Account +@using GameIdeas.BlazorApp.Pages.User @using GameIdeas.BlazorApp.Shared.Components.Select @using GameIdeas.BlazorApp.Shared.Components.Select.Models @using GameIdeas.BlazorApp.Shared.Models @@ -32,13 +32,6 @@ -
-
- -
- -
+ 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 3e0b75a..36b8e79 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,3 @@ -using GameIdeas.BlazorApp.Shared.Components.Account; using GameIdeas.BlazorApp.Shared.Components.Select; using GameIdeas.BlazorApp.Shared.Components.Select.Models; using GameIdeas.BlazorApp.Shared.Models; @@ -18,7 +17,6 @@ public partial class GameHeader : ComponentBase { AddType.Auto, ResourcesKey.AutoAdd } }; - private AccountSettings? AccountSettings; private Select, object>? SelectListAdd; private SelectParams, object> SelectParams = new(); @@ -26,7 +24,7 @@ public partial class GameHeader : ComponentBase { SelectParams = new() { - Items = AddTypes.ToList(), + Items = [.. AddTypes], GetItemLabel = item => item.Value }; @@ -43,9 +41,4 @@ public partial class GameHeader : ComponentBase SelectListAdd?.Close(); await AddTypeChanged.InvokeAsync(values.FirstOrDefault().Key); } - - private void HandleAccountClicked() - { - AccountSettings?.Toggle(); - } } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.css index a27186c..0650995 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.css @@ -14,6 +14,7 @@ align-items: center; width: 40px; height: 100%; + cursor: pointer; } .icon-container img { @@ -21,10 +22,6 @@ max-width: 85%; } -.icon-container:hover { - cursor: pointer; -} - .account-add-container { display: flex; flex-direction: row; @@ -70,8 +67,4 @@ .button-icon:hover { background: var(--violet-selected); cursor: pointer; - } - -.account-icon { - fill: var(--line); -} \ No newline at end of file + } \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor new file mode 100644 index 0000000..444b7aa --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor @@ -0,0 +1,29 @@ +@using Blazored.FluentValidation + + + + + \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor.cs new file mode 100644 index 0000000..6d73a76 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor.cs @@ -0,0 +1,29 @@ +using GameIdeas.Shared.Dto; +using Microsoft.AspNetCore.Components.Forms; + +namespace GameIdeas.BlazorApp.Pages.User.Components; + +public partial class Login +{ + private EditContext? EditContext; + private UserDto UserDto = new(); + private bool IsLoading = false; + + protected override void OnInitialized() + { + EditContext = new EditContext(UserDto); + } + + private async Task HandleLoginSubmit() + { + if (EditContext?.Validate() == false) + { + return; + } + + IsLoading = true; + await Task.Delay(TimeSpan.FromSeconds(5)); + IsLoading = false; + } + +} \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor.css similarity index 59% rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor.css index 18ab1f3..04ccf95 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor.css @@ -1,21 +1,4 @@ -.account-setting-content { - overflow: hidden; - border-radius: var(--big-radius); - position: fixed; - animation-name: fade-in; - animation-duration: 0.4s; - border: 2px solid var(--input-selected); - background: var(--dropdown-content); - right: 10px; - margin-top: 4px; - z-index: var(--index-floating); -} - -.invisible { - display: none; -} - -.login-form { +.login-form { display: flex; flex-direction: column; padding: 20px 8px; @@ -53,7 +36,7 @@ .login-button:hover { background: var(--violet-selected); - cursor:pointer; + cursor: pointer; } .login-button:disabled { @@ -70,26 +53,3 @@ animation: loading 1s linear infinite; justify-self: center; } - -.settings-list { - display: flex; - flex-direction: column; -} - -.line { - margin: 0 6px; - border-bottom: 2px solid var(--line); -} - -.settings-element { - max-width: 140px; - height: 40px; - padding: 0 26px; - align-content: center; -} - - .settings-element:hover { - background: var(--line) - } - - diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/LoginValidator.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/LoginValidator.cs similarity index 70% rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/LoginValidator.cs rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/LoginValidator.cs index 629c3c9..13c7046 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/LoginValidator.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/LoginValidator.cs @@ -1,9 +1,9 @@ using FluentValidation; using GameIdeas.Shared.Dto; -namespace GameIdeas.BlazorApp.Shared.Components.Account; +namespace GameIdeas.BlazorApp.Pages.User.Components; -public class LoginValidator : AbstractValidator +public class LoginValidator : AbstractValidator { public LoginValidator() { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor new file mode 100644 index 0000000..cd46546 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor @@ -0,0 +1,27 @@ +@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter +@using GameIdeas.BlazorApp.Shared.Constants + +
+
+ @Icons.Account +
+
+ @if (ContentVisile) + { +
+
+ @ResourcesKey.UserManager +
+ +
+ @ResourcesKey.Logout +
+
+ } +
+
+ + + + diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor.cs new file mode 100644 index 0000000..fca4032 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor.cs @@ -0,0 +1,21 @@ +namespace GameIdeas.BlazorApp.Pages.User; + +public partial class UserMenu +{ + private bool ContentVisile = false; + + private void HandleLogoutClicked() + { + ContentVisile = false; + } + + private void HandleAccountClicked() + { + ContentVisile = true; + } + + private void HandleBackdropFilterClicked() + { + ContentVisile = false; + } +} \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor.css new file mode 100644 index 0000000..e8a4918 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor.css @@ -0,0 +1,48 @@ +.menu { + position: relative; +} + +.icon { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + cursor: pointer; +} + + .icon ::deep svg { + fill: var(--line); + } + +.container { + right: 0; + position: absolute; + margin-top: 4px; + z-index: var(--index-dropdown); +} + +.content { + overflow: hidden; + border-radius: var(--big-radius); + border: 2px solid var(--input-selected); + background: var(--dropdown-content); + display: flex; + flex-direction: column; +} + +.line { + margin: 0 6px; + border-bottom: 2px solid var(--input-selected); +} + +.menu-element { + height: 32px; + padding: 0 20px; + align-content: center; + text-wrap: nowrap; + cursor: pointer; +} + + .menu-element:hover { + background: var(--input-selected) + } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor deleted file mode 100644 index 98094ae..0000000 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor +++ /dev/null @@ -1,49 +0,0 @@ -@using GameIdeas.Resources -@using Blazored.FluentValidation; - - diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs deleted file mode 100644 index 4687b4e..0000000 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs +++ /dev/null @@ -1,47 +0,0 @@ -using GameIdeas.Shared.Dto; -using Microsoft.AspNetCore.Components.Forms; - -namespace GameIdeas.BlazorApp.Shared.Components.Account; - -public partial class AccountSettings -{ - private bool ContentVisile = false; - private EditContext? EditContext; - private LoginDto LoginDto = new(); - private bool IsLoading = false; - private bool IsLogin = true; - - protected override void OnInitialized() - { - EditContext = new EditContext(LoginDto); - } - - public void Close() - { - ContentVisile = false; - StateHasChanged(); - } - - public void Toggle() - { - ContentVisile = !ContentVisile; - StateHasChanged(); - } - - private async Task HandleLoginSubmit() - { - if (EditContext?.Validate() == false) - { - return; - } - - IsLoading = true; - await Task.Delay(TimeSpan.FromSeconds(5)); - Close(); - IsLoading = false; - } - private void HandleLogoutClicked() - { - Close(); - } -} \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs index 07d5d99..d9059d3 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs @@ -23,4 +23,8 @@ public static class Icons public readonly static MarkupString Game = new(OpenBraket + "" + CloseBraket); + + public readonly static MarkupString Account = new(OpenBraket + + "" + + CloseBraket); }