From 58fda52b2b7ebcbdf2fa8e02b5b00869da63bb5d Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Tue, 5 Nov 2024 17:56:45 +0100
Subject: [PATCH] Improve visuals of the filter buttons

---
 com.woltlab.wcf/templates/shared_gridView.tpl         |  5 ++++-
 ts/WoltLabSuite/Core/Component/GridView.ts            |  4 +++-
 .../files/js/WoltLabSuite/Core/Component/GridView.js  |  4 +++-
 wcfsetup/install/files/style/ui/gridView.scss         | 11 +++++++++++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/com.woltlab.wcf/templates/shared_gridView.tpl b/com.woltlab.wcf/templates/shared_gridView.tpl
index 1377dace36..370238ea28 100644
--- a/com.woltlab.wcf/templates/shared_gridView.tpl
+++ b/com.woltlab.wcf/templates/shared_gridView.tpl
@@ -3,7 +3,10 @@
 		<div class="gridView__filterBar">
 			<div class="gridView__filters" id="{$view->getID()}_filters">
 				{foreach from=$view->getActiveFilters() item='value' key='key'}
-					<button type="button" class="button small" data-filter="{$key}" data-filter-value="{$value}">{$view->getFilterLabel($key)}</button>
+					<button type="button" class="button small" data-filter="{$key}" data-filter-value="{$value}">
+						{icon name='circle-xmark'}
+						{$view->getFilterLabel($key)}
+					</button>
 				{/foreach}
 			</div>
 			<div class="gridView__filterButton">
diff --git a/ts/WoltLabSuite/Core/Component/GridView.ts b/ts/WoltLabSuite/Core/Component/GridView.ts
index c6bc0bed22..d94577cbb0 100644
--- a/ts/WoltLabSuite/Core/Component/GridView.ts
+++ b/ts/WoltLabSuite/Core/Component/GridView.ts
@@ -230,7 +230,9 @@ export class GridView {
       const button = document.createElement("button");
       button.type = "button";
       button.classList.add("button", "small");
-      button.innerText = labels[key];
+      const icon = document.createElement("fa-icon");
+      icon.setIcon("circle-xmark");
+      button.append(icon, labels[key]);
       button.addEventListener("click", () => {
         this.#removeFilter(key);
       });
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView.js
index 82c582b464..79df19ffe0 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView.js
@@ -177,7 +177,9 @@ define(["require", "exports", "tslib", "../Api/GridViews/GetRows", "../Dom/Util"
                 const button = document.createElement("button");
                 button.type = "button";
                 button.classList.add("button", "small");
-                button.innerText = labels[key];
+                const icon = document.createElement("fa-icon");
+                icon.setIcon("circle-xmark");
+                button.append(icon, labels[key]);
                 button.addEventListener("click", () => {
                     this.#removeFilter(key);
                 });
diff --git a/wcfsetup/install/files/style/ui/gridView.scss b/wcfsetup/install/files/style/ui/gridView.scss
index 8d4b0d96c9..113f3be63e 100644
--- a/wcfsetup/install/files/style/ui/gridView.scss
+++ b/wcfsetup/install/files/style/ui/gridView.scss
@@ -123,6 +123,17 @@
 	justify-content: space-between;
 	border-bottom: 1px solid var(--wcfContentBorder);
 	padding-bottom: 10px;
+	gap: 5px;
+}
+
+.gridView__filters {
+	display: flex;
+	gap: 5px;
+	flex-wrap: wrap;
+}
+
+.gridView__filterButton {
+	flex: 0 0 auto;
 }
 
 .gridView__pagination {
-- 
2.20.1