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

Add display type button

Browse Source
This commit is contained in:
Maxime Adler
2025-03-10 16:30:34 +01:00
parent 73114e9321
commit 47af962a38
8 changed files with 93 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
View File

@@ -1,8 +1,10 @@
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.Shared.Dto
@using GameIdeas.BlazorApp.Pages.Games.Models
<EditForm EditContext="EditContext">
<div class="form-filter">
<SelectList TItem="Func<GameDto, object>"
Headers="SortTypes"
Items="GameProperties"
@@ -10,13 +12,26 @@
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" />
<div class="square-button">
<svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z" />
</svg>
</div>
</Button>
</SelectList>
<div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.List))">
<svg class="list-icon @(DisplayType == DisplayType.List ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M4,5V7H21V5M4,11H21V9H4M4,19H21V17H4M4,15H21V13H4V15Z" />
</svg>
</div>
<div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.Card))">
<svg class="card-icon @(DisplayType == DisplayType.Card ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M16,5V11H21V5M10,11H15V5H10M16,18H21V12H16M10,18H15V12H10M4,18H9V12H4M4,11H9V5H4V11Z" />
</svg>
</div>
</div>
</EditForm>

23
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
View File

@@ -1,12 +1,19 @@
using GameIdeas.BlazorApp.Pages.Games.Models;
using GameIdeas.BlazorApp.Shared.Components.Select;
using GameIdeas.Shared.Dto;
using GameIdeas.Shared.Enum;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
namespace GameIdeas.BlazorApp.Pages.Games.Filter;
public partial class GameFilter
{
[Parameter] public GameFilterParams GameFilterParams { get; set; } = new();
[Parameter] public EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
[Parameter] public DisplayType DisplayType { get; set; }
[Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; }
private readonly IEnumerable<SelectElement<Func<GameDto?, object?>>> SortTypes = [
new() { Item = _ => SortType.Ascending, Label = "Ascendant", IsSelected = true },
new() { Item = _ => SortType.Descending, Label = "Descendant" }
@@ -18,20 +25,24 @@ public partial class GameFilter
];
private EditContext? EditContext;
private GameFilterParams GameFilterParams = new();
protected override void OnInitialized()
{
EditContext = new EditContext(GameFilterParams);
EditContext.OnFieldChanged += HandleFormChanged;
EditContext.OnFieldChanged += async (s, e) =>
{
await GameFilterParamsChanged.InvokeAsync(GameFilterParams);
};
}
private void HandleFormChanged(object? sender, FieldChangedEventArgs e)
{
throw new NotImplementedException();
}
private void HandleSortTypeChanged(Func<GameDto?, object?> getHeader)
{
GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
}
private async Task HandleDisplayClicked(DisplayType displayType)
{
DisplayType = displayType;
await DisplayTypeChanged.InvokeAsync(displayType);
}
}

38
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css
View File

@@ -1,4 +1,10 @@
.sort-button {
.form-filter {
display: flex;
flex-direction: row;
gap: 8px;
}
.square-button {
height: 28px;
width: 28px;
border-radius: var(--small-radius);
@@ -6,12 +12,34 @@
overflow: hidden;
}
.sort-button svg {
fill: var(--white);
padding: 2px;
.square-button:first-child {
margin-right: 16px;
}
.sort-button svg:hover {
.square-button svg {
fill: var(--white);
}
.square-button svg:hover {
cursor: pointer;
background: var(--low-white);
}
.selected-icon {
fill: var(--violet) !important;
}
.sort-icon {
padding: 2px;
}
.list-icon {
padding-right: 1px;
padding-top: 0.5px;
padding-bottom: 0.5px;
}
.card-icon {
padding-top: 1px;
padding-right: 1px;
}

2
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
View File

@@ -11,6 +11,6 @@
<HeaderLayout>
<Body>
<GameFilter />
<GameFilter @bind-DisplayType=DisplayType />
</Body>
</HeaderLayout>

4
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
View File

@@ -1,6 +1,8 @@
using GameIdeas.BlazorApp.Pages.Games.Models;
namespace GameIdeas.BlazorApp.Pages.Games;
public partial class GamesBase ()
{
private DisplayType DisplayType = DisplayType.List;
}

7
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs Normal file
View File

@@ -0,0 +1,7 @@
namespace GameIdeas.BlazorApp.Pages.Games.Models;
public enum DisplayType
{
Card,
List
}

2
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css
View File

@@ -34,7 +34,7 @@
/***** Sort Theme *****/
.select-content.sort {
background: var(--black);
background: var(--semi-black);
box-shadow: var(--drop-shadow);
padding: 4px 0;
}

2
src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
View File

@@ -8,7 +8,7 @@
--yellow: #FFC107;
--green: #43F8C0;
--light-grey: #5C5C5E;
--black: rgba(44, 43, 46, 0.8);
--black: rgba(0, 0, 0, 0.8);
--white: #fff;
--low-white: rgb(255, 255, 255, 0.1);
--semi-black: rgba(0, 0, 0, 0.5);