[Libreoffice-commits] online.git: loleaflet/css loleaflet/src

[Dennis Francis (via logerrit)]

 loleaflet/css/spreadsheet.css              |    3 ++-
 loleaflet/src/control/Control.LokDialog.js |   24 ++++++++++++++++++++++++
 loleaflet/src/control/Control.Tabs.js      |    1 +
 3 files changed, 27 insertions(+), 1 deletion(-)

New commits:
commit 3c4e3d8c4362de777d9dde2362211b4468e2f4dd
Author:     Dennis Francis <dennis.francis at collabora.com>
AuthorDate: Tue Mar 3 21:17:05 2020 +0530
Commit:     Michael Meeks <michael.meeks at collabora.com>
CommitDate: Tue Mar 10 10:37:02 2020 +0100

    Do not let sidebar cover calc-tabs-bar (partially)
    
    In desktop-browser-online-calc, when the sidebar is shown, the
    tabs/sheets bar is partly covered by it. This is a problem when there
    are many sheets in the calc document because it is impossible to
    switch to last few sheets because sidebar covers those entries in
    the tabs-bar.
    
    This patch adjusts the tab-bar container's width according to sidebar
    width changes just like how formula-input canvas width is adjusted.
    This also includes some css adjustments neccessary to hide the ugly
    browser induced vertical-scrollbar for the child of tabs container
    when adjusting the width of the container.
    
    Change-Id: Iea3a658926d6f563a970bb9b6da9807818d36c26
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/89897
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Henry Castro <hcastro at collabora.com>
    Reviewed-by: Michael Meeks <michael.meeks at collabora.com>

diff --git a/loleaflet/css/spreadsheet.css b/loleaflet/css/spreadsheet.css
index 35b8863a7..bf70c9663 100644
--- a/loleaflet/css/spreadsheet.css
+++ b/loleaflet/css/spreadsheet.css
@@ -35,7 +35,8 @@
 	width: 100%;
 	height: 100%;
 	overflow: auto;
-	padding-bottom: 20px; /* to hide the scroolbar */
+	padding-bottom: 20px; /* to hide the horizontal scrollbar */
+	padding-right: 5px; /* to hide the vertical scrollbar */
 
 	margin-left: 6px;
 	}
diff --git a/loleaflet/src/control/Control.LokDialog.js b/loleaflet/src/control/Control.LokDialog.js
index d106b1504..a58766c21 100644
--- a/loleaflet/src/control/Control.LokDialog.js
+++ b/loleaflet/src/control/Control.LokDialog.js
@@ -1368,6 +1368,7 @@ L.Control.LokDialog = L.Control.extend({
 			spreadsheetRowColumnFrame.style.right = width.toString() + 'px';
 
 		this._adjustCalcInputBar(deckOffset);
+		this._adjustTabsBar(width);
 		// If we didn't have the focus, don't steal it form the editor.
 		if ($('#' + this._currentDeck.strId + '-cursor').css('display') === 'none') {
 			if (this._map.editorHasFocus()) {
@@ -1395,6 +1396,29 @@ L.Control.LokDialog = L.Control.extend({
 		}
 	},
 
+	_adjustTabsBar: function(deckNewWidth) {
+
+		if (this._map.getDocType() !== 'spreadsheet') {
+			return;
+		}
+
+		// This is called only if sidebar is made visible or hidden, so no need of
+		// special-casing for mobile where that never happens.
+		// In the case of tablets, when sidebar is made visible/hidden the below adjustments
+		// will work correctly like in desktop-online (verified with chrome-tablet emulator).
+
+		var tabsContainer = L.DomUtil.get('spreadsheet-tabs-container-id');
+		if (!tabsContainer) {
+			return;
+		}
+
+		var docWidth = L.DomUtil.get('spreadsheet-toolbar').getBoundingClientRect().width;
+		var tabsContainerLeft = tabsContainer.getBoundingClientRect().left;
+		var deckMargin = (deckNewWidth === 0) ? 0 : 10;
+
+		tabsContainer.style.width = (docWidth - tabsContainerLeft - deckNewWidth - deckMargin) + 'px';
+	},
+
 	_onDialogChildClose: function(dialogId) {
 		$('#' + this._toStrId(dialogId) + '-floating').remove();
 		if (!this._isSidebar(dialogId) && !this._isCalcInputBar(dialogId)) {
diff --git a/loleaflet/src/control/Control.Tabs.js b/loleaflet/src/control/Control.Tabs.js
index 0997d7dd9..8c56372da 100644
--- a/loleaflet/src/control/Control.Tabs.js
+++ b/loleaflet/src/control/Control.Tabs.js
@@ -42,6 +42,7 @@ L.Control.Tabs = L.Control.extend({
 		var map = this._map;
 		var docContainer = map.options.documentContainer;
 		this._tabsCont = L.DomUtil.create('div', 'spreadsheet-tabs-container', docContainer.parentElement);
+		this._tabsCont.id = 'spreadsheet-tabs-container-id';
 
 		this._menuItem = {
 			'insertsheetbefore': {name: _('Insert sheet before this'),