From ac24ab14ea2ca777e0e7a2fcf8bf4832c3c4373b Mon Sep 17 00:00:00 2001
From: Mark Otway <mark@otway.com>
Date: Tue, 7 Nov 2023 07:00:41 +0000
Subject: [PATCH] Improve styling for filter bricks

---
 .DS_Store                                     | Bin 14340 -> 14340 bytes
 .../Components/General/Bricks.razor           |  38 ++++++++++++
 .../Components/General/Bricks.razor.css       |  56 ++++++++++++++++++
 Damselfly.Web.Client/Shared/SearchBar.razor   |  12 +---
 Damselfly.Web.Client/_Imports.razor           |   1 +
 Damselfly.Web.Client/wwwroot/version.js       |   2 +-
 6 files changed, 99 insertions(+), 10 deletions(-)
 create mode 100644 Damselfly.Web.Client/Components/General/Bricks.razor
 create mode 100644 Damselfly.Web.Client/Components/General/Bricks.razor.css

diff --git a/.DS_Store b/.DS_Store
index 3872ab331a7383b706ee1b0858305b41a62cb217..3bb38643ffd9e0428acafb382b407c10109259d4 100644
GIT binary patch
delta 35
rcmZoEXerphB0M=!<i_TE!n!=0ITd6%CjVDg-|R23i+wY@!C!U&^)L+=

delta 55
zcmV-70LcG@aD;HM1QU~*6?O+QIV>PFG%}MB7#ouw86=bQ6DhOj6Cw<=3m_W^lW`<0
Nvrrhd2eSt-{RiU75j+3@

diff --git a/Damselfly.Web.Client/Components/General/Bricks.razor b/Damselfly.Web.Client/Components/General/Bricks.razor
new file mode 100644
index 00000000..655839ba
--- /dev/null
+++ 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)}";
+}
\ No newline at end of file
diff --git a/Damselfly.Web.Client/Components/General/Bricks.razor.css b/Damselfly.Web.Client/Components/General/Bricks.razor.css
new file mode 100644
index 00000000..de463571
--- /dev/null
+++ 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
index d0c1ed09..d8acffbe 100644
--- 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
index 0298ea0f..93f7db50 100644
--- 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
\ No newline at end of file
diff --git a/Damselfly.Web.Client/wwwroot/version.js b/Damselfly.Web.Client/wwwroot/version.js
index cae66b83..4d029a72 100644
--- 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'