From 9601adb9716493e9806b5140af3e84296a23984c Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 13 Aug 2022 20:31:41 +0200
Subject: [PATCH] Replace legacy icons

---
 ts/WoltLabSuite/Core/Ui/Acl/Simple.ts         | 26 ++++++++++---------
 ts/WoltLabSuite/Core/Ui/ItemList/Filter.ts    | 10 +++----
 wcfsetup/install/files/js/WCF.ACL.js          |  4 +--
 .../js/WoltLabSuite/Core/Ui/Acl/Simple.js     | 25 +++++++++---------
 .../WoltLabSuite/Core/Ui/ItemList/Filter.js   | 10 +++----
 5 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/ts/WoltLabSuite/Core/Ui/Acl/Simple.ts b/ts/WoltLabSuite/Core/Ui/Acl/Simple.ts
index de8adee87f..72d970695a 100644
--- a/ts/WoltLabSuite/Core/Ui/Acl/Simple.ts
+++ b/ts/WoltLabSuite/Core/Ui/Acl/Simple.ts
@@ -39,7 +39,6 @@ class UiAclSimple {
     });
 
     this.list = document.getElementById(this.prefix + "aclAccessList") as HTMLUListElement;
-    this.list.addEventListener("click", this.removeItem.bind(this));
 
     const excludedSearchValues: string[] = [];
     this.list.querySelectorAll(".aclLabel").forEach((label) => {
@@ -88,9 +87,11 @@ class UiAclSimple {
     const objectId = listItem.dataset.objectId!;
 
     const iconName = type === "group" ? "users" : "user";
-    const html = `<span class="icon icon16 fa-${iconName}"></span>
+    const html = `<fa-icon size="16" name="${iconName}" solid></fa-icon>
       <span class="aclLabel">${StringUtil.escapeHTML(label)}</span>
-      <span class="icon icon16 fa-times pointer jsTooltip" title="${Language.get("wcf.global.button.delete")}"></span>
+      <button class="aclItemDeleteButton jsTooltip" title="${Language.get("wcf.global.button.delete")}">
+        <fa-icon size="16" name="xmark" solid></fa-icon>
+      </button>
       <input type="hidden" name="${this.inputName}[${type}][]" value="${objectId}">`;
 
     const item = document.createElement("li");
@@ -107,23 +108,24 @@ class UiAclSimple {
 
     this.searchInput.addExcludedSearchValues(label);
 
+    const deleteButton = item.querySelector(".aclItemDeleteButton") as HTMLButtonElement;
+    deleteButton.addEventListener("click", (event) => this.removeItem(event));
+
     DomChangeListener.trigger();
 
     return false;
   }
 
   private removeItem(event: MouseEvent): void {
-    const target = event.target as HTMLElement;
-    if (target.classList.contains("fa-times")) {
-      const parent = target.parentElement!;
-      const label = parent.querySelector(".aclLabel")!;
-      this.searchInput.removeExcludedSearchValues(label.textContent!);
+    const target = event.currentTarget as HTMLButtonElement;
+    const parent = target.parentElement!;
+    const label = parent.querySelector(".aclLabel")!;
+    this.searchInput.removeExcludedSearchValues(label.textContent!);
 
-      parent.remove();
+    parent.remove();
 
-      if (this.list.childElementCount === 0) {
-        DomUtil.hide(this.aclListContainer);
-      }
+    if (this.list.childElementCount === 0) {
+      DomUtil.hide(this.aclListContainer);
     }
   }
 
diff --git a/ts/WoltLabSuite/Core/Ui/ItemList/Filter.ts b/ts/WoltLabSuite/Core/Ui/ItemList/Filter.ts
index c26fdbcc7a..445eb28472 100644
--- a/ts/WoltLabSuite/Core/Ui/ItemList/Filter.ts
+++ b/ts/WoltLabSuite/Core/Ui/ItemList/Filter.ts
@@ -98,7 +98,7 @@ class UiItemListFilter {
     this._clearButton.href = "#";
     this._clearButton.className = "button inputSuffix disabled jsTooltip";
     this._clearButton.title = Language.get("wcf.global.filter.button.clear");
-    this._clearButton.innerHTML = '<fa-icon size="16" name="times" solid></fa-icon>';
+    this._clearButton.innerHTML = '<fa-icon size="16" name="xmark" solid></fa-icon>';
     this._clearButton.addEventListener("click", (event) => {
       event.preventDefault();
 
@@ -366,13 +366,11 @@ class UiItemListFilter {
       button.classList.add("active");
     }
 
-    const icon = button.querySelector(".icon") as HTMLElement;
+    const icon = button.querySelector("fa-icon")!;
     if (type === "showAll") {
-      icon.classList.add("fa-eye");
-      icon.classList.remove("fa-eye-slash");
+      icon.setIcon("eye", false);
     } else {
-      icon.classList.remove("fa-eye");
-      icon.classList.add("fa-eye-slash");
+      icon.setIcon("eye-slash", false);
     }
   }
 }
diff --git a/wcfsetup/install/files/js/WCF.ACL.js b/wcfsetup/install/files/js/WCF.ACL.js
index 52c0d57e64..884cd76631 100644
--- a/wcfsetup/install/files/js/WCF.ACL.js
+++ b/wcfsetup/install/files/js/WCF.ACL.js
@@ -210,9 +210,9 @@ if (COMPILER_TARGET_DEFAULT) {
 		 * @return        jQuery
 		 */
 		_createListItem: function (objectID, label, type) {
-			var $listItem = $('<li><span class="icon icon16 fa-user' + (type === 'group' ? 's' : '') + '" /> <span class="aclLabel">' + label + '</span></li>').appendTo(this._containerElements.aclList);
+			var $listItem = $('<li><fa-icon size="16" name="' + (type === 'group' ? 'users' : 'user') + '" solid></fa-icon> <span class="aclLabel">' + label + '</span></li>').appendTo(this._containerElements.aclList);
 			$listItem.data('objectID', objectID).data('type', type).data('label', label).click($.proxy(this._click, this));
-			$('<span class="icon icon16 fa-times jsTooltip pointer" title="' + WCF.Language.get('wcf.global.button.delete') + '" />').click($.proxy(this._removeItem, this)).appendTo($listItem);
+			$('<button title="' + WCF.Language.get('wcf.global.button.delete') + '"><fa-icon size="16" name="xmark" solid></fa-icon></button>').click($.proxy(this._removeItem, this)).appendTo($listItem);
 			
 			return $listItem;
 		},
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/Simple.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/Simple.js
index dcf4c6de86..48f9d063ff 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/Simple.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/Simple.js
@@ -30,7 +30,6 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../St
                 }
             });
             this.list = document.getElementById(this.prefix + "aclAccessList");
-            this.list.addEventListener("click", this.removeItem.bind(this));
             const excludedSearchValues = [];
             this.list.querySelectorAll(".aclLabel").forEach((label) => {
                 excludedSearchValues.push(label.textContent);
@@ -65,9 +64,11 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../St
             const label = listItem.dataset.label;
             const objectId = listItem.dataset.objectId;
             const iconName = type === "group" ? "users" : "user";
-            const html = `<span class="icon icon16 fa-${iconName}"></span>
+            const html = `<fa-icon size="16" name="${iconName}" solid></fa-icon>
       <span class="aclLabel">${StringUtil.escapeHTML(label)}</span>
-      <span class="icon icon16 fa-times pointer jsTooltip" title="${Language.get("wcf.global.button.delete")}"></span>
+      <button class="aclItemDeleteButton jsTooltip" title="${Language.get("wcf.global.button.delete")}">
+        <fa-icon size="16" name="xmark" solid></fa-icon>
+      </button>
       <input type="hidden" name="${this.inputName}[${type}][]" value="${objectId}">`;
             const item = document.createElement("li");
             item.innerHTML = html;
@@ -80,19 +81,19 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../St
             }
             Util_1.default.show(this.aclListContainer);
             this.searchInput.addExcludedSearchValues(label);
+            const deleteButton = item.querySelector(".aclItemDeleteButton");
+            deleteButton.addEventListener("click", (event) => this.removeItem(event));
             Listener_1.default.trigger();
             return false;
         }
         removeItem(event) {
-            const target = event.target;
-            if (target.classList.contains("fa-times")) {
-                const parent = target.parentElement;
-                const label = parent.querySelector(".aclLabel");
-                this.searchInput.removeExcludedSearchValues(label.textContent);
-                parent.remove();
-                if (this.list.childElementCount === 0) {
-                    Util_1.default.hide(this.aclListContainer);
-                }
+            const target = event.currentTarget;
+            const parent = target.parentElement;
+            const label = parent.querySelector(".aclLabel");
+            this.searchInput.removeExcludedSearchValues(label.textContent);
+            parent.remove();
+            if (this.list.childElementCount === 0) {
+                Util_1.default.hide(this.aclListContainer);
             }
         }
         invertPermissions(invert) {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/Filter.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/Filter.js
index 4d52e34b75..8f6392d92d 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/Filter.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/Filter.js
@@ -67,7 +67,7 @@ define(["require", "exports", "tslib", "../../Core", "../../Dom/Util", "../../La
             this._clearButton.href = "#";
             this._clearButton.className = "button inputSuffix disabled jsTooltip";
             this._clearButton.title = Language.get("wcf.global.filter.button.clear");
-            this._clearButton.innerHTML = '<fa-icon size="16" name="times" solid></fa-icon>';
+            this._clearButton.innerHTML = '<fa-icon size="16" name="xmark" solid></fa-icon>';
             this._clearButton.addEventListener("click", (event) => {
                 event.preventDefault();
                 this.reset();
@@ -293,14 +293,12 @@ define(["require", "exports", "tslib", "../../Core", "../../Dom/Util", "../../La
             else {
                 button.classList.add("active");
             }
-            const icon = button.querySelector(".icon");
+            const icon = button.querySelector("fa-icon");
             if (type === "showAll") {
-                icon.classList.add("fa-eye");
-                icon.classList.remove("fa-eye-slash");
+                icon.setIcon("eye", false);
             }
             else {
-                icon.classList.remove("fa-eye");
-                icon.classList.add("fa-eye-slash");
+                icon.setIcon("eye-slash", false);
             }
         }
     }
-- 
2.20.1