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

Szymon KÅ‚os (via logerrit) logerrit at kemper.freedesktop.org
Tue Sep 8 07:59:36 UTC 2020


 loleaflet/css/device-mobile.css               |    4 +-
 loleaflet/src/control/Control.Menubar.js      |   10 -------
 loleaflet/src/control/Control.MobileWizard.js |   23 ++++++++++++++---
 loleaflet/src/control/Control.Toolbar.js      |   35 +++++++++++---------------
 loleaflet/src/control/Control.UIManager.js    |   25 +++++++++++++++++-
 5 files changed, 62 insertions(+), 35 deletions(-)

New commits:
commit c780726c52ae08d4e63e9ab5525d62f68532196d
Author:     Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Thu Aug 6 12:32:55 2020 +0200
Commit:     Szymon Kłos <szymon.klos at collabora.com>
CommitDate: Tue Sep 8 09:59:21 2020 +0200

    Handle back button on mobile
    
    This patch created states in history when using
    mobilewizard, allows to use back button which navigates
    back in the menu.
    
    Used History API and popstate event.
    
    Also unified onClose handler to close the app.
    
    Change-Id: Id9da9bf71ee6183525ea20d43a416d3ddabec7c2
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/100301
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Jan Holesovsky <kendy at collabora.com>
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/102177
    Tested-by: Jenkins
    Reviewed-by: Szymon Kłos <szymon.klos at collabora.com>

