Implement a new WysiwygTabFormContainer, which can have an icon

Author: Cyperghost

com.woltlab.wcf/templates/shared_wysiwygTabMenuFormContainer.tpl

@@ -1 +1,29 @@
-{include file='shared_tabMenuFormContainer' __tabMenuCSSClassName='messageTabMenuNavigation'}
+<div id="{$container->getPrefixedId()}Container"{*
+	*}{if !$container->getClasses()|empty} class="{implode from=$container->getClasses() item='class' glue=' '}{$class}{/implode}"{/if}{*
+	*}{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{*
+	*}{if !$container->checkDependencies()} hidden{/if}>
+	<nav class="messageTabMenuNavigation jsOnly">
+		<ul>
+			{foreach from=$container item='child'}
+				{if $child->isAvailable()}
+					<li data-name="{$child->getPrefixedId()|rawurlencode}Container"{if !$child->checkDependencies()} hidden{/if}>
+						<button type="button">
+							{if $child->getIcon()}{icon name=$child->getIcon()}{/if}
+							<span>{@$child->getLabel()}</span>
+						</button>
+					</li>
+				{/if}
+			{/foreach}
+		</ul>
+	</nav>
+
+	{include file='shared_formContainerChildren'}
+</div>
+
+{include file='shared_formContainerDependencies'}
+
+<script data-relocate="true">
+	require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/WysiwygTabMenu'], ({ WysiwygTabMenu }) => {
+		new WysiwygTabMenu('{@$container->getPrefixedId()|encodeJS}Container');
+	});
+</script>

ts/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/WysiwygTabMenu.ts

@@ -0,0 +1,36 @@
+/**
+ * Container visibility handler implementation for a wysiwyg tab menu that checks visibility
+ * based on the visibility of its tab menu list items.
+ *
+ * @author  Olaf BRaun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since  6.2
+ */
+
+import Abstract from "./Abstract";
+import * as DependencyManager from "../Manager";
+import * as DomUtil from "../../../../../Dom/Util";
+
+export class WysiwygTabMenu extends Abstract {
+  public checkContainer(): void {
+    // only consider containers that have not been hidden by their own dependencies
+    if (DependencyManager.isHiddenByDependencies(this._container)) {
+      return;
+    }
+
+    const containerIsVisible = !this._container.hidden;
+    const listItems = this._container.parentNode!.querySelectorAll(
+      "#" + DomUtil.identify(this._container) + " > nav > ul > li",
+    );
+    const containerShouldBeVisible = Array.from(listItems).some((child: HTMLElement) => !child.hidden);
+
+    if (containerIsVisible !== containerShouldBeVisible) {
+      this._container.hidden = !containerShouldBeVisible;
+
+      // check containers again to make sure parent containers can react to
+      // changing the visibility of this container
+      DependencyManager.checkContainers();
+    }
+  }
+}

wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/WysiwygTabMenu.js

@@ -8,7 +8,6 @@
 use wcf\system\event\EventHandler;
 use wcf\system\form\builder\button\wysiwyg\WysiwygPreviewFormButton;
 use wcf\system\form\builder\container\FormContainer;
-use wcf\system\form\builder\container\TabFormContainer;
 use wcf\system\form\builder\field\TMaximumLengthFormField;
 use wcf\system\form\builder\field\TMinimumLengthFormField;
 use wcf\system\form\builder\field\wysiwyg\WysiwygAttachmentFormField;
@@ -509,20 +508,23 @@ public function populate()
                 ->appendChildren([
                     $this->smiliesContainer,
 
-                    TabFormContainer::create($this->wysiwygId . 'AttachmentsTab')
+                    WysiwygTabFormContainer::create($this->wysiwygId . 'AttachmentsTab')
                         ->addClass('formAttachmentContent')
                         ->label('wcf.attachment.attachments')
+                        ->setIcon('paperclip')
                         ->appendChild(
                             FormContainer::create($this->wysiwygId . 'AttachmentsContainer')
                                 ->appendChild($this->attachmentField)
                         ),
 
-                    TabFormContainer::create($this->wysiwygId . 'SettingsTab')
+                    WysiwygTabFormContainer::create($this->wysiwygId . 'SettingsTab')
                         ->label('wcf.message.settings')
+                        ->setIcon('gear')
                         ->appendChild($this->settingsContainer),
 
-                    TabFormContainer::create($this->wysiwygId . 'PollTab')
+                    WysiwygTabFormContainer::create($this->wysiwygId . 'PollTab')
                         ->label('wcf.poll.management')
+                        ->setIcon('chart-bar')
                         ->appendChild($this->pollContainer),
                 ]),
         ]);

wcfsetup/install/files/lib/system/form/builder/container/wysiwyg/WysiwygFormContainer.class.php

@@ -76,4 +76,12 @@ public function populate()
             $this->addClass('messageTabMenu');
         }
     }
+
+    /**
+     * @see WysiwygTabFormContainer::getIcon()
+     */
+    public function getIcon(): string
+    {
+        return 'face-smile';
+    }
 }

wcfsetup/install/files/lib/system/form/builder/container/wysiwyg/WysiwygSmileyFormContainer.class.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace wcf\system\form\builder\container\wysiwyg;
+
+use wcf\system\form\builder\container\TabFormContainer;
+
+/**
+ * Represents a container that is a tab of a wysiwyg tab menu.
+ *
+ * @author      Olaf Braun
+ * @copyright   2001-2025 WoltLab GmbH
+ * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since       6.2
+ */
+class WysiwygTabFormContainer extends TabFormContainer
+{
+    protected ?string $icon = null;
+
+    /**
+     * Gets the icon associated with the tab.
+     */
+    public function getIcon(): ?string
+    {
+        return $this->icon;
+    }
+
+    /**
+     * Sets the icon associated with the tab.
+     */
+    public function setIcon(?string $icon): static
+    {
+        $this->icon = $icon;
+
+        return $this;
+    }
+}