From 895590c3d0a445d4e114766348cdc5de676442e5 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Tue, 20 Nov 2018 14:28:54 +0100 Subject: [PATCH 1/4] Change the size of the progress bar control. Also add the rounded rectangle. Contributes to the new Cura UI-Flow. --- resources/themes/cura-light/styles.qml | 1 + resources/themes/cura-light/theme.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/resources/themes/cura-light/styles.qml b/resources/themes/cura-light/styles.qml index 6f099bf1c5..58035ae3bd 100755 --- a/resources/themes/cura-light/styles.qml +++ b/resources/themes/cura-light/styles.qml @@ -515,6 +515,7 @@ QtObject implicitWidth: Theme.getSize("message").width - (Theme.getSize("default_margin").width * 2) implicitHeight: Theme.getSize("progressbar").height color: control.hasOwnProperty("backgroundColor") ? control.backgroundColor : Theme.getColor("progressbar_background") + radius: Theme.getSize("progressbar_radius").width } progress: Rectangle { diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index a33ff87042..f4d50e4c79 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -448,7 +448,7 @@ "progressbar": [26.0, 0.75], "progressbar_radius": [0.15, 0.15], - "progressbar_control": [8.0, 0.4], + "progressbar_control": [8.0, 0.75], "scrollbar": [0.75, 0.5], From 669648d3e11a969ec75b83c5d5b763cef9705f71 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Tue, 20 Nov 2018 16:28:21 +0100 Subject: [PATCH 2/4] Improve the toolbar style by modifying the rectangles and the behavior to get a rounded rectangle on the right-top and right-bottom. Contributes to CURA-5962. --- resources/qml/ExtruderButton.qml | 16 ++---- resources/qml/Toolbar.qml | 36 ++++++++---- resources/themes/cura-light/styles.qml | 80 ++++++++++++++++++++------ resources/themes/cura-light/theme.json | 6 +- 4 files changed, 92 insertions(+), 46 deletions(-) diff --git a/resources/qml/ExtruderButton.qml b/resources/qml/ExtruderButton.qml index 7923521658..cdd0386d30 100644 --- a/resources/qml/ExtruderButton.qml +++ b/resources/qml/ExtruderButton.qml @@ -21,6 +21,9 @@ Button checked: Cura.ExtruderManager.selectedObjectExtruders.indexOf(extruder.id) != -1 enabled: UM.Selection.hasSelection && extruder.stack.isEnabled + property bool isFirstElement: extrudersModel.getItem(0).name == model.name + property bool isLastElement: extrudersModel.getItem(extrudersModel.rowCount() - 1).name == model.name + Item { anchors.centerIn: parent @@ -32,18 +35,7 @@ Button { anchors.centerIn: parent text: index + 1 - color: - { - if (base.checked) - { - return UM.Theme.getColor("toolbar_button_text_active") - } - else if(base.hovered) - { - return UM.Theme.getColor("toolbar_button_text_hover") - } - return UM.Theme.getColor("toolbar_button_text") - } + color: UM.Theme.getColor("toolbar_button_text") font: UM.Theme.getFont("default_bold") } } diff --git a/resources/qml/Toolbar.qml b/resources/qml/Toolbar.qml index 9955ceeba7..81896f1a75 100644 --- a/resources/qml/Toolbar.qml +++ b/resources/qml/Toolbar.qml @@ -28,12 +28,16 @@ Item // Used to create a rounded rectangle behind the toolButtons Rectangle { - anchors.fill: toolButtons - anchors.leftMargin: -radius + anchors + { + fill: toolButtons + leftMargin: -radius - border.width + rightMargin: -border.width + topMargin: -border.width + bottomMargin: -border.width + } radius: UM.Theme.getSize("default_radius").width - border.width: UM.Theme.getSize("default_lining").width - border.color: UM.Theme.getColor("lining") - color: UM.Theme.getColor("toolbar_background") + color: UM.Theme.getColor("lining") } Column @@ -42,13 +46,13 @@ Item anchors.top: parent.top anchors.right: parent.right - spacing: UM.Theme.getSize("button_lining").width + spacing: UM.Theme.getSize("default_lining").height Repeater { id: repeat - model: UM.ToolModel { } + model: UM.ToolModel { id: toolsModel } width: childrenRect.width height: childrenRect.height Button @@ -60,6 +64,9 @@ Item enabled: model.enabled && UM.Selection.hasSelection && UM.Controller.toolsEnabled style: UM.Theme.styles.toolbar_button + property bool isFirstElement: toolsModel.getItem(0).id == model.id + property bool isLastElement: toolsModel.getItem(toolsModel.rowCount() - 1).id == model.id + onCheckedChanged: { if (checked) @@ -93,12 +100,16 @@ Item // Used to create a rounded rectangle behind the extruderButtons Rectangle { - anchors.fill: extruderButtons - anchors.leftMargin: -radius + anchors + { + fill: extruderButtons + leftMargin: -radius - border.width + rightMargin: -border.width + topMargin: -border.width + bottomMargin: -border.width + } radius: UM.Theme.getSize("default_radius").width - border.width: UM.Theme.getSize("default_lining").width - border.color: UM.Theme.getColor("lining") - color: UM.Theme.getColor("toolbar_background") + color: UM.Theme.getColor("lining") } Column @@ -108,6 +119,7 @@ Item anchors.topMargin: UM.Theme.getSize("default_margin").height anchors.top: toolButtons.bottom anchors.right: parent.right + spacing: UM.Theme.getSize("default_lining").height Repeater { diff --git a/resources/themes/cura-light/styles.qml b/resources/themes/cura-light/styles.qml index 58035ae3bd..723b393efa 100755 --- a/resources/themes/cura-light/styles.qml +++ b/resources/themes/cura-light/styles.qml @@ -175,11 +175,68 @@ QtObject { ButtonStyle { - background: Item + background: Rectangle { - implicitWidth: Theme.getSize("button").width; - implicitHeight: Theme.getSize("button").height; + implicitWidth: Theme.getSize("button").width + implicitHeight: Theme.getSize("button").height + color: + { + if (control.checked && control.hovered) + { + return Theme.getColor("toolbar_button_active_hover") + } + else if (control.checked) + { + return Theme.getColor("toolbar_button_active") + } + else if(control.hovered) + { + return Theme.getColor("toolbar_button_hover") + } + return Theme.getColor("toolbar_background") + } + radius: UM.Theme.getSize("default_radius").width + Rectangle + { + id: topSquare + anchors + { + left: parent.left + right: parent.right + top: parent.top + } + height: parent.radius + color: control.isFirstElement ? "transparent" : parent.color + } + + Rectangle + { + id: bottomSquare + anchors + { + left: parent.left + right: parent.right + bottom: parent.bottom + } + height: parent.radius + color: control.isLastElement ? "transparent" : parent.color + } + + Rectangle + { + id: leftSquare + anchors + { + left: parent.left + top: parent.top + bottom: parent.bottom + } + width: parent.radius + color: parent.color + } + + // This is the tooltip UM.PointingRectangle { id: button_tooltip @@ -223,22 +280,7 @@ QtObject source: control.iconSource; width: Theme.getSize("button_icon").width; height: Theme.getSize("button_icon").height; - color: - { - if (control.checked && control.hovered) - { - return Theme.getColor("toolbar_button_text_active_hover"); - } - else if (control.checked) - { - return Theme.getColor("toolbar_button_text_active"); - } - else if(control.hovered) - { - return Theme.getColor("toolbar_button_text_hover"); - } - return Theme.getColor("toolbar_button_text"); - } + color: Theme.getColor("toolbar_button_text"); sourceSize: Theme.getSize("button_icon") } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index f4d50e4c79..d00e998cc8 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -123,9 +123,9 @@ "warning": [255, 190, 35, 255], "toolbar_button_text": [10, 8, 80, 255], - "toolbar_button_text_hover": [50, 130, 255, 255], - "toolbar_button_text_active": [50, 130, 255, 255], - "toolbar_button_text_active_hover": [50, 130, 255, 255], + "toolbar_button_hover": [232, 242, 252, 255], + "toolbar_button_active": [232, 242, 252, 255], + "toolbar_button_active_hover": [232, 242, 252, 255], "button": [31, 36, 39, 255], "button_hover": [68, 72, 75, 255], From a1f3ebc25b97f555362a1dead86d7cc6081f718a Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Wed, 21 Nov 2018 13:58:21 +0100 Subject: [PATCH 3/4] Fix typo. Contributes to CURA-5785. --- resources/qml/ExtruderIcon.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/qml/ExtruderIcon.qml b/resources/qml/ExtruderIcon.qml index 1e51835d60..c103ee245c 100644 --- a/resources/qml/ExtruderIcon.qml +++ b/resources/qml/ExtruderIcon.qml @@ -54,8 +54,8 @@ Item height: contentHeight visible: extruderEnabled renderType: Text.NativeRendering - horizontalAlignment: Text.alignHCenter - verticalAlignment: Text.alignVCenter + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter } UM.RecolorImage From f866390c7bb0cc9ac4af65d78a30c6b7995f6201 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Wed, 21 Nov 2018 16:56:25 +0100 Subject: [PATCH 4/4] Fix an issue in the action panel. When the panel is created while the user is in the preview stage, the row has no width. Contributes to CURA-5786. --- resources/qml/ActionPanel/OutputProcessWidget.qml | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/qml/ActionPanel/OutputProcessWidget.qml b/resources/qml/ActionPanel/OutputProcessWidget.qml index f4e014b1ec..3c4386f079 100644 --- a/resources/qml/ActionPanel/OutputProcessWidget.qml +++ b/resources/qml/ActionPanel/OutputProcessWidget.qml @@ -99,6 +99,7 @@ Column { id: buttonRow spacing: UM.Theme.getSize("default_margin").width + width: parent.width Cura.ActionButton {