From 3c4160a9d50514433fc5ab43944dac7461ec899e Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 9 May 2022 15:51:17 +0200 Subject: [PATCH] Dialogs could become too wide with lots of text --- ts/WoltLabSuite/Core/Ui/Dialog.ts | 19 +++++++++++++++++++ .../files/js/WoltLabSuite/Core/Ui/Dialog.js | 17 +++++++++++++++++ wcfsetup/install/files/style/ui/dialog.scss | 7 +++++++ 3 files changed, 43 insertions(+) diff --git a/ts/WoltLabSuite/Core/Ui/Dialog.ts b/ts/WoltLabSuite/Core/Ui/Dialog.ts index 695b7b4cd9..ee349cd6a6 100644 --- a/ts/WoltLabSuite/Core/Ui/Dialog.ts +++ b/ts/WoltLabSuite/Core/Ui/Dialog.ts @@ -401,6 +401,25 @@ const UiDialog = { closeButton.appendChild(span); } + // Dialogs are positioned using `left: 50%` as a hack to + // force long softwrapping of text without causing other + // elements to be squished together. The actual value for + // `transform` must not use percent values, because this + // causes blurry text rendering in Chromium. + const resizeObserver = new ResizeObserver((entries) => { + if (dialog.getAttribute("aria-hidden") === "false") { + for (const entry of entries) { + const contentBoxSize: ResizeObserverSize = Array.isArray(entry.contentBoxSize) + ? entry.contentBoxSize[0] + : entry.contentBoxSize; + + const offset = Math.floor(contentBoxSize.inlineSize / 2); + dialog.style.setProperty("transform", `translateX(-${offset}px)`); + } + } + }); + resizeObserver.observe(dialog); + const contentContainer = document.createElement("div"); contentContainer.classList.add("dialogContent"); if (options.disableContentPadding) contentContainer.classList.add("dialogContentNoPadding"); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js index 18521fb4c2..65c330e1fd 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js @@ -329,6 +329,23 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Change/Listener", "./S span.className = "icon icon24 fa-times"; closeButton.appendChild(span); } + // Dialogs are positioned using `left: 50%` as a hack to + // force long softwrapping of text without causing other + // elements to be squished together. The actual value for + // `transform` must not use percent values, because this + // causes blurry text rendering in Chromium. + const resizeObserver = new ResizeObserver((entries) => { + if (dialog.getAttribute("aria-hidden") === "false") { + for (const entry of entries) { + const contentBoxSize = Array.isArray(entry.contentBoxSize) + ? entry.contentBoxSize[0] + : entry.contentBoxSize; + const offset = Math.floor(contentBoxSize.inlineSize / 2); + dialog.style.setProperty("transform", `translateX(-${offset}px)`); + } + } + }); + resizeObserver.observe(dialog); const contentContainer = document.createElement("div"); contentContainer.classList.add("dialogContent"); if (options.disableContentPadding) diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss index e45883b324..81313321ff 100644 --- a/wcfsetup/install/files/style/ui/dialog.scss +++ b/wcfsetup/install/files/style/ui/dialog.scss @@ -67,6 +67,13 @@ min-width: 500px; position: absolute; + // This is required to prevent dialogs from becoming + // unncessarily wide by forcing text to wrap. We cannot + // use `transform` to offset this indentation, because + // this causes a blurry text rendering in Chromium. + // The offset is calculated using a `ResizeObserver`. + left: 50%; + &[aria-hidden="false"] { animation: wcfDialog 0.3s; animation-fill-mode: forwards; -- 2.20.1