scrollWindow: fix view scrolling

* 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 <[email protected]> Change-Id: I54990645d17e1e352397f1d57b4cc671af6b5839
CollaboraOnline · Aug 29, 2024 · 08e8a9c · 08e8a9c
1 parent 24ab8c1
commit 08e8a9c
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 15 deletions.
diff --git 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
@@ -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);
 		});
 	}