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

Add header for game list #3

Merged
Egamorf merged 14 commits from feature/add-header-for-games-list into main 2025-02-27 01:09:05 +01:00
Conversation 0 Commits 14 Files Changed 28 +158 -107
16 changed files with 158 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1c4867afdc - Show all commits

5
src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor
View File

@@ -2,12 +2,7 @@
@inherits LayoutComponentBase
<div class="page">
@if (IsLoading) {
<Loader />
}
@Body
</div>
<span class="orb red"></span>

16
src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.cs
View File

@@ -1,16 +0,0 @@
using System.Net.Http.Json;
using GameIdeas.Resources;
namespace GameIdeas.BlazorApp.Layouts
{
public partial class MainLayout
{
public bool IsLoading { get; set; } = true;
protected override void OnInitialized()
{
IsLoading = false;
}
}
}

13
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/AddType.cs Normal file
View File

@@ -0,0 +1,13 @@
namespace GameIdeas.BlazorApp.Pages.Games;
public enum AddType
{
Manual,
Auto
}
public class AddTypeParams(AddType addType, string label)
{
public AddType AddType { get; set; } = addType;
public string? Label { get; set; } = label;
}

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

@@ -1,7 +1,6 @@
namespace GameIdeas.BlazorApp.Pages.Games.Components
{
public partial class GameHeader
{
namespace GameIdeas.BlazorApp.Pages.Games.Components;
public partial class GameHeader
{
}
}

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

@@ -1,14 +1,15 @@
@page "/Games"
@using GameIdeas.BlazorApp.Layouts
@using GameIdeas.BlazorApp.Shared.Components
@using GameIdeas.BlazorApp.Shared.Headers
@using GameIdeas.Resources
@layout MainLayout
<PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
<HeaderLayout>
<HeaderBase>
<Body>
<div class="temp">Prout</div>
<div>PROUT</div>
</Body>
</HeaderLayout>
</HeaderBase>

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

@@ -1,5 +1,8 @@
using GameIdeas.BlazorApp.Shared.Headers;
namespace GameIdeas.BlazorApp.Pages.Games;
public partial class GamesBase ()
{
private HeaderBase? Header;
}

13
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor Normal file
View File

@@ -0,0 +1,13 @@
@typeparam TItem
<div @ref=Content class="dropdown-container" tabindex="1000"
@onfocusout=HandlerDropdownAddFocusOut>
<div class="dropdown-content @(ContentVisile ? string.Empty : "invisible") @(Enum.GetName(Theme)?.ToLower())">
@foreach (var item in Items)
{
<div class="drowdown-element @(Enum.GetName(Theme)?.ToLower())" @onclick=HandleItemClicked>
@(LabelSelector != null ? LabelSelector.Invoke(item) : item?.ToString())
</div>
}
</div>
</div>

36
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.cs Normal file
View File

@@ -0,0 +1,36 @@
using Microsoft.AspNetCore.Components;
namespace GameIdeas.BlazorApp.Shared.Components.Dropdown;
public partial class DropdownContent<TItem>
{
[Parameter] public TItem? Value { get; set; }
[Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
[Parameter] public IEnumerable<TItem> Items { get; set; } = [];
[Parameter] public Func<TItem, string>? LabelSelector { get; set; }
[Parameter] public DropdownTheme Theme { get; set; }
private bool ContentVisile = false;
private DateTime ContentLastFocusOut = DateTime.Now;
private ElementReference Content;
public async Task OpenAsync()
{
if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2))
{
await Content.FocusAsync();
ContentVisile = true;
}
}
public void Close() => ContentVisile = false;
private void HandlerDropdownAddFocusOut()
{
ContentLastFocusOut = DateTime.Now;
ContentVisile = false;
}
private async Task HandleItemClicked() => await ValueChanged.InvokeAsync(Value);
}

32
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css Normal file
View File

@@ -0,0 +1,32 @@
.dropdown-content {
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: var(--small-radius);
position: fixed;
animation-name: fade-in;
animation-duration: 0.4s
}
.drowdown-element {
width: fit-content;
}
.drowdown-element:hover {
cursor: pointer;
}
.invisible {
display: none;
}
.dropdown-content.navigation {
gap: 4px;
background: var(--violet);
box-shadow: var(--drop-shadow);
padding: 4px;
}
.drowdown-element.navigation:hover {
color: var(--light-grey);
}

6
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownTheme.cs Normal file
View File

@@ -0,0 +1,6 @@
namespace GameIdeas.BlazorApp.Shared.Components.Dropdown;
public enum DropdownTheme
{
Navigation
}

30
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs
View File

