PRJ-Game-Ideas/game-ideas
3
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Rework user menu

Browse Source
This commit is contained in:
Egamorf
2025-04-20 21:40:35 +02:00
parent bcb641d430
commit 772c0fda66
13 changed files with 167 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor
View File

@@ -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 @@
</Select>
</div>
</div>
<div class="account-container">
<div class="icon-container" @onclick=HandleAccountClicked>
<svg class="account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg>
</div>
<AccountSettings @ref="AccountSettings" />
</div>
<UserMenu />
</div>
</div>

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

@@ -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<KeyValuePair<AddType, string>, object>? SelectListAdd;
private SelectParams<KeyValuePair<AddType, string>, 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();
}
}

11
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.css
View File

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

29
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor Normal file
View File

@@ -0,0 +1,29 @@
@using Blazored.FluentValidation
<EditForm EditContext="EditContext" OnSubmit="HandleLoginSubmit">
<FluentValidationValidator />
<div class="login-form">
<div class="login-field">
<div class="input-title">@ResourcesKey.EnterUsername</div>
<InputText class="input-text"
@bind-Value="UserDto.Username" />
</div>
<div class="login-field">
<div class="input-title">@ResourcesKey.EnterPassword</div>
<InputText class="input-text"
@bind-Value="UserDto.Password" />
</div>
<div class="login-field">
<button class="login-button" type="submit" disabled="@IsLoading">
@if (IsLoading)
{
<div class="loading"></div>
}
else
{
@ResourcesKey.Login
}
</button>
</div>
</div>
</EditForm>

29
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor.cs Normal file
View File

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

44
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css → src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor.css
View File

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

4
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/LoginValidator.cs → src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/LoginValidator.cs
View File

@@ -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<LoginDto>
public class LoginValidator : AbstractValidator<UserDto>
{
public LoginValidator()
{

27
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor Normal file
View File

@@ -0,0 +1,27 @@
@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
@using GameIdeas.BlazorApp.Shared.Constants
<div class="menu">
<div class="icon" @onclick=HandleAccountClicked>
@Icons.Account
</div>
<div class="container">
@if (ContentVisile)
{
<div class="content">
<div class="menu-element">
@ResourcesKey.UserManager
</div>
<span class="line"></span>
<div class="menu-element" @onclick="HandleLogoutClicked">
@ResourcesKey.Logout
</div>
</div>
}
</div>
</div>
<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
IsVisible="ContentVisile" OnClick="HandleBackdropFilterClicked" />

21
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor.cs Normal file
View File

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

48
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor.css Normal file
View File

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

49
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor
View File

@@ -1,49 +0,0 @@
@using GameIdeas.Resources
@using Blazored.FluentValidation;
<div class="account-setting-container" tabindex="1000">
<div class="account-setting-content @(ContentVisile ? string.Empty : "invisible")">
@if (!IsLogin)
{
<EditForm EditContext="EditContext" OnSubmit="HandleLoginSubmit">
<FluentValidationValidator />
<div class="login-form">
<div class="login-field">
<div class="input-title">@ResourcesKey.EnterUsername</div>
<InputText class="input-text"
@bind-Value="LoginDto.Username" />
</div>
<div class="login-field">
<div class="input-title">@ResourcesKey.EnterPassword</div>
<InputText class="input-text"
@bind-Value="LoginDto.Password" />
</div>
<div class="login-field">
<button class="login-button" type="submit" disabled="@IsLoading">
@if (IsLoading)
{
<div class="loading"></div>
}
else
{
@ResourcesKey.Login
}
</button>
</div>
</div>
</EditForm>
}
else
{
<div class="settings-list">
<div class="settings-element">
@ResourcesKey.UserManager
</div>
<span class="line"></span>
<div class="settings-element" @onclick="HandleLogoutClicked">
@ResourcesKey.Logout
</div>
</div>
}
</div>
</div>

47
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.cs
View File

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

4
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs
View File

@@ -23,4 +23,8 @@ public static class Icons
public readonly static MarkupString Game = new(OpenBraket +
"<path d=\"M6,7H18A5,5 0 0,1 23,12A5,5 0 0,1 18,17C16.36,17 14.91,16.21 14,15H10C9.09,16.21 7.64,17 6,17A5,5 0 0,1 1,12A5,5 0 0,1 6,7M19.75,9.5A1.25,1.25 0 0,0 18.5,10.75A1.25,1.25 0 0,0 19.75,12A1.25,1.25 0 0,0 21,10.75A1.25,1.25 0 0,0 19.75,9.5M17.25,12A1.25,1.25 0 0,0 16,13.25A1.25,1.25 0 0,0 17.25,14.5A1.25,1.25 0 0,0 18.5,13.25A1.25,1.25 0 0,0 17.25,12M5,9V11H3V13H5V15H7V13H9V11H7V9H5Z\">" +
CloseBraket);
public readonly static MarkupString Account = new(OpenBraket +
"<path d=\"M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z\" />" +
CloseBraket);
}