strepsirrhini/libreoffice-online
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile: Handle the portrait / landscape for slide sorter in JS too.

Browse source 
Change-Id: I214501fac516f4d581d3c1e8a95650a87db1a4aa
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/91570
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Jan Holesovsky <kendy@collabora.com>
This commit is contained in:
Jan Holesovsky 2020-04-02 14:14:19 +02:00
parent 91b2e52ce2
commit 7cd2beb866
4 changed files with 59 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
loleaflet/css/device-mobile.css
View file

@ -624,6 +624,24 @@ td[id^=tb_spreadsheet-toolbar_item]:focus table.w2ui-button div.w2ui-icon, td[id
bottom: 33px;
}
#slide-sorter.portrait {
max-height: 60px;
}
.preview-img-portrait {
min-width: 37px;
max-width: 60px;
max-height: 45px;
margin: 0px;
}
.preview-frame-portrait {
max-height: 60px;
max-width: initial;
display: table-cell;
padding-right: 1em;
}
/* Slidesorter in landscape mode */
#presentation-controls-wrapper.landscape {
top: 41px;
@ -650,3 +668,19 @@ td[id^=tb_spreadsheet-toolbar_item]:focus table.w2ui-button div.w2ui-icon, td[id
#document-container.landscape.parts-preview-document.keyboard {
left: 0px !important;
}
#slide-sorter.landscape {
max-width: 120px;
}
.preview-img-landscape {
min-width: 40px;
max-width: 40px;
margin-left: 8px;
}
.preview-frame-landscape {
max-height: initial;
max-width: 66px;
display: block;
}

38
loleaflet/css/partsPreviewControl.css
View file

@ -33,44 +33,6 @@
margin-left: 20px;
}
@media (max-width: 767px) and (orientation: portrait), (max-device-width: 767px) and (orientation: portrait) {
#slide-sorter {
max-height: 60px;
}
.preview-img {
min-width: 37px;
max-width: 60px;
max-height: 45px;
margin: 0px;
}
.preview-frame {
max-height: 60px;
max-width: initial;
display: table-cell;
padding-right: 1em;
}
}
@media (max-height: 767px) and (orientation: landscape), (max-device-height: 767px) and (orientation: landscape) {
#slide-sorter {
max-width: 120px;
}
.preview-img {
min-width: 40px;
max-width: 40px;
margin-left: 8px;
}
.preview-frame {
max-height: initial;
max-width: 66px;
display: block;
}
}
/* The current part the user is on. */
.preview-img-currentpart {
border-color: #000000;

21
loleaflet/src/control/Control.PartsPreview.js
View file

@ -150,6 +150,27 @@ L.Control.PartsPreview = L.Control.extend({
L.DomUtil.addClass(this._previewTiles[j], 'preview-img-selectedpart');
}
}
// update portrait / landscape
var removePreviewImg = 'preview-img-portrait';
var addPreviewImg = 'preview-img-landscape';
var removePreviewFrame = 'preview-frame-portrait';
var addPreviewFrame = 'preview-frame-landscape';
if (L.DomUtil.isPortrait()) {
removePreviewImg = 'preview-img-landscape';
addPreviewImg = 'preview-img-portrait';
removePreviewFrame = 'preview-frame-landscape';
addPreviewFrame = 'preview-frame-portrait';
}
for (i = 0; i < parts; i++) {
L.DomUtil.removeClass(this._previewTiles[i], removePreviewImg);
L.DomUtil.addClass(this._previewTiles[i], addPreviewImg);
}
var previewFrame = $(this._partsPreviewCont).find('.preview-frame');
previewFrame.removeClass(removePreviewFrame);
previewFrame.addClass(addPreviewFrame);
}
},

6
loleaflet/src/layer/tile/ImpressTileLayer.js
View file

@ -100,6 +100,7 @@ L.ImpressTileLayer = L.TileLayer.extend({
var presentationControlWrapperElem = L.DomUtil.get('presentation-controls-wrapper');
var documentContainer = L.DomUtil.get('document-container');
var slideSorter = L.DomUtil.get('slide-sorter');
// update portrait / landscape
var remove = 'portrait';
@ -111,12 +112,14 @@ L.ImpressTileLayer = L.TileLayer.extend({
L.DomUtil.removeClass(presentationControlWrapperElem, remove);
L.DomUtil.removeClass(documentContainer, remove);
L.DomUtil.removeClass(slideSorter, remove);
L.DomUtil.addClass(presentationControlWrapperElem, add);
L.DomUtil.addClass(documentContainer, add);
L.DomUtil.addClass(slideSorter, add);
// update parts
var visible = L.DomUtil.getStyle(presentationControlWrapperElem, 'display');
if (!this._isSlidePaneVisible && visible !== 'none') {
if (visible !== 'none') {
this._map.fire('updateparts', {
selectedPart: this._selectedPart,
selectedParts: this._selectedParts,
@ -125,7 +128,6 @@ L.ImpressTileLayer = L.TileLayer.extend({
partNames: this._partHashes
});
}
this._isSlidePaneVisible = !(visible === 'none');
},
onMobileInit: function (map) {