Replace icons in pseudo elements

diff --git a/ts/WoltLabSuite/Core/Language/Chooser.ts b/ts/WoltLabSuite/Core/Language/Chooser.ts
index 8743f89e3ddfe297bf27c4745ffca2c7e527e04e..ba43b2a0cbc46a47bc0e3a0386982a3b969fb4e1 100644 (file)
--- 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 7c414312f725b4e3a9ae55257e3a42dbea28e9e4..712e9e3fd739a73e93b79cbbce4bcb968b5e926d 100644 (file)
--- 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 9e1c0ca0e8b9ace08661f22f4ca34c9f94a6f38b..31d7b7e978df5420ee76093efaaa38c94fac6d33 100644 (file)
--- 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 d2f191dc90a09d2554565e506f710445ed4a3ee8..3835b6cac1fd3e724c6d89c860717d89b5362b80 100644 (file)
--- 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 fca690e58b7b770b80b36ff1747c43a88983127d..174cf316c3874e06dc9bca56c8f468cc6c935608 100644 (file)
--- 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 6360a227d09b0194481dfe061921355b3573bcb8..de9b2d6b707844bad8a4f0aafb32f3b98bdf13f6 100644 (file)
--- 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;