Visual separator for specialized search filters

See https://www.woltlab.com/community/thread/295502-kategorie-auswahl-ist-verrutscht/

diff --git a/com.woltlab.wcf/templates/search.tpl b/com.woltlab.wcf/templates/search.tpl
index 61b248f6885e4e36d0206c5cbde2032e988edfbf..8efade706ba5a7a4c93e108a289a12d2e95b4124 100644 (file)
--- a/com.woltlab.wcf/templates/search.tpl
+++ b/com.woltlab.wcf/templates/search.tpl
@@ -65,6 +65,8 @@
                                {event name='searchFilters'}
                        </div>
 
+                       <div class="searchFiltersTitle" aria-hidden="true" hidden></div>
+
                        {foreach from=$objectTypes key=objectTypeName item=objectType}
                                {if $objectType->isAccessible() && $objectType->getFormTemplateName()}
                                        <div class="searchFilters objectTypeSearchFilters" data-object-type="{$objectTypeName}" hidden>

diff --git a/ts/WoltLabSuite/Core/Ui/Search/Extended.ts b/ts/WoltLabSuite/Core/Ui/Search/Extended.ts
index 51cdaac1c16324d2b7d3f3358ecdee1738d1cba5..6115fc36f4a865a680b86fefc73d1b35eefb1af3 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Search/Extended.ts
+++ b/ts/WoltLabSuite/Core/Ui/Search/Extended.ts
@@ -75,9 +75,25 @@ export class UiSearchExtended {
   }
 
   private changeType(): void {
+    let hasVisibleFilters = false;
     document.querySelectorAll(".objectTypeSearchFilters").forEach((filter: HTMLElement) => {
-      filter.hidden = filter.dataset.objectType !== this.typeInput.value;
+      if (filter.dataset.objectType === this.typeInput.value) {
+        hasVisibleFilters = true;
+        filter.hidden = false;
+      } else {
+        filter.hidden = true;
+      }
     });
+
+    const title = document.querySelector(".searchFiltersTitle") as HTMLElement;
+    if (hasVisibleFilters) {
+      const selectedOption = this.typeInput.selectedOptions.item(0)!;
+      title.textContent = selectedOption.textContent!.trim();
+
+      title.hidden = false;
+    } else {
+      title.hidden = true;
+    }
   }
 
   private async search(): Promise<void> {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js
index cdd4d0900d709a1d59a750e35562809e7d1953b6..c9029526f8b8eacf325de01f9fbc03a232477d3e 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js
@@ -51,9 +51,25 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Date/Picker", "../..
             });
         }
         changeType() {
+            let hasVisibleFilters = false;
             document.querySelectorAll(".objectTypeSearchFilters").forEach((filter) => {
-                filter.hidden = filter.dataset.objectType !== this.typeInput.value;
+                if (filter.dataset.objectType === this.typeInput.value) {
+                    hasVisibleFilters = true;
+                    filter.hidden = false;
+                }
+                else {
+                    filter.hidden = true;
+                }
             });
+            const title = document.querySelector(".searchFiltersTitle");
+            if (hasVisibleFilters) {
+                const selectedOption = this.typeInput.selectedOptions.item(0);
+                title.textContent = selectedOption.textContent.trim();
+                title.hidden = false;
+            }
+            else {
+                title.hidden = true;
+            }
         }
         async search() {
             var _a;

diff --git a/wcfsetup/install/files/style/ui/search.scss b/wcfsetup/install/files/style/ui/search.scss
index f1e5197f036f69a219260a430fbac73419ecfb27..6600ab1937ce5167642d95256fe8c576ea3671d7 100644 (file)
--- a/wcfsetup/install/files/style/ui/search.scss
+++ b/wcfsetup/install/files/style/ui/search.scss
@@ -32,6 +32,31 @@
        margin-top: 20px;
 }
 
+.searchFiltersTitle {
+       align-items: center;
+       color: $wcfContentDimmedText;
+       display: flex;
+       margin-top: 10px;
+
+       &::before {
+               border-top: 1px solid $wcfContentBorderInner;
+               content: "";
+               flex: 0 0 20px;
+               margin-right: 10px;
+       }
+
+       &::after {
+               border-top: 1px solid $wcfContentBorderInner;
+               content: "";
+               flex: 1 0 auto;
+               margin-left: 10px;
+       }
+
+       & ~ .searchFilters {
+               margin-top: 10px;
+       }
+}
+
 @include screen-md-up {
        .searchFilters {
                columns: 2;
@@ -39,6 +64,9 @@
 
        .searchFilters > :is(div, dl) {
                break-inside: avoid-column;
+
+               /* work-around for Firefox */
+               overflow: hidden;
        }
 
        .searchFiltersContainer .searchButton {