From d3af9bc817b8c39b42df6639cdde69d87143be2a Mon Sep 17 00:00:00 2001 From: =?utf8?q?Tim=20D=C3=BCsterhus?= Date: Mon, 8 Mar 2021 12:54:01 +0100 Subject: [PATCH] Swap icons used in password toggle Icons in buttons in WoltLab Suite usually indicate what happens when the button is clicked and do not represent the current state. --- ts/WoltLabSuite/Core/Ui/Password.ts | 10 +++++----- .../install/files/js/WoltLabSuite/Core/Ui/Password.js | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/ts/WoltLabSuite/Core/Ui/Password.ts b/ts/WoltLabSuite/Core/Ui/Password.ts index 5c73e44415..b9ef3e4882 100644 --- a/ts/WoltLabSuite/Core/Ui/Password.ts +++ b/ts/WoltLabSuite/Core/Ui/Password.ts @@ -42,7 +42,7 @@ function initElement(input: HTMLInputElement): void { inputAddon.appendChild(button); const icon = document.createElement("span"); - icon.classList.add("icon", "icon16", "fa-eye-slash"); + icon.classList.add("icon", "icon16", "fa-eye"); button.appendChild(icon); button.addEventListener("click", () => { @@ -58,13 +58,13 @@ function initElement(input: HTMLInputElement): void { function toggle(input: HTMLInputElement, button: HTMLElement, icon: HTMLElement): void { if (input.type === "password") { - icon.classList.add("fa-eye"); - icon.classList.remove("fa-eye-slash"); + icon.classList.remove("fa-eye"); + icon.classList.add("fa-eye-slash"); button.dataset.tooltip = Language.get("wcf.global.form.password.button.hide"); input.type = "text"; } else { - icon.classList.remove("fa-eye"); - icon.classList.add("fa-eye-slash"); + icon.classList.add("fa-eye"); + icon.classList.remove("fa-eye-slash"); button.dataset.tooltip = Language.get("wcf.global.form.password.button.show"); input.type = "password"; } diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js index 816e2fe419..f1f503a9da 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js @@ -39,7 +39,7 @@ define(["require", "exports", "tslib", "../Dom/Change/Listener", "../Language"], button.setAttribute("aria-hidden", "true"); inputAddon.appendChild(button); const icon = document.createElement("span"); - icon.classList.add("icon", "icon16", "fa-eye-slash"); + icon.classList.add("icon", "icon16", "fa-eye"); button.appendChild(icon); button.addEventListener("click", () => { toggle(input, button, icon); @@ -53,14 +53,14 @@ define(["require", "exports", "tslib", "../Dom/Change/Listener", "../Language"], } function toggle(input, button, icon) { if (input.type === "password") { - icon.classList.add("fa-eye"); - icon.classList.remove("fa-eye-slash"); + icon.classList.remove("fa-eye"); + icon.classList.add("fa-eye-slash"); button.dataset.tooltip = Language.get("wcf.global.form.password.button.hide"); input.type = "text"; } else { - icon.classList.remove("fa-eye"); - icon.classList.add("fa-eye-slash"); + icon.classList.add("fa-eye"); + icon.classList.remove("fa-eye-slash"); button.dataset.tooltip = Language.get("wcf.global.form.password.button.show"); input.type = "password"; } -- 2.20.1