Allow toggle actions to contain an icon

diff --git a/ts/WoltLabSuite/Core/Ui/Object/Action/Toggle.ts b/ts/WoltLabSuite/Core/Ui/Object/Action/Toggle.ts
index 88f9e76d3941a3471da8ae5225684eabdddc2321..07834df2afbbc4eb5364ccc6830bd66bbee2600d 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Object/Action/Toggle.ts
+++ b/ts/WoltLabSuite/Core/Ui/Object/Action/Toggle.ts
@@ -17,16 +17,20 @@ function toggleObject(data: ObjectActionData): void {
     return;
   }
 
-  if (actionElement.classList.contains("fa-square-o")) {
-    actionElement.classList.replace("fa-square-o", "fa-check-square-o");
+  const icon: FaIcon | null =
+    actionElement.nodeName === "FA-ICON" ? (actionElement as FaIcon) : actionElement.querySelector("fa-icon");
+  if (icon) {
+    if (icon.name === "square") {
+      icon.setIcon("square-check", false);
 
-    const newTitle = actionElement.dataset.disableTitle || Language.get("wcf.global.button.disable");
-    actionElement.title = newTitle;
-  } else {
-    actionElement.classList.replace("fa-check-square-o", "fa-square-o");
+      const newTitle = actionElement.dataset.disableTitle || Language.get("wcf.global.button.disable");
+      actionElement.title = newTitle;
+    } else {
+      icon.setIcon("square", false);
 
-    const newTitle = actionElement.dataset.enableTitle || Language.get("wcf.global.button.enable");
-    actionElement.title = newTitle;
+      const newTitle = actionElement.dataset.enableTitle || Language.get("wcf.global.button.enable");
+      actionElement.title = newTitle;
+    }
   }
 }
 

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Object/Action/Toggle.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Object/Action/Toggle.js
index be21238d706f14699f4f8d7692c6a4ca1f06173e..e436e411e6035f841f7318f58e72857dabac2c0b 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Object/Action/Toggle.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Object/Action/Toggle.js
@@ -17,15 +17,18 @@ define(["require", "exports", "tslib", "../../../Language", "./Handler"], functi
         if (!actionElement || actionElement.dataset.objectActionHandler) {
             return;
         }
-        if (actionElement.classList.contains("fa-square-o")) {
-            actionElement.classList.replace("fa-square-o", "fa-check-square-o");
-            const newTitle = actionElement.dataset.disableTitle || Language.get("wcf.global.button.disable");
-            actionElement.title = newTitle;
-        }
-        else {
-            actionElement.classList.replace("fa-check-square-o", "fa-square-o");
-            const newTitle = actionElement.dataset.enableTitle || Language.get("wcf.global.button.enable");
-            actionElement.title = newTitle;
+        const icon = actionElement.nodeName === "FA-ICON" ? actionElement : actionElement.querySelector("fa-icon");
+        if (icon) {
+            if (icon.name === "square") {
+                icon.setIcon("square-check", false);
+                const newTitle = actionElement.dataset.disableTitle || Language.get("wcf.global.button.disable");
+                actionElement.title = newTitle;
+            }
+            else {
+                icon.setIcon("square", false);
+                const newTitle = actionElement.dataset.enableTitle || Language.get("wcf.global.button.enable");
+                actionElement.title = newTitle;
+            }
         }
     }
     function setup() {