From 2793c82f4f4d4e347f233a47bfaca94853509ce8 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Thu, 13 Jul 2023 18:27:50 +0200 Subject: [PATCH] Improve UI of the reset button in the date picker --- ts/WoltLabSuite/Core/Date/Picker.ts | 17 ++++++++++------- .../files/js/WoltLabSuite/Core/Date/Picker.js | 13 ++++++++----- .../PreloadPhrasesCollectingListener.class.php | 1 + wcfsetup/install/lang/de.xml | 1 + wcfsetup/install/lang/en.xml | 1 + 5 files changed, 21 insertions(+), 12 deletions(-) diff --git a/ts/WoltLabSuite/Core/Date/Picker.ts b/ts/WoltLabSuite/Core/Date/Picker.ts index 2f4b780f8b..3585002af4 100644 --- a/ts/WoltLabSuite/Core/Date/Picker.ts +++ b/ts/WoltLabSuite/Core/Date/Picker.ts @@ -830,10 +830,13 @@ const DatePicker = { element.parentNode!.insertBefore(container, element); container.insertBefore(element, openButton); - let clearButton: HTMLAnchorElement | null = null; + let clearButton: HTMLButtonElement | null = null; if (!disableClear) { - clearButton = document.createElement("a"); - clearButton.className = "inputSuffix button"; + clearButton = document.createElement("button"); + clearButton.type = "button"; + clearButton.className = "inputSuffix button jsTooltip"; + clearButton.title = Language.get("wcf.date.datePicker.clear"); + clearButton.setAttribute("aria-label", Language.get("wcf.date.datePicker.clear")); clearButton.addEventListener("click", () => { if (!element.disabled) { this.clear(element); @@ -841,7 +844,7 @@ const DatePicker = { }); if (isEmpty) { - clearButton.style.setProperty("visibility", "hidden", ""); + clearButton.hidden = true; } container.appendChild(clearButton); @@ -975,7 +978,7 @@ const DatePicker = { // show clear button if (!data.disableClear) { - data.clearButton!.style.removeProperty("visibility"); + data.clearButton!.hidden = false; } }, @@ -1004,7 +1007,7 @@ const DatePicker = { element.value = ""; if (!data.disableClear) { - data.clearButton!.style.setProperty("visibility", "hidden", ""); + data.clearButton!.hidden = true; } data.isEmpty = true; @@ -1054,7 +1057,7 @@ type InputElementOrString = HTMLInputElement | string; type Callback = () => void; interface DatePickerData { - clearButton: HTMLAnchorElement | null; + clearButton: HTMLButtonElement | null; shadow: HTMLInputElement; disableClear: boolean; diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js index 855537ce1e..f0af85c64e 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js @@ -695,15 +695,18 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste container.insertBefore(element, openButton); let clearButton = null; if (!disableClear) { - clearButton = document.createElement("a"); - clearButton.className = "inputSuffix button"; + clearButton = document.createElement("button"); + clearButton.type = "button"; + clearButton.className = "inputSuffix button jsTooltip"; + clearButton.title = Language.get("wcf.date.datePicker.clear"); + clearButton.setAttribute("aria-label", Language.get("wcf.date.datePicker.clear")); clearButton.addEventListener("click", () => { if (!element.disabled) { this.clear(element); } }); if (isEmpty) { - clearButton.style.setProperty("visibility", "hidden", ""); + clearButton.hidden = true; } container.appendChild(clearButton); icon = document.createElement("fa-icon"); @@ -822,7 +825,7 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste data.shadow.value = DateUtil.format(date, format); // show clear button if (!data.disableClear) { - data.clearButton.style.removeProperty("visibility"); + data.clearButton.hidden = false; } }, /** @@ -845,7 +848,7 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste element.removeAttribute("data-value"); element.value = ""; if (!data.disableClear) { - data.clearButton.style.setProperty("visibility", "hidden", ""); + data.clearButton.hidden = true; } data.isEmpty = true; data.shadow.value = ""; diff --git a/wcfsetup/install/files/lib/system/event/listener/PreloadPhrasesCollectingListener.class.php b/wcfsetup/install/files/lib/system/event/listener/PreloadPhrasesCollectingListener.class.php index bb3b901bd8..62df1ecf15 100644 --- a/wcfsetup/install/files/lib/system/event/listener/PreloadPhrasesCollectingListener.class.php +++ b/wcfsetup/install/files/lib/system/event/listener/PreloadPhrasesCollectingListener.class.php @@ -34,6 +34,7 @@ final class PreloadPhrasesCollectingListener $event->preload('wcf.date.datePicker.nextMonth'); $event->preload('wcf.date.datePicker.previousMonth'); $event->preload('wcf.date.datePicker.year'); + $event->preload('wcf.date.datePicker.clear'); $event->preload('wcf.dialog.button.cancel'); $event->preload('wcf.dialog.button.close'); diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml index 9ac76c6476..5423114f1c 100644 --- a/wcfsetup/install/lang/de.xml +++ b/wcfsetup/install/lang/de.xml @@ -3776,6 +3776,7 @@ Dateianhänge: + diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml index ebd20552ce..2c45b5fbc2 100644 --- a/wcfsetup/install/lang/en.xml +++ b/wcfsetup/install/lang/en.xml @@ -3722,6 +3722,7 @@ Attachments: + -- 2.20.1