diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css index cd61f2c..407f5bd 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css @@ -1,12 +1,13 @@ .page { + display: flex; + flex-direction: column; height: 100%; - overflow: hidden; } .orb { position: absolute; border-radius: 100%; - z-index: -999; + z-index: var(--index-orb); } .green { @@ -42,5 +43,5 @@ position: fixed; top: 0; left: 0; - z-index: -1000; + z-index: var(--index-background); } \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs index adfddfd..dfa5e1b 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs @@ -27,7 +27,7 @@ public partial class AdvancedGameFilter new() { Item = "Electronic Arts", Label = "Electronic Arts" }, new() { Item = "Ubisoft", Label = "Ubisoft" }, new() { Item = "Activision Blizzard", Label = "Activision Blizzard" }, - new() { Item = "Bethesda", Label = "Bethesda" }, + new() { Item = "Bethesda", Label = "Bethesda" } ]; private readonly IEnumerable> Developers = [ diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css index 4c0604a..b854400 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css @@ -2,10 +2,13 @@ display: flex; flex-direction: column; gap: 10px; - padding-right: 20px; + padding-right: 20px; padding-left: 10px; height: 100%; - border-left: 2px solid var(--light-grey); + box-sizing: border-box; + width: 240px; + border-left: 2px solid var(--line); + z-index: var(--index-component); } .duplicate { 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 82e7152..06a2942 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor @@ -2,67 +2,61 @@ @using GameIdeas.BlazorApp.Shared.Components.Select @using GameIdeas.BlazorApp.Shared.Components.Select.Models @using GameIdeas.BlazorApp.Shared.Components.SliderRange +@using GameIdeas.BlazorApp.Shared.Models @using GameIdeas.Shared.Dto -@using GameIdeas.BlazorApp.Pages.Games.Models - - -
- - - - -
- - +
+ +
+ +
+ -
- - - -
- -
- -
- -
- -
- -
- -
- -
- -
+
+ + +
- - + +
+ + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs index 3802ba3..7fda92f 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs @@ -1,6 +1,6 @@ -using GameIdeas.BlazorApp.Pages.Games.Models; using GameIdeas.BlazorApp.Shared.Components.Select.Models; using GameIdeas.BlazorApp.Shared.Components.SliderRange; +using GameIdeas.BlazorApp.Shared.Models; using GameIdeas.Shared.Dto; using GameIdeas.Shared.Enum; using Microsoft.AspNetCore.Components; @@ -10,7 +10,7 @@ namespace GameIdeas.BlazorApp.Pages.Games.Filter; public partial class GameFilter { - [Parameter] public GameFilterParams? GameFilterParams { get; set; } + [Parameter] public GameFilterParams GameFilterParams { get; set; } = new(); [Parameter] public EventCallback GameFilterParamsChanged { get; set; } [Parameter] public DisplayType DisplayType { get; set; } [Parameter] public EventCallback DisplayTypeChanged { get; set; } @@ -45,7 +45,7 @@ public partial class GameFilter protected override void OnInitialized() { - EditContext = new EditContext(GameFilterParams!); + EditContext = new EditContext(GameFilterParams); EditContext.OnFieldChanged += async (s, e) => { await GameFilterParamsChanged.InvokeAsync(GameFilterParams); @@ -54,7 +54,7 @@ public partial class GameFilter private void HandleSortTypeChanged(Func getHeader) { - GameFilterParams!.SortType = (SortType?)getHeader(null) ?? SortType.Ascending; + GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending; } private async Task HandleDisplayClicked(DisplayType displayType) diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css index 75bae77..f1df118 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css @@ -3,6 +3,7 @@ flex-direction: row; gap: 8px; align-items: center; + z-index: var(--index-component); } .search-container { @@ -26,7 +27,7 @@ width: 28px; min-width: 28px; border-radius: var(--small-radius); - background: var(--black); + background: var(--input-primary); overflow: hidden; } @@ -40,7 +41,7 @@ .square-button svg:hover { cursor: pointer; - background: var(--low-white); + background: var(--input-selected); } .selected-icon { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor index 836cbb5..3da8b3f 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor @@ -1,20 +1,18 @@ @page "/Games" @using GameIdeas.BlazorApp.Layouts @using GameIdeas.BlazorApp.Pages.Games.Filter +@using GameIdeas.BlazorApp.Pages.Games.Header @using GameIdeas.BlazorApp.Shared.Components -@using GameIdeas.BlazorApp.Shared.Layouts.Header @using GameIdeas.Resources @layout MainLayout @ResourcesKey.GamesIdeas - - - - - + + +
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs index 2909e73..0fcb9fa 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs @@ -1,5 +1,5 @@ using GameIdeas.BlazorApp.Pages.Games.Filter; -using GameIdeas.BlazorApp.Pages.Games.Models; +using GameIdeas.BlazorApp.Shared.Models; namespace GameIdeas.BlazorApp.Pages.Games; diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css index 21c19a7..5dc75c2 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css @@ -1,5 +1,6 @@ .container { margin-top: 20px; + margin-bottom: 10px; justify-content: space-between; display: flex; flex-direction: row; @@ -7,5 +8,5 @@ } .content { - + z-index: var(--index-content); } \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor similarity index 79% rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor index 17f9cc6..c222be4 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor @@ -1,18 +1,18 @@ @using GameIdeas.BlazorApp.Pages.Games -@using GameIdeas.BlazorApp.Pages.Games.Models @using GameIdeas.BlazorApp.Shared.Components.Account @using GameIdeas.BlazorApp.Shared.Components.Select @using GameIdeas.BlazorApp.Shared.Components.Select.Models +@using GameIdeas.BlazorApp.Shared.Models @using GameIdeas.Resources -@inherits LayoutComponentBase +@inherits ComponentBase
Game Ideas
- @Body + @ChildContent diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.cs similarity index 80% rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.cs index f3e335a..ee0a45e 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.cs @@ -1,14 +1,16 @@ -using GameIdeas.BlazorApp.Pages.Games.Models; using GameIdeas.BlazorApp.Shared.Components.Account; using GameIdeas.BlazorApp.Shared.Components.Select.Models; +using GameIdeas.BlazorApp.Shared.Models; using GameIdeas.Resources; using Microsoft.AspNetCore.Components; -namespace GameIdeas.BlazorApp.Shared.Layouts.Header; +namespace GameIdeas.BlazorApp.Pages.Games.Header; -public partial class HeaderLayout : LayoutComponentBase +public partial class GamesHeader : ComponentBase { [Parameter] public EventCallback AddTypeChanged { get; set; } + [Parameter] public RenderFragment? ChildContent { get; set; } + private readonly IEnumerable> SelectElements = [ new SelectElement { Item = AddType.Manual, Label = ResourcesKey.ManualAdd }, diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.css similarity index 78% rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.css index 7661644..a27186c 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.css @@ -33,7 +33,6 @@ } .add-container { - overflow: visible; margin-right: 40px; } @@ -42,7 +41,6 @@ flex-direction: row; background: var(--violet); border-radius: var(--small-radius); - overflow: visible; } .button { @@ -54,11 +52,15 @@ } .first-button { - border-right: 2px solid var(--line-black); + border-right: 2px solid var(--violet-selected); + border-radius: var(--small-radius) 0 0 var(--small-radius); + overflow: hidden; } .second-button .button-icon { padding: 6px; + border-radius: 0 var(--small-radius) var(--small-radius) 0; + overflow: hidden; } .button-icon { @@ -66,10 +68,10 @@ } .button-icon:hover { - background: var(--line-black); + background: var(--violet-selected); cursor: pointer; } .account-icon { - fill: var(--light-grey); + fill: var(--line); } \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs deleted file mode 100644 index d526be0..0000000 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs +++ /dev/null @@ -1,7 +0,0 @@ -namespace GameIdeas.BlazorApp.Pages.Games.Models; - -public enum AddType -{ - Manual, - Auto -} diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs deleted file mode 100644 index f3c0af4..0000000 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs +++ /dev/null @@ -1,7 +0,0 @@ -namespace GameIdeas.BlazorApp.Pages.Games.Models; - -public enum DisplayType -{ - Card, - List -} diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css index 6a651ee..18ab1f3 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css @@ -4,10 +4,11 @@ position: fixed; animation-name: fade-in; animation-duration: 0.4s; - border: 2px solid var(--low-white); - background: var(--semi-black); + border: 2px solid var(--input-selected); + background: var(--dropdown-content); right: 10px; margin-top: 4px; + z-index: var(--index-floating); } .invisible { @@ -30,8 +31,8 @@ } ::deep .input-text { - background: var(--low-white); - border: 2px solid var(--low-white); + background: var(--input-selected); + border: 2px solid var(--input-selected); border-radius: var(--small-radius); padding: 6px; color: var(--white); @@ -64,7 +65,7 @@ width: 18px; height: 18px; border-radius: 50%; - border: 3px solid var(--line-black); + border: 3px solid rgba(0, 0, 0, 0.2); border-top-color: var(--white); animation: loading 1s linear infinite; justify-self: center; @@ -77,7 +78,7 @@ .line { margin: 0 6px; - border-bottom: 2px solid var(--light-grey); + border-bottom: 2px solid var(--line); } .settings-element { @@ -88,7 +89,7 @@ } .settings-element:hover { - background: var(--light-grey) + background: var(--line) } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor new file mode 100644 index 0000000..97a356b --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor @@ -0,0 +1,55 @@ +@if (IsVisible) +{ +
+} + +@code { + [Inject] private IJSRuntime Js { get; set; } = default!; + [Parameter] public EventCallback OnClick { get; set; } + [Parameter] public bool AllowBodyScroll { get; set; } + [Parameter] public BackdropFilterColor Color { get; set; } = BackdropFilterColor.Overlay; + [Parameter] public bool CloseOnClick { get; set; } = true; + [Parameter] public bool IsVisible { get; set; } + + public async Task Show() + { + IsVisible = true; + await HandleBodyOverflow(); + } + + public async Task Hide() + { + IsVisible = false; + await HandleBodyOverflow(); + } + + private async Task HandleBodyOverflow() + { + try + { + if (AllowBodyScroll) return; + + if (IsVisible) + { + await Js.InvokeVoidAsync("setBodyOverflow", "hidden"); + } + else + { + await Js.InvokeVoidAsync("setBodyOverflow", "auto"); + } + } + catch (Exception) + { + // ignored because js not loaded + } + } + + private async Task HandleBackdropClicked() + { + if (!CloseOnClick) return; + + await Hide(); + await OnClick.InvokeAsync(); + } + +} \ No newline at end of file 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 new file mode 100644 index 0000000..5d089d1 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.css @@ -0,0 +1,13 @@ +.backdrop-filter { + position: fixed; + inset: 0; + z-index: var(--index-backdrop); +} + + .backdrop-filter.overlay { + background-color: var(--grey-filter); + } + + .backdrop-filter.transparent { + background-color: transparent; + } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.js b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.js new file mode 100644 index 0000000..3f2b25b --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.js @@ -0,0 +1,3 @@ +window.setBodyOverflow = (overflow) => { + document.getElementsByTagName('html')[0].style.overflow = overflow; +} diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilterColor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilterColor.cs new file mode 100644 index 0000000..16cddd2 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilterColor.cs @@ -0,0 +1,7 @@ +namespace GameIdeas.BlazorApp.Shared.Components.BackdropFilter; + +public enum BackdropFilterColor +{ + Overlay, + Transparent +} diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor index 911db66..f94456b 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor @@ -1,31 +1,25 @@ -
- + + @bind:after=HandleTextChanged + @onfocusin=HandleFocusIn/> - @if (!string.IsNullOrEmpty(Text)) - { -
- - - +
+ @if (!string.IsNullOrEmpty(Text)) + { +
+ @ClearIcon +
+ } + +
+ @GetSearchIcon()
- } - -
- - @if (Icon == SearchInputIcon.Search) - { - - } - else if (Icon == SearchInputIcon.Dropdown) - { - - } -
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs index 3e3f8e6..5b8ddfd 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs @@ -1,3 +1,4 @@ +using GameIdeas.Shared.Constants; using Microsoft.AspNetCore.Components; namespace GameIdeas.BlazorApp.Shared.Components.Search; @@ -9,8 +10,12 @@ public partial class SearchInput [Parameter] public EventCallback TextChanged { get; set; } [Parameter] public EventCallback ClearClicked { get; set; } [Parameter] public EventCallback SearchClicked { get; set; } + [Parameter] public EventCallback FocusIn { get; set; } [Parameter] public SearchInputIcon Icon { get; set; } + private ElementReference InputText; + private readonly MarkupString ClearIcon = new(Icons.Search.Clear); + protected override void OnInitialized() { Text = string.Empty; @@ -36,5 +41,20 @@ public partial class SearchInput { await TextChanged.InvokeAsync(Text); await SearchClicked.InvokeAsync(); + await InputText.FocusAsync(); + } + private async Task HandleFocusIn() + { + await FocusIn.InvokeAsync(); + } + + private MarkupString GetSearchIcon() + { + return Icon switch + { + SearchInputIcon.Dropdown => new MarkupString(Icons.Search.Triangle), + SearchInputIcon.Search => new MarkupString(Icons.Search.Glass), + _ => new MarkupString() + }; } } \ No newline at end of file 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 17aca87..01ca8c0 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 @@ -6,10 +6,16 @@ padding-left: 8px; padding-right: 2px; border-radius: var(--small-radius); - background: var(--black); + background: var(--input-primary); overflow: hidden; align-items: center; - width: 140px; + z-index: var(--index-component); + justify-content: space-between; +} + +.buttons { + display: flex; + align-items: center; } ::deep .search-field { @@ -33,7 +39,7 @@ cursor: pointer; } - .clear-icon svg { + ::deep .clear-icon svg { fill: var(--white); } @@ -48,11 +54,11 @@ cursor: pointer; } - .search-icon svg { - fill: var(--white); - } +::deep .search-icon svg { + fill: var(--white); +} - .search-icon.dropdown svg { - fill: var(--violet); - transform: scale(.8, .5); - } +::deep .search-icon.dropdown svg { + fill: var(--violet); + transform: scale(.8, .5); +} diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs index 917c9a6..d434875 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs @@ -10,13 +10,6 @@ public partial class SelectListElement [Parameter] public SelectListTheme Theme { get; set; } private async Task HandleItemClicked() { - if (Value == null) - { - return; - } - - Value.IsSelected = true; - StateHasChanged(); await ValueChanged.InvokeAsync(Value); } } \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css index 82363ab..ea41ed2 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css @@ -1,12 +1,10 @@ .select-element { display: flex; flex-direction: row; - width: fit-content; - width: 100%; + width: auto; gap: 6px; height: 20px; align-items: center; - z-index: 501; } .select-element:hover { @@ -18,6 +16,7 @@ min-width: 12px; height: 12px; min-height: 12px; + border: 1px solid var(--line); } .selected svg { @@ -43,7 +42,7 @@ } .sort:hover { - background: var(--low-white); + background: var(--input-selected); } .sort .select-label { @@ -57,7 +56,7 @@ } .filter:hover { - background: var(--low-white); + background: var(--input-selected); } .filter .select-label { @@ -65,27 +64,13 @@ margin-right: 6px; } -/***** Filter Theme *****/ -.filter { - padding: 2px 6px; -} - - .filter:hover { - background: var(--low-white); - } - - .filter .select-label { - text-wrap: nowrap; - margin-right: 6px; - } - -/***** Filter Theme *****/ +/***** Advanced Filter Theme *****/ .advancedfilter { padding: 2px 6px; } .advancedfilter:hover { - background: var(--low-white); + background: var(--input-selected); } .advancedfilter .select-label { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor index 54c465f..83c296a 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor @@ -1,21 +1,19 @@ -@using GameIdeas.BlazorApp.Shared.Components.Search +@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter +@using GameIdeas.BlazorApp.Shared.Components.Search @using GameIdeas.BlazorApp.Shared.Components.Select.Components @typeparam TItem -
-
+
+
+ SearchClicked="HandleSearchClicked" + FocusIn="HandleTextFocusIn"/>
-
+
@if (IsContentOpen) { @@ -32,3 +30,6 @@
+ + diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs index 4ecef67..def2a83 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs @@ -1,11 +1,13 @@ using GameIdeas.BlazorApp.Shared.Components.Search; using GameIdeas.BlazorApp.Shared.Components.Select.Models; using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; namespace GameIdeas.BlazorApp.Shared.Components.Select; public partial class MultipleSelectList { + [Inject] IJSRuntime JS { get; set; } = default!; [Parameter] public IEnumerable? Values { get; set; } [Parameter] public EventCallback?> ValuesChanged { get; set; } [Parameter] public IEnumerable> Items { get; set; } = []; @@ -13,60 +15,51 @@ public partial class MultipleSelectList [Parameter] public bool AlignRight { get; set; } [Parameter] public string? Placeholder { get; set; } - private bool IsContentOpen - { - get => InputFocus || ContentFocus; - } - - private bool InputFocus = false; - private bool ContentFocus = false; + private bool IsContentOpen = false; private SearchInput? SearchInput; - private ElementReference ContentElement; - private ElementReference BaseElement; + + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await JS.InvokeVoidAsync("addResizeListener"); + + await base.OnAfterRenderAsync(firstRender); + } private async Task HandleItemClicked(SelectElement selectedValue) { + selectedValue.IsSelected = !selectedValue.IsSelected; + Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!); SearchInput?.SetText(string.Join(", ", Values)); + await ValuesChanged.InvokeAsync(Values); + StateHasChanged(); } private async Task HandleTextChanged() { - await BaseElement.FocusAsync(); - } + IsContentOpen = false; - private void HandleFocusIn() - { - InputFocus = true; - } - - private void HandleContentFocusIn() - { - ContentFocus = true; - } - - private async Task HandleContentFocusOut() - { - await Task.Delay(TimeSpan.FromSeconds(0.3)); - ContentFocus = false; - } - - private async Task HandleFocusOut() - { - await Task.Delay(TimeSpan.FromSeconds(0.3)); - InputFocus = false; - } - - private async Task HandleSearchClicked() - { - if (!IsContentOpen) + foreach (var item in Items) { - await ContentElement.FocusAsync(); - } - else - { - await BaseElement.FocusAsync(); + item.IsSelected = false; } + + Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!); + await ValuesChanged.InvokeAsync(Values); + } + + private void HandleSearchClicked() + { + IsContentOpen = !IsContentOpen; + } + private void HandleContentClosed() + { + IsContentOpen = false; + } + private void HandleTextFocusIn() + { + IsContentOpen = true; } } \ No newline at end of file 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 857a5e9..db31296 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 @@ -3,63 +3,62 @@ } .select-container { + overflow: auto; + right: 0; + min-width: 100%; margin-top: 4px; position: absolute; - z-index: 500; -} - -.align-right { - right: 0; + z-index: var(--index-dropdown); + border-radius: var(--small-radius); } .select-content { - overflow: hidden; display: flex; flex-direction: column; - border-radius: var(--small-radius); animation-name: fade-in; animation-duration: 0.4s; - z-index: 500; + background: var(--dropdown-content); + box-shadow: var(--drop-shadow); + padding: 4px 0; +} + +.select-button { + z-index: var(--index-component) } .line { margin: 2px 6px; - border-bottom: 2px solid var(--low-white); -} - - -/***** Navigation Theme *****/ -.select-content.navigation { - background: var(--violet); - box-shadow: var(--drop-shadow); -} - -/***** Sort Theme *****/ -.select-content.sort { - background: var(--semi-black); - box-shadow: var(--drop-shadow); - padding: 4px 0; -} - -/***** Filter Theme *****/ -.select-content.filter { - background: var(--semi-black); - box-shadow: var(--drop-shadow); - padding: 4px 0; - min-width: 150px; -} - -/***** AdvanceFilter Theme *****/ -.select-content.advancedfilter { - background: var(--light-grey); - box-shadow: var(--drop-shadow); - padding: 4px 0; - min-width: 150px; + border-bottom: 2px solid var(--input-selected); } ::deep .select-button.advancedfilter .search-container { height: 24px; - width: 210px; - border: 2px solid var(--low-white); + background: var(--input-secondary); } +::deep .select-button.advancedfilter .search-container input::placeholder { + color: #bbb; +} + +/* width */ +.select-container::-webkit-scrollbar { + width: 10px; +} + +/* Track */ +.select-container::-webkit-scrollbar-track { + background: var(--input-secondary); + border-radius: 0 var(--small-radius) var(--small-radius) 0; +} + +/* Handle */ +.select-container::-webkit-scrollbar-thumb { + background: #555; + border-radius: var(--small-radius); +} + + /* Handle on hover */ + .select-container::-webkit-scrollbar-thumb:hover { + background: #777; + } + diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.js b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.js new file mode 100644 index 0000000..3506868 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.js @@ -0,0 +1,19 @@ +function offset(el) { + var rect = el.getBoundingClientRect(), + scrollLeft = window.scrollY || document.documentElement.scrollLeft, + scrollTop = window.scrollX || document.documentElement.scrollTop; + return { top: rect.top + scrollTop, left: rect.left + scrollLeft } +} + +function resizeSelectContent() { + const height = window.innerHeight; + const selects = document.getElementsByClassName('select-container'); + for (var i = 0; i < selects.length; i++) { + selects[i].style.maxHeight = height - offset(selects[i]).top - 10 + "px"; + } +} + +window.addResizeListener = () => { + resizeSelectContent(); + window.addEventListener('resize', resizeSelectContent); +}; \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor index 0aee122..3dc72ce 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor @@ -1,15 +1,14 @@ -@using GameIdeas.BlazorApp.Shared.Components.Select.Components +@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter +@using GameIdeas.BlazorApp.Shared.Components.Select.Components @typeparam TItem -
-
- @Button +
+
+ @ChildContent
-
- @if (ContentVisile) +
+ @if (IsContentOpen) {
@foreach (var item in Headers) @@ -35,3 +34,6 @@
+ + diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs index 59423dd..ffcd07b 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs @@ -5,7 +5,7 @@ namespace GameIdeas.BlazorApp.Shared.Components.Select; public partial class SelectList { - [Parameter] public RenderFragment? Button { get; set; } + [Parameter] public RenderFragment? ChildContent { get; set; } [Parameter] public TItem? Value { get; set; } [Parameter] public EventCallback ValueChanged { get; set; } [Parameter] public TItem? Header { get; set; } @@ -15,27 +15,16 @@ public partial class SelectList [Parameter] public SelectListTheme Theme { get; set; } [Parameter] public bool AlignRight { get; set; } - private bool ContentVisile = false; - private DateTime ContentLastFocusOut = DateTime.Now; - private ElementReference Container; + private bool IsContentOpen = false; - public async Task OpenAsync() + private void HandleButtonClicked() { - if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2)) - { - await Container.FocusAsync(); - ContentVisile = true; - } + IsContentOpen = !IsContentOpen; } - public void Close() => ContentVisile = false; - - private async Task HandleButtonClicked() => await OpenAsync(); - - private void HandleFocusOut() + private void HandleContentClosed() { - ContentLastFocusOut = DateTime.Now; - ContentVisile = false; + IsContentOpen = false; } private async Task HandleItemClicked(SelectElement selectedValue) @@ -46,6 +35,7 @@ public partial class SelectList } selectedValue.IsSelected = true; + Value = selectedValue.Item; await ValueChanged.InvokeAsync(Value); } @@ -58,6 +48,7 @@ public partial class SelectList } selectedValue.IsSelected = true; + Header = selectedValue.Item; await HeaderChanged.InvokeAsync(Header); } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css index 3e5473b..56150db 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css @@ -5,6 +5,7 @@ .select-container { margin-top: 4px; position: absolute; + z-index: var(--index-dropdown) } .align-right { @@ -20,9 +21,13 @@ animation-duration: 0.4s; } +.select-button { + z-index: var(--index-component) +} + .line { margin: 2px 6px; - border-bottom: 2px solid var(--low-white); + border-bottom: 2px solid var(--input-selected); } @@ -34,7 +39,7 @@ /***** Sort Theme *****/ .select-content.sort { - background: var(--semi-black); + background: var(--dropdown-content); box-shadow: var(--drop-shadow); padding: 4px 0; } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs index bdc2846..41841cb 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs @@ -37,7 +37,7 @@ public partial class SliderRange { var percent1 = (double)(Params.ValueMin - Params.Min) / (Params.Max - Params.Min) * 100; var percent2 = (double)(Params.ValueMax - Params.Min) / (Params.Max - Params.Min) * 100; - return $"background: linear-gradient(to right, var(--light-grey) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--light-grey) {percent2}%)"; + return $"background: linear-gradient(to right, var(--line) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--line) {percent2}%)"; } private string StatusColor(int value) diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css index cf23999..c27647d 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css @@ -1,6 +1,7 @@ .container { position: relative; width: 100%; + z-index: var(--index-component) } input[type="range"] { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/AddType.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/AddType.cs new file mode 100644 index 0000000..6352879 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/AddType.cs @@ -0,0 +1,7 @@ +namespace GameIdeas.BlazorApp.Shared.Models; + +public enum AddType +{ + Manual, + Auto +} diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/DisplayType.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/DisplayType.cs new file mode 100644 index 0000000..c7f3e5a --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/DisplayType.cs @@ -0,0 +1,7 @@ +namespace GameIdeas.BlazorApp.Shared.Models; + +public enum DisplayType +{ + Card, + List +} diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css index 725eae6..54720d9 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css @@ -7,29 +7,39 @@ --red: #FF5E51; --yellow: #FFC107; --green: #43F8C0; - --light-grey: #5C5C5E; - --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); - --line-black: rgba(0, 0, 0, 0.2); + --line: #5C5C5E; + --input-primary: rgba(0, 0, 0, 0.8); + --input-secondary: rgb(45, 45, 48); + --input-selected: rgb(255, 255, 255, 0.1); + --dropdown-content: rgb(45, 45, 48); + --small-radius: 4px; --big-radius: 10px; - --radius: 6px; + --drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25); + + --index-background: -100; + --index-orb: -1; + --index-content: 0; + --index-component: 300; + --index-floating: 500; + --index-backdrop: 700; + --index-dropdown: 900; + --index-popup: 1000; } html { font-family: 'Noto Sans', sans-serif; font-size: 12px; - color: var(--white) + color: var(--white); + overflow: hidden; } html, body, #app { margin: 0; padding: 0; height: 100%; - overflow: hidden; } .valid.modified:not([type=checkbox]) { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html index 4d324bb..13a0479 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html @@ -26,6 +26,8 @@ 🗙
+ + diff --git a/src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs b/src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs new file mode 100644 index 0000000..5c2f030 --- /dev/null +++ b/src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs @@ -0,0 +1,23 @@ +namespace GameIdeas.Shared.Constants; + +public static class Icons +{ + private const string OpenBraket = ""; + private const string CloseBraket = ""; + + + public static class Search + { + public const string Clear = OpenBraket + + "" + + CloseBraket; + + public const string Glass = OpenBraket + + "" + + CloseBraket; + + public const string Triangle = OpenBraket + + "" + + CloseBraket; + } +}