[Libreoffice-commits] online.git: loleaflet/src

[Dennis Francis (via logerrit)]

 loleaflet/src/control/Control.ColumnHeader.js |   13 ++++++++++++-
 loleaflet/src/control/Control.Header.js       |   21 +++++++++++++++++----
 2 files changed, 29 insertions(+), 5 deletions(-)

New commits:
commit ab64d2e0c315d26c358ff99548bb7353708eab6b
Author:     Dennis Francis <dennis.francis at collabora.com>
AuthorDate: Wed Jan 29 13:38:16 2020 +0530
Commit:     Jan Holesovsky <kendy at collabora.com>
CommitDate: Wed Feb 5 14:02:17 2020 +0100

    Adjust column-header height with zoom-level too
    
    Introduce a new method 'getHeaderZoomScale' to L.Control.Header
    that returns current zoom-scale w.r.t to 100% zoom. It also lets
    you limit the zoomScale between a upper and lower bound. Use this
    method to scale column header height. Reuse this method to
    scale font-size too.
    
    Change-Id: I841ef2d73752cdc2206549d540633e179f19677f
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/87671
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Jan Holesovsky <kendy at collabora.com>

diff --git a/loleaflet/src/control/Control.ColumnHeader.js b/loleaflet/src/control/Control.ColumnHeader.js
index 174901b15..76c536e17 100644
--- a/loleaflet/src/control/Control.ColumnHeader.js
+++ b/loleaflet/src/control/Control.ColumnHeader.js
@@ -36,6 +36,7 @@ L.Control.ColumnHeader = L.Control.Header.extend({
 		this._canvasContext = this._canvas.getContext('2d');
 		this._setCanvasWidth();
 		this._setCanvasHeight();
+		this._canvasBaseHeight = this._canvasHeight;
 
 		var scale = L.getDpiScaleFactor();
 		this._canvasContext.scale(scale, scale);
@@ -388,6 +389,12 @@ L.Control.ColumnHeader = L.Control.Header.extend({
 		this._setCanvasWidth();
 		this._setCanvasHeight();
 		this._canvasContext.clearRect(0, 0, canvas.width, canvas.height);
+		// Adjust (column) _headerHeight according to zoomlevel. This is used below to call resize()
+		// where column/corner header are resized. Besides the document container and row header container
+		// are moved up or down as required so that there is no gap/overlap below column header.
+		// Limit zoomScale so that the column header is not too small (unreadable) or too big.
+		this._headerHeight = Math.ceil(this._canvasBaseHeight *
+			this.getHeaderZoomScale(/* lowerBound */ 0.74, /* upperBound */ 1.15));
 
 		// Reset state
 		this._current = -1;
@@ -648,7 +655,11 @@ L.Control.ColumnHeader = L.Control.Header.extend({
 		var rowHdrTop = parseInt(L.DomUtil.getStyle(rowHeader, 'top')) + deltaTop;
 		var docTop = parseInt(L.DomUtil.getStyle(document, 'top')) + deltaTop;
 		L.DomUtil.setStyle(rowHeader, 'top', rowHdrTop + 'px');
-		L.DomUtil.setStyle(document, 'top', docTop + 'px');
+		// L.DomUtil.setStyle does not seem to affect the attributes when
+		// one of the media queries of document-container element are
+		// active (non-desktop case). Using style.setProperty directly
+		// seems to work as expected for both mobile/desktop.
+		document.style.setProperty('top', docTop + 'px', 'important');
 
 		this._setCanvasHeight(height);
 
diff --git a/loleaflet/src/control/Control.Header.js b/loleaflet/src/control/Control.Header.js
index 37d03062c..167a782ad 100644
--- a/loleaflet/src/control/Control.Header.js
+++ b/loleaflet/src/control/Control.Header.js
@@ -72,17 +72,16 @@ L.Control.Header = L.Control.extend({
 		var fontHeight = parseInt(L.DomUtil.getStyle(elem, 'line-height'));
 		var rate = fontHeight / fontSize;
 		this._font = {
-			_map: this._map,
+			_hdr: this,
 			_baseFontSize: fontSize,
 			_fontSizeRate: rate,
 			_fontFamily: fontFamily,
 			getFont: function() {
-				var zoomScale = this._map.getZoomScale(this._map.getZoom(),
-					this._map.options.defaultZoom);
 				// Limit zoomScale to 115%. At 120% the row ids at the bottom eat all
 				// horizontal margins and it looks ugly. Beyond 120% the row ids get
 				// clipped out visibly.
-				zoomScale = Math.min(zoomScale, 1.15);
+				var zoomScale = this._hdr.getHeaderZoomScale(
+					/* lowerBound */ 0.5, /* upperBound */ 1.15);
 
 				return Math.floor(this._baseFontSize * zoomScale) +
 					'px/' +
@@ -743,6 +742,20 @@ L.Control.Header = L.Control.extend({
 		}
 	},
 
+	getHeaderZoomScale : function(lowerBound, upperBound) {
+		if (typeof lowerBound === 'undefined' || lowerBound < 0)
+			lowerBound = 0.5;
+		if (typeof upperBound === 'undefined' || upperBound < 0)
+			upperBound = 2.0;
+		if (lowerBound > upperBound) {
+			lowerBound = 0.5;
+			upperBound = 2.0;
+		}
+		var zoomScale = this._map.getZoomScale(this._map.getZoom(),
+			this._map.options.defaultZoom);
+		return Math.min(Math.max(zoomScale, lowerBound), upperBound);
+	},
+
 	onDragStart: function () {},
 	onDragMove: function () {},
 	onDragEnd: function () {},