QmlDesigner.PropertyEditor: Fix the small color button for gradients

The small ColorCheckButton has to preview the same color as the rest
of the color editor. Before this patch it was showing the color
defined in the backend as rectangle color.
This is not correct in gradient editing mode.
Also the binding in Colorbutton was deleted assigning values
directly.

Task-number: QTCREATORBUG-12204
Change-Id: Iad5263ccccba10fdb4f2b757f6965d500c50ac53
Reviewed-by: Christian Stenger <christian.stenger@digia.com>

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ColorEditor.qml

@@ -34,6 +34,7 @@ import QtQuick.Controls 1.0 as Controls
 
 
 Column {
+    id: colorEditor
 
     width: parent.width - 8
 
@@ -50,7 +51,11 @@ Column {
     property alias gradientPropertyName: gradientLine.gradientPropertyName
 
     onValueChanged: {
-        color = value
+        colorEditor.color = colorEditor.value
+    }
+
+    onBackendendValueChanged: {
+        colorEditor.color = colorEditor.value
     }
 
     Timer {
@@ -63,8 +68,6 @@ Column {
         }
     }
 
-    id: colorEditor
-
     onColorChanged: {
         if (!gradientLine.isCompleted)
             return;
@@ -164,7 +167,7 @@ Column {
             }
             ColorCheckButton {
                 id: checkButton
-                color: backendendValue.value
+                color: colorEditor.color
             }
 
             ButtonRow {
@@ -205,7 +208,13 @@ Column {
         }
 
         ColorButton {
-            color: colorEditor.color
+            property color bindedColor: colorEditor.color
+
+            //prevent the binding to be deleted by assignment
+            onBindedColorChanged: {
+                colorButton.color = colorButton.bindedColor
+            }
+
             enabled: buttonRow.checkedIndex !== 2
             opacity: checkButton.checked ? 1 : 0
             id: colorButton