[Libreoffice-commits] online.git: loleaflet/css loleaflet/src
Henry Castro (via logerrit)
logerrit at kemper.freedesktop.org
Wed Oct 9 11:40:40 UTC 2019
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 <hcastro at collabora.com>
AuthorDate: Tue Oct 8 18:04:16 2019 -0400
Commit: Michael Meeks <michael.meeks at collabora.com>
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;
}
+ at 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;
}
}
More information about the Libreoffice-commits
mailing list