From 08e8a9c385c72b6c64e61c404a024046293ec99d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A9ven=20Car?= Date: Mon, 19 Aug 2024 11:08:50 +0200 Subject: [PATCH] scrollWindow: fix view scrolling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * make scrollWindow height fix * special case data.horizontal.page_size == 0 * improve computation of rowHeight * don't resize dynamically dimensions based on dom changes Fixes #9770 Signed-off-by: Méven Car Change-Id: I54990645d17e1e352397f1d57b4cc671af6b5839 --- browser/css/jsdialogs.css | 16 +++- .../control/jsdialog/Widget.ScrolledWindow.js | 75 +++++++++++++++---- 2 files changed, 76 insertions(+), 15 deletions(-) diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css index e8e2b527d3ba..4804f46dc611 100644 --- a/browser/css/jsdialogs.css +++ b/browser/css/jsdialogs.css @@ -188,6 +188,12 @@ td.jsdialog > [id^='table-box']:not(.sidebar) { grid-gap: 4px; width: fit-content; } +#SpecialCharactersDialog .jsdialog.ui-scrollwindow.has-ui-drawing-area { + height: 279px; +} +#SpecialCharactersDialog .jsdialog.ui-scrollwindow.has-ui-drawing-area #showcharset.ui-drawing-area-container { + height: 279px; +} /* Find and replace dialog */ #search_grid, #replace_grid { @@ -2036,6 +2042,11 @@ input[type='number']:hover::-webkit-outer-spin-button { flex-direction: column; } +#FormulaDialog #ParameterPage > #paramgrid .ui-scrollwindow { + width: 400px; + max-height: 200px; +} + #FormulaDialog > [id^='dialog-vbox'] > [id^='box'] > [id^='box'] { grid-auto-columns: max-content; grid-column-gap: 8px; @@ -2205,8 +2216,9 @@ kbd, margin: 0; } -#DocumentPropertiesDialog #customprops .jsdialog.ui-scrollwindow { - max-height: min-content; +#DocumentPropertiesDialog #customprops #CustomInfoPage > .jsdialog.ui-scrollwindow:not(.formulabar) { + height: 540px; + max-height: none; } #ServerAuditDialog #ServerAuditDialog-mainbox { diff --git a/browser/src/control/jsdialog/Widget.ScrolledWindow.js b/browser/src/control/jsdialog/Widget.ScrolledWindow.js index c41ae5070e52..cabe5c9f58ba 100644 --- a/browser/src/control/jsdialog/Widget.ScrolledWindow.js +++ b/browser/src/control/jsdialog/Widget.ScrolledWindow.js @@ -54,7 +54,8 @@ function _scrolledWindowControl(parentContainer, data, builder) { scrollwindow.id = data.id; // drawing areas inside scrollwindows should be not cropped so we add special class - if (_hasDrawingAreaInside(data.children)) + let drawingArea = _hasDrawingAreaInside(data.children); + if (drawingArea) L.DomUtil.addClass(scrollwindow, 'has-ui-drawing-area'); var content = L.DomUtil.create('div', builder.options.cssClass + ' ui-scrollwindow-content', scrollwindow); @@ -70,7 +71,7 @@ function _scrolledWindowControl(parentContainer, data, builder) { if (data.vertical.policy === 'always') scrollwindow.style.overflowY = 'scroll'; - var noHorizontal = data.horizontal.policy === 'never'; + var noHorizontal = data.horizontal.policy === 'never' || data.horizontal.page_size == 0; if (noHorizontal) scrollwindow.style.overflowX = 'hidden'; if (data.horizontal.policy === 'always') @@ -99,24 +100,42 @@ function _scrolledWindowControl(parentContainer, data, builder) { return; } - if (!noVertical) { - content.style.height = (realContentHeight + verticalSteps) + 'px'; - scrollwindow.style.height = (realContentHeight + margin) + 'px'; + + if (!noVertical && data.vertical.upper > 0) { + if (rowHeight == 0) { + // determine the height a row + let height = drawingArea ? scrollwindow.scrollHeight : realContentHeight; + if (data.vertical.upper >= data.vertical.page_size) { + rowHeight = height / data.vertical.page_size; + } else { + rowHeight = height / data.vertical.upper; + } + } + var totalContentHeight = data.vertical.upper * rowHeight; + let marginTop = data.vertical.value * rowHeight; + + if (totalContentHeight != scrollwindow.scrollHeight) { + // only if view has changed + content.style.marginBlockStart = marginTop + 'px'; + content.style.marginBlockEnd = (totalContentHeight - marginTop - realContentHeight) + 'px'; + } + scrollwindow.scrollTop = marginTop; } if (!noHorizontal) { content.style.width = (realContentWidth + horizontalSteps) + 'px'; - scrollwindow.style.width = (realContentWidth + margin) + 'px'; + content.scrollLeft = data.horizontal.value * 10; + content.style.marginInlineEnd = margin + 'px'; + content.style.marginInlineStart = content.scrollLeft + 'px'; } - - content.scrollTop = data.vertical.value * 10; - content.scrollLeft = data.horizontal.value * 10; - - content.style.margin = content.scrollTop + 'px ' + margin + 'px ' + margin + 'px ' + content.scrollLeft + 'px'; }; if (data.user_managed_scrolling !== false) setTimeout(updateSize, 0); + } + + var lastScrollV = null; + var lastScrollH = null; var sendTimer = null; if ((!noVertical && verticalSteps) || (!noHorizontal && horizontalSteps)) { @@ -131,11 +150,41 @@ function _scrolledWindowControl(parentContainer, data, builder) { content.style.width = (realContentWidth - scrollLeft + horizontalSteps) + 'px'; } + if (sendTimer) clearTimeout(sendTimer); sendTimer = setTimeout(function () { - builder.callback('scrolledwindow', 'scrollv', scrollwindow, Math.round(scrollTop / 10), builder); - builder.callback('scrolledwindow', 'scrollh', scrollwindow, Math.round(scrollLeft / 10), builder); }, 50); + + + if (data.user_managed_scrolling !== false) { + + if (!noVertical) { + let newScrollV = Math.round(scrollwindow.scrollTop / rowHeight); + let totalContentHeight = scrollwindow.scrollHeight; + let offset = newScrollV * rowHeight; + let marginTop = offset; + content.style.marginBlockStart = marginTop + 'px'; + content.style.marginBlockEnd = (totalContentHeight - marginTop - scrollwindow.clientHeight) + 'px'; + } + if (!noHorizontal) { + realContentWidth = scrollwindow.scrollWidth; + content.style.width = (realContentWidth - scrollwindow.scrollLeft + horizontalSteps) + 'px'; + content.style.marginInlineStart = scrollwindow.scrollLeft + 'px'; + } + } + + var newScrollV = Math.round(scrollwindow.scrollTop / rowHeight); + if (lastScrollV !== newScrollV) { + lastScrollV = newScrollV; + builder.callback('scrolledwindow', 'scrollv', scrollwindow, newScrollV, builder); + } + + var newScrollH = Math.round(scrollwindow.scrollLeft / 10); + if (lastScrollH !== newScrollH) { + lastScrollH = newScrollH; + builder.callback('scrolledwindow', 'scrollh', scrollwindow, newScrollH, builder); + } + }, 50); }); }