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

gokaysatir (via logerrit) logerrit at kemper.freedesktop.org
Wed Sep 16 12:19:24 UTC 2020


 loleaflet/css/device-mobile.css               |   10 +-----
 loleaflet/css/mobilewizard.css                |   40 +++++++++++++++++-------
 loleaflet/src/control/Control.Menubar.js      |    4 +-
 loleaflet/src/control/Control.MobileWizard.js |   42 ++++++--------------------
 loleaflet/src/control/Control.PartsPreview.js |    8 ++++
 loleaflet/src/control/Parts.js                |   33 +++++++++++++-------
 loleaflet/src/layer/tile/ImpressTileLayer.js  |   17 ++++++++++
 7 files changed, 88 insertions(+), 66 deletions(-)

New commits:
commit 596d70187c61199063495e23ebda132a7d06ae2b
Author:     gokaysatir <gokaysatir at collabora.com>
AuthorDate: Sat Sep 12 16:52:20 2020 +0300
Commit:     Andras Timar <andras.timar at collabora.com>
CommitDate: Wed Sep 16 14:19:20 2020 +0200

    loleaflet: Hide portrait view previews on layout view.
    
    Header code is updated to avoid creating/deleting it every time.
    Some CSS adjustments to increase maintainability. Example: There were 2 scroll bars in mobile-wizard. Scrolling was not smooth. And some other improvements.
    On layout view, 2 separate slide-sorter containers were visible. One of them is hidden now.
    
    Change-Id: Ic4201b176812f6ca00402777423feced7ee8284c
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/102521
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Andras Timar <andras.timar at collabora.com>

diff --git a/loleaflet/css/device-mobile.css b/loleaflet/css/device-mobile.css
index eb012192b..e5b441137 100644
--- a/loleaflet/css/device-mobile.css
+++ b/loleaflet/css/device-mobile.css
@@ -749,21 +749,15 @@ td[id^='tb_spreadsheet-toolbar_item']:focus table.w2ui-button div.w2ui-icon, td[
 #mobile-wizard-header.landscape {
 	display: none;
 }
-#mobile-wizard-content.with-slide-sorter-above.landscape {
-	top: 48px !important;
-}
 #mobile-wizard-header.portrait {
 	display: block;
 }
-#mobile-wizard-content.with-slide-sorter-above.portrait {
-	top: 111px !important;
-}
 
 /* Related to mobile-wizard based menubar */
-#mobile-wizard.menuwizard.landscape #mobile-wizard-content.with-slide-sorter-above.landscape {
+#mobile-wizard.menuwizard.landscape #mobile-wizard-content.landscape {
 	overflow-y: auto !important;
 }
-#mobile-wizard.menuwizard.portrait #mobile-wizard-content.with-slide-sorter-above.portrait {
+#mobile-wizard.menuwizard.portrait #mobile-wizard-content.portrait {
 	overflow-y: hidden !important;
 }
 
diff --git a/loleaflet/css/mobilewizard.css b/loleaflet/css/mobilewizard.css
index 0f2d23145..42d34f356 100644
--- a/loleaflet/css/mobilewizard.css
+++ b/loleaflet/css/mobilewizard.css
@@ -190,10 +190,12 @@ p.mobile-wizard.ui-combobox-text.selected {
 #mobile-wizard-content {
 	overflow-y: scroll;
 	overflow-x: hidden;
-	position: absolute;
-	top: 111px;
-	bottom: 0px;
+	position: static;
 	width: 100%;
+	height: calc(100% - 48px);
+}
+#mobile-wizard.portrait > #mobile-wizard-header:not([style*='none']) ~ #mobile-wizard-content {
+	height: calc(100% - 121px);
 }
 #mobile-wizard.funcwizard div#mobile-wizard-content.hideHelpBG {
 	background: none !important;
@@ -201,19 +203,13 @@ p.mobile-wizard.ui-combobox-text.selected {
 #mobile-wizard.funcwizard div#mobile-wizard-content.showHelpBG {
 	background: url('images/lc_helpindex_secondary.svg') no-repeat right 16px bottom 88px / 124px !important;
 }
-#mobile-wizard-content:not(.with-slide-sorter-above), .menuwizard #mobile-wizard-content.with-slide-sorter-above{
-	top: 48px !important;
-}
-#mobile-wizard-content.with-slide-sorter-above {
-	top: 128px !important;
-	overflow-x: hidden;
-}
+
 #ParaPropertyPanel > .ui-content{
 	display: flex;
 	flex-wrap: wrap !important;
 	justify-content: space-around;
 }
