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

[Pedro Pinto Silva (via logerrit)]

 loleaflet/css/notebookbar.css                |   10 +++++++--
 loleaflet/css/toolbar.css                    |   28 +++++++++++++--------------
 loleaflet/src/control/Control.Notebookbar.js |   15 ++++++--------
 3 files changed, 29 insertions(+), 24 deletions(-)

New commits:
commit b56d6a542396cc96b3d392144a217eff5618a4ab
Author:     Pedro Pinto Silva <pedro.silva at collabora.com>
AuthorDate: Tue Jul 21 11:37:10 2020 +0200
Commit:     Pedro Silva <pedro.silva at collabora.com>
CommitDate: Tue Jul 21 14:45:05 2020 +0200

    Notebookbar: reposition sidebar icon
    
    Since it's a trigger that it's not dependent on a specific tab content but rather a top control that activates the sidebar I repositioned it up top. This will also avoid problems in the future in the case we add a "collapse tab content"
    
    - Also optative close button got some improvements in position and size
    Change-Id: I541a3683529e5744714394b64a57105a3407b13f
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/99126
    Tested-by: Jenkins
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Pedro Silva <pedro.silva at collabora.com>

diff --git a/loleaflet/css/notebookbar.css b/loleaflet/css/notebookbar.css
index 42aea041f..5c4843424 100644
--- a/loleaflet/css/notebookbar.css
+++ b/loleaflet/css/notebookbar.css
@@ -65,12 +65,14 @@
 	width: 16px !important;
 	height: 16px !important;
 	margin-right: 0px;
-	margin-bottom: 3px;
+	margin-top: 3px;
 }
 
 /* options section */
 .notebookbar-options-section {
-	margin-left: 10px;
+	display: inline;
+	position: fixed;
+	right: 0px;
 }
 
 /* root container */
@@ -91,6 +93,10 @@
     height: 0;
 }
 
+#toolbar-wrapper.hasnotebookbar {
+	position: fixed;
+}
+
 /* unobuttons */
 
 div[id*='Row'].notebookbar, div[id*='Column'].notebookbar, #SendToBack.notebookbar, #ObjectBackOne.notebookbar, #ObjectForwardOne.notebookbar, #BringToFront.notebookbar, #SetObjectToBackground.notebookbar, #SetObjectToForeground.notebookbar, #FlipVertical.notebookbar, #FlipHorizontal.notebookbar, #Bold.notebookbar, #Italic.notebookbar, #Underline.notebookbar, #Strikeout.notebookbar, #StyleApply.notebookbar, #StyleUpdateByExample.notebookbar, #StyleNewByExample.notebookbar, #Shadowed.notebookbar, #Grow.notebookbar, #Shrink.notebookbar, #Spacing.notebookbar, #SuperScript.notebookbar, #SubScript.notebookbar,#AlignLeft.notebookbar, #AlignRight.notebookbar, #AlignHorizontalCenter.notebookbar, #AlignBlock.notebookbar, #ParaRightToLeft.notebookbar, #ParaLeftToRight.notebookbar, #AlignTop.notebookbar, #AlignVCenter.notebookbar, #AlignBottom.notebookbar, #IncrementIndent.notebookbar, #DecrementIndent.notebookbar, #LeftPara.notebookbar, #RightPara.notebookbar, #CenterPara.notebookbar, #Justif
 yPara.notebookbar, #DefaultBullet.notebookbar, #DefaultNumbering.notebookbar, #ParaspaceIncrease.notebookbar, #ParaspaceDecrease.notebookbar, #LineSpacing.notebookbar, #HangingIndent.notebookbar, #CellVertTop.notebookbar, #CellVertCenter.notebookbar, #CellVertBottom.notebookbar, #ParaspaceIncrease.notebookbar, #ParaspaceDecrease.notebookbar, #DeleteTable.notebookbar, #MergeCells.notebookbar{
diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css
index 880f48053..0f11a2b34 100644
--- a/loleaflet/css/toolbar.css
+++ b/loleaflet/css/toolbar.css
@@ -216,23 +216,23 @@ td[id^=tb_editbar_item_sidebar]{
 }
 
 #closebuttonwrapper {
-		position: fixed;
-		z-index: 1050;
-		right: 4px;
-		top: 3px;
-		width: 28px;
-		height: 28px;
-		background-color: white;
-		display: none;
+	position: fixed;
+	z-index: 1050;
+	right: 4px;
+	top: 0px;
+	width: 32px;
+	height: 32px;
+	background-color: white;
+	display: none;
 }
 
 #closebutton {
-		width: 18px;
-		height: 18px;
-		border: 1px solid;
-		border-color: transparent;
-		border-radius: 5px;
-		margin: 5px;
+	width: 18px;
+	height: 18px;
+	border: 1px solid;
+	border-color: transparent;
+	border-radius: 5px;
+	margin: 8px;
 }
 
 #closebutton:hover {
diff --git a/loleaflet/src/control/Control.Notebookbar.js b/loleaflet/src/control/Control.Notebookbar.js
index b1612cb06..b2c4ac54e 100644
--- a/loleaflet/src/control/Control.Notebookbar.js
+++ b/loleaflet/src/control/Control.Notebookbar.js
@@ -6,7 +6,6 @@
 /* global $ _ _UNO */
 L.Control.Notebookbar = L.Control.extend({
 
-	_optionsSectionWidth: 50,
 	_currentScrollPosition: 0,
 	_showNotebookbar: false,
 
@@ -23,6 +22,7 @@ L.Control.Notebookbar = L.Control.extend({
 		this.map.on('notebookbar', this.onNotebookbar, this);
 		this.map.on('updatepermission', this.onUpdatePermission, this);
 
+		$('#toolbar-wrapper').addClass('hasnotebookbar');
 		$('.main-nav').addClass('hasnotebookbar');
 		$('.main-nav').addClass(this._map.getDocType() + '-color-indicator');
 
@@ -155,8 +155,6 @@ L.Control.Notebookbar = L.Control.extend({
 
 		$(left).css({'height': '80px'});
 		$(right).css({'height': '80px'});
-		if (window.mode.isDesktop())
-			$(right).css({'right':  this._optionsSectionWidth + 'px'});
 
 		$(left).click(function () {
 			var scroll = $('.notebookbar-scroll-wrapper').scrollLeft() - 300;
@@ -239,12 +237,13 @@ L.Control.Notebookbar = L.Control.extend({
 	},
 
 	createOptionsSection: function() {
-		$('.notebookbar-options-td').remove();
-		var optionsTd = L.DomUtil.create('td', 'notebookbar-options-td');
-		$(optionsTd).css('width', this._optionsSectionWidth + 'px');
+		$('.notebookbar-options-section').remove();
+
+		var optionsSection = L.DomUtil.create('div', 'notebookbar-options-section');
+		$('#document-titlebar').parent().append(optionsSection);
 
-		var optionsSection = L.DomUtil.create('div', 'notebookbar-options-section', optionsTd);
-		$('#toolbar-up').parent().append(optionsTd);
+		if (L.Params.closeButtonEnabled && !window.mode.isTablet())
+			$(optionsSection).css('right', '30px');
 
 		var builderOptions = {
 			mobileWizard: this,