Replace legacy icons in TypeScript

diff --git a/ts/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.ts b/ts/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.ts
index 96dc4e6a060c61385fa60182b6f6598fdb773dfd..a536db3b5c11d8646694973161b8e75709cd03c0 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.ts
+++ b/ts/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.ts
@@ -244,7 +244,8 @@ export class UiItemListLineBreakSeparatedText {
     itemElement.dataset.value = item;
 
     const deleteButton = document.createElement("span");
-    deleteButton.classList.add("icon", "icon16", "fa-times", "jsDeleteItem", "jsTooltip", "pointer");
+    deleteButton.innerHTML = '<fa-icon size="16" name="xmark" solid></fa-icon>';
+    deleteButton.classList.add("jsDeleteItem", "jsTooltip", "pointer");
     deleteButton.title = Language.get("wcf.global.button.delete");
     deleteButton.addEventListener("click", (ev) => this.deleteItem(ev));
     itemElement.append(deleteButton);

diff --git a/ts/WoltLabSuite/Core/Ui/Password.ts b/ts/WoltLabSuite/Core/Ui/Password.ts
index bb1bf8e36e7fc155d04692d058b02b6bf2b27730..ea47d2659acc1d7eabe59a8eff0fc4aeb11590c0 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Password.ts
+++ b/ts/WoltLabSuite/Core/Ui/Password.ts
@@ -41,8 +41,9 @@ function initElement(input: HTMLInputElement): void {
   button.setAttribute("aria-hidden", "true");
   inputAddon.appendChild(button);
 
-  const icon = document.createElement("span");
-  icon.classList.add("icon", "icon16", "fa-eye");
+  const icon = document.createElement("fa-icon");
+  icon.size = 16;
+  icon.setIcon("eye", false);
   button.appendChild(icon);
 
   button.addEventListener("click", () => {
@@ -63,15 +64,13 @@ function initElement(input: HTMLInputElement): void {
   }
 }
 
-function toggle(input: HTMLInputElement, button: HTMLElement, icon: HTMLElement): void {
+function toggle(input: HTMLInputElement, button: HTMLElement, icon: FaIcon): void {
   if (input.type === "password") {
-    icon.classList.remove("fa-eye");
-    icon.classList.add("fa-eye-slash");
+    icon.setIcon("eye-slash", false);
     button.dataset.tooltip = Language.get("wcf.global.form.password.button.hide");
     input.type = "text";
   } else {
-    icon.classList.add("fa-eye");
-    icon.classList.remove("fa-eye-slash");
+    icon.setIcon("eye-slash", true);
     button.dataset.tooltip = Language.get("wcf.global.form.password.button.show");
     input.type = "password";
   }

diff --git a/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts b/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts
index 1bf67b01da8f1a97a2a16c94af2806629765fe47..e1fe6f33f6edd44e367e46a6e0e592383a8624d0 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts
+++ b/ts/WoltLabSuite/Core/Ui/Poll/Editor.ts
@@ -153,19 +153,22 @@ class UiPollEditor {
     listItem.appendChild(pollOptionInput);
 
     const sortHandle = document.createElement("span");
-    sortHandle.classList.add("icon", "icon16", "fa-arrows", "sortableNodeHandle");
+    sortHandle.innerHTML = '<fa-icon size="16" name="up-down-left-right" solid></fa-icon>';
+    sortHandle.classList.add("sortableNodeHandle");
     pollOptionInput.appendChild(sortHandle);
 
     // buttons
     const addButton = document.createElement("button");
-    addButton.classList.add("icon", "icon16", "fa-plus", "jsTooltip", "jsAddOption", "pointer");
-    addButton.setAttribute("title", Language.get("wcf.poll.button.addOption"));
+    addButton.innerHTML = '<fa-icon size="16" name="plus" solid></fa-icon>';
+    addButton.classList.add("jsTooltip", "jsAddOption");
+    addButton.title = Language.get("wcf.poll.button.addOption");
     addButton.addEventListener("click", () => this.createOption());
     pollOptionInput.appendChild(addButton);
 
     const deleteButton = document.createElement("button");
-    deleteButton.classList.add("icon", "icon16", "fa-times", "jsTooltip", "jsDeleteOption", "pointer");
-    deleteButton.setAttribute("title", Language.get("wcf.poll.button.removeOption"));
+    deleteButton.innerHTML = '<fa-icon size="16" name="xmark" solid></fa-icon>';
+    deleteButton.classList.add("jsTooltip", "jsDeleteOption");
+    deleteButton.title = Language.get("wcf.poll.button.removeOption");
     deleteButton.addEventListener("click", () => this.removeOption(deleteButton));
     pollOptionInput.appendChild(deleteButton);
 

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.js
index 4d8f6d3ba84a4c7ad4e38b4c6815c5251dc90af8..9cf3766375512d8d8f3f1b8aff8633c4d5c197a9 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.js
@@ -200,7 +200,8 @@ define(["require", "exports", "tslib", "../Confirmation", "../../Language", "../
             const itemElement = document.createElement("li");
             itemElement.dataset.value = item;
             const deleteButton = document.createElement("span");
-            deleteButton.classList.add("icon", "icon16", "fa-times", "jsDeleteItem", "jsTooltip", "pointer");
+            deleteButton.innerHTML = '<fa-icon size="16" name="xmark" solid></fa-icon>';
+            deleteButton.classList.add("jsDeleteItem", "jsTooltip", "pointer");
             deleteButton.title = Language.get("wcf.global.button.delete");
             deleteButton.addEventListener("click", (ev) => this.deleteItem(ev));
             itemElement.append(deleteButton);

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js
index 9cf9a622a907c3d3cc3ce40a4472b0e3a6d3067c..3e87d79f54b7603d78035ab3458b50264d2127c0 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js
@@ -38,8 +38,9 @@ define(["require", "exports", "tslib", "../Dom/Change/Listener", "../Language"],
         button.classList.add("button", "inputSuffix", "jsTooltip");
         button.setAttribute("aria-hidden", "true");
         inputAddon.appendChild(button);
-        const icon = document.createElement("span");
-        icon.classList.add("icon", "icon16", "fa-eye");
+        const icon = document.createElement("fa-icon");
+        icon.size = 16;
+        icon.setIcon("eye", false);
         button.appendChild(icon);
         button.addEventListener("click", () => {
             toggle(input, button, icon);
@@ -58,14 +59,12 @@ define(["require", "exports", "tslib", "../Dom/Change/Listener", "../Language"],
     }
     function toggle(input, button, icon) {
         if (input.type === "password") {
-            icon.classList.remove("fa-eye");
-            icon.classList.add("fa-eye-slash");
+            icon.setIcon("eye-slash", false);
             button.dataset.tooltip = Language.get("wcf.global.form.password.button.hide");
             input.type = "text";
         }
         else {
-            icon.classList.add("fa-eye");
-            icon.classList.remove("fa-eye-slash");
+            icon.setIcon("eye-slash", true);
             button.dataset.tooltip = Language.get("wcf.global.form.password.button.show");
             input.type = "password";
         }

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Poll/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Poll/Editor.js
index a0615545e42c99783824f908c3ddc1c23f842ff1..a3c473583df0b4690f2c51d50e1b20973da794bc 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Poll/Editor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Poll/Editor.js
@@ -85,17 +85,20 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../Sorta
             pollOptionInput.classList.add("pollOptionInput");
             listItem.appendChild(pollOptionInput);
             const sortHandle = document.createElement("span");
-            sortHandle.classList.add("icon", "icon16", "fa-arrows", "sortableNodeHandle");
+            sortHandle.innerHTML = '<fa-icon size="16" name="up-down-left-right" solid></fa-icon>';
+            sortHandle.classList.add("sortableNodeHandle");
             pollOptionInput.appendChild(sortHandle);
             // buttons
             const addButton = document.createElement("button");
-            addButton.classList.add("icon", "icon16", "fa-plus", "jsTooltip", "jsAddOption", "pointer");
-            addButton.setAttribute("title", Language.get("wcf.poll.button.addOption"));
+            addButton.innerHTML = '<fa-icon size="16" name="plus" solid></fa-icon>';
+            addButton.classList.add("jsTooltip", "jsAddOption");
+            addButton.title = Language.get("wcf.poll.button.addOption");
             addButton.addEventListener("click", () => this.createOption());
             pollOptionInput.appendChild(addButton);
             const deleteButton = document.createElement("button");
-            deleteButton.classList.add("icon", "icon16", "fa-times", "jsTooltip", "jsDeleteOption", "pointer");
-            deleteButton.setAttribute("title", Language.get("wcf.poll.button.removeOption"));
+            deleteButton.innerHTML = '<fa-icon size="16" name="xmark" solid></fa-icon>';
+            deleteButton.classList.add("jsTooltip", "jsDeleteOption");
+            deleteButton.title = Language.get("wcf.poll.button.removeOption");
             deleteButton.addEventListener("click", () => this.removeOption(deleteButton));
             pollOptionInput.appendChild(deleteButton);
             // input field