Improve visuals of the filter buttons

diff --git a/com.woltlab.wcf/templates/shared_gridView.tpl b/com.woltlab.wcf/templates/shared_gridView.tpl
index 1377dace36e81f193d00211bcbadbea749e4b1f4..370238ea28f95670157161b1d05a88af7142428b 100644 (file)
--- 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 c6bc0bed226ff6ac58cd06c1c6338991806bf7df..d94577cbb0e90e1ddf9c0cd90a31567f8988e8d5 100644 (file)
--- 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 82c582b4648d177b1486695ee5679817397bd940..79df19ffe02f9a2f34d941b9d8947b02feca547a 100644 (file)
--- 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 8d4b0d96c9f1e926d4cfc46196c01c52fc03fe37..113f3be63e818052ff977c1e3cee79a14ac9aacd 100644 (file)
--- 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 {