Keep the QML ColorDialog's controls in sync with the color property

Until now, the user could change the color by dragging the crosshairs
or the sliders, but if the application set the color property, it did
not programmatically move the crosshairs and sliders.

Task-number: QTBUG-32545
Change-Id: Idd54e711400dfd78d570161297559f9521c1d67f
Reviewed-by: Liang Qi <liang.qi@digia.com>

2 files changed, 26 insertions, 7 deletions

diff --git a/src/imports/dialogs/DefaultColorDialog.qml b/src/imports/dialogs/DefaultColorDialog.qml
index a69fc3418b..44af99bf18 100644
--- a/src/imports/dialogs/DefaultColorDialog.qml
+++ b/src/imports/dialogs/DefaultColorDialog.qml
@@ -45,6 +45,18 @@ import "qml"
 
 AbstractColorDialog {
     id: root
+    property bool _valueSet: true // guard to prevent binding loops
+    function _setControlsFromColor() {
+        _valueSet = false
+        hueSlider.value = root.hue
+        saturationSlider.value = root.saturation
+        lightnessSlider.value = root.lightness
+        alphaSlider.value = root.alpha
+        crosshairs.x = root.lightness * paletteMap.width
+        crosshairs.y = (1.0 - root.saturation) * paletteMap.height
+        _valueSet = true
+    }
+    onColorChanged: _setControlsFromColor()
 
     Rectangle {
         id: content
@@ -62,12 +74,6 @@ AbstractColorDialog {
 
         SystemPalette { id: palette }
 
-        Binding {
-            target: root
-            property: "color"
-            value: Qt.hsla(hueSlider.value, saturationSlider.value, lightnessSlider.value, alphaSlider.value)
-        }
-
         Item {
             id: paletteFrame
             visible: content.usePaletteMap
@@ -83,6 +89,7 @@ AbstractColorDialog {
                 id: paletteMap
                 x: (parent.width - width) / 2
                 width: height
+                onWidthChanged: root._setControlsFromColor()
                 height: parent.height
                 source: "images/checkers.png"
                 fillMode: Image.Tile
@@ -197,6 +204,7 @@ AbstractColorDialog {
             ColorSlider {
                 id: hueSlider
                 value: 0.5
+                onValueChanged: if (_valueSet) root.color = Qt.hsla(hueSlider.value, saturationSlider.value, lightnessSlider.value, alphaSlider.value)
                 text: qsTr("Hue")
                 trackDelegate: Rectangle {
                     rotation: -90
@@ -217,6 +225,7 @@ AbstractColorDialog {
                 id: saturationSlider
                 visible: !content.usePaletteMap
                 value: 0.5
+                onValueChanged: if (_valueSet) root.color = Qt.hsla(hueSlider.value, saturationSlider.value, lightnessSlider.value, alphaSlider.value)
                 text: qsTr("Saturation")
                 trackDelegate: Rectangle {
                     rotation: -90
@@ -232,6 +241,7 @@ AbstractColorDialog {
                 id: lightnessSlider
                 visible: !content.usePaletteMap
                 value: 0.5
+                onValueChanged: if (_valueSet) root.color = Qt.hsla(hueSlider.value, saturationSlider.value, lightnessSlider.value, alphaSlider.value)
                 text: qsTr("Luminosity")
                 trackDelegate: Rectangle {
                     rotation: -90
@@ -249,6 +259,7 @@ AbstractColorDialog {
                 minimum: 0.0
                 maximum: 1.0
                 value: 1.0
+                onValueChanged: if (_valueSet) root.color = Qt.hsla(hueSlider.value, saturationSlider.value, lightnessSlider.value, alphaSlider.value)
                 text: qsTr("Alpha")
                 visible: root.showAlphaChannel
                 trackDelegate: Item {
@@ -273,7 +284,7 @@ AbstractColorDialog {
 
         Item {
             id: buttonRow
-            height: buttonsOnly.height
+            height: Math.max(buttonsOnly.height, copyIcon.height)
             width: parent.width
             anchors {
                 left: parent.left
diff --git a/src/imports/dialogs/qquickabstractcolordialog_p.h b/src/imports/dialogs/qquickabstractcolordialog_p.h
index 46f0f84acb..bd23e0d1a4 100644
--- a/src/imports/dialogs/qquickabstractcolordialog_p.h
+++ b/src/imports/dialogs/qquickabstractcolordialog_p.h
@@ -66,6 +66,10 @@ class QQuickAbstractColorDialog : public QQuickAbstractDialog
     Q_OBJECT
     Q_PROPERTY(bool showAlphaChannel READ showAlphaChannel WRITE setShowAlphaChannel NOTIFY showAlphaChannelChanged)
     Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
+    Q_PROPERTY(qreal hue READ hue NOTIFY colorChanged)
+    Q_PROPERTY(qreal saturation READ saturation NOTIFY colorChanged)
+    Q_PROPERTY(qreal lightness READ lightness NOTIFY colorChanged)
+    Q_PROPERTY(qreal alpha READ alpha NOTIFY colorChanged)
 
 public:
     QQuickAbstractColorDialog(QObject *parent = 0);
@@ -74,6 +78,10 @@ public:
     virtual QString title() const;
     bool showAlphaChannel() const;
     QColor color() const { return m_color; }
+    qreal hue() const { return m_color.hslHueF(); }
+    qreal saturation() const { return m_color.hslSaturationF(); }
+    qreal lightness() const { return m_color.lightnessF(); }
+    qreal alpha() const { return m_color.alphaF(); }
 
 public Q_SLOTS:
     void setVisible(bool v);