@@ -1,30 +0,0 @@
using Microsoft.AspNetCore.Components;
namespace GameIdeas.BlazorApp.Shared.Components;
public partial class HeaderLayout : LayoutComponentBase
{
private bool AddButtonsVisile = false;
private DateTime AddButtonsLastOut = DateTime.Now;
private ElementReference DropdownAdd;
private void HandleIconClicked()
{
throw new NotImplementedException();
}
private async Task HandleMoreAddClickedAsync()
{
if (DateTime.Now - AddButtonsLastOut >= TimeSpan.FromSeconds(0.2))
{
await DropdownAdd.FocusAsync();
AddButtonsVisile = true;
}
}
private void HandlerDropdownAddFocusOut()
{
AddButtonsLastOut = DateTime.Now;
AddButtonsVisile = false;
}
}

25
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor → src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor
View File

@@ -1,5 +1,6 @@
@using GameIdeas.Resources
@inherits LayoutComponentBase
@using GameIdeas.BlazorApp.Shared.Components.Dropdown
@using GameIdeas.BlazorApp.Pages.Games
@using GameIdeas.Resources
<div class="header-tab">
<div class="icon-container" @onclick="HandleIconClicked">
@@ -16,24 +17,18 @@
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
</div>
<div class="second-button button" @onclick=HandleMoreAddClickedAsync>
<div class="second-button button" @onclick=HandleMoreButton>
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M1 3H23L12 22" />
</svg>
</div>
</div>
<div @ref=DropdownAdd class="dropdown-container" tabindex="1000"
@onfocusout=HandlerDropdownAddFocusOut>
<div class="dropdown-more-add @(AddButtonsVisile ? string.Empty : "invisible")">
<div class="drowdown-more-element">
@ResourcesKey.ManualAdd
</div>
<div class="drowdown-more-element">
@ResourcesKey.AutoAdd
</div>
</div>
</div>
<DropdownContent @ref="DropdownAdd"
TItem="AddTypeParams"
ValueChanged=HandleAddTypeClickedAsync
Items="AddTypes"
LabelSelector="(addtype => addtype.Label)"
Theme="DropdownTheme.Navigation" />
</div>
<div class="icon-container">
<svg class="account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

35
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs Normal file
View File

@@ -0,0 +1,35 @@
using GameIdeas.BlazorApp.Pages.Games;
using GameIdeas.BlazorApp.Shared.Components.Dropdown;
using GameIdeas.Resources;
using Microsoft.AspNetCore.Components;
namespace GameIdeas.BlazorApp.Shared.Headers;
public partial class HeaderBase
{
[Parameter] public RenderFragment? Body { get; set; }
[Parameter] public EventCallback<AddType> AddTypeChanged { get; set; }
private DropdownContent<AddTypeParams>? DropdownAdd;
private readonly IEnumerable<AddTypeParams> AddTypes =
[
new AddTypeParams(AddType.Manual, ResourcesKey.ManualAdd),
new AddTypeParams(AddType.Auto, ResourcesKey.AutoAdd)
];
private void HandleIconClicked()
{
throw new NotImplementedException();
}
private async Task HandleMoreButton()
{
if (DropdownAdd != null)
{
await DropdownAdd.OpenAsync();
}
}
private async Task HandleAddTypeClickedAsync(AddTypeParams value)
{
await AddTypeChanged.InvokeAsync(value.AddType);
}
}

28
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.css → src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.css
View File

@@ -70,34 +70,6 @@
cursor: pointer;
}
.account-icon {
fill: var(--light-grey);
}
.dropdown-more-add {
margin-top: 0px;
display: flex;
flex-direction: column;
gap: 4px;
background: var(--violet);
box-shadow: var(--drop-shadow);
border-radius: var(--small-radius);
position: fixed;
padding: 4px;
animation-name: fade-in;
animation-duration: 0.4s
}
.drowdown-more-element {
width: fit-content;
}
.drowdown-more-element:hover {
color: var(--light-grey);
cursor: pointer;
}
.invisible {
display: none;
}

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

@@ -29,10 +29,6 @@ html, body, #app {
overflow: hidden;
}
/*#app {
background: var(--background);
}*/
h1:focus {
outline: none;
}
@@ -69,6 +65,7 @@ a, .btn-link {
#blazor-error-ui {
color-scheme: light only;
color: #000;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);

2
src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html
View File

@@ -5,7 +5,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Game Ideas</title>
<base href="/Games" />
<base href="/" />
<link rel="stylesheet" href="css/app.css" />
<link rel="icon" type="image/png" href="icon.png" />
<link href="GameIdeas.BlazorApp.styles.css" rel="stylesheet" />