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@gmail.com> Reviewed-by: Andras Timar <andras.timar@collabora.com>
This commit is contained in:
gokaysatir
Andras Timar
parent
0734ab1c62
commit
596d70187c
7 changed files with 88 additions and 66 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue