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.k...@collabora.com> AuthorDate: Thu Aug 6 12:32:55 2020 +0200 Commit: Szymon Kłos <szymon.k...@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 <jenkinscollaboraoff...@gmail.com> Reviewed-by: Jan Holesovsky <ke...@collabora.com> Reviewed-on: https://gerrit.libreoffice.org/c/online/+/102177 Tested-by: Jenkins Reviewed-by: Szymon Kłos <szymon.k...@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.k...@collabora.com> AuthorDate: Thu Aug 13 13:26:24 2020 +0200 Commit: Szymon Kłos <szymon.k...@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 <jenkinscollaboraoff...@gmail.com> Reviewed-by: Andras Timar <andras.ti...@collabora.com> Reviewed-on: https://gerrit.libreoffice.org/c/online/+/102178 Tested-by: Jenkins Reviewed-by: Szymon Kłos <szymon.k...@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; } _______________________________________________ Libreoffice-commits mailing list libreoffice-comm...@lists.freedesktop.org https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits