[Libreoffice-commits] online.git: Branch 'distro/collabora/co-4-2' - 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 | 56 ++++++++++++++++----------
loleaflet/src/control/Control.Menubar.js | 4 -
loleaflet/src/control/Control.MobileWizard.js | 24 ++++++++++-
loleaflet/src/control/Control.PartsPreview.js | 8 +++
loleaflet/src/control/Parts.js | 33 +++++++++------
loleaflet/src/layer/tile/ImpressTileLayer.js | 4 -
7 files changed, 92 insertions(+), 47 deletions(-)
New commits:
commit 38d13dbc817f0970a89215a00e55cc666d6d16df
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:05 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/+/102848
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 3329a216e..e144f02f2 100644
--- a/loleaflet/css/device-mobile.css
+++ b/loleaflet/css/device-mobile.css
@@ -766,21 +766,15 @@ td[id^=tb_spreadsheet-toolbar_item]:focus table.w2ui-button div.w2ui-icon, td[id
#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 1dc843408..c6a418e1e 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;
@@ -224,8 +220,9 @@ p.mobile-wizard.ui-combobox-text.selected {
display: flex;
align-self: center !important;
align-items: center !important;
- -webkit-flex-wrap: wrap !important;
- flex-wrap: wrap !important;
+ -webkit-flex-wrap: wrap !important;
+ flex-wrap: wrap !important;
+ margin-top: 25px;
}
#rotationlabel, #cellbackgroundlabel, #NumberFormatCurrency > .unolabel, #NumberFormatPercent > .unolabel, #NumberFormatDecimal > .unolabel{
display: none;
@@ -259,13 +256,13 @@ p.mobile-wizard.ui-combobox-text.selected {
}
#mobile-wizard {
- width: 100%;
- position: fixed;
- bottom: 0px;
- z-index: 1000;
- background-color: white;
- box-shadow: 0px -2px 4px 1px #00000030;
- overflow-y: scroll;
+ width: 100%;
+ position: fixed;
+ bottom: 0px;
+ z-index: 1000;
+ background-color: white;
+ box-shadow: 0px -2px 4px 1px #00000030;
+ 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 a97ba8430..c11b5e04b 100644
--- a/loleaflet/src/control/Control.Menubar.js
+++ b/loleaflet/src/control/Control.Menubar.js
@@ -1188,14 +1188,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 f5677ee73..b47626172 100644
--- a/loleaflet/src/control/Control.MobileWizard.js
+++ b/loleaflet/src/control/Control.MobileWizard.js
@@ -120,6 +120,8 @@ L.Control.MobileWizard = L.Control.extend({
if (window.pageMobileWizard === true)
window.pageMobilewizard = false;
+ if (this._map.getDocType() === 'presentation')
+ this._hideSlideSorter();
this._updateToolbarItemStateByClose();
@@ -357,8 +359,8 @@ L.Control.MobileWizard = L.Control.extend({
this._lastSidebarData = dataString;
}
- if (this.map.getDocType() === 'presentation')
- $('#mobile-wizard-header').show();
+ if (this.map.getDocType() === 'presentation' && this._isSlidePropertyPanel(data))
+ this._showSlideSorter();
this._isActive = true;
var currentPath = null;
@@ -431,6 +433,24 @@ L.Control.MobileWizard = L.Control.extend({
}
},
+ // These 2 functions show/hide mobile-slide-sorter.
+ _showSlideSorter: function() {
+ document.getElementById('mobile-wizard-header').style.display = 'block';
+ },
+
+ _hideSlideSorter: function() {
+ document.getElementById('mobile-wizard-header').style.display = 'none';
+ },
+
+ _isSlidePropertyPanel: function(data) {
+ 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';
+ } else {
+ return false;
+ }
+ },
+
_insertCalcBorders: function(deck) {
var replaceMe = L.LOUtil.findItemWithAttributeRecursive(deck, 'id', 'cellbordertype');
if (replaceMe) {
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 d112557f7..fb75fe293 100644
--- a/loleaflet/src/control/Parts.js
+++ b/loleaflet/src/control/Parts.js
@@ -237,10 +237,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++;
@@ -260,10 +263,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');
@@ -297,10 +303,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 22a310bc5..aa2cdcd3c 100644
--- a/loleaflet/src/layer/tile/ImpressTileLayer.js
+++ b/loleaflet/src/layer/tile/ImpressTileLayer.js
@@ -51,11 +51,10 @@ L.ImpressTileLayer = L.TileLayer.extend({
map.on('resize', this.onResize, this);
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);
@@ -66,7 +65,6 @@ L.ImpressTileLayer = L.TileLayer.extend({
imageClass: 'preview-img-portrait',
frameClass: 'preview-frame-portrait'
}));
- L.DomUtil.addClass(mobileWizardContent, 'with-slide-sorter-above');
}
},
More information about the Libreoffice-commits
mailing list