loleaflet/css/loleaflet.css | 26 ++++-- loleaflet/css/partsPreviewControl.css | 17 ++++ loleaflet/src/control/Control.PartsPreview.js | 101 +++++++++++++++++++------- loleaflet/src/control/Control.Toolbar.js | 6 + 4 files changed, 112 insertions(+), 38 deletions(-)
New commits: commit 324c7342fe739a88cdfcdfe6e8b4cbc578beadd0 Author: Henry Castro <[email protected]> AuthorDate: Tue Oct 8 18:04:16 2019 -0400 Commit: Michael Meeks <[email protected]> CommitDate: Wed Oct 9 12:39:43 2019 +0100 lolleaflet: mobile: show horizontal orientation the slide sorter In order to show a slide sorter, it is necessary to reuse the code that it is working for desktop view. changes: * modified the @media properties of the slide sorter container element. * added new @media properties for slide-sorter element. * changed the axis direction to 'x' for the mCustomScrollbar * changed the calculation using left, right and width properties for the direction 'x' * added options maxWidth and maxHeight size for the image preview, default 60, 60 for mobile case Change-Id: I23a83c831c9aa21ab2876f9d1875c7428c17d18d diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css index 5858b19dc..0883874da 100644 --- a/loleaflet/css/loleaflet.css +++ b/loleaflet/css/loleaflet.css @@ -197,7 +197,12 @@ body { @media (max-width: 767px),(max-device-height: 767px) { /* Show slidesorter beyond 768px only */ #presentation-controls-wrapper { - display: none; + top: initial; + left: initial; + bottom: 33px; + height: 60px; + width: 100%; + max-width: initial; } /* Show sidebar beyond 768px only */ @@ -219,33 +224,34 @@ body { } #document-container.parts-preview-document { - left: 0px !important; + left: 0px !important; + bottom: 95px; } #document-container.spreadsheet-document { - top: 97px !important; + top: 97px !important; } #document-container.spreadsheet-document.readonly { - top: 61px !important; + top: 61px !important; } #document-container { - top: 41px; - right: 0px !important; + top: 41px; + right: 0px !important; } #spreadsheet-row-column-frame { - top: 77px !important; + top: 77px !important; } #spreadsheet-row-column-frame.readonly { - top: 41px !important; + top: 41px !important; } #toolbar-hamburger { width: 36px; } #closebuttonwrapper { - display: none; + display: none; } /* Show menubar even if folded */ .main-nav { - display: block !important; + display: block !important; } } diff --git a/loleaflet/css/partsPreviewControl.css b/loleaflet/css/partsPreviewControl.css index f112b8937..a27009a3d 100644 --- a/loleaflet/css/partsPreviewControl.css +++ b/loleaflet/css/partsPreviewControl.css @@ -13,7 +13,8 @@ .preview-frame { max-width: 190px; white-space: nowrap; - text-align: center; margin: 1em 0; + text-align: center; + margin: 1em 0; } .preview-helper { @@ -31,6 +32,20 @@ border: 2px solid #dfdfdf; } +@media (max-width: 767px),(max-device-height: 767px) { + .preview-img { + min-width: 60px; + max-width: 60px; + } + + .preview-frame { + max-height: 60px; + max-width: initial; + display: table-cell; + padding-right: 1em; + } +} + /* 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 f40d4fe7a..5643c81a2 100644 --- a/loleaflet/src/control/Control.PartsPreview.js +++ b/loleaflet/src/control/Control.PartsPreview.js @@ -6,7 +6,9 @@ /* global $ */ L.Control.PartsPreview = L.Control.extend({ options: { - autoUpdate: true + autoUpdate: true, + maxWidth: window.mode.isMobile() ? 60 : 180, + maxHeight: window.mode.isMobile() ? 60 : 180 }, partsFocused: false, @@ -14,6 +16,7 @@ L.Control.PartsPreview = L.Control.extend({ this._previewInitialized = false; this._previewTiles = []; this._partsPreviewCont = L.DomUtil.get('slide-sorter'); + this._direction = window.mode.isMobile() ? 'x' : 'y'; this._scrollY = 0; map.on('updateparts', this._updateDisabled, this); @@ -48,11 +51,17 @@ L.Control.PartsPreview = L.Control.extend({ $('.scroll-container').mCustomScrollbar('update'); }, this), 500); var previewContBB = this._partsPreviewCont.getBoundingClientRect(); - this._previewContTop = previewContBB.top; - var bottomBound = previewContBB.bottom + previewContBB.height / 2; + var bottomBound; + if (this._direction === 'x') { + this._previewContTop = previewContBB.left; + bottomBound = previewContBB.right + previewContBB.width / 2; + } else { + this._previewContTop = previewContBB.top; + bottomBound = previewContBB.bottom + previewContBB.height / 2; + } $('#slide-sorter').mCustomScrollbar({ - axis: 'y', + axis: this._direction, theme: 'dark-thick', scrollInertia: 0, alwaysShowScrollbar: 1, @@ -86,8 +95,11 @@ L.Control.PartsPreview = L.Control.extend({ var frame = L.DomUtil.create('div', 'preview-frame', this._scrollContainer); this._addDnDHandlers(frame); frame.setAttribute('draggable', false); - L.DomUtil.setStyle(frame, 'height', '20px'); - L.DomUtil.setStyle(frame, 'margin', '0em'); + + if (!window.mode.isMobile()) { + L.DomUtil.setStyle(frame, 'height', '20px'); + L.DomUtil.setStyle(frame, 'margin', '0em'); + } // Create the preview parts for (var i = 0; i < parts; i++) { @@ -140,32 +152,53 @@ L.Control.PartsPreview = L.Control.extend({ if (i > 0) { if (!bottomBound) { var previewContBB = this._partsPreviewCont.getBoundingClientRect(); - bottomBound = this._previewContTop + previewContBB.height + previewContBB.height / 2; + if (this._direction === 'x') { + bottomBound = this._previewContTop + previewContBB.width + previewContBB.width / 2; + } else { + bottomBound = this._previewContTop + previewContBB.height + previewContBB.height / 2; + } } previewFrameTop = this._previewContTop + this._previewFrameMargin + i * (this._previewFrameHeight + this._previewFrameMargin); previewFrameTop -= this._scrollY; previewFrameBottom = previewFrameTop + this._previewFrameHeight; - L.DomUtil.setStyle(img, 'height', this._previewImgHeight + 'px'); + + if (this._direction === 'x') { + L.DomUtil.setStyle(img, 'width', this._previewImgHeight + 'px'); + } else { + L.DomUtil.setStyle(img, 'height', this._previewImgHeight + 'px'); + } } var imgSize; if (i === 0 || (previewFrameTop >= topBound && previewFrameTop <= bottomBound) || (previewFrameBottom >= topBound && previewFrameBottom <= bottomBound)) { - imgSize = this._map.getPreview(i, i, 180, 180, {autoUpdate: this.options.autoUpdate}); + imgSize = this._map.getPreview(i, i, this.options.maxWidth, this.options.maxHeight, {autoUpdate: this.options.autoUpdate}); img.fetched = true; - L.DomUtil.setStyle(img, 'height', ''); + + if (this._direction === 'x') { + L.DomUtil.setStyle(img, 'width', ''); + } else { + L.DomUtil.setStyle(img, 'height', ''); + } } if (i === 0) { var previewImgBorder = Math.round(parseFloat(L.DomUtil.getStyle(img, 'border-top-width'))); var previewImgMinWidth = Math.round(parseFloat(L.DomUtil.getStyle(img, 'min-width'))); var imgHeight = imgSize.height; + var imgWidth = imgSize.width; if (imgSize.width < previewImgMinWidth) imgHeight = Math.round(imgHeight * previewImgMinWidth / imgSize.width); var previewFrameBB = frame.getBoundingClientRect(); - this._previewFrameMargin = previewFrameBB.top - this._previewContTop; - this._previewImgHeight = imgHeight; - this._previewFrameHeight = imgHeight + 2 * previewImgBorder; + if (this._direction === 'x') { + this._previewFrameMargin = previewFrameBB.left - this._previewContTop; + this._previewImgHeight = imgWidth; + this._previewFrameHeight = imgWidth + 2 * previewImgBorder; + } else { + this._previewFrameMargin = previewFrameBB.top - this._previewContTop; + this._previewImgHeight = imgHeight; + this._previewFrameHeight = imgHeight + 2 * previewImgBorder; + } } return img; @@ -177,21 +210,33 @@ L.Control.PartsPreview = L.Control.extend({ var elemRect = el.getBoundingClientRect(); var elemTop = elemRect.top; var elemBottom = elemRect.bottom; - var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight); + var elemLeft = elemRect.left; + var elemRight = elemRect.right; + var isVisible = this._direction === 'x' ? + (elemLeft >= 0) && (elemRight <= window.innerWidth) : + (elemTop >= 0) && (elemBottom <= window.innerHeight); return isVisible; } if (e === 'prev' || e === 'next') { this._map.setPart(e); + var nodePos; var node = $('#slide-sorter .mCSB_container .preview-frame')[this._map.getCurrentPartNumber()]; if (!isVisible(node)) { if (e === 'prev') { setTimeout(function () { $('#slide-sorter').mCustomScrollbar('scrollTo', node); }, 50); + } else if (this._direction === 'x') { + var nodeWidth = $(node).width(); + var sliderWidth = $('#slide-sorter').width(); + nodePos = $(node).position().left; + setTimeout(function () { + $('#slide-sorter').mCustomScrollbar('scrollTo', nodePos-(sliderWidth-nodeWidth-nodeWidth/2)); + }, 50); } else { var nodeHeight = $(node).height(); var sliderHeight= $('#slide-sorter').height(); - var nodePos = $(node).position().top; + nodePos = $(node).position().top; setTimeout(function () { $('#slide-sorter').mCustomScrollbar('scrollTo', nodePos-(sliderHeight-nodeHeight-nodeHeight/2)); }, 50); @@ -218,7 +263,7 @@ L.Control.PartsPreview = L.Control.extend({ _updatePart: function (e) { if (e.docType === 'presentation' && e.part >= 0) { - this._map.getPreview(e.part, e.part, 180, 180, {autoUpdate: this.options.autoUpdate}); + this._map.getPreview(e.part, e.part, this.options.maxWidth, this.options.maxHeight, {autoUpdate: this.options.autoUpdate}); } }, @@ -273,7 +318,7 @@ L.Control.PartsPreview = L.Control.extend({ for (it = 0; it < parts; it++) { if (this._previewTiles[it].hash !== e.partNames[it]) { this._previewTiles[it].hash = e.partNames[it]; - this._map.getPreview(it, it, 180, 180, {autoUpdate: this.options.autoUpdate}); + this._map.getPreview(it, it, this.options.maxWidth, this.options.maxHeight, {autoUpdate: this.options.autoUpdate}); } } } @@ -322,21 +367,27 @@ L.Control.PartsPreview = L.Control.extend({ var scrollOffset = 0; if (e) { var prevScrollY = this._scrollY; - this._scrollY = -e.mcs.top; + this._scrollY = this._direction === 'x' ? -e.mcs.left : -e.mcs.top; scrollOffset = this._scrollY - prevScrollY; } var previewContBB = this._partsPreviewCont.getBoundingClientRect(); - var extra = previewContBB.height; - var topBound = this._previewContTop - (scrollOffset < 0 ? extra : previewContBB.height / 2); - var bottomBound = this._previewContTop + previewContBB.height + (scrollOffset > 0 ? extra : previewContBB.height / 2); + var extra = this._direction === 'x' ? previewContBB.width : previewContBB.height; + var topBound = this._previewContTop - (scrollOffset < 0 ? extra : extra / 2); + var bottomBound = this._previewContTop + extra + (scrollOffset > 0 ? extra : extra / 2); for (var i = 0; i < this._previewTiles.length; ++i) { var img = this._previewTiles[i]; if (img && img.parentNode && !img.fetched) { var previewFrameBB = img.parentNode.getBoundingClientRect(); - if ((previewFrameBB.top >= topBound && previewFrameBB.top <= bottomBound) - || (previewFrameBB.bottom >= topBound && previewFrameBB.bottom <= bottomBound)) { - this._map.getPreview(i, i, 180, 180, {autoUpdate: this.options.autoUpdate}); + if (this._direction === 'x') { + if ((previewFrameBB.left >= topBound && previewFrameBB.left <= bottomBound) + || (previewFrameBB.right >= topBound && previewFrameBB.right <= bottomBound)) { + this._map.getPreview(i, i, this.options.maxWidth, this.options.maxHeight, {autoUpdate: this.options.autoUpdate}); + img.fetched = true; + } + } else if ((previewFrameBB.top >= topBound && previewFrameBB.top <= bottomBound) + || (previewFrameBB.bottom >= topBound && previewFrameBB.bottom <= bottomBound)) { + this._map.getPreview(i, i, this.options.maxWidth, this.options.maxHeight, {autoUpdate: this.options.autoUpdate}); img.fetched = true; } } @@ -405,7 +456,7 @@ L.Control.PartsPreview = L.Control.extend({ var that = this.partsPreview; setTimeout(function () { for (var i = 0; i < that._previewTiles.length; ++i) { - that._map.getPreview(i, i, 180, 180, {autoUpdate: that.options.autoUpdate, broadcast: true}); + that._map.getPreview(i, this.options.maxWidth, this.options.maxHeight, {autoUpdate: that.options.autoUpdate, broadcast: true}); } }, 1000); } diff --git a/loleaflet/src/control/Control.Toolbar.js b/loleaflet/src/control/Control.Toolbar.js index 9b569ac91..fd018929e 100644 --- a/loleaflet/src/control/Control.Toolbar.js +++ b/loleaflet/src/control/Control.Toolbar.js @@ -1544,7 +1544,9 @@ function onDocLayerInit() { if (statusbar) statusbar.show('prev', 'next'); - $('#presentation-toolbar').show(); + if (!_inMobileMode()) { + $('#presentation-toolbar').show(); + } break; } @@ -2119,7 +2121,7 @@ function onUpdatePermission(e) { $('#spreadsheet-toolbar').show(); break; case 'presentation': - $('#document-container').css('bottom', '35px'); + $('#document-container').css('bottom', '95px'); break; } } _______________________________________________ Libreoffice-commits mailing list [email protected] https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
