QmlDesigner: Open color dialog from property editor

Task-number: QDS-601
Change-Id: I8ab2b286213174c19b330b1db4c27efd7af8792c
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorButton.qml

@@ -43,6 +43,7 @@ Item {
     property bool block: false
 
     signal clicked
+    signal rightMouseButtonClicked
 
     onAlphaChanged: invalidateColor();
     onSaturationChanged: invalidateColor();
@@ -202,7 +203,7 @@ Item {
             id: mapMouseArea
             anchors.fill: parent
             onPositionChanged: {
-                if (pressed) {
+                if (pressed && mouse.button === Qt.LeftButton) {
                     var xx = Math.max(0, Math.min(mouse.x, parent.width))
                     var yy = Math.max(0, Math.min(mouse.y, parent.height))
 
@@ -210,8 +211,21 @@ Item {
                     colorButton.saturation = xx / parent.width;
                 }
             }
-            onPressed: positionChanged(mouse)
+            onPressed: {
-            onReleased: colorButton.clicked()
+                if (mouse.button === Qt.LeftButton)
+                    positionChanged(mouse)
+            }
+            onReleased: {
+                if (mouse.button === Qt.LeftButton)
+                    colorButton.clicked()
+            }
+
+            acceptedButtons: Qt.LeftButton | Qt.RightButton
+
+            onClicked: {
+                if (mouse.button === Qt.RightButton)
+                    colorButton.rightMouseButtonClicked()
+            }
         }
         Rectangle {
             anchors.fill: parent

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorCheckButton.qml

@@ -26,12 +26,13 @@
 import QtQuick 2.1
 
 Item {
-    id: colorCheckButtonRoot
+    id: root
     property bool checked: false
     property alias buttonColor: checkBox.color
     width: 30
     height: 24
 
+    signal rightMouseButtonClicked
 
     Rectangle {
         id: backgroundBox
@@ -63,13 +64,20 @@ Item {
         anchors.right: backgroundBox.left
         anchors.rightMargin: 2
         opacity: colorToolTip.containsMouse ? 1 : 0.8
-        rotation: colorCheckButtonRoot.checked ? 0.0 : 270.0
+        rotation: root.checked ? 0.0 : 270.0
     }
 
     ToolTipArea {
         id: colorToolTip
 
-        onClicked: checked = !checked
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+
+        onClicked: {
+            if (mouse.button === Qt.RightButton)
+                root.rightMouseButtonClicked()
+            else
+                root.checked = !root.checked
+        }
         hoverEnabled: true
         anchors.fill: parent
         anchors.leftMargin: -arrowImage.width

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

@@ -26,6 +26,8 @@
 import QtQuick 2.1
 import QtQuick.Layouts 1.0
 import QtQuickDesignerTheme 1.0
+import QtQuick.Dialogs 1.3
+import StudioControls 1.0 as StudioControls
 
 Column {
     id: colorEditor
@@ -198,6 +200,12 @@ Column {
             ColorCheckButton {
                 id: checkButton
                 buttonColor: colorEditor.color
+
+                onCheckedChanged: {
+                    if (contextMenu.opened)
+                        contextMenu.close()
+                }
+                onRightMouseButtonClicked: contextMenu.popup(checkButton)
             }
 
             LineEdit {
@@ -615,7 +623,13 @@ Column {
 
             sliderMargins: 4
 
-            onClicked: colorEditor.color = colorButton.color
+            onClicked: {
+                colorEditor.color = colorButton.color
+                if (contextMenu.opened)
+                    contextMenu.close()
+            }
+
+            onRightMouseButtonClicked: contextMenu.popup(colorButton)
         }
 
         Item {
@@ -702,13 +716,23 @@ Column {
 
                         clickable: !colorEditor.transparent
 
-                        onSelectedColorChanged: {
+                        onSelectedColorChanged: colorEditor.color = colorPalette.selectedColor
-                            colorEditor.color = colorPalette.selectedColor;
+
-                        }
+
+                        onDialogColorChanged: colorEditor.color = colorPalette.selectedColor
                     }
                 }
 
             }
         }
     }
+
+    StudioControls.Menu {
+        id: contextMenu
+
+        StudioControls.MenuItem {
+            text: qsTr("Open Color Dialog")
+            onTriggered: colorPalette.showColorDialog(colorEditor.color)
+        }
+    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SimpleColorPalette.qml

@@ -32,7 +32,12 @@ import QtQuick.Controls.Private 1.0 // showing a ToolTip
 Item {
     property color selectedColor
     property bool clickable : true
+    property color oldColor
 
+    function showColorDialog(color) {
+        oldColor = color
+        paletteModel.showDialog(color)
+    }
 
     width: 200
     height: 40
@@ -43,6 +48,8 @@ Item {
         paletteModel.addItem(colorCode)
     }
 
+    signal dialogColorChanged
+
     Component {
         id: colorItemDelegate
 
@@ -94,7 +101,20 @@ Item {
         }
     }
 
-    SimpleColorPaletteModel { id: paletteModel }
+    SimpleColorPaletteModel {
+
+        id: paletteModel
+
+        onCurrentColorChanged: {
+            selectedColor = color
+            dialogColorChanged()
+
+        }
+        onColorDialogRejected: {
+            selectedColor = oldColor
+            dialogColorChanged()
+        }
+    }
     ListView {
         id: colorPaletteView
         model: paletteModel

src/plugins/qmldesigner/components/propertyeditor/simplecolorpalettemodel.cpp

@@ -29,6 +29,9 @@
 
 #include "designersettings.h"
 
+#include <coreplugin/icore.h>
+
+#include <QColorDialog>
 #include <QHash>
 #include <QByteArray>
 #include <QDebug>
@@ -143,4 +146,16 @@ void SimpleColorPaletteModel::write()
     SimpleColorPaletteSingleton::getInstance().writePalette();
 }
 
+void SimpleColorPaletteModel::showDialog(QColor color)
+{
+    auto colorDialog = new QColorDialog(Core::ICore::dialogParent());
+    colorDialog->setCurrentColor(color);
+    colorDialog->setAttribute(Qt::WA_DeleteOnClose);
+
+    connect(colorDialog, &QDialog::rejected, this, &SimpleColorPaletteModel::colorDialogRejected);
+    connect(colorDialog, &QColorDialog::currentColorChanged, this, &SimpleColorPaletteModel::currentColorChanged);
+
+    QTimer::singleShot(0, [colorDialog](){ colorDialog->exec(); });
+}
+
 } // namespace QmlDesigner

src/plugins/qmldesigner/components/propertyeditor/simplecolorpalettemodel.h

@@ -59,6 +59,12 @@ public:
     bool read();
     void write();
 
+    Q_INVOKABLE void showDialog(QColor color);
+
+signals:
+    void colorDialogRejected();
+    void currentColorChanged(const QColor &color);
+
 private slots:
     void setPalette();