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

CanvasTileLayer: Position canvas on mobile, tablet and desktop.

Browse source 
Remove "spreadsheet-row-column-frame" div. Since row & column headers and groups are drawn onto the same canvas with tiles, that div shouldn't exist.

Signed-off-by: Gökay Şatır <gokaysatir@collabora.com>
This commit is contained in:
Gökay Şatır 2021-01-27 13:08:07 +03:00 committed by Jan Holesovsky
parent d576895c57
commit 5f1090dcb1
9 changed files with 24 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -210,12 +210,6 @@ div#w2ui-overlay-actionbar.w2ui-overlay{
/* Related to spreadsheet.css */
@-moz-document url-prefix() {
#spreadsheet-row-column-frame.readonly {
top: 36px !important;
}
#spreadsheet-row-column-frame {
top: 75px !important
}
#document-container.spreadsheet-document {
top: 95px !important;
}
@ -641,17 +635,6 @@ td[id^='tb_spreadsheet-toolbar_item']:focus table.w2ui-button div.w2ui-icon, td[
bottom: 35px;
}
#spreadsheet-row-column-frame {
top: 72px;
bottom: 36px;
bottom: 68px;
}
#spreadsheet-row-column-frame.readonly {
top: 38px !important;
bottom: 35px !important;
}
#closebuttonwrapper {
display: none;
}

17
loleaflet/css/spreadsheet.css
View file

@ -79,23 +79,6 @@
opacity: 100% !important;
}
#spreadsheet-row-column-frame {
position: absolute;
left: 0;
right: 0;
top: 117px;
bottom: 65px;
}
#spreadsheet-row-column-frame.readonly {
top: 36px;
bottom: 0px;
}
#spreadsheet-row-column-frame.tablet.readonly {
top: 32px;
}
#spreadsheet-header-corner-container {
border: 1px solid darkgrey;
background-color: #f1f4f7;

2
loleaflet/html/loleaflet.html.m4
View file

