Support for ACP menu item actions

See https://github.com/WoltLab/WCF/issues/3953#issuecomment-1010012633

diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Page/Menu/Main/Backend.ts b/ts/WoltLabSuite/Core/Acp/Ui/Page/Menu/Main/Backend.ts
index adb980799b6aee6663fee47d9e1fe3c41a2e0efc..c06a2b47cbc9411acd0fd4bd5ecd233a8762e0c9 100644 (file)
--- a/ts/WoltLabSuite/Core/Acp/Ui/Page/Menu/Main/Backend.ts
+++ b/ts/WoltLabSuite/Core/Acp/Ui/Page/Menu/Main/Backend.ts
@@ -27,9 +27,11 @@ function getSubMenuItems(subMenu: HTMLElement, menuItem: string): MenuItem[] {
 
 function getMenuItems(category: HTMLOListElement): MenuItem[] {
   return Array.from(category.querySelectorAll(".acpPageSubMenuLink")).map((link: HTMLAnchorElement) => {
+    const children = getMenuItemActions(link);
+
     return {
       active: link.classList.contains("active"),
-      children: [],
+      children,
       counter: 0,
       depth: 2,
       link: link.href,
@@ -38,6 +40,24 @@ function getMenuItems(category: HTMLOListElement): MenuItem[] {
   });
 }
 
+function getMenuItemActions(link: HTMLAnchorElement): MenuItem[] {
+  const listItem = link.parentElement!;
+  if (!listItem.classList.contains("acpPageSubMenuLinkWrapper")) {
+    return [];
+  }
+
+  return Array.from(listItem.querySelectorAll(".acpPageSubMenuIcon")).map((action: HTMLAnchorElement) => {
+    return {
+      active: action.classList.contains("active"),
+      children: [],
+      counter: 0,
+      depth: 2,
+      link: action.href,
+      title: action.dataset.tooltip || action.title,
+    };
+  });
+}
+
 export class AcpUiPageMenuMainBackend implements PageMenuMainProvider {
   getMenuItems(_container: HTMLElement): MenuItem[] {
     const menu = document.getElementById("acpPageMenu")!;

diff --git a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main/Frontend.ts b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main/Frontend.ts
index 0cabfc86b7997ef2a1769b30b2305c8aeddea6f1..17043aab8a828a121ce3a9ec3558b5af5d3391e0 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main/Frontend.ts
+++ b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main/Frontend.ts
@@ -23,7 +23,7 @@ function normalizeMenuItem(menuItem: HTMLElement, depth: MenuItemDepth): MenuIte
   let children: MenuItem[] = [];
   if (subMenu instanceof HTMLOListElement) {
     let childDepth = depth;
-    if (childDepth < 2) {
+    if (childDepth < 3) {
       childDepth = (depth + 1) as MenuItemDepth;
     }
 

diff --git a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main/Provider.ts b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main/Provider.ts
index 9bb39333e9a823f546b407009eec802061772c9c..6ffdd83727ba8c6f9a5531172761f2853b58c3d7 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main/Provider.ts
+++ b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main/Provider.ts
@@ -9,7 +9,7 @@
  * @woltlabExcludeBundle all
  */
 
-export type MenuItemDepth = 0 | 1 | 2;
+export type MenuItemDepth = 0 | 1 | 2 | 3;
 
 export type MenuItem = {
   active: boolean;

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu/Main/Backend.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu/Main/Backend.js
index 7268fcc63113d8280a8907e632453f61629191b1..3044adbb9f1a55c17da83034e96ba72e1637f4bb 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu/Main/Backend.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Page/Menu/Main/Backend.js
@@ -26,9 +26,10 @@ define(["require", "exports"], function (require, exports) {
     }
     function getMenuItems(category) {
         return Array.from(category.querySelectorAll(".acpPageSubMenuLink")).map((link) => {
+            const children = getMenuItemActions(link);
             return {
                 active: link.classList.contains("active"),
-                children: [],
+                children,
                 counter: 0,
                 depth: 2,
                 link: link.href,
@@ -36,6 +37,22 @@ define(["require", "exports"], function (require, exports) {
             };
         });
     }
+    function getMenuItemActions(link) {
+        const listItem = link.parentElement;
+        if (!listItem.classList.contains("acpPageSubMenuLinkWrapper")) {
+            return [];
+        }
+        return Array.from(listItem.querySelectorAll(".acpPageSubMenuIcon")).map((action) => {
+            return {
+                active: action.classList.contains("active"),
+                children: [],
+                counter: 0,
+                depth: 2,
+                link: action.href,
+                title: action.dataset.tooltip || action.title,
+            };
+        });
+    }
     class AcpUiPageMenuMainBackend {
         getMenuItems(_container) {
             const menu = document.getElementById("acpPageMenu");

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main/Frontend.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main/Frontend.js
index 034d9315ad7f82ac4b02fa41f55b9d4f3fa9ec39..913eedce4dee11a0b6419c39f31d8b2dd7f053bf 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main/Frontend.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main/Frontend.js
@@ -22,7 +22,7 @@ define(["require", "exports"], function (require, exports) {
         let children = [];
         if (subMenu instanceof HTMLOListElement) {
             let childDepth = depth;
-            if (childDepth < 2) {
+            if (childDepth < 3) {
                 childDepth = (depth + 1);
             }
             children = Array.from(subMenu.children).map((subMenuItem) => {

diff --git a/wcfsetup/install/files/style/ui/pageMenu.scss b/wcfsetup/install/files/style/ui/pageMenu.scss
index e0e723b46c92c0fcea7c575bdf2a4ff8c29b1fa4..f691e2dcdeac9eb3bd0c02a9fe41aaabb5339ae3 100644 (file)
--- a/wcfsetup/install/files/style/ui/pageMenu.scss
+++ b/wcfsetup/install/files/style/ui/pageMenu.scss
@@ -184,7 +184,7 @@
 
 .pageMenuMainItem[data-depth="2"] {
        .pageMenuMainItemList {
-               padding: 0;
+               padding: 0 10px;
        }
 
        .pageMenuMainItemLabel,