Replace legacy icon usage

diff --git a/com.woltlab.wcf/templates/codeMetaCode.tpl b/com.woltlab.wcf/templates/codeMetaCode.tpl
index 07ce241b2299460cc49486b3ac9124ac8a68cd3a..ec8ed023d3b88a5a7a4dcc404a7f8f70a007caf8 100644 (file)
--- a/com.woltlab.wcf/templates/codeMetaCode.tpl
+++ b/com.woltlab.wcf/templates/codeMetaCode.tpl
@@ -3,7 +3,9 @@
                <div class="codeBoxHeadline">{$title}{if $filename}: {$filename}{/if}</div>
                
                {if !$isAmp && $lines > 10}
-                       <span class="toggleButton icon icon24 fa-expand jsTooltip pointer" title="{lang}wcf.bbcode.button.showAll{/lang}" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}" role="button" tabindex="0"></span>
+                       <span class="toggleButton jsTooltip pointer" title="{lang}wcf.bbcode.button.showAll{/lang}" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}" role="button" tabindex="0">
+                               {icon size=24 name='up-right-and-down-left-from-center' type='solid'}
+                       </span>
                {/if}
        </div>
        

diff --git a/com.woltlab.wcf/templates/worker.tpl b/com.woltlab.wcf/templates/worker.tpl
index d7d7fda16a236f0c0690fd67b685b887ece74ccf..bab3e821e29925f42e84a97633fb7b692c06e866 100644 (file)
--- a/com.woltlab.wcf/templates/worker.tpl
+++ b/com.woltlab.wcf/templates/worker.tpl
@@ -1,6 +1,8 @@
 <div id="workerContainer">
        <header class="box48 contentHeader">
-               {icon size=48 name='spinner' type='solid'}
+               <span class="workerStatusIcon">
+                       {icon size=48 name='spinner' type='solid'}
+               </span>
                
                <div>
                        <h1 class="contentTitle">{lang}wcf.global.worker.executing{/lang}</h1>

