Remove the collapse feature, improve visuals of categories

Author: dtdesign

com.woltlab.wcf/templates/shared_categorizedSingleSelectionFormField.tpl

@@ -19,8 +19,13 @@
 	</div>
 	<ul class="scrollableCheckboxList">
 		{foreach from=$field->getNestedOptions() item=__fieldNestedOption}
-			<li{if $__fieldNestedOption[depth] > 0} style="padding-left: {$__fieldNestedOption[depth]*20}px"{/if}{if !$__fieldNestedOption[isSelectable]} data-open="true"{/if}>
-				{if $__fieldNestedOption[isSelectable]}
+			<li
+				{if $__fieldNestedOption[depth] > 0} style="padding-left: {$__fieldNestedOption[depth]*20}px"{/if}
+				{if !$__fieldNestedOption[isSelectable]} class="scrollableCheckboxList__category"{/if}
+			>
+				{if !$__fieldNestedOption[isSelectable]}
+					<span class="scrollableCheckboxList__category__label">{unsafe:$__fieldNestedOption[label]}</span>
+				{else}
 					<label>
 						<input {*
 							*}type="radio" {*
@@ -31,8 +36,6 @@
 							*}{if $field->isImmutable()} disabled{/if}{*
 						*}> <span>{unsafe:$__fieldNestedOption[label]}</span>
 					</label>
-				{else}
-					<button type="button">{icon name="chevron-down"} {unsafe:$__fieldNestedOption[label]}</button>
 				{/if}
 			</li>
 		{/foreach}

ts/WoltLabSuite/Core/Component/ItemList/Categorized.ts

@@ -82,28 +82,10 @@ export class CategorizedItemList {
           element: li,
         };
         this.#categories.push(category);
-
-        li.addEventListener("click", (event) => {
-          this.#categoryClick(event, li, items);
-        });
       }
     }
   }
 
-  #categoryClick(event: MouseEvent, li: HTMLLIElement, items: Item[]): void {
-    event.preventDefault();
-
-    const isOpen = !this.#categoryIsOpen(li);
-    li.dataset.open = isOpen ? "true" : "false";
-
-    li.querySelector("fa-icon")!.setIcon(isOpen ? "chevron-down" : "chevron-right");
-
-    this.#showItems({
-      items: items,
-      element: li,
-    });
-  }
-
   #categoryIsOpen(category: HTMLLIElement): boolean {
     return category.dataset.open === "true";
   }

wcfsetup/install/files/js/WoltLabSuite/Core/Component/ItemList/Categorized.js

@@ -14,6 +14,28 @@
 	}
 }
 
+.scrollableCheckboxList__category:not(:first-child) {
+	margin-top: 5px;
+}
+
+.scrollableCheckboxList__category__label {
+	align-items: center;
+	color: var(--wcfContentDimmedText);
+	column-gap: 10px;
+	display: flex;
+	font-size: 12px;
+	margin-bottom: 5px;
+	white-space: nowrap;
+
+	&::after {
+        border-top: 1px solid currentColor;
+		content: "";
+        display: block;
+        width: 100%;
+        opacity: 0.34;
+	}
+}
+
 .dialogContent .scrollableCheckboxList {
 	max-height: 300px;
 }