From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 12 Aug 2022 15:02:09 +0000 (+0200)
Subject: Replace legacy icons in TypeScript
X-Git-Tag: 6.0.0_Alpha_1~1024^2~2^2~58
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=d2729cf490c0e8c95011a5eee097c9d42749c8d9;p=GitHub%2FWoltLab%2FWCF.git

Replace legacy icons in TypeScript
---

diff --git a/ts/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.ts b/ts/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.ts
index 96dc4e6a06..a536db3b5c 100644
--- 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 bb1bf8e36e..ea47d2659a 100644
--- 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 1bf67b01da..e1fe6f33f6 100644
--- 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 4d8f6d3ba8..9cf3766375 100644
--- 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 9cf9a622a9..3e87d79f54 100644
--- 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 a0615545e4..a3c473583d 100644
--- 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