Merge pull request #11546 from Ultimaker/color_dialog

Color dialog

resources/qml/ColorDialog.qml

@@ -17,30 +17,103 @@ UM.Dialog
 
     property variant catalog: UM.I18nCatalog { name: "cura" }
 
-    minimumHeight: UM.Theme.getSize("small_popup_dialog").height
+    margin: UM.Theme.getSize("default_margin").width
-    minimumWidth: UM.Theme.getSize("small_popup_dialog").width / 1.5
+
-    height: minimumHeight
+    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
+    Component.onCompleted: updateSwatches()
-    buttonSpacing: UM.Theme.getSize("default_margin").width
+    onSwatchColorsChanged: updateSwatches()
+
+    function updateSwatches()
+    {
+        swatchColorsModel.clear();
+        for (const swatchColor of base.swatchColors)
+        {
+            swatchColorsModel.append({ swatchColor });
+        }
+    }
+
+    Column
+    {
+        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
+            {
+                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
             {
-        id: colorLabel
+                text: catalog.i18nc("@label", "Hex")
-        font: UM.Theme.getFont("large")
-        text: catalog.i18nc("@label", "Color Code (HEX)")
             }
 
             TextField
             {
                 id: colorInput
+                Layout.fillWidth: true
                 text: "#FFFFFF"
                 selectByMouse: true
-        anchors.top: colorLabel.bottom
-        anchors.topMargin: UM.Theme.getSize("default_margin").height
                 onTextChanged: {
                     if (!text.startsWith("#"))
                     {
@@ -52,26 +125,24 @@ UM.Dialog
 
             Rectangle
             {
-        id: swatch
                 color: base.color
-        anchors.leftMargin: UM.Theme.getSize("default_margin").width
+                Layout.preferredHeight: parent.height
-        anchors {
+                Layout.preferredWidth: height
-            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()
         }
     ]
 }