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 <[email protected]> AuthorDate: Sat Sep 12 16:52:20 2020 +0300 Commit: Andras Timar <[email protected]> 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 <[email protected]> Reviewed-by: Andras Timar <[email protected]> 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) { _______________________________________________ Libreoffice-commits mailing list [email protected] https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
