Readonly: fix styles and multiple document headers on notebookbar and classic

- Avoid having multiple document-header elements when on notebookbar
- Add classes to the main-nav element when in presence of Readonly

Change-Id: I82cb816fcfa28d790202c96484a7e8c99f3875f6
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/103004
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Pedro Silva <pedro.silva@collabora.com>

3 files changed, 17 insertions, 5 deletions

diff --git a/loleaflet/css/menubar.css b/loleaflet/css/menubar.css
index ff761d84a..df58c5fcc 100644
--- a/loleaflet/css/menubar.css
+++ b/loleaflet/css/menubar.css
@@ -19,7 +19,10 @@
 	background: #ffffff;
 	margin-right: 5px;
 }
-
+/*avoid multiple document-headers in readonly mode*/
+.main-nav.hasnotebookbar.readonly > #main-menu #document-header {
+	display: none;
+}
 .document-logo {
 	position: relative;
 	width: 22px;
@@ -46,10 +49,12 @@
 	right: 0px;
 }
 
-.main-nav.hasnotebookbar #document-titlebar {
+.main-nav.hasnotebookbar:not(.readonly) #document-titlebar {
 	top: -10px;
 }
-
+.main-nav.readonly #document-titlebar {
+	top: 1px;
+}
 .main-nav {
 	height: 32px; /* on mouseover menubar items, border emerges */
 	width: auto;
@@ -57,8 +62,11 @@
 	margin: 3px;
 	white-space: nowrap;
 }
-
-.main-nav.hasnotebookbar{
+.main-nav.readonly {
+	top: -1px; /*update .main-nav.readonly #document-titlebar*/
+	position: relative;
+}
+.main-nav.hasnotebookbar:not(.readonly) {
 	background: var(--gray-bg-color);
 	margin-top: 0px;
 }
diff --git a/loleaflet/src/control/Control.Notebookbar.js b/loleaflet/src/control/Control.Notebookbar.js
index cb7d9a173..d07c36808 100644
--- a/loleaflet/src/control/Control.Notebookbar.js
+++ b/loleaflet/src/control/Control.Notebookbar.js
@@ -45,6 +45,7 @@ L.Control.Notebookbar = L.Control.extend({
 		if (e.perm === 'edit') {
 			this._showNotebookbar = true;
 			this.showTabs();
+			$('.main-nav').removeClass('readonly');
 		}
 	},
 
@@ -60,6 +61,7 @@ L.Control.Notebookbar = L.Control.extend({
 	hideTabs: function() {
 		$('.ui-tabs.notebookbar').hide();
 		$('.notebookbar-shortcuts-bar').hide();
+		$('.main-nav').addClass('readonly');
 	},
 
 	collapse: function() {
diff --git a/loleaflet/src/control/Control.Toolbar.js b/loleaflet/src/control/Control.Toolbar.js
index d073afa4d..7fa110194 100644
--- a/loleaflet/src/control/Control.Toolbar.js
+++ b/loleaflet/src/control/Control.Toolbar.js
@@ -975,7 +975,9 @@ function onUpdatePermission(e) {
 				if (!keepDisabled || alwaysEnable) {
 					toolbar.enable(items[idx].id);
 				}
+				$('.main-nav').removeClass('readonly');
 			} else if (!alwaysEnable) {
+				$('.main-nav').addClass('readonly');
 				toolbar.disable(items[idx].id);
 			}
 		}