Color picker: Don't set indicator's border so bright

Before, when the color is set to black the border color
that was alright — for any other non-black color — but for black
the grayish border around was causing weird contrast artifacts

Fix by setting different border color for that situation

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: Ia660f559f276bc7e9c335d43e57d51a9b1036472

1 files changed, 13 insertions, 0 deletions

diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index 4d755dd9f3..0d3f6cc9e2 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -2362,6 +2362,18 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		return false;
 	},
 
+	setPickerOutline: function(bgColor) {
+		// Make sure the border around the color indicator is not too bright
+		// when the color is black so to avoid weird contast artifacts
+		if (bgColor) {
+			if (bgColor.style.backgroundColor == '#000000' || bgColor.style.backgroundColor == 'rgb(0, 0, 0)') {
+				bgColor.style.borderColor = '#6a6a6a';
+			} else {
+				bgColor.style.borderColor = 'var(--gray-color)';
+			}
+		}
+	},
+
 	_colorSampleControl: function (parentContainer, data, builder) {
 		var sampleSizeClass = 'color-sample-small';
 		if (data.size === 'big')
@@ -2666,6 +2678,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 			var updateFunction = function (color) {
 				selectedColor = builder._getCurrentColor(data, builder);
 				valueNode.style.backgroundColor = color ? color : selectedColor;
+				builder.setPickerOutline(valueNode);
 			};
 
 			updateFunction();