diff --git a/loleaflet/src/control/Control.Menubar.js b/loleaflet/src/control/Control.Menubar.js
index 074ec743a..7e4788534 100644
--- a/loleaflet/src/control/Control.Menubar.js
+++ b/loleaflet/src/control/Control.Menubar.js
@@ -1250,15 +1250,7 @@ L.Control.Menubar = L.Control.extend({
 			this._map.fire('postMessage', {msgId: 'rev-history', args: {Deprecated: true}});
 			this._map.fire('postMessage', {msgId: 'UI_FileVersions'});
 		} else if (id === 'closedocument') {
-			if (window.ThisIsAMobileApp) {
-				window.postMobileMessage('BYE');
-			} else {
-				this._map.fire('postMessage', {msgId: 'close', args: {EverModified: this._map._everModified, Deprecated: true}});
-				this._map.fire('postMessage', {msgId: 'UI_Close', args: {EverModified: this._map._everModified}});
-			}
-			if (!this._map._disableDefaultAction['UI_Close']) {
-				this._map.remove();
-			}
+			window.onClose();
 		} else if (id === 'repair') {
 			this._map._socket.sendMessage('commandvalues command=.uno:DocumentRepair');
 		} else if (id === 'searchdialog') {
diff --git a/loleaflet/src/control/Control.MobileWizard.js b/loleaflet/src/control/Control.MobileWizard.js
index 58f405f50..1cd965865 100644
--- a/loleaflet/src/control/Control.MobileWizard.js
+++ b/loleaflet/src/control/Control.MobileWizard.js
@@ -11,6 +11,7 @@ L.Control.MobileWizard = L.Control.extend({
 
 	_inMainMenu: true,
 	_isActive: false,
+	_inBuilding: false,
 	_currentDepth: 0,
 	_mainTitle: '',
 	_isTabMode: false,
@@ -56,10 +57,9 @@ L.Control.MobileWizard = L.Control.extend({
 	},
 
 	_setupBackButton: function() {
-		var that = this;
 		this.content = $('#mobile-wizard-content');
 		this.backButton = $('#mobile-wizard-back');
-		this.backButton.click(function() { that.goLevelUp(); });
+		this.backButton.click(function() { history.back(); });
 		$(this.backButton).addClass('close-button');
 	},
 
@@ -131,6 +131,10 @@ L.Control.MobileWizard = L.Control.extend({
 		this._updateMapSize();
 	},
 
+	isOpen: function() {
+		return $('#mobile-wizard').is(':visible');
+	},
+
 	_hideKeyboard: function() {
 		document.activeElement.blur();
 	},
@@ -201,6 +205,8 @@ L.Control.MobileWizard = L.Control.extend({
 			$(contentToShow).show();
 
 		this._currentDepth++;
+		if (!this._inBuilding)
+			history.pushState({context: 'mobile-wizard', level: this._currentDepth}, 'mobile-wizard-level-' + this._currentDepth);
 		this._setTitle(contentToShow.title);
 		this._inMainMenu = false;
 
@@ -326,6 +332,8 @@ L.Control.MobileWizard = L.Control.extend({
 
 	_onMobileWizard: function(data) {
 		if (data) {
+			this._inBuilding = true;
+
 			var isSidebar = (data.children && data.children.length >= 1 &&
 					 data.children[0].type == 'deck');
 
@@ -337,7 +345,8 @@ L.Control.MobileWizard = L.Control.extend({
 				return;
 			}
 
-			if (data.id && !isNaN(data.id) && !isSidebar) {
+			var isMobileDialog = data.id && !isNaN(data.id) && !isSidebar;
+			if (isMobileDialog) {
 				// id is a number - remember window id for interaction
 				window.mobileDialogId = data.id;
 			}
@@ -348,6 +357,7 @@ L.Control.MobileWizard = L.Control.extend({
 			this._isActive = true;
 			var currentPath = null;
 			var lastScrollPosition = null;
+			var alreadyOpen = this.isOpen();
 
 			if (this._currentPath)
 				currentPath = this._currentPath;
@@ -375,6 +385,11 @@ L.Control.MobileWizard = L.Control.extend({
 			if (isSidebar)
 				this._modifySidebarLayout(data);
 
+			if (!alreadyOpen) {
+				history.pushState({context: 'mobile-wizard'}, 'mobile-wizard-opened');
+				history.pushState({context: 'mobile-wizard', level: 0}, 'mobile-wizard-level-0');
+			}
+
 			var builder = L.control.jsDialogBuilder({mobileWizard: this, map: this.map, cssClass: 'mobile-wizard'});
 			builder.build(this.content.get(0), [data]);
 
@@ -407,6 +422,8 @@ L.Control.MobileWizard = L.Control.extend({
 			}
 
 			this._updateMapSize();
+
+			this._inBuilding = false;
 		}
 	},
 
diff --git a/loleaflet/src/control/Control.Toolbar.js b/loleaflet/src/control/Control.Toolbar.js
index 9a124cf88..23ba12b4f 100644
--- a/loleaflet/src/control/Control.Toolbar.js
+++ b/loleaflet/src/control/Control.Toolbar.js
@@ -41,6 +41,18 @@ function getUNOCommand(unoData) {
 	return unoData.objectCommand;
 }
 
+function onClose() {
+	if (window.ThisIsAMobileApp) {
+		window.postMobileMessage('BYE');
+	} else {
+		map.fire('postMessage', {msgId: 'close', args: {EverModified: map._everModified, Deprecated: true}});
+		map.fire('postMessage', {msgId: 'UI_Close', args: {EverModified: map._everModified}});
+	}
+	if (!map._disableDefaultAction['UI_Close']) {
+		map.remove();
+	}
+}
+
 function onClick(e, id, item) {
 	if (w2ui['editbar'].get(id) !== null) {
 		var toolbar = w2ui['editbar'];
@@ -130,15 +142,7 @@ function onClick(e, id, item) {
 		map.uiManager.toggleMenubar();
 	}
 	else if (id === 'close' || id === 'closemobile') {
-		if (window.ThisIsAMobileApp) {
-			window.postMobileMessage('BYE');
-		} else {
-			map.fire('postMessage', {msgId: 'close', args: {EverModified: map._everModified, Deprecated: true}});
-			map.fire('postMessage', {msgId: 'UI_Close', args: {EverModified: map._everModified}});
-		}
-		if (!map._disableDefaultAction['UI_Close']) {
-			map.remove();
-		}
+		onClose();
 	}
 	else if (id === 'link') {
 		map.showHyperlinkDialog();
@@ -1070,19 +1074,10 @@ function setupToolbar(e) {
 		$('#closebuttonwrapper').css('display', 'block');
 	}
 
-	$('#closebutton').click(function() {
-		if (window.ThisIsAMobileApp) {
-			window.postMobileMessage('BYE');
-		} else {
-			map.fire('postMessage', {msgId: 'close', args: {EverModified: map._everModified, Deprecated: true}});
-			map.fire('postMessage', {msgId: 'UI_Close', args: {EverModified: map._everModified}});
-			if (!map._disableDefaultAction['UI_Close']) {
-				map.remove();
-			}
-		}
-	});
+	$('#closebutton').click(onClose);
 }
 
+global.onClose = onClose;
 global.setupToolbar = setupToolbar;
 global.onClick = onClick;
 global.hideTooltip = hideTooltip;
diff --git a/loleaflet/src/control/Control.UIManager.js b/loleaflet/src/control/Control.UIManager.js
index a4459e39e..9f18fd511 100644
--- a/loleaflet/src/control/Control.UIManager.js
+++ b/loleaflet/src/control/Control.UIManager.js
@@ -6,11 +6,19 @@
 
 /* global $ setupToolbar w2ui w2utils */
 L.Control.UIManager = L.Control.extend({
+	mobileWizard: null,
+
 	onAdd: function (map) {
 		this.map = map;
 		this.notebookbar = null;
 
 		map.on('updatepermission', this.onUpdatePermission, this);
+
+		window.addEventListener('popstate', this.onGoBack.bind(this));
+
+		// provide entries in the history we can catch to close the app
+		history.pushState({context: 'app-started'}, 'app-started');
+		history.pushState({context: 'app-started'}, 'app-started');
 	},
 
 	// UI initialization
@@ -40,7 +48,8 @@ L.Control.UIManager = L.Control.extend({
 		this.map.addControl(L.control.documentNameInput());
 		this.map.addControl(L.control.scroll());
 		this.map.addControl(L.control.alertDialog());
-		this.map.addControl(L.control.mobileWizard());
+		this.mobileWizard = L.control.mobileWizard();
+		this.map.addControl(this.mobileWizard);
 		this.map.addControl(L.control.languageDialog());
 		this.map.dialog = L.control.lokDialog();
 		this.map.addControl(this.map.dialog);
@@ -283,6 +292,20 @@ L.Control.UIManager = L.Control.extend({
 		this.map.invalidateSize();
 	},
 
+	onGoBack: function(popStateEvent) {
+		if (popStateEvent.state && popStateEvent.state.context) {
+			if (popStateEvent.state.context === 'mobile-wizard' && this.mobileWizard) {
+				if (this.mobileWizard.isOpen()) {
+					this.mobileWizard.goLevelUp(true);
+				} else {
+					window.onClose();
+				}
+			} else if (popStateEvent.state.context === 'app-started') {
+				window.onClose();
+			}
+		}
+	},
+
 	// Helper functions
 
 	moveObjectVertically: function(obj, diff) {
commit c42255ad7118d2b0fdccef086e4954e14454ff9e
Author:     Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Thu Aug 13 13:26:24 2020 +0200
Commit:     Szymon Kłos <szymon.klos at collabora.com>
CommitDate: Tue Sep 8 09:59:17 2020 +0200

    Reduce height of textarea in annotation vex
    
    Size has fixed value which is too big for small screen
    devices. Reduce it for now, more intelligent calculation
    seems to be hard to implement in existing vex dialog
    structure.
    
    Change-Id: Ic16845a96000b17aa668f39fc2871fca57076d0c
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/100655
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Andras Timar <andras.timar at collabora.com>
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/102178
    Tested-by: Jenkins
    Reviewed-by: Szymon Kłos <szymon.klos at collabora.com>

diff --git a/loleaflet/css/device-mobile.css b/loleaflet/css/device-mobile.css
index c12126a04..3329c79a0 100644
--- a/loleaflet/css/device-mobile.css
+++ b/loleaflet/css/device-mobile.css
@@ -316,12 +316,12 @@ div#w2ui-overlay-actionbar.w2ui-overlay{
 	box-sizing: content-box !important;
 }
 .vex-dialog-input > textarea.loleaflet-annotation-textarea {
-	height: 198px;
+	height: 150px;
 	border: 4px solid #f0f0f0 !important;
 	box-shadow: 0 0 1px 1px #dfdfdf;
 }
 .vex-dialog-input > textarea.loleaflet-annotation-textarea:focus {
-	height: 198px;
+	height: 150px;
 	border: 4px solid #f0f0f0 !important;
 	box-shadow: 0 0 1px 1px #0b87e7 !important;
 }


More information about the Libreoffice-commits mailing list