From 02a6cc6e1d69ae6034596073c18c167a5281c880 Mon Sep 17 00:00:00 2001 From: casper Date: Wed, 16 Feb 2022 23:43:54 +0100 Subject: [PATCH 01/11] Improve visual appearance of `ColorDialog` According to the figma design CURA-8938 --- resources/qml/ColorDialog.qml | 131 ++++++++++++++++++++++++---------- 1 file changed, 94 insertions(+), 37 deletions(-) diff --git a/resources/qml/ColorDialog.qml b/resources/qml/ColorDialog.qml index 358e8b9ef5..fd19542b43 100644 --- a/resources/qml/ColorDialog.qml +++ b/resources/qml/ColorDialog.qml @@ -17,61 +17,118 @@ 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 - width: minimumWidth + margin: UM.Theme.getSize("wide_margin").width property alias color: colorInput.text + property var defaultColors: [ + "#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 - - UM.Label + Component.onCompleted: { - id: colorLabel - font: UM.Theme.getFont("large") - text: catalog.i18nc("@label", "Color Code (HEX)") + for (let i = 0; i < base.defaultColors.length; i ++) + { + const swatchColor = base.defaultColors[i]; + defaultColorsModel.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 { + 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: defaultColorsModel + } + + delegate: Rectangle + { + color: swatchColor + width: 24 + height: 24 + 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("default_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() } ] } \ No newline at end of file From 0786ff2c6bc2a4a8dd7f25cfec475b0a74a06323 Mon Sep 17 00:00:00 2001 From: casper Date: Thu, 17 Feb 2022 09:50:38 +0100 Subject: [PATCH 02/11] Change variable names "swatch" is a more descriptive variable name for this usecase CURA-8938 --- resources/qml/ColorDialog.qml | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/resources/qml/ColorDialog.qml b/resources/qml/ColorDialog.qml index fd19542b43..f163211f53 100644 --- a/resources/qml/ColorDialog.qml +++ b/resources/qml/ColorDialog.qml @@ -20,7 +20,7 @@ UM.Dialog margin: UM.Theme.getSize("wide_margin").width property alias color: colorInput.text - property var defaultColors: [ + property var swatchColors: [ "#2161AF", "#57AFB2", "#F7B32D", "#E33D4A", "#C088AD", "#5D88BE", "#5ABD0E", "#E17239", "#F74E46", "#874AF9", "#50C2EC", "#8DC15A", "#C3977A", "#CD7776", "#9086BA", @@ -29,10 +29,9 @@ UM.Dialog Component.onCompleted: { - for (let i = 0; i < base.defaultColors.length; i ++) + for (let i = 0; i < base.swatchColors.length; i ++) { - const swatchColor = base.defaultColors[i]; - defaultColorsModel.append({ swatchColor }); + swatchColorsModel.append({ swatchColor: base.swatchColors[i] }); } } @@ -54,7 +53,7 @@ UM.Dialog { model: ListModel { - id: defaultColorsModel + id: swatchColorsModel } delegate: Rectangle From 301d68ebf2a77fa50f483170b0fa8191cc3b6a96 Mon Sep 17 00:00:00 2001 From: casper Date: Thu, 24 Feb 2022 15:42:27 +0100 Subject: [PATCH 03/11] Update swatches on swatch color property changed CURA-8938 --- resources/qml/ColorDialog.qml | 10 +++++++--- .../qml/Preferences/Materials/MaterialsView.qml | 17 ++++++++++++++++- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/resources/qml/ColorDialog.qml b/resources/qml/ColorDialog.qml index f163211f53..afb7b324a3 100644 --- a/resources/qml/ColorDialog.qml +++ b/resources/qml/ColorDialog.qml @@ -27,11 +27,15 @@ UM.Dialog "#FFFFFF", "#D3D3D3", "#9E9E9E", "#5A5A5A", "#000000", ] - Component.onCompleted: + Component.onCompleted: updateSwatches() + onSwatchColorsChanged: updateSwatches() + + function updateSwatches() { - for (let i = 0; i < base.swatchColors.length; i ++) + swatchColorsModel.clear(); + for (const swatchColor of base.swatchColors) { - swatchColorsModel.append({ swatchColor: base.swatchColors[i] }); + swatchColorsModel.append({ swatchColor }); } } diff --git a/resources/qml/Preferences/Materials/MaterialsView.qml b/resources/qml/Preferences/Materials/MaterialsView.qml index 6d153f5960..97f0ce4de1 100644 --- a/resources/qml/Preferences/Materials/MaterialsView.qml +++ b/resources/qml/Preferences/Materials/MaterialsView.qml @@ -222,7 +222,22 @@ Item id: colorDialog title: catalog.i18nc("@title", "Material color picker") color: properties.color_code - onAccepted: base.setMetaDataEntry("color_code", properties.color_code, color) +// swatchColors: ["#2161AF", "#57AFB2", "#F7B32D", "#E33D4A", "#C088AD"] + onAccepted: { + base.setMetaDataEntry("color_code", properties.color_code, color); + console.log("color_code"); + + const timer = Qt.createQmlObject("import QtQuick 2.0; Timer {}", base); + timer.interval = 10000; + timer.repeat = true; + timer.triggered.connect(function () { + console.log("updating colors"); + colorDialog.swatchColors = ["#2161AF", "#57AFB2", "#F7B32D", "#E33D4A", "#C088AD"]; + }) + + console.log("starting timers"); + timer.start(); + } } } From 9b06849955bc30b2ab552d06845fa6f8fa93d0f6 Mon Sep 17 00:00:00 2001 From: casper Date: Thu, 24 Feb 2022 15:43:22 +0100 Subject: [PATCH 04/11] Let the content of the color dialog determine the size of the dialog CURA-8938 --- resources/qml/ColorDialog.qml | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/resources/qml/ColorDialog.qml b/resources/qml/ColorDialog.qml index afb7b324a3..1f83f0ceda 100644 --- a/resources/qml/ColorDialog.qml +++ b/resources/qml/ColorDialog.qml @@ -17,7 +17,14 @@ UM.Dialog property variant catalog: UM.I18nCatalog { name: "cura" } - margin: UM.Theme.getSize("wide_margin").width + // 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 + 2 * margin + minimumHeight: + content.height // content height + + buttonRow.height // button row height + + 3 * margin // top and bottom margin and margin between buttons and content property alias color: colorInput.text property var swatchColors: [ From 7dbe5c0f7ccd18f09b21f1a3d1b96ed2c8fa15ba Mon Sep 17 00:00:00 2001 From: casper Date: Thu, 24 Feb 2022 15:44:46 +0100 Subject: [PATCH 05/11] Change some margins CURA-8938 --- resources/qml/ColorDialog.qml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/resources/qml/ColorDialog.qml b/resources/qml/ColorDialog.qml index 1f83f0ceda..09045581e4 100644 --- a/resources/qml/ColorDialog.qml +++ b/resources/qml/ColorDialog.qml @@ -17,6 +17,8 @@ UM.Dialog property variant catalog: UM.I18nCatalog { name: "cura" } + margin: UM.Theme.getSize("default_margin").width + // 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. @@ -128,7 +130,7 @@ UM.Dialog } } - buttonSpacing: UM.Theme.getSize("default_margin").width + buttonSpacing: UM.Theme.getSize("thin_margin").width rightButtons: [ From 2761aed4556e1292483f0acd9356d232456f977a Mon Sep 17 00:00:00 2001 From: casper Date: Thu, 24 Feb 2022 15:45:10 +0100 Subject: [PATCH 06/11] Make number of columns configurable in color dialog CURA-8938 --- resources/qml/ColorDialog.qml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/resources/qml/ColorDialog.qml b/resources/qml/ColorDialog.qml index 09045581e4..646d23c209 100644 --- a/resources/qml/ColorDialog.qml +++ b/resources/qml/ColorDialog.qml @@ -19,6 +19,8 @@ UM.Dialog 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. @@ -56,6 +58,7 @@ UM.Dialog spacing: UM.Theme.getSize("wide_margin").height GridLayout { + id: colorSwatchGrid columns: 5 width: childrenRect.width height: childrenRect.height From c8be7832c8b6379166ab2f92232b595e41cf82a4 Mon Sep 17 00:00:00 2001 From: casper Date: Tue, 1 Mar 2022 16:06:48 +0100 Subject: [PATCH 07/11] Remove debugging code CURA-8983 --- .../qml/Preferences/Materials/MaterialsView.qml | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/resources/qml/Preferences/Materials/MaterialsView.qml b/resources/qml/Preferences/Materials/MaterialsView.qml index 97f0ce4de1..758a73b8ca 100644 --- a/resources/qml/Preferences/Materials/MaterialsView.qml +++ b/resources/qml/Preferences/Materials/MaterialsView.qml @@ -222,22 +222,6 @@ Item id: colorDialog title: catalog.i18nc("@title", "Material color picker") color: properties.color_code -// swatchColors: ["#2161AF", "#57AFB2", "#F7B32D", "#E33D4A", "#C088AD"] - onAccepted: { - base.setMetaDataEntry("color_code", properties.color_code, color); - console.log("color_code"); - - const timer = Qt.createQmlObject("import QtQuick 2.0; Timer {}", base); - timer.interval = 10000; - timer.repeat = true; - timer.triggered.connect(function () { - console.log("updating colors"); - colorDialog.swatchColors = ["#2161AF", "#57AFB2", "#F7B32D", "#E33D4A", "#C088AD"]; - }) - - console.log("starting timers"); - timer.start(); - } } } From 53b31e816adfa5f4489cfa84f4f9ac4a3bd045b8 Mon Sep 17 00:00:00 2001 From: casper Date: Tue, 1 Mar 2022 16:16:53 +0100 Subject: [PATCH 08/11] Set size of color swatch from theme CURA-8983 --- resources/qml/ColorDialog.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/qml/ColorDialog.qml b/resources/qml/ColorDialog.qml index 646d23c209..24230d2011 100644 --- a/resources/qml/ColorDialog.qml +++ b/resources/qml/ColorDialog.qml @@ -75,8 +75,8 @@ UM.Dialog delegate: Rectangle { color: swatchColor - width: 24 - height: 24 + implicitWidth: UM.Theme.getSize("medium_button_icon").width + implicitHeight: UM.Theme.getSize("medium_button_icon").height radius: width / 2 UM.RecolorImage From 485335063818cdfc7c9ddf4aa27a340260f1a484 Mon Sep 17 00:00:00 2001 From: Casper Lamboo Date: Tue, 1 Mar 2022 17:49:14 +0100 Subject: [PATCH 09/11] make `onClicked` action a one-liner Co-authored-by: Jaime van Kessel --- resources/qml/ColorDialog.qml | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/resources/qml/ColorDialog.qml b/resources/qml/ColorDialog.qml index 24230d2011..4ae5b3c4bc 100644 --- a/resources/qml/ColorDialog.qml +++ b/resources/qml/ColorDialog.qml @@ -90,10 +90,7 @@ UM.Dialog MouseArea { anchors.fill: parent - onClicked: - { - base.color = swatchColor; - } + onClicked: base.color = swatchColor } } } From 3cba9a9c7e59f065c75679a207a6f6fbde1cc008 Mon Sep 17 00:00:00 2001 From: casper Date: Wed, 2 Mar 2022 11:52:30 +0100 Subject: [PATCH 10/11] Update color of material after accepting the color dialog CURA-8938 --- resources/qml/Preferences/Materials/MaterialsView.qml | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/qml/Preferences/Materials/MaterialsView.qml b/resources/qml/Preferences/Materials/MaterialsView.qml index 758a73b8ca..6d153f5960 100644 --- a/resources/qml/Preferences/Materials/MaterialsView.qml +++ b/resources/qml/Preferences/Materials/MaterialsView.qml @@ -222,6 +222,7 @@ Item id: colorDialog title: catalog.i18nc("@title", "Material color picker") color: properties.color_code + onAccepted: base.setMetaDataEntry("color_code", properties.color_code, color) } } From 37ae1cd69df0c556134d8a9176f1531b10018791 Mon Sep 17 00:00:00 2001 From: Remco Burema Date: Wed, 2 Mar 2022 18:05:50 +0100 Subject: [PATCH 11/11] Workaround on Windows. part of CURA-8938 --- resources/qml/ColorDialog.qml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/resources/qml/ColorDialog.qml b/resources/qml/ColorDialog.qml index 4ae5b3c4bc..3818ea5cb4 100644 --- a/resources/qml/ColorDialog.qml +++ b/resources/qml/ColorDialog.qml @@ -24,11 +24,13 @@ UM.Dialog // 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 + 2 * margin + minimumWidth: content.width + 4 * margin minimumHeight: content.height // content height + buttonRow.height // button row height - + 3 * margin // top and bottom margin and margin between buttons and content + + 5 * margin // top and bottom margin and margin between buttons and content + width: minimumWidth + height: minimumHeight property alias color: colorInput.text property var swatchColors: [