[Libreoffice-commits] online.git: Branch 'distro/collabora/collabora-online-3' - loleaflet/dist loleaflet/src

[Tor Lillqvist]

 loleaflet/dist/leaflet.css |    3 +++
 loleaflet/src/map/Map.js   |    6 +++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

New commits:
commit 3ff7a36fdbc800658f56db8f97eafd0490755610
Author: Tor Lillqvist <tml at collabora.com>
Date:   Wed Jul 4 13:24:34 2018 +0300

    Don't show the ruler if the window has too small height
    
    Of course, for this to really be worthy of being called "responsive"
    web design, we should update this decision also if the window is
    re-sized dynamically, like when a desktop browser's window is
    arbitrarily re-sized by the user, or a mobile device is rotated
    between portrait and landscape orientation, or a mobile device enters
    or leaves some kind of split-screen mode where another application
    than the browser shares the display.
    
    We use 5% of the window height as the limit for how much vertical
    space the ruler can occupy. Sadly I don't know if there is any way to
    get the height attribute of .loleaflet-ruler in
    loleaflet/dist/leaflet.css (which is 20px) in Map.js, so I hard-code
    the limit of window height as the magic value 400 (5% of 400 is 20).
    
    Change-Id: I02bb54f309bc116ae1a0b5264e72b9ba674f56e4
    Reviewed-on: https://gerrit.libreoffice.org/56940
    Reviewed-by: Michael Meeks <michael.meeks at collabora.com>
    Tested-by: Michael Meeks <michael.meeks at collabora.com>

diff --git a/loleaflet/dist/leaflet.css b/loleaflet/dist/leaflet.css
index d1a615a50..6cee86cf2 100644
--- a/loleaflet/dist/leaflet.css
+++ b/loleaflet/dist/leaflet.css
@@ -775,6 +775,9 @@ input.clipboard {
 
 .loleaflet-ruler {
 	background-color: #efefef;
+	/* If you change the below 20px, also change the window height limit
+	 * in the doclayerinit thing in Map.js.
+	 */
 	height: 20px;
 	width: 100vw;
 	margin: 0px;
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index b3ef7730b..1791e240e 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -117,7 +117,11 @@ L.Map = L.Evented.extend({
 			if (!this.initComplete) {
 				this._fireInitComplete('doclayerinit');
 			}
-			if (this._docLayer._docType == 'text') {
+			// Don't show the ruler if the window is small. Use 5% of window height as
+			// the fairly arbitrary limit how high the ruler can be. We "know" (from
+			// leaflet.css, .loleaflet-ruler, height) that the ruler height is 20px.
+			// That makes the limit 400px.
+			if ($(window).height() >= 400 && this._docLayer._docType == 'text') {
 				var interactiveRuler = this._permission === 'edit' ? true : false;
 				L.control.ruler({position:'topleft', interactive:interactiveRuler}).addTo(this);
 			}