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

Szymon KÅ‚os (via logerrit) logerrit at kemper.freedesktop.org
Fri May 1 13:28:06 UTC 2020


 loleaflet/css/notebookbar.css                       |   32 +++++-
 loleaflet/src/control/Control.JSDialogBuilder.js    |    2 
 loleaflet/src/control/Control.Notebookbar.js        |    3 
 loleaflet/src/control/Control.NotebookbarBuilder.js |  106 +++++++++++++++-----
 loleaflet/src/control/Control.UIManager.js          |    8 -
 5 files changed, 123 insertions(+), 28 deletions(-)

New commits:
commit 83b1ce546028c094e74cdba29efd449b214b6aa1
Author:     Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Thu Apr 23 10:09:23 2020 +0200
Commit:     Szymon Kłos <szymon.klos at collabora.com>
CommitDate: Fri May 1 15:27:46 2020 +0200

    notebookbar: reduce size
    
    - changed icon size to 24x24
    - table structure is flatter
    - uno buttons without label
    
    Change-Id: I63a68aac4f91633b10bfa93f5882b46b8a0fea12
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/93263
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Szymon Kłos <szymon.klos at collabora.com>

diff --git a/loleaflet/css/notebookbar.css b/loleaflet/css/notebookbar.css
index 0b6e16791..b951e8815 100644
--- a/loleaflet/css/notebookbar.css
+++ b/loleaflet/css/notebookbar.css
@@ -1,4 +1,6 @@
 
+/* tabs */
+
 .ui-tabs.notebookbar {
 	display: inline-block;
 }
@@ -7,4 +9,32 @@
 	float: left;
 	margin-right: 10px;
 	font-size: 12pt;
-}
\ No newline at end of file
+}
+
+/* root container */
+
+.root-container.notebookbar {
+	position: fixed;
+	top: 20px;
+}
+
+/* unobuttons */
+
+#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, #JustifyPara.notebookbar, #DefaultBullet.notebookbar, #DefaultNumb
 ering.notebookbar, #ParaspaceIncrease.notebookbar, #ParaspaceDecrease.notebookbar, #LineSpacing.notebookbar, #HangingIndent.notebookbar, #CellVertTop.notebookbar, #CellVertCenter.notebookbar, #CellVertBottom.notebookbar, #ParaspaceIncrease.notebookbar, #ParaspaceDecrease.notebookbar, #DeleteTable.notebookbar, #MergeCells.notebookbar{
