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

[Dennis Francis (via logerrit)]

 loleaflet/css/spreadsheet.css               |   19 ++++++++++++-------
 loleaflet/src/control/Control.TopToolbar.js |    7 +++++++
 loleaflet/src/map/Map.js                    |    4 ++--
 3 files changed, 21 insertions(+), 9 deletions(-)

New commits:
commit 7a17f0aa528e12d751281fb8254c576e730919c9
Author:     Dennis Francis <dennis.francis at collabora.com>
AuthorDate: Tue Jul 21 19:51:14 2020 +0530
Commit:     Dennis Francis <dennis.francis at collabora.com>
CommitDate: Fri Jul 24 15:10:47 2020 +0200

    calc-tablet-readonly: fix document-container/headers position
    
    This change "hides" the toolbar and the formula bar in readonly mode for
    tablets like the mobile(small-screen + touch) case, by positioning the
    document-container and the header-container "over" the toolbar-wrapper
    by using .tablet, and .tablet.readonly css style overrides.
    
    Change-Id: I3a0d8468c2b2f5b62a238592ab64d85e1f8be62e
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/99356
    Tested-by: Jenkins
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Dennis Francis <dennis.francis at collabora.com>

diff --git a/loleaflet/css/spreadsheet.css b/loleaflet/css/spreadsheet.css
index 3f4ebe5c9..c0c6b95e0 100644
--- a/loleaflet/css/spreadsheet.css
+++ b/loleaflet/css/spreadsheet.css
@@ -9,11 +9,8 @@
 	top: 56px;
 }
 
-#document-container.spreadsheet-document.tablet {
-	border-top: 1px solid #B6B6B6;
-	top: 100px;
-	left: 50px;
-	bottom: 78px;
+#document-container.spreadsheet-document.tablet.readonly {
+	top: 52px;
 }
 
 .spreadsheet-tabs-container {
@@ -79,8 +76,8 @@
 		bottom: 0px;
 }
 
-#spreadsheet-row-column-frame.tablet {
-	top: 80px;
+#spreadsheet-row-column-frame.tablet.readonly {
+	top: 32px;
 }
 
 #spreadsheet-header-corner-container {
@@ -229,3 +226,11 @@
 	background-size: 100% 100%;
 	background-repeat: no-repeat;
 	}
+
+#toolbar-wrapper.spreadsheet.tablet {
+	z-index: auto;
+}
+
+#toolbar-wrapper.spreadsheet.tablet.readonly {
+	z-index: -1;
+}
diff --git a/loleaflet/src/control/Control.TopToolbar.js b/loleaflet/src/control/Control.TopToolbar.js
index a0d665664..34450e934 100644
--- a/loleaflet/src/control/Control.TopToolbar.js
+++ b/loleaflet/src/control/Control.TopToolbar.js
@@ -280,6 +280,13 @@ L.Control.TopToolbar = L.Control.extend({
 				toolbarUp.remove('styles');
 			}
 
+			$('#toolbar-wrapper').addClass('spreadsheet');
+			if (window.mode.isTablet()) {
+				$(this.map.options.documentContainer).addClass('tablet');
+				$('#spreadsheet-row-column-frame').addClass('tablet');
+				$('#toolbar-wrapper').addClass('tablet');
+			}
+
 			break;
 		case 'text':
 			if (toolbarUp)
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index 1ba421e99..819d3ea51 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -179,7 +179,7 @@ L.Map = L.Evented.extend({
 
 			if (e.perm === 'readonly') {
 				L.DomUtil.addClass(this._container.parentElement, 'readonly');
-				if (window.mode.isDesktop()) {
+				if (window.mode.isDesktop() || window.mode.isTablet()) {
 					L.DomUtil.addClass(L.DomUtil.get('toolbar-wrapper'), 'readonly');
 				}
 				L.DomUtil.addClass(L.DomUtil.get('main-menu'), 'readonly');
@@ -187,7 +187,7 @@ L.Map = L.Evented.extend({
 				L.DomUtil.addClass(L.DomUtil.get('spreadsheet-row-column-frame'), 'readonly');
 			} else {
 				L.DomUtil.removeClass(this._container.parentElement, 'readonly');
-				if (window.mode.isDesktop()) {
+				if (window.mode.isDesktop() || window.mode.isTablet()) {
 					L.DomUtil.removeClass(L.DomUtil.get('toolbar-wrapper'), 'readonly');
 				}
 				L.DomUtil.removeClass(L.DomUtil.get('main-menu'), 'readonly');