Add game header #5

Merged
Egamorf merged 14 commits from feature/add-game-header into main 2025-03-20 18:33:28 +01:00
15 changed files with 133 additions and 40 deletions
Showing only changes of commit 73114e9321 - Show all commits

View File

@@ -0,0 +1,23 @@
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.Shared.Dto
<EditForm EditContext="EditContext">
<SelectList TItem="Func<GameDto, object>"
Headers="SortTypes"
Items="GameProperties"
@bind-Value=GameFilterParams.GameProperty
HeaderChanged=HandleSortTypeChanged
Theme="SelectListTheme.Sort">
<Button>
<div class="sort-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z" />
</svg>
</div>
</Button>
</SelectList>
</EditForm>

View File

@@ -0,0 +1,37 @@
using GameIdeas.BlazorApp.Shared.Components.Select;
using GameIdeas.Shared.Dto;
using GameIdeas.Shared.Enum;
using Microsoft.AspNetCore.Components.Forms;
namespace GameIdeas.BlazorApp.Pages.Games.Filter;
public partial class GameFilter
{
private readonly IEnumerable<SelectElement<Func<GameDto?, object?>>> SortTypes = [
new() { Item = _ => SortType.Ascending, Label = "Ascendant", IsSelected = true },
new() { Item = _ => SortType.Descending, Label = "Descendant" }
];
private readonly IEnumerable<SelectElement<Func<GameDto?, object?>>> GameProperties = [
new() { Item = game => game?.Name, Label = "Nom", IsSelected = true },
new() { Item = game => game?.ReleaseDate, Label = "Date de parution" }
];
private EditContext? EditContext;
private GameFilterParams GameFilterParams = new();
protected override void OnInitialized()
{
EditContext = new EditContext(GameFilterParams);
EditContext.OnFieldChanged += HandleFormChanged;
}
private void HandleFormChanged(object? sender, FieldChangedEventArgs e)
{
throw new NotImplementedException();
}
private void HandleSortTypeChanged(Func<GameDto?, object?> getHeader)
{
GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
}
}

View File

@@ -0,0 +1,17 @@
.sort-button {
height: 28px;
width: 28px;
border-radius: var(--small-radius);
background: var(--black);
overflow: hidden;
}
.sort-button svg {
fill: var(--white);
padding: 2px;
}
.sort-button svg:hover {
cursor: pointer;
background: var(--low-white);
}

View File

@@ -0,0 +1,10 @@
using GameIdeas.Shared.Enum;
using GameIdeas.Shared.Dto;
namespace GameIdeas.BlazorApp.Pages.Games.Filter;
public class GameFilterParams
{
public SortType? SortType { get; set; }
public Func<GameDto?, object?>? GameProperty { get; set; }
}

View File

@@ -1,6 +1,6 @@
@page "/Games"
@using GameIdeas.BlazorApp.Layouts
@using GameIdeas.BlazorApp.Pages.Games.Header
@using GameIdeas.BlazorApp.Pages.Games.Filter
@using GameIdeas.BlazorApp.Shared.Components
@using GameIdeas.BlazorApp.Shared.Layouts.Header
@using GameIdeas.Resources
@@ -11,6 +11,6 @@
<HeaderLayout>
<Body>
<HeaderGame />
<GameFilter />
</Body>
</HeaderLayout>

View File

@@ -1,6 +0,0 @@
namespace GameIdeas.BlazorApp.Pages.Games.Header;
public partial class HeaderGame
{
}

View File

@@ -1,20 +0,0 @@
namespace GameIdeas.BlazorApp.Shared.Components.Account;
public enum AccountSetting
{
Logout
}
public class AccountSettingParams
{
public string Label { get; set; }
public AccountSetting AccountSetting { get; set; }
public bool ForConnected { get; set; }
public AccountSettingParams(string label, AccountSetting accountSetting, bool forConnected)
{
Label = label;
AccountSetting = accountSetting;
ForConnected = forConnected;
}
}

View File

@@ -4,7 +4,7 @@
position: fixed;
animation-name: fade-in;
animation-duration: 0.4s;
border: 2px solid var(--light-grey);
border: 2px solid var(--low-white);
background: var(--black);
right: 10px;
margin-top: 4px;
@@ -17,7 +17,7 @@
.login-form {
display: flex;
flex-direction: column;
padding: 20px 6px;
padding: 20px 8px;
gap: 20px;
max-width: 400px;
}
@@ -31,7 +31,7 @@
::deep .input-text {
background: var(--light-grey);
border: 2px solid rgb(255, 255, 255, 0.3);
border: 2px solid var(--low-white);
border-radius: var(--small-radius);
padding: 6px;
color: var(--white);

View File

@@ -25,6 +25,26 @@
}
/***** Sort Theme *****/
.sort .select-label:hover {
color: var(--light-grey);
}
.sort {
gap: 6px;
display: flex;
flex-direction: row;
width: 100%;
padding: 2px 6px;
}
.sort:hover {
background: var(--low-white);
}
.sort .selected {
width: 20px;
height: 20px;
}
.sort .select-label {
text-wrap: nowrap;
margin-right: 6px;
}

View File

@@ -21,8 +21,8 @@
}
.line {
margin: 0 6px;
border-bottom: 2px solid var(--light-grey);
margin: 2px 6px;
border-bottom: 2px solid var(--low-white);
}
@@ -36,5 +36,6 @@
.select-content.sort {
background: var(--black);
box-shadow: var(--drop-shadow);
padding: 4px 0;
}

View File

@@ -10,6 +10,7 @@
--light-grey: #5C5C5E;
--black: rgba(44, 43, 46, 0.8);
--white: #fff;
--low-white: rgb(255, 255, 255, 0.1);
--semi-black: rgba(0, 0, 0, 0.5);
--line-black: rgba(0, 0, 0, 0.2);
--small-radius: 4px;

View File

@@ -0,0 +1,7 @@
namespace GameIdeas.Shared.Dto;
public class GameDto
{
public string? Name { get; set; }
public string? ReleaseDate { get; set; }
}

View File

@@ -0,0 +1,7 @@
namespace GameIdeas.Shared.Enum;
public enum SortType
{
Ascending,
Descending
}