-.with-slide-sorter-above > .ui-tabs-content > div[title='Layouts']{
+.ui-tabs-content > div[title='Layouts']{
 	justify-content: center;
 	-ms-box-orient: horizontal !important;
 	display: -webkit-box;
@@ -226,6 +222,7 @@ p.mobile-wizard.ui-combobox-text.selected {
 	align-items: center !important;
 	-webkit-flex-wrap: wrap !important;
 	flex-wrap: wrap !important;
+	margin-top: 25px;
 }
 #rotationlabel, #cellbackgroundlabel, #NumberFormatCurrency > .unolabel, #NumberFormatPercent > .unolabel, #NumberFormatDecimal > .unolabel{
 	display: none;
@@ -265,7 +262,7 @@ p.mobile-wizard.ui-combobox-text.selected {
 	z-index: 1000;
 	background-color: white;
 	box-shadow: 0px -2px 4px 1px #00000030;
-	overflow-y: scroll;
+	overflow-y: hidden;
 }
 
 #mobile-wizard-content *{
@@ -280,6 +277,7 @@ p.mobile-wizard.ui-combobox-text.selected {
 	color: #636363;
 	border-bottom: 1px solid #dddddd !important;
 	position: sticky;
+	z-index: 2;
 }
 
 .ui-content.mobile-wizard {
@@ -455,6 +453,24 @@ p.mobile-wizard.ui-combobox-text.selected {
 	padding: 0px;
 }
 
+#mobile-wizard-tabs {
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	background-color: white;
+}
+
+#mobile-wizard-header {
+	position: sticky;
+	top: 0;
+	background-color: white;
+	z-index: 2;
+}
+
+#mobile-wizard.portrait > #mobile-wizard-header + #mobile-wizard-tabs {
+	top: 60px;
+}
+
 .ui-tab.mobile-wizard {
 	display: table-cell;
 	width: 49%;
diff --git a/loleaflet/src/control/Control.Menubar.js b/loleaflet/src/control/Control.Menubar.js
index 8caebf2ba..be8312573 100644
--- a/loleaflet/src/control/Control.Menubar.js
+++ b/loleaflet/src/control/Control.Menubar.js
@@ -1221,14 +1221,14 @@ L.Control.Menubar = L.Control.extend({
 			this._map.duplicatePage();
 		} else if (id === 'deletepage') {
 			var map = this._map;
-			vex.dialog.confirm({
+			vex.dialog.open({
 				message: _('Are you sure you want to delete this slide?'),
 				buttons: [
 					$.extend({}, vex.dialog.buttons.YES, { text: _('OK') }),
 					$.extend({}, vex.dialog.buttons.NO, { text: _('Cancel') })
 				],
 				callback: function(e) {
-					if (e) {
+					if (e === true) {
 						map.deletePage();
 					}
 				}
diff --git a/loleaflet/src/control/Control.MobileWizard.js b/loleaflet/src/control/Control.MobileWizard.js
index b51311b5d..d26cc9fed 100644
--- a/loleaflet/src/control/Control.MobileWizard.js
+++ b/loleaflet/src/control/Control.MobileWizard.js
@@ -121,8 +121,8 @@ L.Control.MobileWizard = L.Control.extend({
 		if (window.pageMobileWizard === true)
 			window.pageMobilewizard = false;
 
-		if (this.isMobileWizardHeaderVisible)
-			this._removeMobileWizardHeader();
+		if (this._map.getDocType() === 'presentation')
+			this._hideSlideSorter();
 
 		this._updateToolbarItemStateByClose();
 
@@ -354,7 +354,7 @@ L.Control.MobileWizard = L.Control.extend({
 			}
 
 			if (this.map.getDocType() === 'presentation' && this._isSlidePropertyPanel(data))
-				this._addMobileWizardHeader();
+				this._showSlideSorter();
 
 			this._isActive = true;
 			var currentPath = null;
@@ -429,42 +429,20 @@ L.Control.MobileWizard = L.Control.extend({
 		}
 	},
 
-	_addMobileWizardHeader: function() {
-		if (!this.isMobileWizardHeaderVisible) {
-			var map = this._map;
-			this.isMobileWizardHeaderVisible = true;
-			L.Control.MobileWizard.mergeOptions({maxHeight: '55%'});
-			var mobileWizard = L.DomUtil.get('mobile-wizard');
-			var mobileWizardContent = L.DomUtil.get('mobile-wizard-content');
-			var container = L.DomUtil.createWithId('div', 'mobile-wizard-header', mobileWizard);
-			var preview = L.DomUtil.createWithId('div', 'mobile-slide-sorter', container);
-			L.DomUtil.toBack(container);
-			map.addControl(L.control.partsPreview(container, preview, {
-				fetchThumbnail: false,
-				allowOrientation: false,
-				axis: 'x',
-				imageClass: 'preview-img-portrait',
-				frameClass: 'preview-frame-portrait'
-			}));
-			L.DomUtil.addClass(mobileWizardContent, 'with-slide-sorter-above');
-		}
+	// These 2 functions show/hide mobile-slide-sorter.
+	_showSlideSorter: function() {
+		document.getElementById('mobile-wizard-header').style.display = 'block';
 	},
 
-	_removeMobileWizardHeader: function() {
-		if (this.isMobileWizardHeaderVisible) {
-			this.isMobileWizardHeaderVisible = false;
-			L.Control.MobileWizard.mergeOptions({maxHeight: '45%'});
-			$('#mobile-wizard-header').remove();
-			var mobileWizardContent = L.DomUtil.get('mobile-wizard-content');
-			L.DomUtil.removeClass(mobileWizardContent, 'with-slide-sorter-above');
-		}
+	_hideSlideSorter: function() {
+		document.getElementById('mobile-wizard-header').style.display = 'none';
 	},
 
 	_isSlidePropertyPanel: function(data) {
-		try {
+		if (data.children.length > 0 && data.children[0].children && data.children[0].children.length > 1) {
 			var panels = data.children[0].children;
 			return panels[0].id === 'SlideBackgroundPanel' && panels[1].id === 'SdLayoutsPanel';
-		} catch (e) {
+		} else {
 			return false;
 		}
 	},
diff --git a/loleaflet/src/control/Control.PartsPreview.js b/loleaflet/src/control/Control.PartsPreview.js
index 6d7b6c3da..dfc37beaf 100644
--- a/loleaflet/src/control/Control.PartsPreview.js
+++ b/loleaflet/src/control/Control.PartsPreview.js
@@ -184,6 +184,14 @@ L.Control.PartsPreview = L.Control.extend({
 				$(this._partsPreviewCont).mCustomScrollbar('destroy');
 				this.createScrollbar();
 			}
+
+			// Hide portrait view's previews when layout view is used.
+			if (this._direction === 'x' && window.mode.isMobile()) {
+				document.getElementById('mobile-slide-sorter').style.display = 'block';
+			}
+			else if (this._direction === 'y' && window.mode.isMobile()) {
+				document.getElementById('mobile-slide-sorter').style.display = 'none';
+			}
 		}
 	},
 
diff --git a/loleaflet/src/control/Parts.js b/loleaflet/src/control/Parts.js
index 3fc5c0961..427a3238f 100644
--- a/loleaflet/src/control/Parts.js
+++ b/loleaflet/src/control/Parts.js
@@ -238,10 +238,13 @@ L.Map.include({
 
 		var docLayer = this._docLayer;
 
-		this.fire('insertpage', {
-			selectedPart: docLayer._selectedPart,
-			parts:        docLayer._parts
-		});
+		// At least for Impress, we should not fire this. It causes a circular reference.
+		if (this.getDocType() !== 'presentation') {
+			this.fire('insertpage', {
+				selectedPart: docLayer._selectedPart,
+				parts:        docLayer._parts
+			});
+		}
 
 		docLayer._parts++;
 
@@ -261,10 +264,13 @@ L.Map.include({
 		this._socket.sendMessage('uno .uno:DuplicatePage');
 		var docLayer = this._docLayer;
 
-		this.fire('insertpage', {
-			selectedPart: docLayer._selectedPart,
-			parts:        docLayer._parts
-		});
+		// At least for Impress, we should not fire this. It causes a circular reference.
+		if (this.getDocType() !== 'presentation') {
+			this.fire('insertpage', {
+				selectedPart: docLayer._selectedPart,
+				parts:        docLayer._parts
+			});
+		}
 
 		docLayer._parts++;
 		this.setPart('next');
@@ -298,10 +304,13 @@ L.Map.include({
 			return;
 		}
 
-		this.fire('deletepage', {
-			selectedPart: docLayer._selectedPart,
-			parts:        docLayer._parts
-		});
+		// At least for Impress, we should not fire this. It causes a circular reference.
+		if (this.getDocType() !== 'presentation') {
+			this.fire('deletepage', {
+				selectedPart: docLayer._selectedPart,
+				parts:        docLayer._parts
+			});
+		}
 
 		docLayer._parts--;
 		if (docLayer._selectedPart >= docLayer._parts) {
diff --git a/loleaflet/src/layer/tile/ImpressTileLayer.js b/loleaflet/src/layer/tile/ImpressTileLayer.js
index 8112cd1fb..f9ecab128 100644
--- a/loleaflet/src/layer/tile/ImpressTileLayer.js
+++ b/loleaflet/src/layer/tile/ImpressTileLayer.js
@@ -30,6 +30,23 @@ L.ImpressTileLayer = L.TileLayer.extend({
 
 		this._annotationManager = L.annotationManagerImpress(map);
 		map.uiManager.initializeSpecializedUI('presentation');
+		if (window.mode.isMobile()) {
+
+			L.Control.MobileWizard.mergeOptions({maxHeight: '55%'});
+			var mobileWizard = L.DomUtil.get('mobile-wizard');
+			//var mobileWizardContent = L.DomUtil.get('mobile-wizard-content');
+			var container = L.DomUtil.createWithId('div', 'mobile-wizard-header', mobileWizard);
+			var preview = L.DomUtil.createWithId('div', 'mobile-slide-sorter', container);
+			L.DomUtil.toBack(container);
+			map.addControl(L.control.partsPreview(container, preview, {
+				fetchThumbnail: false,
+				allowOrientation: false,
+				axis: 'x',
+				imageClass: 'preview-img-portrait',
+				frameClass: 'preview-frame-portrait'
+			}));
+			//L.DomUtil.addClass(mobileWizardContent, 'with-slide-sorter-above');
+		}
 	},
 
 	getAnnotation: function (id) {


More information about the Libreoffice-commits mailing list