From 13136ab4b84137a31b93375c1c41644e576045fd Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Wed, 17 Aug 2022 13:26:48 +0200 Subject: [PATCH] Replace legacy icons --- extra/migrate-fa-v4.php | 2 +- ts/WoltLabSuite/Core/Acp/Ui/User/Editor.ts | 6 +++-- ts/WoltLabSuite/Core/Bbcode/Code.ts | 7 +++--- ts/WoltLabSuite/Core/Date/Picker.ts | 10 ++++---- .../Form/Builder/Container/SuffixFormField.ts | 2 +- ts/WoltLabSuite/Core/Language/Chooser.ts | 5 ++-- ts/WoltLabSuite/Core/Media/List/Upload.ts | 5 ++-- ts/WoltLabSuite/Core/Media/Manager/Base.ts | 8 +++---- ts/WoltLabSuite/Core/Media/Manager/Editor.ts | 4 ++-- ts/WoltLabSuite/Core/Media/Manager/Select.ts | 22 ++++++++++------- ts/WoltLabSuite/Core/Media/Upload.ts | 24 +++++++++---------- ts/WoltLabSuite/Core/Ui/Comment/Edit.ts | 5 ++-- ts/WoltLabSuite/Core/Ui/Dialog.ts | 7 ++---- ts/WoltLabSuite/Core/Ui/Dropdown/Builder.ts | 6 +++-- ts/WoltLabSuite/Core/Ui/Feed/Dialog.ts | 12 ++++++---- ts/WoltLabSuite/Core/Ui/FlexibleMenu.ts | 2 +- ts/WoltLabSuite/Core/Ui/ItemList.ts | 4 ++-- ts/WoltLabSuite/Core/Ui/ItemList/Static.ts | 4 ++-- ts/WoltLabSuite/Core/Ui/Like/Handler.ts | 5 ++-- .../Core/Ui/Message/InlineEditor.ts | 10 ++++---- ts/WoltLabSuite/Core/Ui/Mobile.ts | 8 +++---- ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts | 2 +- .../Core/Ui/Page/Search/Handler.ts | 16 ++++++++----- ts/WoltLabSuite/Core/Ui/Pagination.ts | 21 +++++++++++----- ts/WoltLabSuite/Core/Ui/Redactor/Autosave.ts | 24 +++++++------------ ts/WoltLabSuite/Core/Ui/TabMenu.ts | 10 ++++---- ts/WoltLabSuite/Core/Ui/User/Editor.ts | 3 ++- ts/WoltLabSuite/Core/Ui/User/Menu/View.ts | 4 ++-- .../WoltLabSuite/Core/Acp/Ui/User/Editor.js | 6 +++-- .../files/js/WoltLabSuite/Core/Bbcode/Code.js | 5 ++-- .../files/js/WoltLabSuite/Core/Date/Picker.js | 10 ++++---- .../Form/Builder/Container/SuffixFormField.js | 2 +- .../js/WoltLabSuite/Core/Language/Chooser.js | 5 ++-- .../js/WoltLabSuite/Core/Media/List/Upload.js | 5 ++-- .../WoltLabSuite/Core/Media/Manager/Base.js | 8 +++---- .../WoltLabSuite/Core/Media/Manager/Editor.js | 4 ++-- .../WoltLabSuite/Core/Media/Manager/Select.js | 23 +++++++++++------- .../js/WoltLabSuite/Core/Media/Upload.js | 23 +++++++++--------- .../js/WoltLabSuite/Core/Ui/Comment/Edit.js | 5 ++-- .../files/js/WoltLabSuite/Core/Ui/Dialog.js | 6 ++--- .../WoltLabSuite/Core/Ui/Dropdown/Builder.js | 5 ++-- .../js/WoltLabSuite/Core/Ui/Feed/Dialog.js | 8 +++++-- .../js/WoltLabSuite/Core/Ui/FlexibleMenu.js | 2 +- .../files/js/WoltLabSuite/Core/Ui/ItemList.js | 4 ++-- .../WoltLabSuite/Core/Ui/ItemList/Static.js | 4 ++-- .../js/WoltLabSuite/Core/Ui/Like/Handler.js | 5 ++-- .../Core/Ui/Message/InlineEditor.js | 10 ++++---- .../files/js/WoltLabSuite/Core/Ui/Mobile.js | 8 +++---- .../js/WoltLabSuite/Core/Ui/Page/Menu/Main.js | 2 +- .../Core/Ui/Page/Search/Handler.js | 11 ++++++--- .../js/WoltLabSuite/Core/Ui/Pagination.js | 20 +++++++++++----- .../WoltLabSuite/Core/Ui/Redactor/Autosave.js | 22 +++++++---------- .../files/js/WoltLabSuite/Core/Ui/TabMenu.js | 10 ++++---- .../js/WoltLabSuite/Core/Ui/User/Editor.js | 3 ++- .../js/WoltLabSuite/Core/Ui/User/Menu/View.js | 4 ++-- .../files/lib/data/page/PageAction.class.php | 7 ++++-- ...coratedCategoryLookupPageHandler.class.php | 2 +- 57 files changed, 260 insertions(+), 207 deletions(-) diff --git a/extra/migrate-fa-v4.php b/extra/migrate-fa-v4.php index 2b34f8ddde..d9672f0de9 100755 --- a/extra/migrate-fa-v4.php +++ b/extra/migrate-fa-v4.php @@ -126,7 +126,7 @@ function replaceIcons(string $filename): bool // If the icon only ships in `solid` style then we can safely // use any other variant too. The `solid` style is therefore // only enforced when there is a non-solid variant too. - if ($type === 'solid' && !$hasNonSolidStyle[$newIconName]) { + if ($type === 'solid' && $newIconName !== 'caret-down' && !$hasNonSolidStyle[$newIconName]) { $type = 'regular'; } diff --git a/ts/WoltLabSuite/Core/Acp/Ui/User/Editor.ts b/ts/WoltLabSuite/Core/Acp/Ui/User/Editor.ts index 62d8d55c66..38aab23c75 100644 --- a/ts/WoltLabSuite/Core/Acp/Ui/User/Editor.ts +++ b/ts/WoltLabSuite/Core/Acp/Ui/User/Editor.ts @@ -157,7 +157,8 @@ class AcpUiUserEditor { let iconBanned = userRow.querySelector(".jsUserStatusBanned") as HTMLElement; if (banned && iconBanned === null) { iconBanned = document.createElement("span"); - iconBanned.className = "icon icon16 fa-lock jsUserStatusBanned jsTooltip"; + iconBanned.innerHTML = ''; + iconBanned.classList.add("jsUserStatusBanned", "jsTooltip"); iconBanned.title = Language.get("wcf.user.status.banned"); userStatusIcons.appendChild(iconBanned); @@ -169,7 +170,8 @@ class AcpUiUserEditor { let iconIsDisabled = userRow.querySelector(".jsUserStatusIsDisabled") as HTMLElement; if (isDisabled && iconIsDisabled === null) { iconIsDisabled = document.createElement("span"); - iconIsDisabled.className = "icon icon16 fa-power-off jsUserStatusIsDisabled jsTooltip"; + iconIsDisabled.innerHTML = ''; + iconIsDisabled.classList.add("jsUserStatusIsDisabled", "jsTooltip"); iconIsDisabled.title = Language.get("wcf.user.status.isDisabled"); userStatusIcons.appendChild(iconIsDisabled); } else if (!isDisabled && iconIsDisabled !== null) { diff --git a/ts/WoltLabSuite/Core/Bbcode/Code.ts b/ts/WoltLabSuite/Core/Bbcode/Code.ts index 72c4877fa9..f51aba580f 100644 --- a/ts/WoltLabSuite/Core/Bbcode/Code.ts +++ b/ts/WoltLabSuite/Core/Bbcode/Code.ts @@ -61,8 +61,9 @@ class Code { } const button = document.createElement("button"); - button.className = "icon icon24 fa-files-o pointer jsTooltip"; - button.setAttribute("title", Language.get("wcf.message.bbcode.code.copy")); + button.innerHTML = ''; + button.classList.add("jsTooltip"); + button.title = Language.get("wcf.message.bbcode.code.copy"); const clickCallback = async () => { await Clipboard.copyElementTextToClipboard(this.codeContainer); @@ -70,7 +71,7 @@ class Code { UiNotification.show(Language.get("wcf.message.bbcode.code.copy.success")); }; button.addEventListener("click", () => clickCallback()); - + header.appendChild(button); } diff --git a/ts/WoltLabSuite/Core/Date/Picker.ts b/ts/WoltLabSuite/Core/Date/Picker.ts index badf4afff6..deafc70768 100644 --- a/ts/WoltLabSuite/Core/Date/Picker.ts +++ b/ts/WoltLabSuite/Core/Date/Picker.ts @@ -767,8 +767,9 @@ const DatePicker = { }); container.appendChild(openButton); - let icon = document.createElement("span"); - icon.className = "icon icon16 fa-calendar"; + let icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("calendar"); openButton.appendChild(icon); element.parentNode!.insertBefore(container, element); @@ -790,8 +791,9 @@ const DatePicker = { container.appendChild(clearButton); - icon = document.createElement("span"); - icon.className = "icon icon16 fa-times"; + icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("xmark"); clearButton.appendChild(icon); } diff --git a/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.ts b/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.ts index 4bb18d9514..1027f0c240 100644 --- a/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.ts +++ b/ts/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.ts @@ -58,7 +58,7 @@ class SuffixFormField { this._suffixField.value = target.dataset.value!; this._suffixDropdownToggle.innerHTML = - target.dataset.label! + ' '; + target.dataset.label! + ' '; } /** diff --git a/ts/WoltLabSuite/Core/Language/Chooser.ts b/ts/WoltLabSuite/Core/Language/Chooser.ts index 7896fb02f0..8743f89e3d 100644 --- a/ts/WoltLabSuite/Core/Language/Chooser.ts +++ b/ts/WoltLabSuite/Core/Language/Chooser.ts @@ -152,8 +152,9 @@ function initElement( const div = document.createElement("div"); dropdownToggle.appendChild(div); - const icon = document.createElement("span"); - icon.className = "icon icon24 fa-question pointer"; + const icon = document.createElement("fa-icon"); + icon.size = 24; + icon.setIcon("question"); div.appendChild(icon); const span = document.createElement("span"); diff --git a/ts/WoltLabSuite/Core/Media/List/Upload.ts b/ts/WoltLabSuite/Core/Media/List/Upload.ts index 46a45c28e0..749005da7c 100644 --- a/ts/WoltLabSuite/Core/Media/List/Upload.ts +++ b/ts/WoltLabSuite/Core/Media/List/Upload.ts @@ -21,8 +21,9 @@ class MediaListUpload extends MediaUpload { const space = document.createTextNode(" "); span.insertBefore(space, span.childNodes[0]); - const icon = document.createElement("span"); - icon.className = "icon icon16 fa-upload"; + const icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("upload"); span.insertBefore(icon, span.childNodes[0]); } diff --git a/ts/WoltLabSuite/Core/Media/Manager/Base.ts b/ts/WoltLabSuite/Core/Media/Manager/Base.ts index 5f870a81b4..aeb2b04626 100644 --- a/ts/WoltLabSuite/Core/Media/Manager/Base.ts +++ b/ts/WoltLabSuite/Core/Media/Manager/Base.ts @@ -523,8 +523,8 @@ abstract class MediaManager - + + `; @@ -542,8 +542,8 @@ abstract class MediaManager - + + `; } diff --git a/ts/WoltLabSuite/Core/Media/Manager/Editor.ts b/ts/WoltLabSuite/Core/Media/Manager/Editor.ts index 7966eb3d8f..8b8ab79e76 100644 --- a/ts/WoltLabSuite/Core/Media/Manager/Editor.ts +++ b/ts/WoltLabSuite/Core/Media/Manager/Editor.ts @@ -365,8 +365,8 @@ class MediaManagerEditor extends MediaManager { buttons.appendChild(listItem); listItem.innerHTML = ` - - + + `; } diff --git a/ts/WoltLabSuite/Core/Media/Manager/Select.ts b/ts/WoltLabSuite/Core/Media/Manager/Select.ts index dd3b5c8c18..11b364d35b 100644 --- a/ts/WoltLabSuite/Core/Media/Manager/Select.ts +++ b/ts/WoltLabSuite/Core/Media/Manager/Select.ts @@ -43,8 +43,9 @@ class MediaManagerSelect extends MediaManager { removeButton.className = "button"; button.insertAdjacentElement("afterend", removeButton); - const icon = document.createElement("span"); - icon.className = "icon icon16 fa-times"; + const icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("xmark"); removeButton.appendChild(icon); if (!storeElement.value) { @@ -100,12 +101,14 @@ class MediaManagerSelect extends MediaManager { } else { let fileIcon = FileUtil.getIconNameByFilename(media.filename); if (fileIcon) { - fileIcon = "-" + fileIcon; + fileIcon = "file-" + fileIcon; + } else { + fileIcon="file" } displayElement.innerHTML = `
- +