diff --git a/ts/WoltLabSuite/Core/Acp/Ui/DataImport/Manager.ts b/ts/WoltLabSuite/Core/Acp/Ui/DataImport/Manager.ts
index 30eae3a534ed5566a7ae6b65e129e98bf8c9b1cf..b6102c3f9c2537bf8b44069781d17ab18e59823f 100644 (file)
--- a/ts/WoltLabSuite/Core/Acp/Ui/DataImport/Manager.ts
+++ b/ts/WoltLabSuite/Core/Acp/Ui/DataImport/Manager.ts
@@ -57,9 +57,8 @@ export class AcpUiDataImportManager implements AjaxCallbackObject {
   private showCompletedDialog(): void {
     const content = UiDialog.getDialog(this)!.content;
     content.querySelector("h1")!.textContent = Language.get("wcf.acp.dataImport.completed");
-    const spinner = content.querySelector(".fa-spinner") as HTMLSpanElement;
-    spinner.classList.remove("fa-spinner");
-    spinner.classList.add("fa-check", "green");
+    const spinner = content.querySelector("fa-icon")!;
+    spinner.setIcon("check", true);
 
     const formSubmit = document.createElement("div");
     formSubmit.className = "formSubmit";

diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts b/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts
index 62a053143f2fde176034b29a2745589002f8154b..4bcfcbb386f9f0059180dc1b948a63818702243b 100644 (file)
--- a/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts
+++ b/ts/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.ts
@@ -131,6 +131,7 @@ class AcpUiTrophyBadge implements DialogCallbackObject {
 
     // set icon
     previewIcon.className = previewIcon.className.replace(/\b(fa-[a-z0-9-]+)\b/, "");
+    // TODO: FA6
     previewIcon.classList.add("fa-" + icon);
     previewIcon.style.setProperty("color", iconColor, "");
     previewIcon.style.setProperty("background-color", badgeColor, "");

diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Worker.ts b/ts/WoltLabSuite/Core/Acp/Ui/Worker.ts
index 6b57923207d2fd5199bc38a794f6d83b8bacd560..10a28b1990f2f657d08fa5144eed700eb5c4bce4 100644 (file)
--- a/ts/WoltLabSuite/Core/Acp/Ui/Worker.ts
+++ b/ts/WoltLabSuite/Core/Acp/Ui/Worker.ts
@@ -107,9 +107,9 @@ class AcpUiWorker implements AjaxCallbackObject, DialogCallbackObject {
         UiDialog.setCallback(this, "onClose", () => this.onClose());
       });
 
-      const spinner = content.querySelector(".fa-spinner") as HTMLSpanElement;
-      spinner.classList.remove("fa-spinner");
-      spinner.classList.add("fa-check", "green");
+      const spinner = content.querySelector("fa-icon")!;
+      spinner.setIcon("check", true);
+      spinner.parentElement!.dataset.status = "success";
 
       const formSubmit = document.createElement("div");
       formSubmit.className = "formSubmit";
@@ -150,9 +150,9 @@ class AcpUiWorker implements AjaxCallbackObject, DialogCallbackObject {
   _ajaxFailure(): boolean {
     const dialog = UiDialog.getDialog(this);
     if (dialog !== undefined) {
-      const spinner = dialog.content.querySelector(".fa-spinner") as HTMLSpanElement;
-      spinner.classList.remove("fa-spinner");
-      spinner.classList.add("fa-times", "red");
+      const spinner = dialog.content.querySelector("fa-icon")!;
+      spinner.setIcon("xmark", true);
+      spinner.parentElement!.dataset.status = "error";
     }
 
     return true;

diff --git a/ts/WoltLabSuite/Core/Bbcode/Collapsible.ts b/ts/WoltLabSuite/Core/Bbcode/Collapsible.ts
index d7f91226f2085aba99014ff2eed66d237ab43a42..7a9d03d2cdd1955c8a648ccfa45d05f1379b733e 100644 (file)
--- a/ts/WoltLabSuite/Core/Bbcode/Collapsible.ts
+++ b/ts/WoltLabSuite/Core/Bbcode/Collapsible.ts
@@ -38,9 +38,9 @@ function toggleContainer(container: HTMLElement, toggleButtons: HTMLElement[], e
   if (container.classList.toggle("collapsed")) {
     toggleButtons.forEach((toggleButton) => {
       const title = toggleButton.dataset.titleExpand!;
-      if (toggleButton.classList.contains("icon")) {
-        toggleButton.classList.remove("fa-compress");
-        toggleButton.classList.add("fa-expand");
+      const icon = toggleButton.querySelector("fa-icon");
+      if (icon) {
+        icon.setIcon("up-right-and-down-left-from-center", true);
         toggleButton.title = title;
       } else {
         toggleButton.textContent = title;
@@ -62,9 +62,9 @@ function toggleContainer(container: HTMLElement, toggleButtons: HTMLElement[], e
   } else {
     toggleButtons.forEach((toggleButton) => {
       const title = toggleButton.dataset.titleCollapse!;
-      if (toggleButton.classList.contains("icon")) {
-        toggleButton.classList.add("fa-compress");
-        toggleButton.classList.remove("fa-expand");
+      const icon = toggleButton.querySelector("fa-icon");
+      if (icon) {
+        icon.setIcon("down-left-and-up-right-to-center", true);
         toggleButton.title = title;
       } else {
         toggleButton.textContent = title;

diff --git a/wcfsetup/install/files/acp/templates/codeMetaCode.tpl b/wcfsetup/install/files/acp/templates/codeMetaCode.tpl
index 07ce241b2299460cc49486b3ac9124ac8a68cd3a..ec8ed023d3b88a5a7a4dcc404a7f8f70a007caf8 100644 (file)
--- a/wcfsetup/install/files/acp/templates/codeMetaCode.tpl
+++ b/wcfsetup/install/files/acp/templates/codeMetaCode.tpl
@@ -3,7 +3,9 @@
                <div class="codeBoxHeadline">{$title}{if $filename}: {$filename}{/if}</div>
                
                {if !$isAmp && $lines > 10}
-                       <span class="toggleButton icon icon24 fa-expand jsTooltip pointer" title="{lang}wcf.bbcode.button.showAll{/lang}" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}" role="button" tabindex="0"></span>
+                       <span class="toggleButton jsTooltip pointer" title="{lang}wcf.bbcode.button.showAll{/lang}" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}" role="button" tabindex="0">
+                               {icon size=24 name='up-right-and-down-left-from-center' type='solid'}
+                       </span>
                {/if}
        </div>
        

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 228b61f7b51a75316050bcc44fe5dd0cc5f51e81..eec39efb755722396b2f7f67edd4836b3cdd7f50 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -47,6 +47,10 @@
                {* Unlike the frontend, this option must be defined in the ACP at all times. *}
                var COMPILER_TARGET_DEFAULT = true;
        </script>
+
+       <script src="{$__wcf->getPath()}js/WoltLabSuite/WebComponent/fa-brand.js"></script>
+       <script src="{$__wcf->getPath()}js/WoltLabSuite/WebComponent/fa-metadata.js"></script>
+       <script src="{$__wcf->getPath()}js/WoltLabSuite/WebComponent/fa-icon.js"></script>
        
        {js application='wcf' file='require' bundle='WoltLabSuite.Core' core='true'}
        {js application='wcf' file='require.config' bundle='WoltLabSuite.Core' core='true'}

diff --git a/wcfsetup/install/files/acp/templates/worker.tpl b/wcfsetup/install/files/acp/templates/worker.tpl
index d7d7fda16a236f0c0690fd67b685b887ece74ccf..bab3e821e29925f42e84a97633fb7b692c06e866 100644 (file)
--- a/wcfsetup/install/files/acp/templates/worker.tpl
+++ b/wcfsetup/install/files/acp/templates/worker.tpl
@@ -1,6 +1,8 @@
 <div id="workerContainer">
        <header class="box48 contentHeader">
-               {icon size=48 name='spinner' type='solid'}
+               <span class="workerStatusIcon">
+                       {icon size=48 name='spinner' type='solid'}
+               </span>
                
                <div>
                        <h1 class="contentTitle">{lang}wcf.global.worker.executing{/lang}</h1>

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/DataImport/Manager.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/DataImport/Manager.js
index b2fa4c50a7b3e14fe08d11bad5a13021355c94e0..d1639e3a8820c943143c112988b69a94fc73c69e 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/DataImport/Manager.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/DataImport/Manager.js
@@ -42,9 +42,8 @@ define(["require", "exports", "tslib", "../../../Ajax", "../../../Core", "../../
         showCompletedDialog() {
             const content = Dialog_1.default.getDialog(this).content;
             content.querySelector("h1").textContent = Language.get("wcf.acp.dataImport.completed");
-            const spinner = content.querySelector(".fa-spinner");
-            spinner.classList.remove("fa-spinner");
-            spinner.classList.add("fa-check", "green");
+            const spinner = content.querySelector("fa-icon");
+            spinner.setIcon("check", true);
             const formSubmit = document.createElement("div");
             formSubmit.className = "formSubmit";
             formSubmit.innerHTML = `<button class="button buttonPrimary">${Language.get("wcf.global.button.next")}</button>`;

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js
index 0fc40aad0c45a2b5012d42ba50275858cf784d46..8fe5d71474651288b4ba392048548b1c10430759 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Trophy/Badge.js
@@ -99,6 +99,7 @@ define(["require", "exports", "tslib", "../../../Language", "../../../Ui/Dialog"
             const previewIcon = badgeContainer.querySelector(".jsTrophyIcon");
             // set icon
             previewIcon.className = previewIcon.className.replace(/\b(fa-[a-z0-9-]+)\b/, "");
+            // TODO: FA6
             previewIcon.classList.add("fa-" + icon);
             previewIcon.style.setProperty("color", iconColor, "");
             previewIcon.style.setProperty("background-color", badgeColor, "");

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Worker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Worker.js
index 2d3fbd9137a95a9d8545f5134690b51f051243da..d872158b195510a72996ded5116f3d2d20ac014d 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Worker.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Worker.js
@@ -62,9 +62,9 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Core", "../../Langua
                 Dialog_1.default.setCallback(this, "onClose", () => {
                     Dialog_1.default.setCallback(this, "onClose", () => this.onClose());
                 });
-                const spinner = content.querySelector(".fa-spinner");
-                spinner.classList.remove("fa-spinner");
-                spinner.classList.add("fa-check", "green");
+                const spinner = content.querySelector("fa-icon");
+                spinner.setIcon("check", true);
+                spinner.parentElement.dataset.status = "success";
                 const formSubmit = document.createElement("div");
                 formSubmit.className = "formSubmit";
                 formSubmit.innerHTML =
@@ -99,9 +99,9 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Core", "../../Langua
         _ajaxFailure() {
             const dialog = Dialog_1.default.getDialog(this);
             if (dialog !== undefined) {
-                const spinner = dialog.content.querySelector(".fa-spinner");
-                spinner.classList.remove("fa-spinner");
-                spinner.classList.add("fa-times", "red");
+                const spinner = dialog.content.querySelector("fa-icon");
+                spinner.setIcon("xmark", true);
+                spinner.parentElement.dataset.status = "error";
             }
             return true;
         }

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Collapsible.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Collapsible.js
index 81575441bb9c89138b6f27008406528e52238ab2..3e39b1dc6dadf9c2e3e5957fcf3621cb8821d350 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Collapsible.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Collapsible.js
@@ -37,9 +37,9 @@ define(["require", "exports"], function (require, exports) {
         if (container.classList.toggle("collapsed")) {
             toggleButtons.forEach((toggleButton) => {
                 const title = toggleButton.dataset.titleExpand;
-                if (toggleButton.classList.contains("icon")) {
-                    toggleButton.classList.remove("fa-compress");
-                    toggleButton.classList.add("fa-expand");
+                const icon = toggleButton.querySelector("fa-icon");
+                if (icon) {
+                    icon.setIcon("up-right-and-down-left-from-center", true);
                     toggleButton.title = title;
                 }
                 else {
@@ -61,9 +61,9 @@ define(["require", "exports"], function (require, exports) {
         else {
             toggleButtons.forEach((toggleButton) => {
                 const title = toggleButton.dataset.titleCollapse;
-                if (toggleButton.classList.contains("icon")) {
-                    toggleButton.classList.add("fa-compress");
-                    toggleButton.classList.remove("fa-expand");
+                const icon = toggleButton.querySelector("fa-icon");
+                if (icon) {
+                    icon.setIcon("down-left-and-up-right-to-center", true);
                     toggleButton.title = title;
                 }
                 else {

diff --git a/wcfsetup/install/files/style/font-awesome/000-woltlab.scss b/wcfsetup/install/files/style/font-awesome/000-woltlab.scss
index 1413df685dea893798f1d67248d4f08be31caa9d..901ca243de96042341c595c36435676a6807944f 100644 (file)
--- a/wcfsetup/install/files/style/font-awesome/000-woltlab.scss
+++ b/wcfsetup/install/files/style/font-awesome/000-woltlab.scss
@@ -4,7 +4,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: block !important;
-  src: url("../font/fa-regular-400.woff2") format("woff2");
+  src: url("../font/fa-regular-400.woff2?v=6.1.2") format("woff2");
 }
 
 /* Font Awesome 6 Free: Solid */
@@ -13,7 +13,7 @@
   font-style: normal;
   font-weight: 900;
   font-display: block !important;
-  src: url("../font/fa-solid-900.woff2") format("woff2");
+  src: url("../font/fa-solid-900.woff2?v=6.1.2") format("woff2");
 }
 
 .icon {
@@ -34,7 +34,7 @@
 fa-brand,
 fa-icon {
   align-items: center;
-  display: flex;
+  display: inline-flex;
   height: var(--icon-size);
   justify-content: center;
   width: calc(var(--icon-size) * 1.25);
@@ -166,7 +166,6 @@ fa-icon {
   }
 }
 
-/* TODO: Default icon colors */
 .icon {
   &.green {
     color: rgba(0, 153, 0, 1);

diff --git a/wcfsetup/install/files/style/ui/worker.scss b/wcfsetup/install/files/style/ui/worker.scss
new file mode 100644 (file)
index 0000000..f5e2141
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/worker.scss
@@ -0,0 +1,7 @@
+.workerStatusIcon[data-status="error"] {
+    color: rgba(204, 0, 0, 1);
+}
+
+.workerStatusIcon[data-status="success"] {
+    color: rgba(0, 153, 0, 1);
+}