From ec7b3be20bd64cb58b7b63e37618f57714c54dec Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 22 Aug 2022 21:19:36 +0200 Subject: [PATCH] Replace icons in pseudo elements --- ts/WoltLabSuite/Core/Language/Chooser.ts | 14 ++++++++++++- ts/WoltLabSuite/Core/Language/Input.ts | 19 +++++++++++++++++- .../js/WoltLabSuite/Core/Language/Chooser.js | 12 ++++++++++- .../js/WoltLabSuite/Core/Language/Input.js | 20 ++++++++++++++++++- .../style/bootstrap/mixin/dropdownMenu.scss | 9 --------- wcfsetup/install/files/style/ui/dropdown.scss | 13 ------------ 6 files changed, 61 insertions(+), 26 deletions(-) diff --git a/ts/WoltLabSuite/Core/Language/Chooser.ts b/ts/WoltLabSuite/Core/Language/Chooser.ts index 8743f89e3d..ba43b2a0cb 100644 --- a/ts/WoltLabSuite/Core/Language/Chooser.ts +++ b/ts/WoltLabSuite/Core/Language/Chooser.ts @@ -65,7 +65,7 @@ function initElement( DomUtil.hide(element); const dropdownToggle = document.createElement("a"); - dropdownToggle.className = "dropdownToggle dropdownIndicator boxFlag box24 inputPrefix"; + dropdownToggle.className = "dropdownToggle boxFlag box24 inputPrefix"; if (parent.nodeName === "DD") { dropdownToggle.classList.add("button"); } @@ -91,6 +91,10 @@ function initElement( select(chooserId, languageId, target); } + const icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("caret-down", true); + // add language dropdown items Object.entries(languages).forEach(([langId, language]) => { const listItem = document.createElement("li"); @@ -123,6 +127,7 @@ function initElement( if (+langId === languageId) { dropdownToggle.innerHTML = link.innerHTML; + dropdownToggle.append(icon); } }); @@ -143,6 +148,7 @@ function initElement( if (languageId === 0) { dropdownToggle.innerHTML = link.innerHTML; + dropdownToggle.append(icon); } listItem.addEventListener("click", callbackClick); @@ -159,6 +165,7 @@ function initElement( const span = document.createElement("span"); span.textContent = Language.get("wcf.global.language.noSelection"); + span.append(icon); div.appendChild(span); } @@ -207,6 +214,11 @@ function select(chooserId: string, languageId: number, listItem?: HTMLElement): chooser.dropdownToggle.innerHTML = listItem.children[0].innerHTML; + const icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("caret-down", true); + chooser.dropdownToggle.append(icon); + _choosers.set(chooserId, chooser); // execute callback diff --git a/ts/WoltLabSuite/Core/Language/Input.ts b/ts/WoltLabSuite/Core/Language/Input.ts index 7c414312f7..712e9e3fd7 100644 --- a/ts/WoltLabSuite/Core/Language/Input.ts +++ b/ts/WoltLabSuite/Core/Language/Input.ts @@ -206,7 +206,17 @@ function select(elementId: string, languageId: number, isInit: boolean): void { // update label data.buttonLabel.textContent = label; - data.buttonLabel.classList[languageId ? "add" : "remove"]("active"); + data.buttonLabel.querySelector("fa-icon")?.remove(); + if (languageId) { + data.buttonLabel.classList.add("active"); + + const icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("caret-down", true); + data.buttonLabel.append(icon); + } else { + data.buttonLabel.classList.remove("active"); + } data.languageId = languageId; } @@ -248,8 +258,15 @@ function dropdownToggle(containerId: string, action: NotificationAction): void { } } + const span = item.querySelector("span")!; + span.querySelector("fa-icon")?.remove(); if (hasMissingValue) { item.classList.add("missingValue"); + + const icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("triangle-exclamation"); + span.append(icon); } else { item.classList.remove("missingValue"); } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Chooser.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Chooser.js index 9e1c0ca0e8..31d7b7e978 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Chooser.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Chooser.js @@ -35,7 +35,7 @@ define(["require", "exports", "tslib", "../Core", "../Language", "../Dom/Util", } Util_1.default.hide(element); const dropdownToggle = document.createElement("a"); - dropdownToggle.className = "dropdownToggle dropdownIndicator boxFlag box24 inputPrefix"; + dropdownToggle.className = "dropdownToggle boxFlag box24 inputPrefix"; if (parent.nodeName === "DD") { dropdownToggle.classList.add("button"); } @@ -55,6 +55,9 @@ define(["require", "exports", "tslib", "../Core", "../Language", "../Dom/Util", } select(chooserId, languageId, target); } + const icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("caret-down", true); // add language dropdown items Object.entries(languages).forEach(([langId, language]) => { const listItem = document.createElement("li"); @@ -83,6 +86,7 @@ define(["require", "exports", "tslib", "../Core", "../Language", "../Dom/Util", link.appendChild(span); if (+langId === languageId) { dropdownToggle.innerHTML = link.innerHTML; + dropdownToggle.append(icon); } }); // add dropdown item for "no selection" @@ -99,6 +103,7 @@ define(["require", "exports", "tslib", "../Core", "../Language", "../Dom/Util", listItem.appendChild(link); if (languageId === 0) { dropdownToggle.innerHTML = link.innerHTML; + dropdownToggle.append(icon); } listItem.addEventListener("click", callbackClick); } @@ -112,6 +117,7 @@ define(["require", "exports", "tslib", "../Core", "../Language", "../Dom/Util", div.appendChild(icon); const span = document.createElement("span"); span.textContent = Language.get("wcf.global.language.noSelection"); + span.append(icon); div.appendChild(span); } Simple_1.default.init(dropdownToggle); @@ -149,6 +155,10 @@ define(["require", "exports", "tslib", "../Core", "../Language", "../Dom/Util", chooser.element.value = languageId.toString(); Core.triggerEvent(chooser.element, "change"); chooser.dropdownToggle.innerHTML = listItem.children[0].innerHTML; + const icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("caret-down", true); + chooser.dropdownToggle.append(icon); _choosers.set(chooserId, chooser); // execute callback if (typeof chooser.callback === "function") { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Input.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Input.js index d2f191dc90..3835b6cac1 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Input.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Language/Input.js @@ -123,6 +123,7 @@ define(["require", "exports", "tslib", "../Dom/Util", "../Language", "../Ui/Drop * Selects a language or non-i18n from the dropdown list. */ function select(elementId, languageId, isInit) { + var _a; const data = _elements.get(elementId); const dropdownMenu = Simple_1.default.getDropdownMenu(data.element.closest(".inputAddon").id); const item = dropdownMenu.querySelector(`[data-language-id="${languageId}"]`); @@ -141,7 +142,17 @@ define(["require", "exports", "tslib", "../Dom/Util", "../Language", "../Ui/Drop } // update label data.buttonLabel.textContent = label; - data.buttonLabel.classList[languageId ? "add" : "remove"]("active"); + (_a = data.buttonLabel.querySelector("fa-icon")) === null || _a === void 0 ? void 0 : _a.remove(); + if (languageId) { + data.buttonLabel.classList.add("active"); + const icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("caret-down", true); + data.buttonLabel.append(icon); + } + else { + data.buttonLabel.classList.remove("active"); + } data.languageId = languageId; } if (!isInit) { @@ -165,6 +176,7 @@ define(["require", "exports", "tslib", "../Dom/Util", "../Language", "../Ui/Drop const data = _elements.get(elementId); const values = _values.get(elementId); Array.from(dropdownMenu.children).forEach((item) => { + var _a; const languageId = ~~(item.dataset.languageId || ""); if (languageId) { let hasMissingValue = false; @@ -176,8 +188,14 @@ define(["require", "exports", "tslib", "../Dom/Util", "../Language", "../Ui/Drop hasMissingValue = !values.get(languageId); } } + const span = item.querySelector("span"); + (_a = span.querySelector("fa-icon")) === null || _a === void 0 ? void 0 : _a.remove(); if (hasMissingValue) { item.classList.add("missingValue"); + const icon = document.createElement("fa-icon"); + icon.size = 16; + icon.setIcon("triangle-exclamation"); + span.append(icon); } else { item.classList.remove("missingValue"); diff --git a/wcfsetup/install/files/style/bootstrap/mixin/dropdownMenu.scss b/wcfsetup/install/files/style/bootstrap/mixin/dropdownMenu.scss index fca690e58b..174cf316c3 100644 --- a/wcfsetup/install/files/style/bootstrap/mixin/dropdownMenu.scss +++ b/wcfsetup/install/files/style/bootstrap/mixin/dropdownMenu.scss @@ -56,15 +56,6 @@ &.missingValue > span { padding-right: 40px; position: relative; - - &:after { - color: $wcfStatusErrorText; - content: $fa-var-exclamation-triangle; - font-family: FontAwesome; - position: absolute; - right: 20px; - top: 5px; - } } &.disabled { diff --git a/wcfsetup/install/files/style/ui/dropdown.scss b/wcfsetup/install/files/style/ui/dropdown.scss index 6360a227d0..de9b2d6b70 100644 --- a/wcfsetup/install/files/style/ui/dropdown.scss +++ b/wcfsetup/install/files/style/ui/dropdown.scss @@ -16,13 +16,6 @@ &.inputAddon { > .dropdownToggle { padding: 4px 7px; - - > span.active:after { - content: $fa-var-caret-down; - font-family: FontAwesome; - font-size: 14px; - margin-left: 7px; - } } } @@ -76,12 +69,6 @@ } } -.dropdownIndicator::after { - content: $fa-var-caret-down; - font-family: FontAwesome; - margin-left: 5px; -} - .boxFlag > .box24, .boxFlag.box24 { align-items: center; -- 2.20.1