[Libreoffice-commits] online.git: loleaflet/css loleaflet/src
gokaysatir (via logerrit)
logerrit at kemper.freedesktop.org
Wed Sep 16 12:19:24 UTC 2020
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 <gokaysatir at collabora.com>
AuthorDate: Sat Sep 12 16:52:20 2020 +0300
Commit: Andras Timar <andras.timar at collabora.com>
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 <jenkinscollaboraoffice at gmail.com>
Reviewed-by: Andras Timar <andras.timar at collabora.com>
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) {
More information about the Libreoffice-commits
mailing list