From 4e687e87ee4fd53414cd2e56d78a4b87c6c06367 Mon Sep 17 00:00:00 2001 From: Egamorf Date: Sun, 13 Apr 2025 01:57:57 +0200 Subject: [PATCH] Add popup form --- .../Games/Components/GameCreationForm.razor | 50 +++++++++++++++++ .../Components/GameCreationForm.razor.cs | 28 ++++++++++ .../Components/GameCreationForm.razor.css | 54 +++++++++++++++++++ .../Components/GameCreationForm.razor.js | 10 ++++ .../Games/Filter/AdvancedGameFilter.razor | 8 +-- .../Pages/Games/Filter/GameFilter.razor | 4 +- .../Pages/Games/Filter/GameFilterParams.cs | 5 +- .../Pages/Games/GameBase.razor | 3 +- .../BackdropFilter/BackdropFilter.razor.css | 2 +- .../Shared/Components/Popup/Popup.razor.css | 20 +++++-- .../Components/Search/SearchInput.razor.css | 1 + .../Components/Select/Models/SelectTheme.cs | 3 +- .../Select/MultipleSelectList.razor.css | 14 +++-- .../GameIdeas.BlazorApp/wwwroot/index.html | 1 + .../CreateStaticResourceKey.cs | 16 ++++-- .../GameIdeas.WebAPI/Files/GameIdeas.fr.json | 8 ++- 16 files changed, 204 insertions(+), 23 deletions(-) create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.js diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor new file mode 100644 index 0000000..e755d54 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor @@ -0,0 +1,50 @@ +@using GameIdeas.BlazorApp.Shared.Components.Select +@using GameIdeas.Shared.Dto + + +
+
+
+
@ResourcesKey.Title :
+ +
+
+
@ResourcesKey.ReleaseDate :
+ +
+
+
@ResourcesKey.StorageSize :
+ +
+
+
@ResourcesKey.Developers :
+ +
+
+
@ResourcesKey.Publishers :
+ +
+
+
+
+
@ResourcesKey.Interest :
+
+
+
@ResourcesKey.Properties :
+ +
+
+
@ResourcesKey.Genres :
+ +
+
+
@ResourcesKey.Platforms :
+ +
+
+
+
+
@ResourcesKey.Description :
+ +
+ \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs new file mode 100644 index 0000000..43baf8d --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs @@ -0,0 +1,28 @@ +using GameIdeas.BlazorApp.Shared.Components.Select.Models; +using GameIdeas.Shared.Dto; +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Forms; +using Microsoft.JSInterop; + +namespace GameIdeas.BlazorApp.Pages.Games.Components; + +public partial class GameCreationForm +{ + [Inject] private IJSRuntime Js { get; set; } = default!; + + private GameDto GameDto = new(); + private EditContext? EditContext; + private readonly SelectListTheme SelectListTheme = SelectListTheme.Creation; + + protected override void OnInitialized() + { + EditContext = new(GameDto); + base.OnInitialized(); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await Js.InvokeVoidAsync("addResizeGameFormListener"); + await base.OnAfterRenderAsync(firstRender); + } +} \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css new file mode 100644 index 0000000..f9907c0 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css @@ -0,0 +1,54 @@ +.game-form { + display: flex; + flex-direction: row; + gap: 20px; +} + +.container { + display: flex; + flex-direction: column; + gap: 8px; +} + +.input-game { + display: grid; + grid-template-columns: auto 200px; + grid-gap: 8px; + height: 24px; +} + +.label { + text-wrap: nowrap; + align-content: center; + font-weight: bold; + grid-column: 1; +} + +input { + width: 100%; + background: var(--input-secondary); + border: solid 1px var(--input-selected); + outline: none; + border-radius: var(--small-radius); + grid-column: 2; + box-sizing: border-box; + color: var(--white); +} + +.description-container { + margin-top: 8px; + display: grid; + grid-template-columns: auto 1fr; + grid-gap: 8px; +} + +.description { + min-height: 140px; +} + +#label-description { + text-wrap: nowrap; + align-content: center; + font-weight: bold; + height: 24px; +} \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.js b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.js new file mode 100644 index 0000000..1d2ed31 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.js @@ -0,0 +1,10 @@ +function resizeFormContent() { + const label = document.getElementById('first-label'); + const targetLabel = document.getElementById('label-description'); + targetLabel.style.width = window.getComputedStyle(label).getPropertyValue("width"); +} + +window.addResizeGameFormListener = () => { + resizeFormContent(); + window.addEventListener('resize', resizeFormContent); +}; \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor index 5dab57c..b918a9f 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor @@ -6,14 +6,14 @@
@@ -32,7 +32,7 @@ @@ -44,7 +44,7 @@ diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor index 06a2942..25c16a0 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor @@ -40,7 +40,7 @@ @@ -48,7 +48,7 @@ diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs index 4290ab3..5c5a65c 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs @@ -8,8 +8,9 @@ public class GameFilterParams public SortType? SortType { get; set; } public Func? SortProperty { get; set; } public string? SearchName { get; set; } - public IEnumerable? Plateforms { get; set; } - public IEnumerable? Genres { get; set; } + public IEnumerable? Platforms { get; set; } + public IEnumerable? Properties { get; set; } + public IEnumerable? Tags { get; set; } public IEnumerable? Publishers { get; set; } public IEnumerable? Developers { get; set; } public IEnumerable? StorageSizes { get; set; } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor index 9a1cfc0..b72d4b0 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor @@ -1,5 +1,6 @@ @page "/Games" @using GameIdeas.BlazorApp.Layouts +@using GameIdeas.BlazorApp.Pages.Games.Components @using GameIdeas.BlazorApp.Pages.Games.Filter @using GameIdeas.BlazorApp.Pages.Games.Header @using GameIdeas.BlazorApp.Shared.Components @@ -23,5 +24,5 @@ - + diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css index 5d089d1..cb99b96 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css @@ -5,7 +5,7 @@ } .backdrop-filter.overlay { - background-color: var(--grey-filter); + background-color: rgba(0, 0, 0, 0.2); } .backdrop-filter.transparent { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css index dee8bf6..66222e6 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css @@ -17,11 +17,25 @@ box-shadow: var(--drop-shadow); } -.popup-content button{ - top: 10px; - right: 10px; +.popup-content button { + top: 4px; + right: 4px; position: absolute; background: transparent; border: none; outline: none; + padding: 0; + height: 20px; + width: 20px; +} + + .popup-content button svg { + height: 18px; + fill: var(--white); + } + +.popup-content button:hover { + cursor: pointer; + background: var(--input-selected); + border-radius: var(--small-radius); } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css index 01ca8c0..62963d5 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css @@ -24,6 +24,7 @@ background: none !important; color: var(--white); height: 100%; + width: 100%; padding: 0; min-width: 0; } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs index b045d58..df43019 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs @@ -5,5 +5,6 @@ public enum SelectListTheme Navigation, Sort, Filter, - AdvancedFilter + AdvancedFilter, + Creation } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css index db31296..ab8485c 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css @@ -30,14 +30,22 @@ margin: 2px 6px; border-bottom: 2px solid var(--input-selected); } - +/* Advanced filter */ ::deep .select-button.advancedfilter .search-container { height: 24px; background: var(--input-secondary); } -::deep .select-button.advancedfilter .search-container input::placeholder { - color: #bbb; + ::deep .select-button.advancedfilter .search-container input::placeholder { + color: #bbb; + } + +/* Creation */ +::deep .select-button.creation .search-container { + height: 24px; + background: var(--input-secondary); + border: solid 1px var(--input-selected); + box-sizing: border-box; } /* width */ diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html index 13a0479..bc8684e 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html @@ -28,6 +28,7 @@ + diff --git a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs index 46e8b34..76c8330 100644 --- a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs +++ b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs @@ -18,9 +18,13 @@ public class Translations (TranslationService translationService) public string Genres => translationService.Translate(nameof(Genres)); public string Publishers => translationService.Translate(nameof(Publishers)); public string Developers => translationService.Translate(nameof(Developers)); - public string StorageSizes => translationService.Translate(nameof(StorageSizes)); + public string StorageSize => translationService.Translate(nameof(StorageSize)); public string LastModification => translationService.Translate(nameof(LastModification)); - public string ReleaseDates => translationService.Translate(nameof(ReleaseDates)); + public string ReleaseDate => translationService.Translate(nameof(ReleaseDate)); + public string Title => translationService.Translate(nameof(Title)); + public string Interest => translationService.Translate(nameof(Interest)); + public string Properties => translationService.Translate(nameof(Properties)); + public string Description => translationService.Translate(nameof(Description)); } public static class ResourcesKey @@ -47,7 +51,11 @@ public static class ResourcesKey public static string Genres => _instance?.Genres ?? throw new InvalidOperationException("ResourcesKey.Genres is not initialized."); public static string Publishers => _instance?.Publishers ?? throw new InvalidOperationException("ResourcesKey.Publishers is not initialized."); public static string Developers => _instance?.Developers ?? throw new InvalidOperationException("ResourcesKey.Developers is not initialized."); - public static string StorageSizes => _instance?.StorageSizes ?? throw new InvalidOperationException("ResourcesKey.StorageSizes is not initialized."); + public static string StorageSize => _instance?.StorageSize ?? throw new InvalidOperationException("ResourcesKey.StorageSize is not initialized."); public static string LastModification => _instance?.LastModification ?? throw new InvalidOperationException("ResourcesKey.LastModification is not initialized."); - public static string ReleaseDates => _instance?.ReleaseDates ?? throw new InvalidOperationException("ResourcesKey.ReleaseDates is not initialized."); + public static string ReleaseDate => _instance?.ReleaseDate ?? throw new InvalidOperationException("ResourcesKey.ReleaseDate is not initialized."); + public static string Title => _instance?.Title ?? throw new InvalidOperationException("ResourcesKey.Title is not initialized."); + public static string Interest => _instance?.Interest ?? throw new InvalidOperationException("ResourcesKey.Interest is not initialized."); + public static string Properties => _instance?.Properties ?? throw new InvalidOperationException("ResourcesKey.Properties is not initialized."); + public static string Description => _instance?.Description ?? throw new InvalidOperationException("ResourcesKey.Description is not initialized."); } \ No newline at end of file diff --git a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json index e065f5e..95521b7 100644 --- a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json +++ b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json @@ -14,7 +14,11 @@ "Genres": "Genres", "Publishers": "Editeurs", "Developers": "Développeurs", - "StorageSizes": "Taille d'espace", + "StorageSize": "Taille d'espace", "LastModification": "Dernière modifications", - "ReleaseDates": "Dates de parution" + "ReleaseDate": "Date de parution", + "Title": "Titre", + "Interest": "Intérêt", + "Properties": "Propriétés", + "Description": "Description" } \ No newline at end of file