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

Rework select component #14

Merged
Egamorf merged 7 commits from feature/rework-select-list into main 2025-04-14 09:01:50 +02:00
Conversation 0 Commits 7 Files Changed 44 +27 -156
5 changed files with 27 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bef0a0cc7e - Show all commits

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

@@ -1,7 +1,7 @@
@using GameIdeas.BlazorApp.Pages.Games
@using GameIdeas.BlazorApp.Shared.Components.Account
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
@using GameIdeas.BlazorApp.Shared.Components.SelectList
@using GameIdeas.BlazorApp.Shared.Components.SelectList.Models
@using GameIdeas.BlazorApp.Shared.Models
@using GameIdeas.Resources
@@ -22,15 +22,15 @@
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
</div>
<SelectList @ref="SelectListAdd" TItem="AddType" Items="SelectElements"
ValueChanged=HandleAddTypeClickedAsync THeader="object"
Theme="SelectListTheme.Navigation" AlignRight=true>
<Select @ref="SelectListAdd" TItem="KeyValuePair<AddType, string>" THeader="object"
ValuesChanged=HandleAddTypeClicked Params=SelectParams
Theme="SelectTheme.Navigation" AlignRight=true>
<div class="second-button button">
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M1 3H23L12 22" />
</svg>
</div>
</SelectList>
</Select>
</div>
</div>
<div class="account-container">

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

@@ -1,6 +1,6 @@
using GameIdeas.BlazorApp.Shared.Components.Account;
using GameIdeas.BlazorApp.Shared.Components.Select;
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
using GameIdeas.BlazorApp.Shared.Components.SelectList;
using GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
using GameIdeas.BlazorApp.Shared.Models;
using GameIdeas.Resources;
using Microsoft.AspNetCore.Components;
@@ -13,23 +13,35 @@ public partial class GameHeader : ComponentBase
[Parameter] public RenderFragment? ChildContent { get; set; }
private readonly IEnumerable<SelectElement<AddType>> SelectElements = [
new SelectElement<AddType>(AddType.Manual, ResourcesKey.ManualAdd),
new SelectElement<AddType> (AddType.Auto, ResourcesKey.AutoAdd)
];
private readonly Dictionary<AddType, string> AddTypes = new() {
{ AddType.Manual, ResourcesKey.ManualAdd },
{ AddType.Auto, ResourcesKey.AutoAdd }
};
private AccountSettings? AccountSettings;
private SelectList<AddType, object>? SelectListAdd;
private Select<KeyValuePair<AddType, string>, object>? SelectListAdd;
private SelectParams<KeyValuePair<AddType, string>, object> SelectParams = new();
protected override void OnInitialized()
{
SelectParams = new()
{
Items = AddTypes,
GetItemLabel = item => item.Value,
};
base.OnInitialized();
}
private void HandleIconClicked()
{
throw new NotImplementedException();
}
private async Task HandleAddTypeClickedAsync(AddType value)
private async Task HandleAddTypeClicked(IEnumerable<KeyValuePair<AddType, string>> values)
{
SelectListAdd?.Close();
await AddTypeChanged.InvokeAsync(value);
await AddTypeChanged.InvokeAsync(values.FirstOrDefault().Key);
}
private void HandleAccountClicked()

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

@@ -1,40 +0,0 @@
@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
@using GameIdeas.BlazorApp.Shared.Components.Select.Components
@typeparam TItem
@typeparam THeader
<div class="select-list">
<div class="select-button" @onclick=HandleButtonClicked>
@ChildContent
</div>
<div class="select-container @(AlignRight ? "align-right" : "")">
@if (IsContentOpen)
{
<div class="select-content @(Enum.GetName(Theme)?.ToLower())">
@foreach (var header in Headers)
{
<SelectListElement TItem="THeader"
Value="header"
ValueChanged="HandleHeaderClicked"
Theme="Theme" />
}
@if (Headers.Any())
{
<span class="line"></span>
}
@foreach (var item in Items)
{
<SelectListElement TItem="TItem"
Value="item"
ValueChanged="HandleItemClicked"
Theme="Theme" />
}
</div>
}
</div>
</div>
<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
IsVisible=IsContentOpen OnClick="HandleContentClosed" />

56
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
View File

@@ -1,56 +0,0 @@
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
using Microsoft.AspNetCore.Components;
namespace GameIdeas.BlazorApp.Shared.Components.Select;
public partial class SelectList<TItem, THeader>
{
[Parameter] public RenderFragment? ChildContent { get; set; }
[Parameter] public TItem? Value { get; set; }
[Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
[Parameter] public THeader? Header { get; set; }
[Parameter] public EventCallback<THeader?> HeaderChanged { get; set; }
[Parameter] public IEnumerable<SelectElement<TItem>> Items { get; set; } = [];
[Parameter] public IEnumerable<SelectElement<THeader>> Headers { get; set; } = [];
[Parameter] public SelectListTheme Theme { get; set; }
[Parameter] public bool AlignRight { get; set; }
private bool IsContentOpen = false;
public void Close() =>
IsContentOpen = false;
private void HandleButtonClicked() =>
IsContentOpen = !IsContentOpen;
private void HandleContentClosed()
{
IsContentOpen = false;
}
private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
{
foreach (var item in Items)
{
item.IsSelected = false;
}
selectedValue.IsSelected = true;
Value = selectedValue.Item;
await ValueChanged.InvokeAsync(Value);
}
private async Task HandleHeaderClicked(SelectElement<THeader> selectedValue)
{
foreach (var header in Headers)
{
header.IsSelected = false;
}
selectedValue.IsSelected = true;
Header = selectedValue.Item;
await HeaderChanged.InvokeAsync(Header);
}
}

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

@@ -1,45 +0,0 @@
.select-list {
position: relative;
}
.select-container {
margin-top: 4px;
position: absolute;
z-index: var(--index-dropdown)
}
.align-right {
right: 0;
}
.select-content {
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: var(--small-radius);
animation-name: fade-in;
animation-duration: 0.2s;
}
.select-button {
z-index: var(--index-component)
}
.line {
margin: 2px 6px;
border-bottom: 2px solid var(--input-selected);
}
/***** Navigation Theme *****/
.select-content.navigation {
background: var(--violet);
box-shadow: var(--drop-shadow);
}
/***** Sort Theme *****/
.select-content.sort {
background: var(--dropdown-content);
box-shadow: var(--drop-shadow);
padding: 4px 0;
}