notebookbar: unify color control with core

in desktop case color widget should show the latest selected
color not current one. split the button into arrow with dropdown
and "last color" button (icon)

Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
Change-Id: I07fcc94d69e14b030cf9f1bfe3ae50f0df333ec7

1 files changed, 27 insertions, 17 deletions

diff --git a/browser/src/control/Control.JSDialogBuilder.js b/browser/src/control/Control.JSDialogBuilder.js
index 1f1d6bfa57..1ef89a4183 100644
--- a/browser/src/control/Control.JSDialogBuilder.js
+++ b/browser/src/control/Control.JSDialogBuilder.js
@@ -2848,7 +2848,8 @@ L.Control.JSDialogBuilder = L.Control.extend({
 			button.id = buttonId;
 			button.setAttribute('alt', id);
 
-			L.DomUtil.create('i', 'unoarrow', div);
+			var arrowbackground = L.DomUtil.create('div', 'arrowbackground', div);
+			L.DomUtil.create('i', 'unoarrow', arrowbackground);
 			$(div).addClass('has-dropdown--color');
 
 			var valueNode =  L.DomUtil.create('div', 'selected-color', div);
@@ -2858,30 +2859,39 @@ L.Control.JSDialogBuilder = L.Control.extend({
 			var updateFunction = function (color) {
 				selectedColor = builder._getCurrentColor(data, builder);
 				valueNode.style.backgroundColor = color ? color : selectedColor;
+				selectedColor = color ? color : selectedColor;
 				builder.setPickerOutline(valueNode);
 			};
 
 			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');
+			var applyFunction = function() {
+				if (!selectedColor || selectedColor === '#')
+					return;
+
+				var color = selectedColor.indexOf('#') === 0 ? selectedColor.substr(1) : selectedColor;
+				builder._sendColorCommand(builder, data, color);
+			};
+
+			$(button).click(applyFunction);
+			$(valueNode).click(applyFunction);
+
+			$(arrowbackground).click(function() {
+				if (!$(div).hasClass('disabled')) {
+					$(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');
+							}
 						}
-					}
-				});
+					});
+				}
 			});
 			builder._preventDocumentLosingFocusOnClick(div);
 		}