+	padding: 0px !important;
+	margin: 0px !important;
+}
+
+#buttonbefore.notebookbar, #buttonafter.notebookbar, #buttonoptimal.notebookbar, #buttonparallel.notebookbar, #buttonnone.notebookbar, #buttonthrough.notebookbar, #bottom.notebookbar, #top.notebookbar, #standard.notebookbar, #Bold.notebookbar, #Italic.notebookbar, #Underline.notebookbar, #Strikeout.notebookbar{
+	margin: 0px !important;
+	padding: 0px !important;
+}
+
+.unotoolbutton.notebookbar .unobutton {
+	width: 24px !important;
+	height: 24px !important;
+}
+
+.ui-content.notebookbar .unobutton.selected {
+	box-shadow: 0 0 0px 4px #e6e6e640 !important;
+}
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index 60cfd41de..ce7e24da7 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -1505,7 +1505,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 	_unoToolButton: function(parentContainer, data, builder) {
 		var button = null;
 
-		var div = this._createIdentifiable('div', 'ui-content unospan', parentContainer, data);
+		var div = this._createIdentifiable('div', 'unotoolbutton ' + builder.cssClass + ' ui-content unospan', parentContainer, data);
 
 		if (data.command) {
 			var id = data.command.substr('.uno:'.length);
diff --git a/loleaflet/src/control/Control.Notebookbar.js b/loleaflet/src/control/Control.Notebookbar.js
index ea04ff973..cdab92abe 100644
--- a/loleaflet/src/control/Control.Notebookbar.js
+++ b/loleaflet/src/control/Control.Notebookbar.js
@@ -21,6 +21,9 @@ L.Control.Notebookbar = L.Control.extend({
 		$('nav').prepend(tabs);
 	},
 
+	// required, called by builder, not needed in this container
+	setCurrentScrollPosition: function() {},
+
 	getHomeTab: function() {
 		return '';
 	}
diff --git a/loleaflet/src/control/Control.NotebookbarBuilder.js b/loleaflet/src/control/Control.NotebookbarBuilder.js
index bb2d968e2..2a0b7b8cf 100644
--- a/loleaflet/src/control/Control.NotebookbarBuilder.js
+++ b/loleaflet/src/control/Control.NotebookbarBuilder.js
@@ -11,24 +11,77 @@ L.Control.NotebookbarBuilder = L.Control.JSDialogBuilder.extend({
 	},
 
 	_overrideHandlers: function() {
-		this._controlHandlers['combobox'] = undefined;
-		this._controlHandlers['listbox'] = undefined;
-
-		this._toolitemHandlers['.uno:XLineColor'] = undefined;
-		this._toolitemHandlers['.uno:SelectWidth'] = undefined;
-		this._toolitemHandlers['.uno:FontColor'] = undefined;
-		this._toolitemHandlers['.uno:BackColor'] = undefined;
-		this._toolitemHandlers['.uno:CharBackColor'] = undefined;
-		this._toolitemHandlers['.uno:BackgroundColor'] = undefined;
-		this._toolitemHandlers['.uno:FrameLineColor'] = undefined;
-		this._toolitemHandlers['.uno:Color'] = undefined;
-		this._toolitemHandlers['.uno:FillColor'] = undefined;
-		this._toolitemHandlers['.uno:ResetAttributes'] = undefined;
+		this._controlHandlers['combobox'] = function() {return false;};
+		this._controlHandlers['listbox'] = function() {return false;};
+
+		this._toolitemHandlers['.uno:XLineColor'] = function() {};
+		this._toolitemHandlers['.uno:SelectWidth'] = function() {};
+		this._toolitemHandlers['.uno:FontColor'] = function() {};
+		this._toolitemHandlers['.uno:BackColor'] = function() {};
+		this._toolitemHandlers['.uno:CharBackColor'] = function() {};
+		this._toolitemHandlers['.uno:BackgroundColor'] = function() {};
+		this._toolitemHandlers['.uno:FrameLineColor'] = function() {};
+		this._toolitemHandlers['.uno:Color'] = function() {};
+		this._toolitemHandlers['.uno:FillColor'] = function() {};
+		this._toolitemHandlers['.uno:ResetAttributes'] = function() {};
 	},
 
-	build: function(parent, data, hasVerticalParent) {
+	_unoToolButton: function(parentContainer, data, builder) {
+		var button = null;
+
+		var div = this._createIdentifiable('div', 'unotoolbutton ' + builder.options.cssClass + ' ui-content unospan', parentContainer, data);
+
+		if (data.command) {
+			var id = data.command.substr('.uno:'.length);
+			div.id = id;
+
+			var icon = builder._createIconPath(data.command);
+			var buttonId = id + 'img';
+
+			button = L.DomUtil.create('img', 'ui-content unobutton', div);
+			button.src = icon;
+			button.id = buttonId;
+
+			var updateFunction = function() {
+				var items = builder.map['stateChangeHandler'];
+				var state = items.getItemValue(data.command);
+
+				if (state && state === 'true')
+					$(button).addClass('selected');
+				else
+					$(button).removeClass('selected');
+			};
+
+			updateFunction();
+
+			builder.map.on('commandstatechanged', function(e) {
+				if (e.commandName === data.command)
+					updateFunction();
+			}, this);
+
+		} else {
+			button = L.DomUtil.create('label', 'ui-content unolabel', div);
+			button.innerHTML = builder._cleanText(data.text);
+		}
+
+		$(div).click(function () {
+			builder.callback('toolbutton', 'click', button, data.command, builder);
+		});
+
+		if (data.enabled == 'false')
+			$(button).attr('disabled', 'disabled');
+
+		return false;
+	},
+
+	build: function(parent, data, hasVerticalParent, parentHasManyChildren) {
 		this._amendJSDialogData(data);
 
+		if (hasVerticalParent === undefined) {
+			parent = L.DomUtil.create('table', 'root-container ' + this.options.cssClass, parent);
+			parent = L.DomUtil.create('tr', '', parent);
+		}
+
 		var containerToInsert = parent;
 
 		for (var childIndex in data) {
@@ -36,11 +89,15 @@ L.Control.NotebookbarBuilder = L.Control.JSDialogBuilder.extend({
 			if (!childData)
 				continue;
 
-			if (!hasVerticalParent)
-				var td = L.DomUtil.create('td', '', containerToInsert);
-			else {
-				containerToInsert = L.DomUtil.create('tr', '', parent);
-				td = L.DomUtil.create('td', '', containerToInsert);
+			if (parentHasManyChildren) {
+				if (!hasVerticalParent)
+					var td = L.DomUtil.create('td', '', containerToInsert);
+				else {
+					containerToInsert = L.DomUtil.create('tr', '', parent);
+					td = L.DomUtil.create('td', '', containerToInsert);
+				}
+			} else {
+				td = containerToInsert;
 			}
 
 			var isVertical = childData.vertical === 'true' ? true : false;
@@ -54,8 +111,13 @@ L.Control.NotebookbarBuilder = L.Control.JSDialogBuilder.extend({
 				continue;
 			}
 
-			var table = L.DomUtil.create('table', '', td);
-			var childObject = L.DomUtil.create('tr', '', table);
+			var hasManyChildren = childData.children && childData.children.length > 1;
+			if (hasManyChildren) {
+				var table = L.DomUtil.create('table', '', td);
+				var childObject = L.DomUtil.create('tr', '', table);
+			} else {
+				childObject = td;
+			}
 
 			var handler = this._controlHandlers[childType];
 			var twoPanelsAsChildren =
@@ -73,7 +135,7 @@ L.Control.NotebookbarBuilder = L.Control.JSDialogBuilder.extend({
 					console.warn('Unsupported control type: \"' + childType + '\"');
 
 				if (processChildren && childData.children != undefined)
-					this.build(childObject, childData.children, isVertical);
+					this.build(childObject, childData.children, isVertical, hasManyChildren);
 				else if (childData.visible && (childData.visible === false || childData.visible === 'false')) {
 					$('#' + childData.id).addClass('hidden-from-event');
 				}
diff --git a/loleaflet/src/control/Control.UIManager.js b/loleaflet/src/control/Control.UIManager.js
index f9dd3d7c9..417fc0fc9 100644
--- a/loleaflet/src/control/Control.UIManager.js
+++ b/loleaflet/src/control/Control.UIManager.js
@@ -68,10 +68,10 @@ L.Control.UIManager = L.Control.extend({
 		} else if (window.enableNotebookbar) {
 			this.map.addControl(L.control.notebookbar({docType: docType}));
 
-			this.moveObjectVertically($('#spreadsheet-row-column-frame'), 36);
-			this.moveObjectVertically($('#document-container'), 77);
-			this.moveObjectVertically($('#presentation-controls-wrapper'), 36);
-			this.moveObjectVertically($('#sidebar-dock-wrapper'), 36);
+			this.moveObjectVertically($('#spreadsheet-row-column-frame'), 40);
+			this.moveObjectVertically($('#document-container'), 81);
+			this.moveObjectVertically($('#presentation-controls-wrapper'), 40);
+			this.moveObjectVertically($('#sidebar-dock-wrapper'), 40);
 		}
 
 		if (docType === 'spreadsheet') {


More information about the Libreoffice-commits mailing list