[Libreoffice-commits] online.git: loleaflet/css loleaflet/Makefile.am loleaflet/src
Jan Holesovsky (via logerrit)
logerrit at kemper.freedesktop.org
Mon Apr 6 08:35:00 UTC 2020
loleaflet/Makefile.am | 1 -
loleaflet/css/device-mobile.css | 22 ++++++++++++++++++++++
loleaflet/css/menubar-mobile.css | 7 -------
loleaflet/css/mobilewizard.css | 9 ---------
loleaflet/src/control/Control.MobileWizard.js | 5 +++++
loleaflet/src/dom/DomUtil.js | 17 +++++++++++++++++
loleaflet/src/layer/tile/ImpressTileLayer.js | 21 ++-------------------
7 files changed, 46 insertions(+), 36 deletions(-)
New commits:
commit 67d14eafd21da1d906a0a8e07a07192445ac07c0
Author: Jan Holesovsky <kendy at collabora.com>
AuthorDate: Thu Apr 2 16:34:20 2020 +0200
Commit: Jan Holesovsky <kendy at collabora.com>
CommitDate: Mon Apr 6 10:34:41 2020 +0200
mobile: More portrait / landscape handling in Impress' mobile-wizard.
Change-Id: I8592db63e9112b1f879e5a10351308fbdd97e28d
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/91582
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
Reviewed-by: Jan Holesovsky <kendy at collabora.com>
diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am
index 3a31b27d6..1422de467 100644
--- a/loleaflet/Makefile.am
+++ b/loleaflet/Makefile.am
@@ -116,7 +116,6 @@ LOLEAFLET_CSS =\
$(builddir)/node_modules/smartmenus/dist/css/sm-core-css.css \
$(builddir)/node_modules/smartmenus/dist/css/sm-simple/sm-simple.css \
$(srcdir)/css/menubar.css \
- $(srcdir)/css/menubar-mobile.css \
$(srcdir)/css/mobilewizard.css \
$(srcdir)/css/vex.css \
$(builddir)/node_modules/jquery-ui/themes/ui-lightness/jquery-ui.css
diff --git a/loleaflet/css/device-mobile.css b/loleaflet/css/device-mobile.css
index 363818deb..b29bc0ed7 100644
--- a/loleaflet/css/device-mobile.css
+++ b/loleaflet/css/device-mobile.css
@@ -689,3 +689,25 @@ td[id^=tb_spreadsheet-toolbar_item]:focus table.w2ui-button div.w2ui-icon, td[id
.preview-img-dropsite {
border-bottom: 3px solid #b6b6b6;
}
+
+/* Related to mobilewizard.cxx */
+#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 {
+ overflow-y: auto !important;
+}
+#mobile-wizard.menuwizard.portrait #mobile-wizard-content.with-slide-sorter-above.portrait {
+ overflow-y: hidden !important;
+}
diff --git a/loleaflet/css/menubar-mobile.css b/loleaflet/css/menubar-mobile.css
deleted file mode 100644
index af0ccb615..000000000
--- a/loleaflet/css/menubar-mobile.css
+++ /dev/null
@@ -1,7 +0,0 @@
- at media (max-device-width: 767px) {
- @media (orientation: landscape) {
- #mobile-wizard.menuwizard #mobile-wizard-content.with-slide-sorter-above {
- overflow-y: auto !important;
- }
- }
-}
diff --git a/loleaflet/css/mobilewizard.css b/loleaflet/css/mobilewizard.css
index dc3cfacca..ec5f5c916 100644
--- a/loleaflet/css/mobilewizard.css
+++ b/loleaflet/css/mobilewizard.css
@@ -245,15 +245,6 @@ p.mobile-wizard.ui-combobox-text.selected {
float: left;
margin-bottom: 4%;
}
- at media (orientation: landscape) {
- #mobile-wizard-header{display: none;}
- #mobile-wizard-content.with-slide-sorter-above {
- top: 48px !important;
- }
-}
- at media (orientation: portrait) {
- #mobile-wizard-header{display: block;}
-}
.menuwizard #mobile-wizard-back {
background-position-x: 22px;
width: 52px;
diff --git a/loleaflet/src/control/Control.MobileWizard.js b/loleaflet/src/control/Control.MobileWizard.js
index ea0ad84b6..bb0b3d95d 100644
--- a/loleaflet/src/control/Control.MobileWizard.js
+++ b/loleaflet/src/control/Control.MobileWizard.js
@@ -29,6 +29,7 @@ L.Control.MobileWizard = L.Control.extend({
map.on('closemobilewizard', this._hideWizard, this);
map.on('showwizardsidebar', this._showWizardSidebar, this);
map.on('mobilewizardback', this.goLevelUp, this);
+ map.on('resize', this._onResize, this);
this._setupBackButton();
},
@@ -224,6 +225,10 @@ L.Control.MobileWizard = L.Control.extend({
}
},
+ _onResize: function() {
+ L.DomUtil.updateElementsOrientation(['mobile-wizard', 'mobile-wizard-content']);
+ },
+
_setTitle: function(title) {
var right = $('#mobile-wizard-title');
right.text(title);
diff --git a/loleaflet/src/dom/DomUtil.js b/loleaflet/src/dom/DomUtil.js
index 1c38ceb7d..39b87eea6 100644
--- a/loleaflet/src/dom/DomUtil.js
+++ b/loleaflet/src/dom/DomUtil.js
@@ -202,6 +202,23 @@ L.DomUtil = {
isPortrait: function() {
return window.matchMedia && window.matchMedia('(orientation: portrait)').matches;
+ },
+
+ // Add/remove a portrait or landscape class from the list of elementns.
+ updateElementsOrientation: function(elements) {
+ var remove = 'portrait';
+ var add = 'landscape';
+ if (L.DomUtil.isPortrait()) {
+ remove = 'landscape';
+ add = 'portrait';
+ }
+
+ for (var i = 0; i < elements.length; ++i) {
+ var element = elements[i];
+ var domElement = L.DomUtil.get(element);
+ L.DomUtil.removeClass(domElement, remove);
+ L.DomUtil.addClass(domElement, add);
+ }
}
};
diff --git a/loleaflet/src/layer/tile/ImpressTileLayer.js b/loleaflet/src/layer/tile/ImpressTileLayer.js
index ee0b75e9c..756f189a8 100644
--- a/loleaflet/src/layer/tile/ImpressTileLayer.js
+++ b/loleaflet/src/layer/tile/ImpressTileLayer.js
@@ -98,27 +98,10 @@ L.ImpressTileLayer = L.TileLayer.extend({
this._map.setView(this._map.getCenter(), this._map.getZoom(), {reset: true});
}
- 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';
- var add = 'landscape';
- if (L.DomUtil.isPortrait()) {
- remove = 'landscape';
- add = 'portrait';
- }
-
- 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);
+ L.DomUtil.updateElementsOrientation(['presentation-controls-wrapper', 'document-container', 'slide-sorter', 'mobile-wizard-header', 'mobile-wizard-content']);
// update parts
- var visible = L.DomUtil.getStyle(presentationControlWrapperElem, 'display');
+ var visible = L.DomUtil.getStyle(L.DomUtil.get('presentation-controls-wrapper'), 'display');
if (visible !== 'none') {
this._map.fire('updateparts', {
selectedPart: this._selectedPart,
More information about the Libreoffice-commits
mailing list