Fix qualiy slider alignments

Contributes to CURA-5941.
This commit is contained in:
Diego Prado Gesto 2018-11-30 14:18:07 +01:00
parent 17945c6b16
commit 1a778b3078
4 changed files with 241 additions and 187 deletions

View file

@ -27,7 +27,7 @@ Item
Row Row
{ {
height: parent.height height: parent.height
spacing: 12 * screenScaleFactor // TODO: Theme! (Should be same as extruder spacing) spacing: UM.Theme.getSize("print_setup_slider_handle").width // TODO: Theme! (Should be same as extruder spacing)
// This wrapper ensures that the buildplate icon is located centered // This wrapper ensures that the buildplate icon is located centered
// below an extruder icon. // below an extruder icon.

View file

@ -114,19 +114,20 @@ Item
onHideTooltip: base.hideTooltip() onHideTooltip: base.hideTooltip()
visible: currentModeIndex == 0 visible: currentModeIndex == 0
} }
//
// CustomPrintSetup CustomPrintSetup
// { {
// anchors anchors
// { {
// left: parent.left left: parent.left
// right: parent.right right: parent.right
// top: parent.top top: parent.top
// } }
// onShowTooltip: base.showTooltip(item, location, text) height: 500
// onHideTooltip: base.hideTooltip() onShowTooltip: base.showTooltip(item, location, text)
// visible: currentModeIndex == 1 onHideTooltip: base.hideTooltip()
// } visible: currentModeIndex == 1
}
} }
Rectangle Rectangle

View file

