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

[Szymon KÅ‚os (via logerrit)]

 loleaflet/css/notebookbar.css                       |    8 ++
 loleaflet/src/control/Control.NotebookbarBuilder.js |   77 +++++++++++++++++---
 2 files changed, 77 insertions(+), 8 deletions(-)

New commits:
commit 6d7f7345d31f729d0a17b6564b5f02ffed9f901d
Author:     Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Mon Apr 27 09:41:25 2020 +0200
Commit:     Szymon Kłos <szymon.klos at collabora.com>
CommitDate: Fri May 1 17:12:17 2020 +0200

    notebookbar: implemented color picker control
    
    Change-Id: I0f9609fd0068592e1fa8fcbc564c193fee06b20b
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/93275
    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 3d79652ad..bb8c05b3c 100644
--- a/loleaflet/css/notebookbar.css
+++ b/loleaflet/css/notebookbar.css
@@ -62,6 +62,14 @@
 	cursor: pointer;
 }
 
+.unotoolbutton.notebookbar .selected-color {
+	height: 5px;
+	width: 24px;
+	position: relative;
+	top: -4px;
+	border: 1px solid silver;
+}
+
 /* Reset attributes control */
 #clearFormatting.notebookbar div img {
 	width: 24px !important;
diff --git a/loleaflet/src/control/Control.NotebookbarBuilder.js b/loleaflet/src/control/Control.NotebookbarBuilder.js
index e1c922f25..f70f1d3c5 100644
--- a/loleaflet/src/control/Control.NotebookbarBuilder.js
+++ b/loleaflet/src/control/Control.NotebookbarBuilder.js
@@ -16,15 +16,15 @@ L.Control.NotebookbarBuilder = L.Control.JSDialogBuilder.extend({
 		this._controlHandlers['listbox'] = this._comboboxControl;
 		this._controlHandlers['pushbutton'] = function() { return false; };
 
-		this._toolitemHandlers['.uno:XLineColor'] = function() {};
+		this._toolitemHandlers['.uno:XLineColor'] = this._colorControl;
 		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:FontColor'] = this._colorControl;
+		this._toolitemHandlers['.uno:BackColor'] = this._colorControl;
+		this._toolitemHandlers['.uno:CharBackColor'] = this._colorControl;
+		this._toolitemHandlers['.uno:BackgroundColor'] = this._colorControl;
+		this._toolitemHandlers['.uno:FrameLineColor'] = this._colorControl;
+		this._toolitemHandlers['.uno:Color'] = this._colorControl;
+		this._toolitemHandlers['.uno:FillColor'] = this._colorControl;
 		this._toolitemHandlers['vnd.sun.star.findbar:FocusToFindbar'] = function() {};
 	},
 
@@ -43,6 +43,67 @@ L.Control.NotebookbarBuilder = L.Control.JSDialogBuilder.extend({
 		return false;
 	},
 
+	_colorControl: function(parentContainer, data, builder) {
+		var titleOverride = builder._getTitleForControlWithId(data.id);
+		if (titleOverride)
+			data.text = titleOverride;
+
+		data.id = data.id ? data.id : (data.command ? data.command.replace('.uno:', '') : undefined);
+
+		data.text = builder._cleanText(data.text);
+
+		if (data.command) {
+			var div = builder._createIdentifiable('div', 'unotoolbutton ' + builder.options.cssClass + ' ui-content unospan', parentContainer, data);
+
+			var id = data.command.substr('.uno:'.length);
+			div.id = id;
+
+			div.title = data.text;
+			$(div).tooltip();
+
+			var icon = builder._createIconPath(data.command);
+			var buttonId = id + 'img';
+
+			var button = L.DomUtil.create('img', 'ui-content unobutton', div);
+			button.src = icon;
+			button.id = buttonId;
+
+			var valueNode =  L.DomUtil.create('div', 'selected-color', div);
+
+			var selectedColor;
+
+			var updateFunction = function (color) {
+				selectedColor = builder._getCurrentColor(data, builder);
+				valueNode.style.backgroundColor = color ? color : selectedColor;
+			};
+
+			updateFunction();
+
+			builder.map.on('commandstatechanged', function(e) {
+				if (e.commandName === data.command)
+					updateFunction();
+			}, this);
+
+			var noColorControl = (data.command !== '.uno:FontColor' && data.command !== '.uno:Color');
+
+			$(div).click(function() {
+				$(div).w2color({ color: selectedColor, transparent: noColorControl }, function (color) {
+					if (color != null) {
+						if (color) {
+							updateFunction('#' + color);
+							builder._sendColorCommand(builder, data, color);
+						} else {
+							updateFunction('#FFFFFF');
+							builder._sendColorCommand(builder, data, 'transparent');
+						}
+					}
+				});
+			});
+		}
+
+		return false;
+	},
+
 	build: function(parent, data, hasVerticalParent, parentHasManyChildren) {
 		this._amendJSDialogData(data);