Update styling of infill slider

CURA-9793
This commit is contained in:
c.lamboo 2022-11-28 22:01:28 +01:00
parent 631d6a15b0
commit 84988a57e5
2 changed files with 41 additions and 42 deletions

View File

@ -6,6 +6,7 @@ import QtQuick.Controls 2.15
import UM 1.5 as UM import UM 1.5 as UM
import Cura 1.0 as Cura import Cura 1.0 as Cura
import QtQuick.Layouts 1.3
// //
@ -25,24 +26,29 @@ Item
property: "source" property: "source"
value: value:
{ {
var density = parseInt(infillDensity.properties.value) const infill_steps = parseInt(infillSteps.properties.value);
if (parseInt(infillSteps.properties.value) != 0) if (infill_steps != 0)
{ {
return UM.Theme.getIcon("InfillGradual") return UM.Theme.getIcon("InfillGradual")
} }
if (density <= 0)
const density = parseInt(infillDensity.properties.value)
if (density == 0)
{ {
return UM.Theme.getIcon("Infill0") return UM.Theme.getIcon("Infill0");
} }
if (density < 40) else if (density < 40)
{ {
return UM.Theme.getIcon("Infill3") return UM.Theme.getIcon("Infill3");
} }
if (density < 90) else if (density < 90)
{ {
return UM.Theme.getIcon("Infill2") return UM.Theme.getIcon("Infill2");
}
else
{
return UM.Theme.getIcon("Infill100");
} }
return UM.Theme.getIcon("Infill100")
} }
} }
@ -55,7 +61,7 @@ Item
// The infill slider has a max value of 100. When it is given a value > 100 onValueChanged updates the setting to be 100. // The infill slider has a max value of 100. When it is given a value > 100 onValueChanged updates the setting to be 100.
// When changing to an intent with infillDensity > 100, it would always be clamped to 100. // When changing to an intent with infillDensity > 100, it would always be clamped to 100.
// This will force the slider to ignore the first onValueChanged for values > 100 so higher values can be set. // This will force the slider to ignore the first onValueChanged for values > 100 so higher values can be set.
var density = parseInt(infillDensity.properties.value) const density = parseInt(infillDensity.properties.value)
if (density > 100) { if (density > 100) {
infillSlider.ignoreValueChange = true infillSlider.ignoreValueChange = true
} }
@ -71,18 +77,20 @@ Item
anchors.top: parent.top anchors.top: parent.top
anchors.left: parent.left anchors.left: parent.left
source: UM.Theme.getIcon("Infill1") source: UM.Theme.getIcon("Infill1")
text: catalog.i18nc("@label", "Infill") + " (%)" text: `${catalog.i18nc("@label", "Infill")} (%)`
font: UM.Theme.getFont("medium") font: UM.Theme.getFont("medium")
width: labelColumnWidth width: labelColumnWidth
iconSize: UM.Theme.getSize("medium_button_icon").width iconSize: UM.Theme.getSize("medium_button_icon").width
tooltipText: catalog.i18nc("@label", "Gradual infill will gradually increase the amount of infill towards the top.") tooltipText: catalog.i18nc("@label", "Gradual infill will gradually increase the amount of infill towards the top.")
} }
Item RowLayout
{ {
id: infillSliderContainer id: infillSliderContainer
height: childrenRect.height height: childrenRect.height
spacing: UM.Theme.getSize("default_margin").width
anchors anchors
{ {
left: infillRowTitle.right left: infillRowTitle.right
@ -90,18 +98,19 @@ Item
verticalCenter: infillRowTitle.verticalCenter verticalCenter: infillRowTitle.verticalCenter
} }
UM.Label { Layout.fillWidth: false; text: "0" }
Slider Slider
{ {
id: infillSlider id: infillSlider
Layout.fillWidth: true
property var ignoreValueChange: false property var ignoreValueChange: false
width: parent.width width: parent.width
height: UM.Theme.getSize("print_setup_slider_handle").height // The handle is the widest element of the slider height: childrenRect.height
from: 0 from: 0; to: 100; stepSize: 1
to: 100
stepSize: 1
// disable slider when gradual support is enabled // disable slider when gradual support is enabled
enabled: parseInt(infillSteps.properties.value) == 0 enabled: parseInt(infillSteps.properties.value) == 0
@ -117,36 +126,24 @@ Item
width: parent.width - UM.Theme.getSize("print_setup_slider_handle").width width: parent.width - UM.Theme.getSize("print_setup_slider_handle").width
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: infillSlider.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable") color: UM.Theme.getColor("lining")
Repeater Repeater
{ {
id: repeater id: repeater
anchors.fill: parent anchors.fill: parent
model: infillSlider.to / infillSlider.stepSize + 1 model: 11
Rectangle Rectangle
{ {
color: infillSlider.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable") color: UM.Theme.getColor("lining")
implicitWidth: UM.Theme.getSize("print_setup_slider_tickmarks").width implicitWidth: UM.Theme.getSize("print_setup_slider_tickmarks").width
implicitHeight: UM.Theme.getSize("print_setup_slider_tickmarks").height implicitHeight: UM.Theme.getSize("print_setup_slider_tickmarks").height
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
// Do not use Math.round otherwise the tickmarks won't be aligned x: Math.round(backgroundLine.width / (repeater.count - 1) * index - width / 2)
// (space between steps) * index of step
x: (backgroundLine.width / (repeater.count - 1)) * index
radius: Math.round(implicitWidth / 2) radius: Math.round(width / 2)
visible: (index % 10) == 0 // Only show steps of 10%
UM.Label
{
text: index
visible: (index % 20) == 0 // Only show steps of 20%
anchors.horizontalCenter: parent.horizontalCenter
y: UM.Theme.getSize("thin_margin").height
color: UM.Theme.getColor("quality_slider_available")
}
} }
} }
} }
@ -155,13 +152,13 @@ Item
{ {
id: handleButton id: handleButton
x: infillSlider.leftPadding + infillSlider.visualPosition * (infillSlider.availableWidth - width) x: infillSlider.leftPadding + infillSlider.visualPosition * (infillSlider.availableWidth - width)
y: infillSlider.topPadding + infillSlider.availableHeight / 2 - height / 2 anchors.verticalCenter: parent.verticalCenter
color: infillSlider.enabled ? UM.Theme.getColor("primary") : UM.Theme.getColor("quality_slider_unavailable")
implicitWidth: UM.Theme.getSize("print_setup_slider_handle").width implicitWidth: UM.Theme.getSize("print_setup_slider_handle").width
implicitHeight: implicitWidth implicitHeight: UM.Theme.getSize("print_setup_slider_handle").height
radius: Math.round(implicitWidth / 2) radius: Math.round(width / 2)
border.color: UM.Theme.getColor("slider_groove_fill") color: UM.Theme.getColor("main_background")
border.width: UM.Theme.getSize("default_lining").height border.color: UM.Theme.getColor("primary")
border.width: UM.Theme.getSize("wide_lining").height
} }
Connections Connections
@ -201,6 +198,8 @@ Item
} }
} }
} }
UM.Label { Layout.fillWidth: false; text: "100" }
} }
// Gradual Support Infill Checkbox // Gradual Support Infill Checkbox
@ -210,7 +209,7 @@ Item
property alias _hovered: enableGradualInfillMouseArea.containsMouse property alias _hovered: enableGradualInfillMouseArea.containsMouse
anchors.top: infillSliderContainer.bottom anchors.top: infillSliderContainer.bottom
anchors.topMargin: UM.Theme.getSize("wide_margin").height anchors.topMargin: UM.Theme.getSize("default_margin").height
anchors.left: infillSliderContainer.left anchors.left: infillSliderContainer.left
text: catalog.i18nc("@label", "Gradual infill") text: catalog.i18nc("@label", "Gradual infill")

View File

@ -487,8 +487,8 @@
"print_setup_widget": [38.0, 30.0], "print_setup_widget": [38.0, 30.0],
"print_setup_extruder_box": [0.0, 6.0], "print_setup_extruder_box": [0.0, 6.0],
"print_setup_slider_groove": [0.16, 0.16], "print_setup_slider_groove": [0.16, 0.16],
"print_setup_slider_handle": [1.0, 1.0], "print_setup_slider_handle": [1.3, 1.3],
"print_setup_slider_tickmarks": [0.32, 0.32], "print_setup_slider_tickmarks": [0.5, 0.5],
"print_setup_big_item": [28, 2.5], "print_setup_big_item": [28, 2.5],
"print_setup_icon": [1.2, 1.2], "print_setup_icon": [1.2, 1.2],
"drag_icon": [1.416, 0.25], "drag_icon": [1.416, 0.25],