Merge pull request #11546 from Ultimaker/color_dialog

Color dialog

resources/qml/ColorDialog.qml

@@ -17,61 +17,132 @@ UM.Dialog
 
     property variant catalog: UM.I18nCatalog { name: "cura" }
 
-    minimumHeight: UM.Theme.getSize("small_popup_dialog").height
-    minimumWidth: UM.Theme.getSize("small_popup_dialog").width / 1.5
-    height: minimumHeight
+    margin: UM.Theme.getSize("default_margin").width
+
+    property alias swatchGridColumns: colorSwatchGrid.columns
+
+    // In this case we would like to let the content of the dialog determine the size of the dialog
+    // however with the current implementation of the dialog this is not possible, so instead we calculate
+    // the size of the dialog ourselves.
+    minimumWidth: content.width + 4 * margin
+    minimumHeight:
+        content.height                                 // content height
+      + buttonRow.height                               // button row height
+      + 5 * margin                                     // top and bottom margin and margin between buttons and content
     width: minimumWidth
+    height: minimumHeight
 
     property alias color: colorInput.text
+    property var swatchColors: [
+        "#2161AF", "#57AFB2", "#F7B32D", "#E33D4A", "#C088AD",
+        "#5D88BE", "#5ABD0E", "#E17239", "#F74E46", "#874AF9",
+        "#50C2EC", "#8DC15A", "#C3977A", "#CD7776", "#9086BA",
+        "#FFFFFF", "#D3D3D3", "#9E9E9E", "#5A5A5A", "#000000",
+    ]
 
-    margin: UM.Theme.getSize("default_margin").width
-    buttonSpacing: UM.Theme.getSize("default_margin").width
+    Component.onCompleted: updateSwatches()
+    onSwatchColorsChanged: updateSwatches()
 
-    UM.Label
+    function updateSwatches()
     {
-        id: colorLabel
-        font: UM.Theme.getFont("large")
-        text: catalog.i18nc("@label", "Color Code (HEX)")
+        swatchColorsModel.clear();
+        for (const swatchColor of base.swatchColors)
+        {
+            swatchColorsModel.append({ swatchColor });
+        }
     }
 
-    TextField
+    Column
     {
-        id: colorInput
-        text: "#FFFFFF"
-        selectByMouse: true
-        anchors.top: colorLabel.bottom
-        anchors.topMargin: UM.Theme.getSize("default_margin").height
-        onTextChanged: {
-            if (!text.startsWith("#"))
+        id: content
+        width: childrenRect.width
+        height: childrenRect.height
+        spacing: UM.Theme.getSize("wide_margin").height
+
+        GridLayout {
+            id: colorSwatchGrid
+            columns: 5
+            width: childrenRect.width
+            height: childrenRect.height
+            columnSpacing: UM.Theme.getSize("thick_margin").width
+            rowSpacing: UM.Theme.getSize("thick_margin").height
+
+            Repeater
             {
-                text = `#${text}`;
+                model: ListModel
+                {
+                    id: swatchColorsModel
+                }
+
+                delegate: Rectangle
+                {
+                    color: swatchColor
+                    implicitWidth: UM.Theme.getSize("medium_button_icon").width
+                    implicitHeight: UM.Theme.getSize("medium_button_icon").height
+                    radius: width / 2
+
+                    UM.RecolorImage
+                    {
+                        anchors.fill: parent
+                        visible: swatchColor == base.color
+                        source: UM.Theme.getIcon("Check", "low")
+                        color: UM.Theme.getColor("checkbox")
+                    }
+
+                    MouseArea
+                    {
+                        anchors.fill: parent
+                        onClicked: base.color = swatchColor
+                    }
+                }
+            }
+        }
+
+        RowLayout
+        {
+            width: parent.width
+            spacing: UM.Theme.getSize("default_margin").width
+
+            UM.Label
+            {
+                text: catalog.i18nc("@label", "Hex")
+            }
+
+            TextField
+            {
+                id: colorInput
+                Layout.fillWidth: true
+                text: "#FFFFFF"
+                selectByMouse: true
+                onTextChanged: {
+                    if (!text.startsWith("#"))
+                    {
+                        text = `#${text}`;
+                    }
+                }
+                validator: RegExpValidator { regExp: /^#([a-fA-F0-9]{0,6})$/ }
+            }
+
+            Rectangle
+            {
+                color: base.color
+                Layout.preferredHeight: parent.height
+                Layout.preferredWidth: height
             }
         }
-        validator: RegExpValidator { regExp: /^#([a-fA-F0-9]{0,6})$/ }
     }
 
-    Rectangle
-    {
-        id: swatch
-        color: base.color
-        anchors.leftMargin: UM.Theme.getSize("default_margin").width
-        anchors {
-            left: colorInput.right
-            top: colorInput.top
-            bottom: colorInput.bottom
-        }
-        width: height
-    }
+    buttonSpacing: UM.Theme.getSize("thin_margin").width
 
     rightButtons:
     [
+        Cura.TertiaryButton {
+            text: catalog.i18nc("@action:button", "Cancel")
+            onClicked: base.close()
+        },
         Cura.PrimaryButton {
             text: catalog.i18nc("@action:button", "OK")
             onClicked: base.accept()
-        },
-        Cura.SecondaryButton {
-            text: catalog.i18nc("@action:button", "Cancel")
-            onClicked: base.close()
         }
     ]
 }