@ -124,22 +124,27 @@ Item
function calculateSliderStepWidth (totalTicks) function calculateSliderStepWidth (totalTicks)
{ {
qualityModel.qualitySliderStepWidth = totalTicks != 0 ? Math.round((settingsColumnWidth) / (totalTicks)) : 0 // Do not use Math.round otherwise the tickmarks won't be aligned
qualityModel.qualitySliderStepWidth = totalTicks != 0 ?
((settingsColumnWidth - UM.Theme.getSize("print_setup_slider_handle").width) / (totalTicks)) : 0
} }
function calculateSliderMargins (availableMin, availableMax, totalTicks) function calculateSliderMargins (availableMin, availableMax, totalTicks)
{ {
if (availableMin == -1 || (availableMin == 0 && availableMax == 0)) if (availableMin == -1 || (availableMin == 0 && availableMax == 0))
{ {
qualityModel.qualitySliderMarginRight = Math.round(settingsColumnWidth) // Do not use Math.round otherwise the tickmarks won't be aligned
qualityModel.qualitySliderMarginRight = settingsColumnWidth
} }
else if (availableMin == availableMax) else if (availableMin == availableMax)
{ {
qualityModel.qualitySliderMarginRight = Math.round((totalTicks - availableMin) * qualitySliderStepWidth) // Do not use Math.round otherwise the tickmarks won't be aligned
qualityModel.qualitySliderMarginRight = (totalTicks - availableMin) * qualitySliderStepWidth
} }
else else
{ {
qualityModel.qualitySliderMarginRight = Math.round((totalTicks - availableMax) * qualitySliderStepWidth) // Do not use Math.round otherwise the tickmarks won't be aligned
qualityModel.qualitySliderMarginRight = (totalTicks - availableMax) * qualitySliderStepWidth
} }
} }
@ -162,20 +167,6 @@ Item
width: labelColumnWidth width: labelColumnWidth
} }
//Print speed slider
Rectangle
{
id: speedSlider
anchors
{
left: qualityRowTitle.right
right: parent.right
}
color: "green"
height: 20
}
// //
// // Show titles for the each quality slider ticks // // Show titles for the each quality slider ticks
// Item // Item
@ -240,104 +231,107 @@ Item
// } // }
// } // }
// //
// //Print speed slider //Print speed slider
// Rectangle Rectangle
// { {
// id: speedSlider id: speedSlider
anchors
{
left: qualityRowTitle.right
right: parent.right
}
color: "green"
height: childrenRect.height
// This Item is used only for tooltip, for slider area which is unavailable
// Item
// {
// function showTooltip (showTooltip)
// {
// if (showTooltip)
// {
// var content = catalog.i18nc("@tooltip", "This quality profile is not available for you current material and nozzle configuration. Please change these to enable this quality profile")
// base.showTooltip(qualityRow, Qt.point(-UM.Theme.getSize("thick_margin").width, customisedSettings.height), content)
// }
// else
// {
// base.hideTooltip()
// }
// }
// //
// anchors // id: unavailableLineToolTip
// { // height: 20 * screenScaleFactor // hovered area height
// left: qualityRowTitle.right // z: parent.z + 1 // should be higher, otherwise the area can be hovered
// right: parent.right // x: 0
// } // anchors.verticalCenter: qualitySlider.verticalCenter
// //
// // This Item is used only for tooltip, for slider area which is unavailable // Rectangle
//// Item // {
//// { // id: leftArea
//// function showTooltip (showTooltip) // width:
//// { // {
//// if (showTooltip) // if (qualityModel.availableTotalTicks == 0)
//// { // {
//// var content = catalog.i18nc("@tooltip", "This quality profile is not available for you current material and nozzle configuration. Please change these to enable this quality profile") // return qualityModel.qualitySliderStepWidth * qualityModel.totalTicks
//// base.showTooltip(qualityRow, Qt.point(-UM.Theme.getSize("thick_margin").width, customisedSettings.height), content) // }
//// } // return qualityModel.qualitySliderStepWidth * qualityModel.qualitySliderAvailableMin - 10
//// else // }
//// { // height: parent.height
//// base.hideTooltip() // color: "transparent"
//// }
//// }
////
//// id: unavailableLineToolTip
//// height: 20 * screenScaleFactor // hovered area height
//// z: parent.z + 1 // should be higher, otherwise the area can be hovered
//// x: 0
//// anchors.verticalCenter: qualitySlider.verticalCenter
////
//// Rectangle
//// {
//// id: leftArea
//// width:
//// {
//// if (qualityModel.availableTotalTicks == 0)
//// {
//// return qualityModel.qualitySliderStepWidth * qualityModel.totalTicks
//// }
//// return qualityModel.qualitySliderStepWidth * qualityModel.qualitySliderAvailableMin - 10
//// }
//// height: parent.height
//// color: "transparent"
////
//// MouseArea
//// {
//// anchors.fill: parent
//// hoverEnabled: true
//// enabled: Cura.SimpleModeSettingsManager.isProfileUserCreated == false
//// onEntered: unavailableLineToolTip.showTooltip(true)
//// onExited: unavailableLineToolTip.showTooltip(false)
//// }
//// }
////
//// Item
//// {
//// id: rightArea
//// width:
//// {
//// if(qualityModel.availableTotalTicks == 0)
//// return 0
////
//// return qualityModel.qualitySliderMarginRight - 10
//// }
//// height: parent.height
//// x:
//// {
//// if (qualityModel.availableTotalTicks == 0)
//// {
//// return 0
//// }
////
//// var leftUnavailableArea = qualityModel.qualitySliderStepWidth * qualityModel.qualitySliderAvailableMin
//// var totalGap = qualityModel.qualitySliderStepWidth * (qualityModel.availableTotalTicks -1) + leftUnavailableArea + 10
////
//// return totalGap
//// }
////
//// MouseArea
//// {
//// anchors.fill: parent
//// hoverEnabled: true
//// enabled: Cura.SimpleModeSettingsManager.isProfileUserCreated == false
//// onEntered: unavailableLineToolTip.showTooltip(true)
//// onExited: unavailableLineToolTip.showTooltip(false)
//// }
//// }
//// }
// //
// MouseArea
// {
// anchors.fill: parent
// hoverEnabled: true
// enabled: Cura.SimpleModeSettingsManager.isProfileUserCreated == false
// onEntered: unavailableLineToolTip.showTooltip(true)
// onExited: unavailableLineToolTip.showTooltip(false)
// }
// }
//
// Item
// {
// id: rightArea
// width:
// {
// if(qualityModel.availableTotalTicks == 0)
// return 0
//
// return qualityModel.qualitySliderMarginRight - 10
// }
// height: parent.height
// x:
// {
// if (qualityModel.availableTotalTicks == 0)
// {
// return 0
// }
//
// var leftUnavailableArea = qualityModel.qualitySliderStepWidth * qualityModel.qualitySliderAvailableMin
// var totalGap = qualityModel.qualitySliderStepWidth * (qualityModel.availableTotalTicks -1) + leftUnavailableArea + 10
//
// return totalGap
// }
//
// MouseArea
// {
// anchors.fill: parent
// hoverEnabled: true
// enabled: Cura.SimpleModeSettingsManager.isProfileUserCreated == false
// onEntered: unavailableLineToolTip.showTooltip(true)
// onExited: unavailableLineToolTip.showTooltip(false)
// }
// }
// }
// // Draw Unavailable line // // Draw Unavailable line
// Rectangle // Rectangle
// { // {
// id: groovechildrect // id: groovechildrect
// width: parent.width // width: parent.width
// height: 2 * screenScaleFactor // height: 2 * UM.Theme.getSize("default_lining").height
// color: UM.Theme.getColor("quality_slider_unavailable") // color: UM.Theme.getColor("quality_slider_unavailable")
// anchors.verticalCenter: qualitySlider.verticalCenter // anchors.verticalCenter: qualitySlider.verticalCenter
// //
@ -358,66 +352,125 @@ Item
// } // }
// } // }
// } // }
//
// // Draw available slider // Draw unavailable slider
// Slider Slider
// { {
// id: qualitySlider id: unavailableSlider
// height: UM.Theme.getSize("thick_margin").height height: UM.Theme.getSize("thick_margin").height
// anchors.bottom: parent.bottom updateValueWhileDragging : false
// enabled: qualityModel.totalTicks > 0 && !Cura.SimpleModeSettingsManager.isProfileCustomized tickmarksEnabled: true
// visible: qualityModel.availableTotalTicks > 0
// updateValueWhileDragging : false minimumValue: 0
// // maximumValue must be greater than minimumValue to be able to see the handle. While the value is strictly
// minimumValue: qualityModel.qualitySliderAvailableMin >= 0 ? qualityModel.qualitySliderAvailableMin : 0 // speaking not always correct, it seems to have the correct behavior (switching from 0 available to 1 available)
// // maximumValue must be greater than minimumValue to be able to see the handle. While the value is strictly maximumValue: qualityModel.totalTicks
// // speaking not always correct, it seems to have the correct behavior (switching from 0 available to 1 available) stepSize: 1
// maximumValue: qualityModel.qualitySliderAvailableMax >= 1 ? qualityModel.qualitySliderAvailableMax : 1
// stepSize: 1 width: parent.width
//
// value: qualityModel.qualitySliderActiveIndex style: SliderStyle
// {
// width: qualityModel.qualitySliderStepWidth * (qualityModel.availableTotalTicks - 1) //Draw Unvailable line
// groove: Item
// anchors.right: parent.right {
// anchors.rightMargin: qualityModel.qualitySliderMarginRight Rectangle
// {
// style: SliderStyle height: UM.Theme.getSize("print_setup_slider_groove").height
// { width: control.width - UM.Theme.getSize("print_setup_slider_handle").width
// //Draw Available line anchors.horizontalCenter: parent.horizontalCenter
// groove: Rectangle anchors.verticalCenter: parent.verticalCenter
// { color: UM.Theme.getColor("quality_slider_unavailable")
// implicitHeight: 2 * screenScaleFactor }
// color: UM.Theme.getColor("quality_slider_available") }
// radius: Math.round(height / 2)
// } handle: Item {}
//
// handle: Rectangle tickmarks: Repeater
// { {
// id: qualityhandleButton id: qualityRepeater
// color: UM.Theme.getColor("quality_slider_available") model: qualityModel.totalTicks > 0 ? qualityModel : 0
// implicitWidth: 12 * screenScaleFactor
// implicitHeight: implicitWidth Rectangle
// radius: Math.round(implicitWidth / 2) {
// visible: !Cura.SimpleModeSettingsManager.isProfileCustomized && !Cura.SimpleModeSettingsManager.isProfileUserCreated && qualityModel.existingQualityProfile color: Cura.QualityProfilesDropDownMenuModel.getItem(index).available ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable")
// } implicitWidth: UM.Theme.getSize("print_setup_slider_tickmarks").width
// } implicitHeight: UM.Theme.getSize("print_setup_slider_tickmarks").height
// anchors.verticalCenter: parent.verticalCenter
// onValueChanged:
// { // Do not use Math.round otherwise the tickmarks won't be aligned
// // only change if an active machine is set and the slider is visible at all. x: ((UM.Theme.getSize("print_setup_slider_handle").width / 2) - (UM.Theme.getSize("print_setup_slider_tickmarks").width / 2) + (qualityModel.qualitySliderStepWidth * index))
// if (Cura.MachineManager.activeMachine != null && visible) radius: Math.round(implicitWidth / 2)
// { }
// // prevent updating during view initializing. Trigger only if the value changed by user }
// if (qualitySlider.value != qualityModel.qualitySliderActiveIndex && qualityModel.qualitySliderActiveIndex != -1) }
// { }
// // start updating with short delay
// qualitySliderChangeTimer.start() // Draw available slider
// } Slider
// } {
// } id: qualitySlider
// } height: UM.Theme.getSize("thick_margin").height
// enabled: qualityModel.totalTicks > 0 && !Cura.SimpleModeSettingsManager.isProfileCustomized
visible: qualityModel.availableTotalTicks > 0
updateValueWhileDragging : false
minimumValue: qualityModel.qualitySliderAvailableMin >= 0 ? qualityModel.qualitySliderAvailableMin : 0
// maximumValue must be greater than minimumValue to be able to see the handle. While the value is strictly
// speaking not always correct, it seems to have the correct behavior (switching from 0 available to 1 available)
maximumValue: qualityModel.qualitySliderAvailableMax >= 1 ? qualityModel.qualitySliderAvailableMax : 1
stepSize: 1
value: qualityModel.qualitySliderActiveIndex
width: qualityModel.qualitySliderStepWidth * (qualityModel.availableTotalTicks - 1) + UM.Theme.getSize("print_setup_slider_handle").width
anchors.right: parent.right
anchors.rightMargin: qualityModel.qualitySliderMarginRight
style: SliderStyle
{
// Draw Available line
groove: Item
{
Rectangle
{
height: UM.Theme.getSize("print_setup_slider_groove").height
width: control.width - UM.Theme.getSize("print_setup_slider_handle").width
anchors.verticalCenter: parent.verticalCenter
// Do not use Math.round otherwise the tickmarks won't be aligned
x: UM.Theme.getSize("print_setup_slider_handle").width / 2
color: UM.Theme.getColor("quality_slider_available")
}
}
handle: Rectangle
{
id: qualityhandleButton
color: UM.Theme.getColor("primary")
implicitWidth: UM.Theme.getSize("print_setup_slider_handle").width
implicitHeight: implicitWidth
radius: Math.round(implicitWidth / 2)
visible: !Cura.SimpleModeSettingsManager.isProfileCustomized && !Cura.SimpleModeSettingsManager.isProfileUserCreated && qualityModel.existingQualityProfile
}
}
onValueChanged:
{
// only change if an active machine is set and the slider is visible at all.
if (Cura.MachineManager.activeMachine != null && visible)
{
// prevent updating during view initializing. Trigger only if the value changed by user
if (qualitySlider.value != qualityModel.qualitySliderActiveIndex && qualityModel.qualitySliderActiveIndex != -1)
{
// start updating with short delay
qualitySliderChangeTimer.start()
}
}
}
}
// MouseArea // MouseArea
// { // {
// id: speedSliderMouseArea // id: speedSliderMouseArea
@ -432,7 +485,7 @@ Item
// } // }
// onExited: base.hideTooltip() // onExited: base.hideTooltip()
// } // }
// } }
// //
// UM.SimpleButton // UM.SimpleButton
// { // {

View file

@ -373,6 +373,9 @@
"print_setup_item": [0.0, 2.0], "print_setup_item": [0.0, 2.0],
"print_setup_extruder_box": [0.0, 6.0], "print_setup_extruder_box": [0.0, 6.0],
"print_setup_widget_header": [0.0, 3.0], "print_setup_widget_header": [0.0, 3.0],
"print_setup_slider_groove": [0.16, 0.16],
"print_setup_slider_handle": [1.0, 1.0],
"print_setup_slider_tickmarks": [0.32, 0.32],
"configuration_selector_mode_tabs": [0.0, 3.0], "configuration_selector_mode_tabs": [0.0, 3.0],
@ -521,9 +524,6 @@
"monitor_thick_lining": [0.16, 0.16], "monitor_thick_lining": [0.16, 0.16],
"monitor_corner_radius": [0.3, 0.3], "monitor_corner_radius": [0.3, 0.3],
"monitor_shadow_radius": [0.4, 0.4], "monitor_shadow_radius": [0.4, 0.4],
"monitor_shadow_offset": [0.15, 0.15], "monitor_shadow_offset": [0.15, 0.15]
"print_setup_action_button": [13, 5],
"print_setup_content_top_margin": [3, 3]
} }
} }