Improve styling for filter bricks

Webreaper · Nov 7, 2023 · ac24ab1 · ac24ab1
1 parent bb1a3bc
commit ac24ab1
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 10 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Damselfly.Web.Client/Components/General/Bricks.razor b/Damselfly.Web.Client/Components/General/Bricks.razor
@@ -0,0 +1,38 @@
+@typeparam T
+
+<div>
+    <div class="bricklist">
+        @foreach( var item in Items.Where( x => x != null ) )
+        {
+            @if( item != null )
+            {
+                <div class="bricktext">
+                    <div class="bricktext-label">@ToStrFunc(item)</div>
+                    @if( ItemRemoved != null )
+                    {
+                        <div class="deletebrick" title="@RemoveText(item)" @onclick="@(() => ItemRemoved(item))">
+                            <i class="fa fa-times-circle"/>
+                        </div>
+                    }
+                </div>
+            }
+        }
+    </div>
+</div>
+
+@code {
+
+    [Parameter]
+    public IEnumerable<T> Items { get; init; }
+
+    [Parameter]
+    public Action<T> ItemRemoved { get; init; } = null;
+
+    [Parameter]
+    public Func<T, string> ToStrFunc { get; init; } = x => x.ToString();
+
+    [Parameter]
+    public string RemoveLabel { get; init; } = "Remove";
+
+    private string RemoveText(T x) => $"{RemoveLabel} {ToStrFunc(x)}";
+}
diff --git a/Damselfly.Web.Client/Components/General/Bricks.razor.css b/Damselfly.Web.Client/Components/General/Bricks.razor.css
@@ -0,0 +1,56 @@
+.bricklist {
+    display: flex;
+    margin: 0px;
+    padding: 2px;
+    flex-flow: row wrap;
+    min-height: auto;
+    max-height: 250px;
+    align-content: flex-start;
+    overflow-y: auto;
+}
+
+/* Masonary Keywords */
+.bricktext {
+    flex: 0 1 auto;
+    display: flex;
+    align-items: center;
+    margin: 2px;
+    padding: 2px 1px 1px 0px;
+    flex-wrap: nowrap;
+    font-size: 9pt;
+    cursor: default;
+    color: var(--keyword-text);
+    border: 0.5px solid var(--keyword-border);
+    border-radius: 6px;
+    background-color: var(--keyword-bg);
+}
+
+.deletebrick {
+    flex: 0 1 auto;
+    font-size: 10pt;
+    cursor: pointer;
+}
+
+.bricktext-label {
+    margin: 0 2px 0 2px;
+    text-wrap: none;
+    flex: 0 1 auto;
+}
+
+.bricktext-disabled {
+    margin: 0 2px 0 2px;
+    color: #999999;
+    flex: 0 1 auto;
+}
+
+.bricktext :not(:first-child) {
+    border-left: 0;
+}
+
+.bricktext :not(:last-child) {
+    border-right: 0;
+}
+
+.deletebrick {
+    padding: 0.2em 0.35em;
+}
diff --git a/Damselfly.Web.Client/Shared/SearchBar.razor b/Damselfly.Web.Client/Shared/SearchBar.razor
@@ -18,7 +18,7 @@
         <button class="btn btn-primary damselfly-searchtools" title="Reset Search" @onclick="@(() => searchService.Reset())">
             <i class="fas fa-times"/>
         </button>
-        <button class="btn btn-primary damselfly-searchtools" title="Advanced Search" @onclick="@(() => ToggleAdvancedSearch())">
+        <button class="btn btn-primary damselfly-searchtools" title="Advanced Search" @onclick="ToggleAdvancedSearch">
             @if( ShowAdvancedSearch )
             {
                 <i class="fas fa-chevron-up"/>
@@ -37,14 +37,8 @@
         @if( searchService.SearchHints.Any() )
         {
             <div class="search-hints">
-                <MudChipSet>
-                    @foreach( var hint in searchService.SearchHints )
-                    {
-                        <MudChip OnClose="@hint.Clear" Size="Size.Small" Color="Color.Tertiary">
-                            @hint.Description
-                        </MudChip>
-                    }
-                </MudChipSet>
+                <Bricks Items="@searchService.SearchHints" ToStrFunc="x => x.Description" 
+                        RemoveLabel="Clear filter" ItemRemoved="x => x.Clear()"/>
             </div>
         }
         else

diff --git a/Damselfly.Web.Client/_Imports.razor b/Damselfly.Web.Client/_Imports.razor
@@ -32,6 +32,7 @@
 @using Damselfly.Core.ScopedServices
 @using Damselfly.Web.Components
 @using Damselfly.Shared.Utils
+@using Damselfly.Web.Client.Components.General
 @using Damselfly.Web.Client.Shared
 @using Damselfly.Web.Client.Shared.Dialogs
 @using Variant = MudBlazor.Variant
diff --git a/Damselfly.Web.Client/wwwroot/version.js b/Damselfly.Web.Client/wwwroot/version.js
@@ -1 +1 @@
-const CACHE_VERSION='4.1.0-20231104091559'
+const CACHE_VERSION='4.1.0-20231107065840'
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		const CACHE_VERSION='4.1.0-20231104091559'
		const CACHE_VERSION='4.1.0-20231107065840'