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

Refactor style for dropdown
All checks were successful
Game Ideas build for PR / build_blazor_app (pull_request) Successful in 1m13s
Details

Browse Source
This commit is contained in:
Egamorf
2025-04-08 01:45:48 +02:00
parent de42286cd5
commit 778b123c64
12 changed files with 78 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
View File

@@ -1,6 +1,8 @@
.page {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 100vh;
height: 100vh;
}
.orb {

2
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css
View File

@@ -5,6 +5,8 @@
padding-right: 20px;
padding-left: 10px;
height: 100%;
box-sizing: border-box;
width: 240px;
border-left: 2px solid var(--line);
z-index: var(--index-component);
}

20
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
View File

@@ -1,4 +1,5 @@
<div class="search-container">
@using GameIdeas.Shared.Constants
<div class="search-container">
<input @ref=InputText
type="text"
class="search-field"
@@ -8,26 +9,17 @@
@bind:after=HandleTextChanged
@onfocusin=HandleFocusIn/>
<div class="buttons">
@if (!string.IsNullOrEmpty(Text))
{
<div class="clear-icon" @onclick=HandleClearClicked>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg>
@ClearIcon
</div>
}
<div class="search-icon @(Enum.GetName(Icon)?.ToLower())" @onclick=HandleSearchClicked>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@if (Icon == SearchInputIcon.Search)
{
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
}
else if (Icon == SearchInputIcon.Dropdown)
{
<path d="M1 3H23L12 22" />
}
</svg>
@GetSearchIcon()
</div>
</div>
</div>

12
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
View File

@@ -1,3 +1,4 @@
using GameIdeas.Shared.Constants;
using Microsoft.AspNetCore.Components;
namespace GameIdeas.BlazorApp.Shared.Components.Search;
@@ -13,6 +14,7 @@ public partial class SearchInput
[Parameter] public SearchInputIcon Icon { get; set; }
private ElementReference InputText;
private readonly MarkupString ClearIcon = new(Icons.Search.Clear);
protected override void OnInitialized()
{
@@ -45,4 +47,14 @@ public partial class SearchInput
{
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()
};
}
}

12
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
View File

@@ -9,8 +9,8 @@
background: var(--input-primary);
overflow: hidden;
align-items: center;
width: 140px;
z-index: var(--index-component);
justify-content: space-between;
}
::deep .search-field {
@@ -34,7 +34,7 @@
cursor: pointer;
}
.clear-icon svg {
::deep .clear-icon svg {
fill: var(--white);
}
@@ -49,11 +49,11 @@
cursor: pointer;
}
.search-icon svg {
::deep .search-icon svg {
fill: var(--white);
}
}
.search-icon.dropdown svg {
::deep .search-icon.dropdown svg {
fill: var(--violet);
transform: scale(.8, .5);
}
}

7
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs
View File

@@ -10,13 +10,6 @@ public partial class SelectListElement<TItem>
[Parameter] public SelectListTheme Theme { get; set; }
private async Task HandleItemClicked()
{
if (Value == null)
{
return;
}
Value.IsSelected = true;
StateHasChanged();
await ValueChanged.InvokeAsync(Value);
}
}

4
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css
View File

@@ -1,8 +1,7 @@
.select-element {
display: flex;
flex-direction: row;
width: fit-content;
width: 100%;
width: auto;
gap: 6px;
height: 20px;
align-items: center;
@@ -17,6 +16,7 @@
min-width: 12px;
height: 12px;
min-height: 12px;
border: 1px solid var(--line);
}
.selected svg {

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

@@ -13,7 +13,7 @@
SearchClicked="HandleSearchClicked"
FocusIn="HandleTextFocusIn"/>
</div>
<div class="select-container @(AlignRight ? "align-right" : "")">
<div class="select-container">
@if (IsContentOpen)
{

10
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
View File

@@ -26,9 +26,17 @@ public partial class MultipleSelectList<TItem>
await ValuesChanged.InvokeAsync(Values);
}
private void HandleTextChanged()
private async Task HandleTextChanged()
{
IsContentOpen = false;
foreach (var item in Items)
{
item.IsSelected = false;
}
Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!);
await ValuesChanged.InvokeAsync(Values);
}
private void HandleSearchClicked()

21
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
View File

@@ -3,15 +3,14 @@
}
.select-container {
overflow: auto;
right: 0;
min-width: 100%;
margin-top: 4px;
position: absolute;
z-index: var(--index-dropdown)
}
.align-right {
right: 0;
}
.select-content {
overflow: hidden;
display: flex;
@@ -33,24 +32,12 @@
border-bottom: 2px solid var(--input-selected);
}
/***** Filter Theme *****/
.select-content.filter {
min-width: 140px;
}
/***** Advanced Filter Theme *****/
.select-content.advancedfilter {
min-width: 210px;
}
::deep .select-button.advancedfilter .search-container {
height: 24px;
width: 210px;
border: 2px solid var(--input-selected);
background: var(--input-secondary);
}
::deep .select-button.advancedfilter .search-container input::placeholder {
color: #ddd;
color: #bbb;
}

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

@@ -40,7 +40,6 @@ html, body, #app {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.valid.modified:not([type=checkbox]) {

23
src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs Normal file
View File

@@ -0,0 +1,23 @@
namespace GameIdeas.Shared.Constants;
public static class Icons
{
private const string OpenBraket = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">";
private const string CloseBraket = "</svg>";
public static class Search
{
public const string Clear = OpenBraket +
"<path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />" +
CloseBraket;
public const string Glass = OpenBraket +
"<path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />" +
CloseBraket;
public const string Triangle = OpenBraket +
"<path d=\"M1 3H23L12 22\" />" +
CloseBraket;
}
}