@ -204,8 +204,6 @@ m4_ifelse(MOBILEAPP,[true],
<div class="closebuttonimage" id="closebutton"></div>
</div>
<div id="spreadsheet-row-column-frame" class="readonly"></div>
<div id="document-container" class="readonly">
<div id="map"></div>
</div>

24
loleaflet/src/control/Control.LokDialog.js
View file

@ -904,26 +904,6 @@ L.Control.LokDialog = L.Control.extend({
}
}
var spreadsheetRowColumnFrame = L.DomUtil.get('spreadsheet-row-column-frame');
if (spreadsheetRowColumnFrame) {
offsetTop = spreadsheetRowColumnFrame.offsetTop;
noTopProp = true;
props = spreadsheetRowColumnFrame.style.cssText.split(';');
for (i = 0; i < props.length; ++i) {
if (props[i].startsWith('top')) {
props[i] = 'top: ' + (offsetTop + delta).toString() + 'px !important';
spreadsheetRowColumnFrame.setAttribute('style', props.join(';'));
noTopProp = false;
break;
}
}
if (noTopProp) {
styleAttr = spreadsheetRowColumnFrame.style.cssText;
styleAttr += '; top: ' + (offsetTop + delta).toString() + 'px !important';
spreadsheetRowColumnFrame.setAttribute('style', styleAttr);
}
}
$('.funcwizard').css('top', $('#spreadsheet-row-column-frame').css('top'));
console.log('_adjustCalcInputBarHeight: end');
}
@ -1669,10 +1649,6 @@ L.Control.LokDialog = L.Control.extend({
this._map._onResize();
var spreadsheetRowColumnFrame = L.DomUtil.get('spreadsheet-row-column-frame');
if (spreadsheetRowColumnFrame)
spreadsheetRowColumnFrame.style.right = width.toString() + 'px';
this._resizeCalcInputBar(deckOffset);
},

7
loleaflet/src/control/Control.MobileWizard.js
View file

@ -441,13 +441,10 @@ L.Control.MobileWizard = L.Control.extend({
else if (data.id === 'insertshape') {
$('#mobile-wizard').addClass('shapeswizard');
}
if (this.map.getDocType() === 'spreadsheet')
$('#mobile-wizard').css('top', $('#spreadsheet-row-column-frame').css('top'));
else
$('#mobile-wizard').css('top', $('#document-container').css('top'));
$('#mobile-wizard').css('top', $('#document-container').css('top'));
} else if (data.id === 'funclist') {
$('#mobile-wizard').height('100%');
$('#mobile-wizard').css('top', $('#spreadsheet-row-column-frame').css('top'));
$('#mobile-wizard').css('top', $('#document-container').css('top'));
$('#mobile-wizard').addClass('funcwizard');
} else {
$('#mobile-wizard').height(this.options.maxHeight);

1
loleaflet/src/control/Control.TopToolbar.js
View file

@ -315,7 +315,6 @@ L.Control.TopToolbar = L.Control.extend({
$('#toolbar-wrapper').addClass('spreadsheet');
if (window.mode.isTablet()) {
$(this.map.options.documentContainer).addClass('tablet');
$('#spreadsheet-row-column-frame').addClass('tablet');
$('#toolbar-wrapper').addClass('tablet');
}

7
loleaflet/src/control/Control.UIManager.js
View file

@ -108,13 +108,11 @@ L.Control.UIManager = L.Control.extend({
if (docType === 'presentation') {
// remove unused elements
L.DomUtil.remove(L.DomUtil.get('spreadsheet-row-column-frame'));
L.DomUtil.remove(L.DomUtil.get('spreadsheet-toolbar'));
}
if (docType === 'text') {
// remove unused elements
L.DomUtil.remove(L.DomUtil.get('spreadsheet-row-column-frame'));
L.DomUtil.remove(L.DomUtil.get('spreadsheet-toolbar'));
L.DomUtil.remove(L.DomUtil.get('presentation-controls-wrapper'));
@ -150,7 +148,6 @@ L.Control.UIManager = L.Control.extend({
obj.removeClass('w2ui-icon unfold');
obj.addClass('w2ui-icon fold');
this.moveObjectVertically($('#spreadsheet-row-column-frame'), 36);
this.moveObjectVertically($('#document-container'), 36);
this.moveObjectVertically($('#presentation-controls-wrapper'), 36);
this.moveObjectVertically($('#sidebar-dock-wrapper'), 36);
@ -168,7 +165,6 @@ L.Control.UIManager = L.Control.extend({
obj.removeClass('w2ui-icon fold');
obj.addClass('w2ui-icon unfold');
this.moveObjectVertically($('#spreadsheet-row-column-frame'), -36);
this.moveObjectVertically($('#document-container'), -36);
this.moveObjectVertically($('#presentation-controls-wrapper'), -36);
this.moveObjectVertically($('#sidebar-dock-wrapper'), -36);
@ -228,7 +224,6 @@ L.Control.UIManager = L.Control.extend({
additionalOffset = 53;
}
this.moveObjectVertically($('#spreadsheet-row-column-frame'), 36);
this.moveObjectVertically($('#document-container'), 43 + additionalOffset);
this.moveObjectVertically($('#presentation-controls-wrapper'), 43);
this.moveObjectVertically($('#sidebar-dock-wrapper'), 43);
@ -240,7 +235,6 @@ L.Control.UIManager = L.Control.extend({
if (this.isNotebookbarCollapsed())
return;
this.moveObjectVertically($('#spreadsheet-row-column-frame'), -85);
this.moveObjectVertically($('#document-container'), -85);
this.moveObjectVertically($('#presentation-controls-wrapper'), -85);
this.moveObjectVertically($('#sidebar-dock-wrapper'), -85);
@ -254,7 +248,6 @@ L.Control.UIManager = L.Control.extend({
if (!this.isNotebookbarCollapsed())
return;
this.moveObjectVertically($('#spreadsheet-row-column-frame'), 85);
this.moveObjectVertically($('#document-container'), 85);
this.moveObjectVertically($('#presentation-controls-wrapper'), 85);
this.moveObjectVertically($('#sidebar-dock-wrapper'), 85);

28
loleaflet/src/layer/tile/CanvasTileLayer.js
View file

@ -215,7 +215,7 @@ L.TileSectionManager = L.Class.extend({
this._sectionContainer.createSection({
name: L.CSections.Tiles.name,
anchor: 'top left',
position: [250 * that._dpiScale, 250 * that._dpiScale], // Set its initial position to somewhere blank. Other sections shouldn't cover this point after initializing.
position: [200 * that._dpiScale, 200 * that._dpiScale], // Set its initial position to somewhere blank. Other sections shouldn't cover this point after initializing.
size: [0, 0], // Going to be expanded, no initial width or height is necessary.
expand: 'top left bottom right', // Expand to all directions.
processingOrder: L.CSections.Tiles.processingOrder,
@ -546,6 +546,7 @@ L.CanvasTileLayer = L.TileLayer.extend({
}
this._canvas = L.DomUtil.createWithId('canvas', 'document-canvas', this._canvasContainer);
this._canvas.style.border = '1px solid darkgrey';
this._container.style.position = 'absolute';
this._painter = new L.TileSectionManager(this);
this._painter._addTilesSection();
@ -636,17 +637,32 @@ L.CanvasTileLayer = L.TileLayer.extend({
var size = this._map.getPixelBounds().getSize();
if (this._docType === 'spreadsheet') {
var offset = this._getUIWidth() + this._getGroupWidth();
offset += (this._getGroupWidth() > 0 ? 3: 1);
size.x += offset;
this._canvasContainer.style.left = -1 * (offset) + 'px';
this._map.options.documentContainer.style.left = String(offset) + 'px';
offset = this._getUIHeight() + this._getGroupHeight();
size.y += offset;
offset += (this._getGroupHeight() > 0 ? 3: 1);
var toolBarOffset = document.getElementById('toolbar-wrapper').getBoundingClientRect().bottom;
offset += toolBarOffset;
size.y += offset - toolBarOffset;
this._canvasContainer.style.top = -1 * (offset - toolBarOffset) + 'px';
this._map.options.documentContainer.style.top = String(offset) + 'px';
this._canvasContainer.style.top = -1 * offset + 'px';
if (window.mode.isDesktop()) {
if (document.getElementById('map').classList.contains('notebookbar-opened'))
this._map.options.documentContainer.style.marginTop = (Math.floor(this._getGroupHeight() + this._getUIHeight() * 0.5)) + 'px';
else
this._map.options.documentContainer.style.marginTop = (Math.floor(this._getGroupHeight() * 0.5)) + 'px';
}
else if (window.mode.isTablet()) {
if (this._map.isPermissionReadOnly())
this._map.options.documentContainer.style.marginTop = String(this._getGroupHeight()) + 'px';
else
this._map.options.documentContainer.style.marginTop = String(Math.floor(this._getGroupHeight() * 0.5)) + 'px';
}
else // Mobile.
this._map.options.documentContainer.style.marginTop = String(this._getGroupHeight()) + 'px';
}
this._painter._sectionContainer.onResize(size.x, size.y);

2
loleaflet/src/map/Map.js
View file

@ -182,7 +182,6 @@ L.Map = L.Evented.extend({
}
L.DomUtil.addClass(L.DomUtil.get('main-menu'), 'readonly');
L.DomUtil.addClass(L.DomUtil.get('presentation-controls-wrapper'), 'readonly');
L.DomUtil.addClass(L.DomUtil.get('spreadsheet-row-column-frame'), 'readonly');
} else {
L.DomUtil.removeClass(this._container.parentElement, 'readonly');
if (window.mode.isDesktop() || window.mode.isTablet()) {
@ -190,7 +189,6 @@ L.Map = L.Evented.extend({
}
L.DomUtil.removeClass(L.DomUtil.get('main-menu'), 'readonly');
L.DomUtil.removeClass(L.DomUtil.get('presentation-controls-wrapper'), 'readonly');
L.DomUtil.removeClass(L.DomUtil.get('spreadsheet-row-column-frame'), 'readonly');
}
}, this);
this.on('doclayerinit', function() {