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

[Jan Holesovsky (via logerrit)]

 loleaflet/css/device-mobile.css               |   34 +++++++++++++++++++++++
 loleaflet/css/partsPreviewControl.css         |   38 --------------------------
 loleaflet/src/control/Control.PartsPreview.js |   21 ++++++++++++++
 loleaflet/src/layer/tile/ImpressTileLayer.js  |    6 ++--
 4 files changed, 59 insertions(+), 40 deletions(-)

New commits:
commit 7cd2beb8660498d1dedd37b23057c4e4b0bc55a4
Author:     Jan Holesovsky <kendy at collabora.com>
AuthorDate: Thu Apr 2 14:14:19 2020 +0200
Commit:     Jan Holesovsky <kendy at collabora.com>
CommitDate: Thu Apr 2 16:37:45 2020 +0200

    mobile: Handle the portrait / landscape for slide sorter in JS too.
    
    Change-Id: I214501fac516f4d581d3c1e8a95650a87db1a4aa
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/91570
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Jan Holesovsky <kendy at collabora.com>

diff --git a/loleaflet/css/device-mobile.css b/loleaflet/css/device-mobile.css
index 5a40ba1b2..685d16454 100644
--- a/loleaflet/css/device-mobile.css
+++ b/loleaflet/css/device-mobile.css
@@ -624,6 +624,24 @@ td[id^=tb_spreadsheet-toolbar_item]:focus table.w2ui-button div.w2ui-icon, td[id
 	bottom: 33px;
 }
 
+#slide-sorter.portrait {
+	max-height: 60px;
+}
+
+.preview-img-portrait {
+	min-width: 37px;
+	max-width: 60px;
+	max-height: 45px;
+	margin: 0px;
+}
+
+.preview-frame-portrait {
+	max-height: 60px;
+	max-width: initial;
+	display: table-cell;
+	padding-right: 1em;
+}
+
 /* Slidesorter in landscape mode */
 #presentation-controls-wrapper.landscape {
 	top: 41px;
@@ -650,3 +668,19 @@ td[id^=tb_spreadsheet-toolbar_item]:focus table.w2ui-button div.w2ui-icon, td[id
 #document-container.landscape.parts-preview-document.keyboard {
 	left: 0px !important;
 }
+
+#slide-sorter.landscape {
+	max-width: 120px;
+}
+
+.preview-img-landscape {
+	min-width: 40px;
+	max-width: 40px;
+	margin-left: 8px;
+}
+
+.preview-frame-landscape {
+	max-height: initial;
+	max-width: 66px;
+	display: block;
+}
diff --git a/loleaflet/css/partsPreviewControl.css b/loleaflet/css/partsPreviewControl.css
index 618d2e0a7..4ea0d3c7e 100644
--- a/loleaflet/css/partsPreviewControl.css
+++ b/loleaflet/css/partsPreviewControl.css
@@ -33,44 +33,6 @@
 	margin-left: 20px;
 	}
 
- at media (max-width: 767px) and (orientation: portrait), (max-device-width: 767px) and (orientation: portrait) {
-	#slide-sorter {
-		max-height: 60px;
-	}
-
-	.preview-img {
-		min-width: 37px;
-		max-width: 60px;
-		max-height: 45px;
-		margin: 0px;
-	}
-
-	.preview-frame {
-		max-height: 60px;
-		max-width: initial;
-		display: table-cell;
-		padding-right: 1em;
-	}
-}
-
- at media (max-height: 767px) and (orientation: landscape), (max-device-height: 767px) and (orientation: landscape) {
-	#slide-sorter {
-		max-width: 120px;
-	}
-
-	.preview-img {
-		min-width: 40px;
-		max-width: 40px;
-		margin-left: 8px;
-	}
-
-	.preview-frame {
-		max-height: initial;
-		max-width: 66px;
-		display: block;
-	}
-}
-
 /* The current part the user is on. */
 .preview-img-currentpart {
     border-color: #000000;
diff --git a/loleaflet/src/control/Control.PartsPreview.js b/loleaflet/src/control/Control.PartsPreview.js
index 4d9776566..22c81be19 100644
--- a/loleaflet/src/control/Control.PartsPreview.js
+++ b/loleaflet/src/control/Control.PartsPreview.js
@@ -150,6 +150,27 @@ L.Control.PartsPreview = L.Control.extend({
 						L.DomUtil.addClass(this._previewTiles[j], 'preview-img-selectedpart');
 				}
 			}
+
+			// update portrait / landscape
+			var removePreviewImg = 'preview-img-portrait';
+			var addPreviewImg = 'preview-img-landscape';
+			var removePreviewFrame = 'preview-frame-portrait';
+			var addPreviewFrame = 'preview-frame-landscape';
+			if (L.DomUtil.isPortrait()) {
+				removePreviewImg = 'preview-img-landscape';
+				addPreviewImg = 'preview-img-portrait';
+				removePreviewFrame = 'preview-frame-landscape';
+				addPreviewFrame = 'preview-frame-portrait';
+			}
+
+			for (i = 0; i < parts; i++) {
+				L.DomUtil.removeClass(this._previewTiles[i], removePreviewImg);
+				L.DomUtil.addClass(this._previewTiles[i], addPreviewImg);
+			}
+
+			var previewFrame = $(this._partsPreviewCont).find('.preview-frame');
+			previewFrame.removeClass(removePreviewFrame);
+			previewFrame.addClass(addPreviewFrame);
 		}
 	},
 
diff --git a/loleaflet/src/layer/tile/ImpressTileLayer.js b/loleaflet/src/layer/tile/ImpressTileLayer.js
index 0319cf7b1..ee0b75e9c 100644
--- a/loleaflet/src/layer/tile/ImpressTileLayer.js
+++ b/loleaflet/src/layer/tile/ImpressTileLayer.js
@@ -100,6 +100,7 @@ L.ImpressTileLayer = L.TileLayer.extend({
 
 		var presentationControlWrapperElem = L.DomUtil.get('presentation-controls-wrapper');
 		var documentContainer = L.DomUtil.get('document-container');
+		var slideSorter = L.DomUtil.get('slide-sorter');
 
 		// update portrait / landscape
 		var remove = 'portrait';
@@ -111,12 +112,14 @@ L.ImpressTileLayer = L.TileLayer.extend({
 
 		L.DomUtil.removeClass(presentationControlWrapperElem, remove);
 		L.DomUtil.removeClass(documentContainer, remove);
+		L.DomUtil.removeClass(slideSorter, remove);
 		L.DomUtil.addClass(presentationControlWrapperElem, add);
 		L.DomUtil.addClass(documentContainer, add);
+		L.DomUtil.addClass(slideSorter, add);
 
 		// update parts
 		var visible = L.DomUtil.getStyle(presentationControlWrapperElem, 'display');
-		if (!this._isSlidePaneVisible && visible !== 'none') {
+		if (visible !== 'none') {
 			this._map.fire('updateparts', {
 				selectedPart: this._selectedPart,
 				selectedParts: this._selectedParts,
@@ -125,7 +128,6 @@ L.ImpressTileLayer = L.TileLayer.extend({
 				partNames: this._partHashes
 			});
 		}
-		this._isSlidePaneVisible = !(visible === 'none');
 	},
 
 	onMobileInit: function (map) {