From 926919b5d999ebb5132a81e024a0fa530f13f112 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sun, 2 Jul 2023 19:12:04 +0200 Subject: [PATCH] Use the native `
` for spoilers and refresh the design See WoltLab/WCF#4612 --- com.woltlab.wcf/templates/spoilerMetaCode.tpl | 22 +++------ ts/WoltLabSuite/Core/Bbcode/Spoiler.ts | 45 ------------------- .../js/WoltLabSuite/Core/Bbcode/Spoiler.js | 41 ----------------- .../install/files/style/bbcode/spoiler.scss | 28 +++++------- 4 files changed, 17 insertions(+), 119 deletions(-) delete mode 100644 ts/WoltLabSuite/Core/Bbcode/Spoiler.ts delete mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Spoiler.js diff --git a/com.woltlab.wcf/templates/spoilerMetaCode.tpl b/com.woltlab.wcf/templates/spoilerMetaCode.tpl index 6dfa845694..28cf08486f 100644 --- a/com.woltlab.wcf/templates/spoilerMetaCode.tpl +++ b/com.woltlab.wcf/templates/spoilerMetaCode.tpl @@ -1,19 +1,7 @@ -
-
- -
- - - +
diff --git a/ts/WoltLabSuite/Core/Bbcode/Spoiler.ts b/ts/WoltLabSuite/Core/Bbcode/Spoiler.ts deleted file mode 100644 index 1f72bfb43b..0000000000 --- a/ts/WoltLabSuite/Core/Bbcode/Spoiler.ts +++ /dev/null @@ -1,45 +0,0 @@ -/** - * Generic handler for spoiler boxes. - * - * @author Alexander Ebert - * @copyright 2001-2020 WoltLab GmbH - * @license GNU Lesser General Public License - */ - -import * as Core from "../Core"; -import * as Language from "../Language"; -import DomUtil from "../Dom/Util"; - -function onClick(event: Event, content: HTMLElement, toggleButton: HTMLAnchorElement): void { - event.preventDefault(); - - toggleButton.classList.toggle("active"); - - const isActive = toggleButton.classList.contains("active"); - if (isActive) { - DomUtil.show(content); - } else { - DomUtil.hide(content); - } - - toggleButton.setAttribute("aria-expanded", isActive ? "true" : "false"); - content.setAttribute("aria-hidden", isActive ? "false" : "true"); - - if (!Core.stringToBool(toggleButton.dataset.hasCustomLabel || "")) { - toggleButton.textContent = Language.get( - toggleButton.classList.contains("active") ? "wcf.bbcode.spoiler.hide" : "wcf.bbcode.spoiler.show", - ); - } -} - -export function observe(): void { - const className = "jsSpoilerBox"; - document.querySelectorAll(`.${className}`).forEach((container: HTMLElement) => { - container.classList.remove(className); - - const toggleButton = container.querySelector(".jsSpoilerToggle") as HTMLAnchorElement; - const content = container.querySelector(".spoilerBoxContent") as HTMLElement; - - toggleButton.addEventListener("click", (ev) => onClick(ev, content, toggleButton)); - }); -} diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Spoiler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Spoiler.js deleted file mode 100644 index ea955c0707..0000000000 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Spoiler.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Generic handler for spoiler boxes. - * - * @author Alexander Ebert - * @copyright 2001-2020 WoltLab GmbH - * @license GNU Lesser General Public License - */ -define(["require", "exports", "tslib", "../Core", "../Language", "../Dom/Util"], function (require, exports, tslib_1, Core, Language, Util_1) { - "use strict"; - Object.defineProperty(exports, "__esModule", { value: true }); - exports.observe = void 0; - Core = tslib_1.__importStar(Core); - Language = tslib_1.__importStar(Language); - Util_1 = tslib_1.__importDefault(Util_1); - function onClick(event, content, toggleButton) { - event.preventDefault(); - toggleButton.classList.toggle("active"); - const isActive = toggleButton.classList.contains("active"); - if (isActive) { - Util_1.default.show(content); - } - else { - Util_1.default.hide(content); - } - toggleButton.setAttribute("aria-expanded", isActive ? "true" : "false"); - content.setAttribute("aria-hidden", isActive ? "false" : "true"); - if (!Core.stringToBool(toggleButton.dataset.hasCustomLabel || "")) { - toggleButton.textContent = Language.get(toggleButton.classList.contains("active") ? "wcf.bbcode.spoiler.hide" : "wcf.bbcode.spoiler.show"); - } - } - function observe() { - const className = "jsSpoilerBox"; - document.querySelectorAll(`.${className}`).forEach((container) => { - container.classList.remove(className); - const toggleButton = container.querySelector(".jsSpoilerToggle"); - const content = container.querySelector(".spoilerBoxContent"); - toggleButton.addEventListener("click", (ev) => onClick(ev, content, toggleButton)); - }); - } - exports.observe = observe; -}); diff --git a/wcfsetup/install/files/style/bbcode/spoiler.scss b/wcfsetup/install/files/style/bbcode/spoiler.scss index 224be226cd..940a4a0db5 100644 --- a/wcfsetup/install/files/style/bbcode/spoiler.scss +++ b/wcfsetup/install/files/style/bbcode/spoiler.scss @@ -1,19 +1,15 @@ -.spoilerBox { - clear: both; - margin: 1em 0; - - > .spoilerBoxContent { - background-color: var(--wcfContentBackground); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - padding: 10px 20px; - margin-top: 10px; +.spoilerBox[open] .spoilerContent { + background-color: var(--wcfContentBackground); + border: 1px solid var(--wcfContentBorderInner); + border-radius: var(--wcfBorderRadius); + margin-top: 5px; + padding: 10px; +} - > p:first-child { - margin-top: 0; - } +.spoilerContent > :first-child { + margin-top: 0 !important; +} - > p:last-child { - margin-bottom: 0; - } - } +.spoilerContent > :last-child { + margin-bottom: 0 !important; } -- 2.20.1