${media.filename}

${media.formattedFilesize}

@@ -157,11 +160,12 @@ class MediaManagerSelect extends MediaManager { buttons.appendChild(listItem); listItem.innerHTML = - ' "; + ` + + + + + `; } /** diff --git a/ts/WoltLabSuite/Core/Media/Upload.ts b/ts/WoltLabSuite/Core/Media/Upload.ts index 267200a0d5..4d3c845013 100644 --- a/ts/WoltLabSuite/Core/Media/Upload.ts +++ b/ts/WoltLabSuite/Core/Media/Upload.ts @@ -11,7 +11,6 @@ import Upload from "../Upload"; import * as Core from "../Core"; import * as DomUtil from "../Dom/Util"; -import * as DomTraverse from "../Dom/Traverse"; import * as Language from "../Language"; import User from "../User"; import * as DateUtil from "../Date/Util"; @@ -100,7 +99,8 @@ class MediaUpload exte } const spinner = document.createElement("span"); - spinner.className = "icon icon48 fa-spinner mediaThumbnail"; + spinner.innerHTML = ''; + spinner.classList.add("mediaThumbnail"); DomUtil.replaceElement(image!, spinner); @@ -137,11 +137,12 @@ class MediaUpload exte } const thumbnail = document.createElement("div"); - thumbnail.className = "mediaThumbnail"; + thumbnail.classList.add("mediaThumbnail"); fileElement.appendChild(thumbnail); - const fileIcon = document.createElement("span"); - fileIcon.className = "icon icon144 fa-spinner"; + const fileIcon = document.createElement("fa-icon"); + fileIcon.size = 144; + fileIcon.setIcon("spinner"); thumbnail.appendChild(fileIcon); const mediaInformation = document.createElement("div"); @@ -259,10 +260,10 @@ class MediaUpload exte p.remove(); } } else { - DomTraverse.childByTag(DomTraverse.childByClass(file, "mediaInformation")!, "PROGRESS")!.remove(); + file.querySelector(".mediaInformation progress")!.remove(); if (media) { - const fileIcon = DomTraverse.childByTag(DomTraverse.childByClass(file, "mediaThumbnail")!, "FA-ICON")!; + const fileIcon = file.querySelector(".mediaThumbnail fa-icon") as FaIcon; this._replaceFileIcon(fileIcon, media, 144); file.classList.add("jsClipboardObject", "mediaFile", "jsObjectActionObject"); @@ -281,18 +282,15 @@ class MediaUpload exte }; } - const fileIcon = DomTraverse.childByTag(DomTraverse.childByClass(file, "mediaThumbnail")!, "FA-ICON")!; + const fileIcon = file.querySelector(".mediaThumbnail fa-icon") as FaIcon; fileIcon.setIcon("xmark"); file.classList.add("uploadFailed", "pointer", "jsTooltip"); file.title = Language.get("wcf.global.button.delete"); file.addEventListener("click", () => file.remove()); - const title = DomTraverse.childByClass( - DomTraverse.childByClass(file, "mediaInformation")!, - "mediaTitle", - ) as HTMLElement; - title.innerText = Language.get(`wcf.media.upload.error.${error.errorType}`, { + const title = file.querySelector(".mediaInformation .mediaTitle") as HTMLElement; + title.textContent = Language.get(`wcf.media.upload.error.${error.errorType}`, { filename: error.filename, }); } diff --git a/ts/WoltLabSuite/Core/Ui/Comment/Edit.ts b/ts/WoltLabSuite/Core/Ui/Comment/Edit.ts index e1e9c55213..c7a3a300c9 100644 --- a/ts/WoltLabSuite/Core/Ui/Comment/Edit.ts +++ b/ts/WoltLabSuite/Core/Ui/Comment/Edit.ts @@ -235,8 +235,9 @@ class UiCommentEdit { const editorContainer = this._editorContainer!.querySelector(".editorContainer") as HTMLElement; DomUtil.hide(editorContainer); - const icon = document.createElement("span"); - icon.className = "icon icon48 fa-spinner"; + const icon = document.createElement("fa-icon"); + icon.size = 48; + icon.setIcon("spinner"); this._editorContainer!.appendChild(icon); } diff --git a/ts/WoltLabSuite/Core/Ui/Dialog.ts b/ts/WoltLabSuite/Core/Ui/Dialog.ts index ec50a08bad..6b4c2d90ff 100644 --- a/ts/WoltLabSuite/Core/Ui/Dialog.ts +++ b/ts/WoltLabSuite/Core/Ui/Dialog.ts @@ -389,15 +389,12 @@ const UiDialog = { if (options.closable) { const closeButton = document.createElement("button"); - closeButton.className = "dialogCloseButton jsTooltip"; + closeButton.innerHTML = ''; + closeButton.classList.add("dialogCloseButton", "jsTooltip"); closeButton.title = options.closeButtonLabel; closeButton.setAttribute("aria-label", options.closeButtonLabel); closeButton.addEventListener("click", () => this._close()); header.appendChild(closeButton); - - const span = document.createElement("span"); - span.className = "icon icon24 fa-times"; - closeButton.appendChild(span); } // Dialogs are positioned using `left: 50%` as a hack to diff --git a/ts/WoltLabSuite/Core/Ui/Dropdown/Builder.ts b/ts/WoltLabSuite/Core/Ui/Dropdown/Builder.ts index 53e65c3064..37c0eda2d4 100644 --- a/ts/WoltLabSuite/Core/Ui/Dropdown/Builder.ts +++ b/ts/WoltLabSuite/Core/Ui/Dropdown/Builder.ts @@ -75,8 +75,9 @@ function buildItemFromData(data: DropdownBuilderItemData): HTMLLIElement { size = ~~data.icon.size; } - const icon = document.createElement("span"); - icon.className = `icon icon${size} fa-${data.icon.name}`; + const icon = document.createElement("fa-icon"); + icon.size = size as any; + icon.setIcon(data.icon.name, data.icon.forceSolid ? true : false); link.appendChild(icon); } @@ -200,6 +201,7 @@ interface BaseItemData { callback?: (link: HTMLAnchorElement) => void; href?: string; icon?: { + forceSolid?: boolean; name: string; size?: 16 | 24 | 32 | 48 | 64 | 96 | 144; }; diff --git a/ts/WoltLabSuite/Core/Ui/Feed/Dialog.ts b/ts/WoltLabSuite/Core/Ui/Feed/Dialog.ts index 925ed6afe6..d090a0f535 100644 --- a/ts/WoltLabSuite/Core/Ui/Feed/Dialog.ts +++ b/ts/WoltLabSuite/Core/Ui/Feed/Dialog.ts @@ -47,9 +47,11 @@ function openDialog(event: Event): void {
- + )}"> + +
@@ -58,9 +60,11 @@ function openDialog(event: Event): void {
- + )}"> + +
diff --git a/ts/WoltLabSuite/Core/Ui/FlexibleMenu.ts b/ts/WoltLabSuite/Core/Ui/FlexibleMenu.ts index 230cf227cf..d7255938dc 100644 --- a/ts/WoltLabSuite/Core/Ui/FlexibleMenu.ts +++ b/ts/WoltLabSuite/Core/Ui/FlexibleMenu.ts @@ -151,7 +151,7 @@ export function rebuild(containerId: string): void { dropdown.className = "dropdown jsFlexibleMenuDropdown"; const icon = document.createElement("a"); - icon.className = "icon icon16 fa-list"; + icon.innerHTML = ''; dropdown.appendChild(icon); dropdownMenu = document.createElement("ul"); diff --git a/ts/WoltLabSuite/Core/Ui/ItemList.ts b/ts/WoltLabSuite/Core/Ui/ItemList.ts index 6807bc1609..c534337c2c 100644 --- a/ts/WoltLabSuite/Core/Ui/ItemList.ts +++ b/ts/WoltLabSuite/Core/Ui/ItemList.ts @@ -255,8 +255,8 @@ function addItem(elementId: string, value: ItemData): void { listItem.appendChild(content); if (!data.element.disabled) { - const button = document.createElement("a"); - button.className = "icon icon16 fa-times"; + const button = document.createElement("button"); + button.innerHTML = ''; button.addEventListener("click", removeItem); listItem.appendChild(button); } diff --git a/ts/WoltLabSuite/Core/Ui/ItemList/Static.ts b/ts/WoltLabSuite/Core/Ui/ItemList/Static.ts index 1b45ab2bde..6353470801 100644 --- a/ts/WoltLabSuite/Core/Ui/ItemList/Static.ts +++ b/ts/WoltLabSuite/Core/Ui/ItemList/Static.ts @@ -227,8 +227,8 @@ function addItem(elementId: string, value: ItemData, forceRemoveIcon?: boolean): listItem.appendChild(content); if (forceRemoveIcon || !data.element.disabled) { - const button = document.createElement("a"); - button.className = "icon icon16 fa-times"; + const button = document.createElement("button"); + button.innerHTML = ''; button.addEventListener("click", (ev) => removeItem(ev)); listItem.appendChild(button); } diff --git a/ts/WoltLabSuite/Core/Ui/Like/Handler.ts b/ts/WoltLabSuite/Core/Ui/Like/Handler.ts index db4d845178..04e3b9dafe 100644 --- a/ts/WoltLabSuite/Core/Ui/Like/Handler.ts +++ b/ts/WoltLabSuite/Core/Ui/Like/Handler.ts @@ -271,8 +271,9 @@ class UiLikeHandler { button.href = "#"; button.title = title; - const icon = document.createElement("span"); - icon.className = "icon icon16 fa-smile-o"; + const icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("smile"); if (reactionTypeID === undefined || reactionTypeID == 0) { icon.dataset.reactionTypeId = "0"; diff --git a/ts/WoltLabSuite/Core/Ui/Message/InlineEditor.ts b/ts/WoltLabSuite/Core/Ui/Message/InlineEditor.ts index 096291384b..68452a5a28 100644 --- a/ts/WoltLabSuite/Core/Ui/Message/InlineEditor.ts +++ b/ts/WoltLabSuite/Core/Ui/Message/InlineEditor.ts @@ -357,8 +357,9 @@ class UiMessageInlineEditor implements AjaxCallbackObject { messageBodyEditor.className = "messageBody editor"; data.messageBodyEditor = messageBodyEditor; - const icon = document.createElement("span"); - icon.className = "icon icon48 fa-spinner"; + const icon = document.createElement("fa-icon"); + icon.size = 48; + icon.setIcon("spinner"); messageBodyEditor.appendChild(icon); data.messageBody.insertAdjacentElement("afterend", messageBodyEditor); @@ -605,8 +606,9 @@ class UiMessageInlineEditor implements AjaxCallbackObject { const editorContainer = elementData.messageBodyEditor!.querySelector(".editorContainer") as HTMLElement; DomUtil.hide(editorContainer); - const icon = document.createElement("span"); - icon.className = "icon icon48 fa-spinner"; + const icon = document.createElement("fa-icon"); + icon.size = 48; + icon.setIcon("spinner"); elementData.messageBodyEditor!.appendChild(icon); } diff --git a/ts/WoltLabSuite/Core/Ui/Mobile.ts b/ts/WoltLabSuite/Core/Ui/Mobile.ts index 2e589d4a77..2e7b8cc2fd 100644 --- a/ts/WoltLabSuite/Core/Ui/Mobile.ts +++ b/ts/WoltLabSuite/Core/Ui/Mobile.ts @@ -68,11 +68,9 @@ function initButtonGroupNavigation(): void { navigation.parentElement!.classList.add("hasMobileNavigation"); - const button = document.createElement("a"); - button.className = "dropdownLabel"; - const span = document.createElement("span"); - span.className = "icon icon24 fa-ellipsis-v"; - button.appendChild(span); + const button = document.createElement("button"); + button.innerHTML = ''; + button.classList.add("dropdownLabel"); button.addEventListener("click", (event) => { event.preventDefault(); event.stopPropagation(); diff --git a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts index 78c67b9161..deed873a13 100644 --- a/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts +++ b/ts/WoltLabSuite/Core/Ui/Page/Menu/Main.ts @@ -256,7 +256,7 @@ export class PageMenuMain implements PageMenuProvider { button.classList.add("pageMenuMainItemToggle"); button.setAttribute("aria-expanded", "false"); button.setAttribute("aria-controls", menuId); - button.innerHTML = ''; + button.innerHTML = ''; let ariaLabel = menuItem.title; if (menuItem.link) { diff --git a/ts/WoltLabSuite/Core/Ui/Page/Search/Handler.ts b/ts/WoltLabSuite/Core/Ui/Page/Search/Handler.ts index 3e7a7ddd76..0f67f9e888 100644 --- a/ts/WoltLabSuite/Core/Ui/Page/Search/Handler.ts +++ b/ts/WoltLabSuite/Core/Ui/Page/Search/Handler.ts @@ -21,7 +21,7 @@ type CallbackSelect = (objectId: number) => void; interface ItemData { description?: string; - image: string; + image: string | string[]; link: string; objectID: number; title: string; @@ -66,10 +66,14 @@ class UiPageSearchHandler implements DialogCallbackObject { data.returnValues.forEach((item) => { let image = item.image; - if (/^fa-/.test(image)) { - image = ``; + if (Array.isArray(image)) { + const [iconName, forceSolid] = image; + + image = ` + + `; } const listItem = document.createElement("li"); @@ -81,7 +85,7 @@ class UiPageSearchHandler implements DialogCallbackObject {

- ${StringUtil.escapeHTML(item.title)} +

${description}
diff --git a/ts/WoltLabSuite/Core/Ui/Pagination.ts b/ts/WoltLabSuite/Core/Ui/Pagination.ts index 7aee1afa72..c0676dc132 100644 --- a/ts/WoltLabSuite/Core/Ui/Pagination.ts +++ b/ts/WoltLabSuite/Core/Ui/Pagination.ts @@ -61,17 +61,21 @@ class UiPagination { listItem.className = "skip"; list.appendChild(listItem); - let iconClassNames = "icon icon24 fa-chevron-left"; + let icon = document.createElement("fa-icon"); + icon.size = 24; + icon.setIcon("chevron-left"); if (this.activePage > 1) { const link = document.createElement("a"); - link.className = iconClassNames + " jsTooltip"; + link.className = "jsTooltip"; link.href = "#"; link.title = Language.get("wcf.global.page.previous"); link.rel = "prev"; + link.setAttribute("role", "button"); + link.append(icon); listItem.appendChild(link); link.addEventListener("click", (ev) => this.switchPage(this.activePage - 1, ev)); } else { - listItem.innerHTML = ''; + listItem.append(icon); listItem.classList.add("disabled"); } @@ -168,17 +172,22 @@ class UiPagination { listItem = document.createElement("li"); listItem.className = "skip"; list.appendChild(listItem); - iconClassNames = "icon icon24 fa-chevron-right"; + + icon = document.createElement("fa-icon"); + icon.size = 24; + icon.setIcon("chevron-right"); if (this.activePage < this.maxPage) { const link = document.createElement("a"); - link.className = iconClassNames + " jsTooltip"; + link.classList.add("jsTooltip"); link.href = "#"; link.title = Language.get("wcf.global.page.next"); link.rel = "next"; + link.setAttribute("role", "button"); + link.append(icon); listItem.appendChild(link); link.addEventListener("click", (ev) => this.switchPage(this.activePage + 1, ev)); } else { - listItem.innerHTML = ''; + listItem.append(icon); listItem.classList.add("disabled"); } diff --git a/ts/WoltLabSuite/Core/Ui/Redactor/Autosave.ts b/ts/WoltLabSuite/Core/Ui/Redactor/Autosave.ts index 1373020b72..306800d653 100644 --- a/ts/WoltLabSuite/Core/Ui/Redactor/Autosave.ts +++ b/ts/WoltLabSuite/Core/Ui/Redactor/Autosave.ts @@ -202,26 +202,18 @@ class UiRedactorAutosave { title.textContent = Language.get("wcf.editor.autosave.restored"); container.appendChild(title); - const buttonKeep = document.createElement("a"); - buttonKeep.className = "jsTooltip"; - buttonKeep.href = "#"; + const buttonKeep = document.createElement("button"); + buttonKeep.innerHTML = ''; + buttonKeep.classList.add("jsTooltip"); buttonKeep.title = Language.get("wcf.editor.autosave.keep"); - buttonKeep.innerHTML = ''; - buttonKeep.addEventListener("click", (event) => { - event.preventDefault(); - - this.hideOverlay(); - }); + buttonKeep.addEventListener("click", () => this.hideOverlay()); container.appendChild(buttonKeep); - const buttonDiscard = document.createElement("a"); - buttonDiscard.className = "jsTooltip"; - buttonDiscard.href = "#"; + const buttonDiscard = document.createElement("button"); + buttonDiscard.innerHTML = ''; + buttonDiscard.classList.add("jsTooltip"); buttonDiscard.title = Language.get("wcf.editor.autosave.discard"); - buttonDiscard.innerHTML = ''; - buttonDiscard.addEventListener("click", (event) => { - event.preventDefault(); - + buttonDiscard.addEventListener("click", () => { // remove from storage this.clear(); diff --git a/ts/WoltLabSuite/Core/Ui/TabMenu.ts b/ts/WoltLabSuite/Core/Ui/TabMenu.ts index 24c5291d00..eeafd51652 100644 --- a/ts/WoltLabSuite/Core/Ui/TabMenu.ts +++ b/ts/WoltLabSuite/Core/Ui/TabMenu.ts @@ -207,8 +207,9 @@ function rebuildMenuOverflow(menu: HTMLElement): void { let overlayLeft = menu.querySelector(".tabMenuOverlayLeft"); if (overflowLeft) { if (overlayLeft === null) { - overlayLeft = document.createElement("span"); - overlayLeft.className = "tabMenuOverlayLeft icon icon24 fa-angle-left"; + overlayLeft = document.createElement("button"); + overlayLeft.innerHTML = ''; + overlayLeft.className = "tabMenuOverlayLeft"; overlayLeft.addEventListener("click", () => { const listWidth = list.clientWidth; scrollMenu(list, list.scrollLeft - ~~(listWidth / 2), list.scrollLeft, list.scrollWidth, listWidth, false); @@ -225,8 +226,9 @@ function rebuildMenuOverflow(menu: HTMLElement): void { let overlayRight = menu.querySelector(".tabMenuOverlayRight"); if (overflowRight) { if (overlayRight === null) { - overlayRight = document.createElement("span"); - overlayRight.className = "tabMenuOverlayRight icon icon24 fa-angle-right"; + overlayRight = document.createElement("button"); + overlayRight.innerHTML = ''; + overlayRight.className = "tabMenuOverlayRight"; overlayRight.addEventListener("click", () => { const listWidth = list.clientWidth; scrollMenu(list, list.scrollLeft + ~~(listWidth / 2), list.scrollLeft, list.scrollWidth, listWidth, false); diff --git a/ts/WoltLabSuite/Core/Ui/User/Editor.ts b/ts/WoltLabSuite/Core/Ui/User/Editor.ts index 7ea58626ad..a8695e26a7 100644 --- a/ts/WoltLabSuite/Core/Ui/User/Editor.ts +++ b/ts/WoltLabSuite/Core/Ui/User/Editor.ts @@ -133,7 +133,8 @@ class UserEditor implements AjaxCallbackObject, DialogCallbackObject { let banIcon = contentTitle.querySelector(".jsUserBanned") as HTMLElement; if (data.actionName === "ban") { banIcon = document.createElement("span"); - banIcon.className = "icon icon24 fa-lock jsUserBanned jsTooltip"; + banIcon.innerHTML = ''; + banIcon.classList.add("jsUserBanned", "jsTooltip"); banIcon.title = data.returnValues; contentTitle.appendChild(banIcon); } else if (banIcon) { diff --git a/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts b/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts index 84e520e83c..bca7f69aff 100644 --- a/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts +++ b/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts @@ -165,8 +165,8 @@ export class UserMenuView {
-
`; diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/User/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/User/Editor.js index c61294a323..5827ae4012 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/User/Editor.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/User/Editor.js @@ -132,7 +132,8 @@ define(["require", "exports", "tslib", "./Content/Remove/Handler", "../../../Cor let iconBanned = userRow.querySelector(".jsUserStatusBanned"); if (banned && iconBanned === null) { iconBanned = document.createElement("span"); - iconBanned.className = "icon icon16 fa-lock jsUserStatusBanned jsTooltip"; + iconBanned.innerHTML = ''; + iconBanned.classList.add("jsUserStatusBanned", "jsTooltip"); iconBanned.title = Language.get("wcf.user.status.banned"); userStatusIcons.appendChild(iconBanned); } @@ -143,7 +144,8 @@ define(["require", "exports", "tslib", "./Content/Remove/Handler", "../../../Cor let iconIsDisabled = userRow.querySelector(".jsUserStatusIsDisabled"); if (isDisabled && iconIsDisabled === null) { iconIsDisabled = document.createElement("span"); - iconIsDisabled.className = "icon icon16 fa-power-off jsUserStatusIsDisabled jsTooltip"; + iconIsDisabled.innerHTML = ''; + iconIsDisabled.classList.add("jsUserStatusIsDisabled", "jsTooltip"); iconIsDisabled.title = Language.get("wcf.user.status.isDisabled"); userStatusIcons.appendChild(iconIsDisabled); } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js index e34724427a..1eb4363376 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js @@ -47,8 +47,9 @@ define(["require", "exports", "tslib", "../Language", "../Clipboard", "../Ui/Not return; } const button = document.createElement("button"); - button.className = "icon icon24 fa-files-o pointer jsTooltip"; - button.setAttribute("title", Language.get("wcf.message.bbcode.code.copy")); + button.innerHTML = ''; + button.classList.add("jsTooltip"); + button.title = Language.get("wcf.message.bbcode.code.copy"); const clickCallback = async () => { await Clipboard.copyElementTextToClipboard(this.codeContainer); UiNotification.show(Language.get("wcf.message.bbcode.code.copy.success")); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js index 79ca064ffe..c89405ebc6 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js @@ -636,8 +636,9 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste } }); container.appendChild(openButton); - let icon = document.createElement("span"); - icon.className = "icon icon16 fa-calendar"; + let icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("calendar"); openButton.appendChild(icon); element.parentNode.insertBefore(container, element); container.insertBefore(element, openButton); @@ -654,8 +655,9 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste clearButton.style.setProperty("visibility", "hidden", ""); } container.appendChild(clearButton); - icon = document.createElement("span"); - icon.className = "icon icon16 fa-times"; + icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("xmark"); clearButton.appendChild(icon); } // check if the date input has one of the following classes set otherwise default to 'short' diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js index c008b02eda..feacc36faa 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Container/SuffixFormField.js @@ -41,7 +41,7 @@ define(["require", "exports", "tslib", "../../../Ui/Dropdown/Simple", "../../../ }); this._suffixField.value = target.dataset.value; this._suffixDropdownToggle.innerHTML = - target.dataset.label + ' '; + target.dataset.label + ' '; } /** * Destroys the suffix dropdown if the parent form is unregistered. diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Chooser.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Chooser.js index 57f1dd8dee..9e1c0ca0e8 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Chooser.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Chooser.js @@ -106,8 +106,9 @@ define(["require", "exports", "tslib", "../Core", "../Language", "../Dom/Util", dropdownToggle.innerHTML = ""; const div = document.createElement("div"); dropdownToggle.appendChild(div); - const icon = document.createElement("span"); - icon.className = "icon icon24 fa-question pointer"; + const icon = document.createElement("fa-icon"); + icon.size = 24; + icon.setIcon("question"); div.appendChild(icon); const span = document.createElement("span"); span.textContent = Language.get("wcf.global.language.noSelection"); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/List/Upload.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/List/Upload.js index 1e7398f39b..75f72576bd 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/List/Upload.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/List/Upload.js @@ -17,8 +17,9 @@ define(["require", "exports", "tslib", "../Upload", "../../Core"], function (req const span = this._button.querySelector("span"); const space = document.createTextNode(" "); span.insertBefore(space, span.childNodes[0]); - const icon = document.createElement("span"); - icon.className = "icon icon16 fa-upload"; + const icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("upload"); span.insertBefore(icon, span.childNodes[0]); } _getParameters() { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js index d27b87776e..e7417f80a7 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js @@ -422,8 +422,8 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../Pe editButton.dataset.objectId = media.mediaID.toString(); buttons.appendChild(editButton); editButton.innerHTML = ` - - + + `; const deleteButton = document.createElement("li"); @@ -436,8 +436,8 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../Pe })).replace(uuid, StringUtil.escapeHTML(media.filename)); buttons.appendChild(deleteButton); deleteButton.innerHTML = ` - - + + `; } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js index 767e2a8ba5..4149a177da 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js @@ -288,8 +288,8 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Event/Hand listItem.dataset.objectId = media.mediaID.toString(); buttons.appendChild(listItem); listItem.innerHTML = ` - - + + `; } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js index 1d7821ee1c..4515bdedb9 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js @@ -34,8 +34,9 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Dom/Traver const removeButton = document.createElement("p"); removeButton.className = "button"; button.insertAdjacentElement("afterend", removeButton); - const icon = document.createElement("span"); - icon.className = "icon icon16 fa-times"; + const icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("xmark"); removeButton.appendChild(icon); if (!storeElement.value) { Util_1.default.hide(removeButton); @@ -83,11 +84,14 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Dom/Traver else { let fileIcon = FileUtil.getIconNameByFilename(media.filename); if (fileIcon) { - fileIcon = "-" + fileIcon; + fileIcon = "file-" + fileIcon; + } + else { + fileIcon = "file"; } displayElement.innerHTML = `
- +

${media.filename}

${media.formattedFilesize}

@@ -129,11 +133,12 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Dom/Traver listItem.dataset.objectId = media.mediaID.toString(); buttons.appendChild(listItem); listItem.innerHTML = - ' "; + ` + + + + + `; } /** * Handles clicking on the remove button. diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Upload.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Upload.js index d53f529b07..35dbe49967 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Upload.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Upload.js @@ -7,12 +7,11 @@ * @module WoltLabSuite/Core/Media/Upload * @woltlabExcludeBundle tiny */ -define(["require", "exports", "tslib", "../Upload", "../Core", "../Dom/Util", "../Dom/Traverse", "../Language", "../User", "../Date/Util", "../FileUtil", "../Dom/Change/Listener", "../Event/Handler"], function (require, exports, tslib_1, Upload_1, Core, DomUtil, DomTraverse, Language, User_1, DateUtil, FileUtil, DomChangeListener, EventHandler) { +define(["require", "exports", "tslib", "../Upload", "../Core", "../Dom/Util", "../Language", "../User", "../Date/Util", "../FileUtil", "../Dom/Change/Listener", "../Event/Handler"], function (require, exports, tslib_1, Upload_1, Core, DomUtil, Language, User_1, DateUtil, FileUtil, DomChangeListener, EventHandler) { "use strict"; Upload_1 = tslib_1.__importDefault(Upload_1); Core = tslib_1.__importStar(Core); DomUtil = tslib_1.__importStar(DomUtil); - DomTraverse = tslib_1.__importStar(DomTraverse); Language = tslib_1.__importStar(Language); User_1 = tslib_1.__importDefault(User_1); DateUtil = tslib_1.__importStar(DateUtil); @@ -76,7 +75,8 @@ define(["require", "exports", "tslib", "../Upload", "../Core", "../Dom/Util", ". image = cell.querySelector(".icon48"); } const spinner = document.createElement("span"); - spinner.className = "icon icon48 fa-spinner mediaThumbnail"; + spinner.innerHTML = ''; + spinner.classList.add("mediaThumbnail"); DomUtil.replaceElement(image, spinner); // replace title and uploading user const ps = cell.querySelectorAll(".box48 > div > p"); @@ -111,10 +111,11 @@ define(["require", "exports", "tslib", "../Upload", "../Core", "../Dom/Util", ". fileElement = document.createElement("p"); } const thumbnail = document.createElement("div"); - thumbnail.className = "mediaThumbnail"; + thumbnail.classList.add("mediaThumbnail"); fileElement.appendChild(thumbnail); - const fileIcon = document.createElement("span"); - fileIcon.className = "icon icon144 fa-spinner"; + const fileIcon = document.createElement("fa-icon"); + fileIcon.size = 144; + fileIcon.setIcon("spinner"); thumbnail.appendChild(fileIcon); const mediaInformation = document.createElement("div"); mediaInformation.className = "mediaInformation"; @@ -211,9 +212,9 @@ define(["require", "exports", "tslib", "../Upload", "../Core", "../Dom/Util", ". } } else { - DomTraverse.childByTag(DomTraverse.childByClass(file, "mediaInformation"), "PROGRESS").remove(); + file.querySelector(".mediaInformation progress").remove(); if (media) { - const fileIcon = DomTraverse.childByTag(DomTraverse.childByClass(file, "mediaThumbnail"), "FA-ICON"); + const fileIcon = file.querySelector(".mediaThumbnail fa-icon"); this._replaceFileIcon(fileIcon, media, 144); file.classList.add("jsClipboardObject", "mediaFile", "jsObjectActionObject"); file.dataset.objectId = media.mediaID.toString(); @@ -230,13 +231,13 @@ define(["require", "exports", "tslib", "../Upload", "../Core", "../Dom/Util", ". filename: file.dataset.filename, }; } - const fileIcon = DomTraverse.childByTag(DomTraverse.childByClass(file, "mediaThumbnail"), "FA-ICON"); + const fileIcon = file.querySelector(".mediaThumbnail fa-icon"); fileIcon.setIcon("xmark"); file.classList.add("uploadFailed", "pointer", "jsTooltip"); file.title = Language.get("wcf.global.button.delete"); file.addEventListener("click", () => file.remove()); - const title = DomTraverse.childByClass(DomTraverse.childByClass(file, "mediaInformation"), "mediaTitle"); - title.innerText = Language.get(`wcf.media.upload.error.${error.errorType}`, { + const title = file.querySelector(".mediaInformation .mediaTitle"); + title.textContent = Language.get(`wcf.media.upload.error.${error.errorType}`, { filename: error.filename, }); } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Edit.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Edit.js index 7da1118e98..7253a62fb2 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Edit.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Edit.js @@ -182,8 +182,9 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Core", "../../Dom/Ch _hideEditor() { const editorContainer = this._editorContainer.querySelector(".editorContainer"); Util_1.default.hide(editorContainer); - const icon = document.createElement("span"); - icon.className = "icon icon48 fa-spinner"; + const icon = document.createElement("fa-icon"); + icon.size = 48; + icon.setIcon("spinner"); this._editorContainer.appendChild(icon); } /** diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js index ea27ef1903..ec5965beb3 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js @@ -319,14 +319,12 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "./S header.appendChild(title); if (options.closable) { const closeButton = document.createElement("button"); - closeButton.className = "dialogCloseButton jsTooltip"; + closeButton.innerHTML = ''; + closeButton.classList.add("dialogCloseButton", "jsTooltip"); closeButton.title = options.closeButtonLabel; closeButton.setAttribute("aria-label", options.closeButtonLabel); closeButton.addEventListener("click", () => this._close()); header.appendChild(closeButton); - const span = document.createElement("span"); - span.className = "icon icon24 fa-times"; - closeButton.appendChild(span); } // Dialogs are positioned using `left: 50%` as a hack to // force long softwrapping of text without causing other diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Builder.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Builder.js index c4c8149736..e100fc5417 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Builder.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dropdown/Builder.js @@ -66,8 +66,9 @@ define(["require", "exports", "tslib", "../../Core", "./Simple"], function (requ if (typeof data.icon.size === "number" && _validIconSizes.indexOf(~~data.icon.size) !== -1) { size = ~~data.icon.size; } - const icon = document.createElement("span"); - icon.className = `icon icon${size} fa-${data.icon.name}`; + const icon = document.createElement("fa-icon"); + icon.size = size; + icon.setIcon(data.icon.name, data.icon.forceSolid ? true : false); link.appendChild(icon); } const label = typeof data.label === "string" ? data.label.trim() : ""; diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Feed/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Feed/Dialog.js index 70d4077698..56cf799a31 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Feed/Dialog.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Feed/Dialog.js @@ -40,7 +40,9 @@ define(["require", "exports", "tslib", "../Dialog", "../../StringUtil", "../../L
- +
@@ -49,7 +51,9 @@ define(["require", "exports", "tslib", "../Dialog", "../../StringUtil", "../../L
- +
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/FlexibleMenu.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/FlexibleMenu.js index 194ea6dc9c..1e40f84ca8 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/FlexibleMenu.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/FlexibleMenu.js @@ -135,7 +135,7 @@ define(["require", "exports", "tslib", "../Dom/Change/Listener", "../Dom/Util", dropdown = document.createElement("li"); dropdown.className = "dropdown jsFlexibleMenuDropdown"; const icon = document.createElement("a"); - icon.className = "icon icon16 fa-list"; + icon.innerHTML = ''; dropdown.appendChild(icon); dropdownMenu = document.createElement("ul"); dropdownMenu.classList.add("dropdownMenu"); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList.js index 0ead64c283..693978bfb2 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList.js @@ -231,8 +231,8 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Languag content.textContent = value.value; listItem.appendChild(content); if (!data.element.disabled) { - const button = document.createElement("a"); - button.className = "icon icon16 fa-times"; + const button = document.createElement("button"); + button.innerHTML = ''; button.addEventListener("click", removeItem); listItem.appendChild(button); } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/Static.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/Static.js index 7bcc2fd84b..27ca9cd546 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/Static.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/Static.js @@ -166,8 +166,8 @@ define(["require", "exports", "tslib", "../../Core", "../../Dom/Traverse", "../. content.textContent = value.value; listItem.appendChild(content); if (forceRemoveIcon || !data.element.disabled) { - const button = document.createElement("a"); - button.className = "icon icon16 fa-times"; + const button = document.createElement("button"); + button.innerHTML = ''; button.addEventListener("click", (ev) => removeItem(ev)); listItem.appendChild(button); } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Like/Handler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Like/Handler.js index 82b6779320..d858c3159d 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Like/Handler.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Like/Handler.js @@ -188,8 +188,9 @@ define(["require", "exports", "tslib", "../../Core", "../../Dom/Change/Listener" } button.href = "#"; button.title = title; - const icon = document.createElement("span"); - icon.className = "icon icon16 fa-smile-o"; + const icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("smile"); if (reactionTypeID === undefined || reactionTypeID == 0) { icon.dataset.reactionTypeId = "0"; } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/InlineEditor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/InlineEditor.js index 9ba2945521..b8f68c67e8 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/InlineEditor.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/InlineEditor.js @@ -274,8 +274,9 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Core", "../../Dom/Ch const messageBodyEditor = document.createElement("div"); messageBodyEditor.className = "messageBody editor"; data.messageBodyEditor = messageBodyEditor; - const icon = document.createElement("span"); - icon.className = "icon icon48 fa-spinner"; + const icon = document.createElement("fa-icon"); + icon.size = 48; + icon.setIcon("spinner"); messageBodyEditor.appendChild(icon); data.messageBody.insertAdjacentElement("afterend", messageBodyEditor); Util_1.default.hide(data.messageBody); @@ -471,8 +472,9 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Core", "../../Dom/Ch const elementData = this._elements.get(this._activeElement); const editorContainer = elementData.messageBodyEditor.querySelector(".editorContainer"); Util_1.default.hide(editorContainer); - const icon = document.createElement("span"); - icon.className = "icon icon48 fa-spinner"; + const icon = document.createElement("fa-icon"); + icon.size = 48; + icon.setIcon("spinner"); elementData.messageBodyEditor.appendChild(icon); } /** diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js index fe26e735db..9d10772a3e 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Mobile.js @@ -59,11 +59,9 @@ define(["require", "exports", "tslib", "focus-trap", "../Core", "../Dom/Change/L return; } navigation.parentElement.classList.add("hasMobileNavigation"); - const button = document.createElement("a"); - button.className = "dropdownLabel"; - const span = document.createElement("span"); - span.className = "icon icon24 fa-ellipsis-v"; - button.appendChild(span); + const button = document.createElement("button"); + button.innerHTML = ''; + button.classList.add("dropdownLabel"); button.addEventListener("click", (event) => { event.preventDefault(); event.stopPropagation(); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js index 913c83e666..1ed76da0a5 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Menu/Main.js @@ -196,7 +196,7 @@ define(["require", "exports", "tslib", "./Container", "../../../Language", "../. button.classList.add("pageMenuMainItemToggle"); button.setAttribute("aria-expanded", "false"); button.setAttribute("aria-controls", menuId); - button.innerHTML = ''; + button.innerHTML = ''; let ariaLabel = menuItem.title; if (menuItem.link) { ariaLabel = Language.get("wcf.menu.page.button.toggle", { title: menuItem.title }); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search/Handler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search/Handler.js index e783b7be73..fcf0233d28 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search/Handler.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search/Handler.js @@ -47,8 +47,13 @@ define(["require", "exports", "tslib", "../../../Language", "../../../StringUtil } data.returnValues.forEach((item) => { let image = item.image; - if (/^fa-/.test(image)) { - image = ``; + if (Array.isArray(image)) { + const [iconName, forceSolid] = image; + image = ` + + `; } const listItem = document.createElement("li"); listItem.dataset.objectId = item.objectID.toString(); @@ -58,7 +63,7 @@ define(["require", "exports", "tslib", "../../../Language", "../../../StringUtil

- ${StringUtil.escapeHTML(item.title)} +

${description}
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Pagination.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Pagination.js index 4a47083aba..7b467355e5 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Pagination.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Pagination.js @@ -45,18 +45,22 @@ define(["require", "exports", "tslib", "../Core", "../Language", "../StringUtil" let listItem = document.createElement("li"); listItem.className = "skip"; list.appendChild(listItem); - let iconClassNames = "icon icon24 fa-chevron-left"; + let icon = document.createElement("fa-icon"); + icon.size = 24; + icon.setIcon("chevron-left"); if (this.activePage > 1) { const link = document.createElement("a"); - link.className = iconClassNames + " jsTooltip"; + link.className = "jsTooltip"; link.href = "#"; link.title = Language.get("wcf.global.page.previous"); link.rel = "prev"; + link.setAttribute("role", "button"); + link.append(icon); listItem.appendChild(link); link.addEventListener("click", (ev) => this.switchPage(this.activePage - 1, ev)); } else { - listItem.innerHTML = ''; + listItem.append(icon); listItem.classList.add("disabled"); } // add first page @@ -145,18 +149,22 @@ define(["require", "exports", "tslib", "../Core", "../Language", "../StringUtil" listItem = document.createElement("li"); listItem.className = "skip"; list.appendChild(listItem); - iconClassNames = "icon icon24 fa-chevron-right"; + icon = document.createElement("fa-icon"); + icon.size = 24; + icon.setIcon("chevron-right"); if (this.activePage < this.maxPage) { const link = document.createElement("a"); - link.className = iconClassNames + " jsTooltip"; + link.classList.add("jsTooltip"); link.href = "#"; link.title = Language.get("wcf.global.page.next"); link.rel = "next"; + link.setAttribute("role", "button"); + link.append(icon); listItem.appendChild(link); link.addEventListener("click", (ev) => this.switchPage(this.activePage + 1, ev)); } else { - listItem.innerHTML = ''; + listItem.append(icon); listItem.classList.add("disabled"); } if (hasHiddenPages) { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js index 70973730a0..9f1c7ef39e 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js @@ -158,23 +158,17 @@ define(["require", "exports", "tslib", "../../Core", "../../Devtools", "../../Ev const title = document.createElement("span"); title.textContent = Language.get("wcf.editor.autosave.restored"); container.appendChild(title); - const buttonKeep = document.createElement("a"); - buttonKeep.className = "jsTooltip"; - buttonKeep.href = "#"; + const buttonKeep = document.createElement("button"); + buttonKeep.innerHTML = ''; + buttonKeep.classList.add("jsTooltip"); buttonKeep.title = Language.get("wcf.editor.autosave.keep"); - buttonKeep.innerHTML = ''; - buttonKeep.addEventListener("click", (event) => { - event.preventDefault(); - this.hideOverlay(); - }); + buttonKeep.addEventListener("click", () => this.hideOverlay()); container.appendChild(buttonKeep); - const buttonDiscard = document.createElement("a"); - buttonDiscard.className = "jsTooltip"; - buttonDiscard.href = "#"; + const buttonDiscard = document.createElement("button"); + buttonDiscard.innerHTML = ''; + buttonDiscard.classList.add("jsTooltip"); buttonDiscard.title = Language.get("wcf.editor.autosave.discard"); - buttonDiscard.innerHTML = ''; - buttonDiscard.addEventListener("click", (event) => { - event.preventDefault(); + buttonDiscard.addEventListener("click", () => { // remove from storage this.clear(); // set code diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/TabMenu.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/TabMenu.js index 1dd751cd00..ca874ac73c 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/TabMenu.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/TabMenu.js @@ -178,8 +178,9 @@ define(["require", "exports", "tslib", "../Dom/Change/Listener", "../Dom/Util", let overlayLeft = menu.querySelector(".tabMenuOverlayLeft"); if (overflowLeft) { if (overlayLeft === null) { - overlayLeft = document.createElement("span"); - overlayLeft.className = "tabMenuOverlayLeft icon icon24 fa-angle-left"; + overlayLeft = document.createElement("button"); + overlayLeft.innerHTML = ''; + overlayLeft.className = "tabMenuOverlayLeft"; overlayLeft.addEventListener("click", () => { const listWidth = list.clientWidth; scrollMenu(list, list.scrollLeft - ~~(listWidth / 2), list.scrollLeft, list.scrollWidth, listWidth, false); @@ -195,8 +196,9 @@ define(["require", "exports", "tslib", "../Dom/Change/Listener", "../Dom/Util", let overlayRight = menu.querySelector(".tabMenuOverlayRight"); if (overflowRight) { if (overlayRight === null) { - overlayRight = document.createElement("span"); - overlayRight.className = "tabMenuOverlayRight icon icon24 fa-angle-right"; + overlayRight = document.createElement("button"); + overlayRight.innerHTML = ''; + overlayRight.className = "tabMenuOverlayRight"; overlayRight.addEventListener("click", () => { const listWidth = list.clientWidth; scrollMenu(list, list.scrollLeft + ~~(listWidth / 2), list.scrollLeft, list.scrollWidth, listWidth, false); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Editor.js index 18e906e55a..f12fc0b942 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Editor.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Editor.js @@ -112,7 +112,8 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Core", "../../Dom/Ut let banIcon = contentTitle.querySelector(".jsUserBanned"); if (data.actionName === "ban") { banIcon = document.createElement("span"); - banIcon.className = "icon icon24 fa-lock jsUserBanned jsTooltip"; + banIcon.innerHTML = ''; + banIcon.classList.add("jsUserBanned", "jsTooltip"); banIcon.title = data.returnValues; contentTitle.appendChild(banIcon); } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js index 9774ce04b1..dc8507bc12 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js @@ -132,8 +132,8 @@ define(["require", "exports", "tslib", "../../../Date/Util", "../../../StringUti
-
`; diff --git a/wcfsetup/install/files/lib/data/page/PageAction.class.php b/wcfsetup/install/files/lib/data/page/PageAction.class.php index 35d9b8e5b9..c5abbda8ce 100644 --- a/wcfsetup/install/files/lib/data/page/PageAction.class.php +++ b/wcfsetup/install/files/lib/data/page/PageAction.class.php @@ -337,8 +337,11 @@ class PageAction extends AbstractDatabaseObjectAction implements ISearchAction, */ public function getSearchResultList() { - /** @noinspection PhpUndefinedMethodInspection */ - return $this->pageEditor->getHandler()->lookup($this->parameters['data']['searchString']); + $pageHandler = $this->pageEditor->getHandler(); + + \assert($pageHandler instanceof ILookupPageHandler); + + return $pageHandler->lookup($this->parameters['data']['searchString']); } /** diff --git a/wcfsetup/install/files/lib/system/page/handler/TDecoratedCategoryLookupPageHandler.class.php b/wcfsetup/install/files/lib/system/page/handler/TDecoratedCategoryLookupPageHandler.class.php index 4ae33e8d26..87089e1f44 100644 --- a/wcfsetup/install/files/lib/system/page/handler/TDecoratedCategoryLookupPageHandler.class.php +++ b/wcfsetup/install/files/lib/system/page/handler/TDecoratedCategoryLookupPageHandler.class.php @@ -132,7 +132,7 @@ trait TDecoratedCategoryLookupPageHandler $results[] = [ 'description' => $description, - 'image' => 'fa-folder-open-o', + 'image' => ['folder', false], 'link' => $category->getLink(), 'objectID' => $categoryID, 'title' => $category->getTitle(), -- 2.20.1