From: Alexander Ebert Date: Fri, 12 Aug 2022 15:40:34 +0000 (+0200) Subject: Replace legacy icon usage X-Git-Tag: 6.0.0_Alpha_1~1024^2~2^2~57 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=54ffc6a09b50ca6b04d192000d319337fe1455fc;p=GitHub%2FWoltLab%2FWCF.git Replace legacy icon usage --- diff --git a/com.woltlab.wcf/templates/codeMetaCode.tpl b/com.woltlab.wcf/templates/codeMetaCode.tpl index 07ce241b22..ec8ed023d3 100644 --- a/com.woltlab.wcf/templates/codeMetaCode.tpl +++ b/com.woltlab.wcf/templates/codeMetaCode.tpl @@ -3,7 +3,9 @@
{$title}{if $filename}: {$filename}{/if}
{if !$isAmp && $lines > 10} - + + {icon size=24 name='up-right-and-down-left-from-center' type='solid'} + {/if} diff --git a/com.woltlab.wcf/templates/worker.tpl b/com.woltlab.wcf/templates/worker.tpl index d7d7fda16a..bab3e821e2 100644 --- a/com.woltlab.wcf/templates/worker.tpl +++ b/com.woltlab.wcf/templates/worker.tpl @@ -1,6 +1,8 @@
- {icon size=48 name='spinner' type='solid'} + + {icon size=48 name='spinner' type='solid'} +

{lang}wcf.global.worker.executing{/lang}

diff --git a/ts/WoltLabSuite/Core/Acp/Ui/DataImport/Manager.ts b/ts/WoltLabSuite/Core/Acp/Ui/DataImport/Manager.ts index 30eae3a534..b6102c3f9c 100644 --- 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 62a053143f..4bcfcbb386 100644 --- 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 6b57923207..10a28b1990 100644 --- 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 d7f91226f2..7a9d03d2cd 100644 --- 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 07ce241b22..ec8ed023d3 100644 --- a/wcfsetup/install/files/acp/templates/codeMetaCode.tpl +++ b/wcfsetup/install/files/acp/templates/codeMetaCode.tpl @@ -3,7 +3,9 @@
{$title}{if $filename}: {$filename}{/if}
{if !$isAmp && $lines > 10} - + + {icon size=24 name='up-right-and-down-left-from-center' type='solid'} + {/if}
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl index 228b61f7b5..eec39efb75 100644 --- 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; + + + + {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 d7d7fda16a..bab3e821e2 100644 --- a/wcfsetup/install/files/acp/templates/worker.tpl +++ b/wcfsetup/install/files/acp/templates/worker.tpl @@ -1,6 +1,8 @@
- {icon size=48 name='spinner' type='solid'} + + {icon size=48 name='spinner' type='solid'} +

{lang}wcf.global.worker.executing{/lang}

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 b2fa4c50a7..d1639e3a88 100644 --- 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 = ``; 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 0fc40aad0c..8fe5d71474 100644 --- 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 2d3fbd9137..d872158b19 100644 --- 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 81575441bb..3e39b1dc6d 100644 --- 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 1413df685d..901ca243de 100644 --- 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 index 0000000000..f5e2141789 --- /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); +}