diff --git a/resources/qml/PrintSetupSelector/PrintSetupSelectorContents.qml b/resources/qml/PrintSetupSelector/PrintSetupSelectorContents.qml index 5f22e4c337..0210ece977 100644 --- a/resources/qml/PrintSetupSelector/PrintSetupSelectorContents.qml +++ b/resources/qml/PrintSetupSelector/PrintSetupSelectorContents.qml @@ -25,7 +25,7 @@ Item { id: header height: UM.Theme.getSize("print_setup_widget_header").height - color: "transparent" //UM.Theme.getColor("action_button_hovered") // TODO: It's not clear the color that we need to use here + color: UM.Theme.getColor("action_button_hovered") // TODO: It's not clear the color that we need to use here anchors { diff --git a/resources/qml/PrintSetupSelector/Recommended/RecommendedInfillDensitySelector.qml b/resources/qml/PrintSetupSelector/Recommended/RecommendedInfillDensitySelector.qml index 34cb8f2f20..8b0b87d997 100644 --- a/resources/qml/PrintSetupSelector/Recommended/RecommendedInfillDensitySelector.qml +++ b/resources/qml/PrintSetupSelector/Recommended/RecommendedInfillDensitySelector.qml @@ -15,57 +15,37 @@ import Cura 1.0 as Cura Item { id: infillRow + height: childrenRect.height + property real labelColumnWidth: Math.round(width / 3) + + // Here are the elements that are shown in the left column Cura.IconWithText { id: infillRowTitle source: UM.Theme.getIcon("category_infill") text: catalog.i18nc("@label", "Infill") + " (%)" - anchors.bottom: parent.bottom width: labelColumnWidth } Item { - id: infillCellRight + id: infillSliderContainer + height: childrenRect.height - height: infillSlider.height + UM.Theme.getSize("thick_margin").height + enableGradualInfillCheckBox.visible * (enableGradualInfillCheckBox.height + UM.Theme.getSize("thick_margin").height) - - anchors.left: infillRowTitle.right - anchors.right: parent.right - - Label + anchors { - id: selectedInfillRateText - - anchors.left: infillSlider.left - anchors.right: parent.right - - text: parseInt(infillDensity.properties.value) + "%" - horizontalAlignment: Text.AlignLeft - - color: infillSlider.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable") - } - - // We use a binding to make sure that after manually setting infillSlider.value it is still bound to the property provider - Binding - { - target: infillSlider - property: "value" - value: parseInt(infillDensity.properties.value) + left: infillRowTitle.right + right: parent.right + verticalCenter: infillRowTitle.verticalCenter } Slider { id: infillSlider - anchors.top: selectedInfillRateText.bottom - anchors.left: parent.left - anchors.right: infillIcon.left - anchors.rightMargin: UM.Theme.getSize("thick_margin").width - - height: UM.Theme.getSize("thick_margin").height - width: parseInt(infillCellRight.width - UM.Theme.getSize("thick_margin").width - style.handleWidth) + width: parent.width + height: UM.Theme.getSize("print_setup_slider_handle").height // The handle is the widest element of the slider minimumValue: 0 maximumValue: 100 @@ -78,9 +58,62 @@ Item // set initial value from stack value: parseInt(infillDensity.properties.value) + style: SliderStyle + { + //Draw 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.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + color: control.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable") + } + } + + handle: Rectangle + { + id: handleButton + color: control.enabled ? UM.Theme.getColor("primary") : UM.Theme.getColor("quality_slider_unavailable") + implicitWidth: UM.Theme.getSize("print_setup_slider_handle").width + implicitHeight: implicitWidth + radius: Math.round(implicitWidth / 2) + opacity: 0.5 + } + + tickmarks: Repeater + { + id: repeater + model: control.maximumValue / control.stepSize + 1 + + Rectangle + { + color: control.enabled ? 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 + + // Do not use Math.round otherwise the tickmarks won't be aligned + x: ((styleData.handleWidth / 2) - (implicitWidth / 2) + (index * ((repeater.width - styleData.handleWidth) / (repeater.count-1)))) + radius: Math.round(implicitWidth / 2) + visible: (index % 10) == 0 // Only show steps of 10% + + Label + { + text: index + visible: (index % 20) == 0 // Only show steps of 20% + anchors.horizontalCenter: parent.horizontalCenter + y: UM.Theme.getSize("thin_margin").height + renderType: Text.NativeRendering + } + } + } + } + onValueChanged: { - // Don't round the value if it's already the same if (parseInt(infillDensity.properties.value) == infillSlider.value) { @@ -104,228 +137,177 @@ Item Cura.MachineManager.resetSettingForAllExtruders("infill_line_distance") } } - - style: SliderStyle - { - groove: Rectangle - { - id: groove - implicitWidth: 200 * screenScaleFactor - implicitHeight: 2 * screenScaleFactor - color: control.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable") - radius: 1 - } - - handle: Item - { - Rectangle - { - id: handleButton - anchors.centerIn: parent - color: control.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable") - implicitWidth: 10 * screenScaleFactor - implicitHeight: 10 * screenScaleFactor - radius: 10 * screenScaleFactor - } - } - - tickmarks: Repeater - { - id: repeater - model: control.maximumValue / control.stepSize + 1 - - // check if a tick should be shown based on it's index and wether the infill density is a multiple of 10 (slider step size) - function shouldShowTick (index) - { - if (index % 10 == 0) - { - return true - } - return false - } - - Rectangle - { - anchors.verticalCenter: parent.verticalCenter - color: control.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable") - width: 1 * screenScaleFactor - height: 6 * screenScaleFactor - x: Math.round(styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1))) - visible: shouldShowTick(index) - } - } - } } - Rectangle - { - id: infillIcon - - width: Math.round((parent.width / 5) - (UM.Theme.getSize("thick_margin").width)) - height: width - - anchors.right: parent.right - anchors.top: parent.top - anchors.topMargin: Math.round(UM.Theme.getSize("thick_margin").height / 2) - - // we loop over all density icons and only show the one that has the current density and steps - Repeater - { - id: infillIconList - model: infillModel - anchors.fill: parent - - function activeIndex () - { - for (var i = 0; i < infillModel.count; i++) - { - var density = Math.round(infillDensity.properties.value) - var steps = Math.round(infillSteps.properties.value) - var infillModelItem = infillModel.get(i) - - if (infillModelItem != "undefined" - && density >= infillModelItem.percentageMin - && density <= infillModelItem.percentageMax - && steps >= infillModelItem.stepsMin - && steps <= infillModelItem.stepsMax) - { - return i - } - } - return -1 - } - - Rectangle - { - anchors.fill: parent - visible: infillIconList.activeIndex() == index - - border.width: UM.Theme.getSize("default_lining").width - border.color: UM.Theme.getColor("quality_slider_unavailable") - - UM.RecolorImage - { - anchors.fill: parent - anchors.margins: 2 * screenScaleFactor - sourceSize.width: width - sourceSize.height: width - source: UM.Theme.getIcon(model.icon) - color: UM.Theme.getColor("quality_slider_unavailable") - } - } - } - } - - // Gradual Support Infill Checkbox - CheckBox - { - id: enableGradualInfillCheckBox - property alias _hovered: enableGradualInfillMouseArea.containsMouse - - anchors.top: infillSlider.bottom - anchors.topMargin: Math.round(UM.Theme.getSize("thick_margin").height / 2) // closer to slider since it belongs to the same category - anchors.left: infillCellRight.left - - style: UM.Theme.styles.checkbox - enabled: base.settingsEnabled - visible: infillSteps.properties.enabled == "True" - checked: parseInt(infillSteps.properties.value) > 0 - - MouseArea - { - id: enableGradualInfillMouseArea - - anchors.fill: parent - hoverEnabled: true - enabled: true - - property var previousInfillDensity: parseInt(infillDensity.properties.value) - - onClicked: - { - // Set to 90% only when enabling gradual infill - var newInfillDensity; - if (parseInt(infillSteps.properties.value) == 0) - { - previousInfillDensity = parseInt(infillDensity.properties.value) - newInfillDensity = 90 - } else { - newInfillDensity = previousInfillDensity - } - Cura.MachineManager.setSettingForAllExtruders("infill_sparse_density", "value", String(newInfillDensity)) - - var infill_steps_value = 0 - if (parseInt(infillSteps.properties.value) == 0) - { - infill_steps_value = 5 - } - - Cura.MachineManager.setSettingForAllExtruders("gradual_infill_steps", "value", infill_steps_value) - } - - onEntered: base.showTooltip(enableGradualInfillCheckBox, Qt.point(-infillCellRight.x, 0), - catalog.i18nc("@label", "Gradual infill will gradually increase the amount of infill towards the top.")) - - onExited: base.hideTooltip() - - } - - Label - { - id: gradualInfillLabel - height: parent.height - anchors.left: enableGradualInfillCheckBox.right - anchors.leftMargin: Math.round(UM.Theme.getSize("thick_margin").width / 2) - verticalAlignment: Text.AlignVCenter; - text: catalog.i18nc("@label", "Enable gradual") - font: UM.Theme.getFont("default") - color: UM.Theme.getColor("text") - } - } - - // Infill list model for mapping icon - ListModel - { - id: infillModel - Component.onCompleted: - { - infillModel.append({ - percentageMin: -1, - percentageMax: 0, - stepsMin: -1, - stepsMax: 0, - icon: "hollow" - }) - infillModel.append({ - percentageMin: 0, - percentageMax: 40, - stepsMin: -1, - stepsMax: 0, - icon: "sparse" - }) - infillModel.append({ - percentageMin: 40, - percentageMax: 89, - stepsMin: -1, - stepsMax: 0, - icon: "dense" - }) - infillModel.append({ - percentageMin: 90, - percentageMax: 9999999999, - stepsMin: -1, - stepsMax: 0, - icon: "solid" - }) - infillModel.append({ - percentageMin: 0, - percentageMax: 9999999999, - stepsMin: 1, - stepsMax: 9999999999, - icon: "gradual" - }) - } - } +// Rectangle +// { +// id: infillIcon +// +// width: Math.round((parent.width / 5) - (UM.Theme.getSize("thick_margin").width)) +// height: width +// +// anchors.right: parent.right +// anchors.top: parent.top +// anchors.topMargin: Math.round(UM.Theme.getSize("thick_margin").height / 2) +// +// // we loop over all density icons and only show the one that has the current density and steps +// Repeater +// { +// id: infillIconList +// model: infillModel +// anchors.fill: parent +// +// function activeIndex () +// { +// for (var i = 0; i < infillModel.count; i++) +// { +// var density = Math.round(infillDensity.properties.value) +// var steps = Math.round(infillSteps.properties.value) +// var infillModelItem = infillModel.get(i) +// +// if (infillModelItem != "undefined" +// && density >= infillModelItem.percentageMin +// && density <= infillModelItem.percentageMax +// && steps >= infillModelItem.stepsMin +// && steps <= infillModelItem.stepsMax) +// { +// return i +// } +// } +// return -1 +// } +// +// Rectangle +// { +// anchors.fill: parent +// visible: infillIconList.activeIndex() == index +// +// border.width: UM.Theme.getSize("default_lining").width +// border.color: UM.Theme.getColor("quality_slider_unavailable") +// +// UM.RecolorImage +// { +// anchors.fill: parent +// anchors.margins: 2 * screenScaleFactor +// sourceSize.width: width +// sourceSize.height: width +// source: UM.Theme.getIcon(model.icon) +// color: UM.Theme.getColor("quality_slider_unavailable") +// } +// } +// } +// } +// +// // Gradual Support Infill Checkbox +// CheckBox +// { +// id: enableGradualInfillCheckBox +// property alias _hovered: enableGradualInfillMouseArea.containsMouse +// +// anchors.top: infillSlider.bottom +// anchors.topMargin: Math.round(UM.Theme.getSize("thick_margin").height / 2) // closer to slider since it belongs to the same category +// anchors.left: infillSliderContainer.left +// +// style: UM.Theme.styles.checkbox +// enabled: base.settingsEnabled +// visible: infillSteps.properties.enabled == "True" +// checked: parseInt(infillSteps.properties.value) > 0 +// +// MouseArea +// { +// id: enableGradualInfillMouseArea +// +// anchors.fill: parent +// hoverEnabled: true +// enabled: true +// +// property var previousInfillDensity: parseInt(infillDensity.properties.value) +// +// onClicked: +// { +// // Set to 90% only when enabling gradual infill +// var newInfillDensity; +// if (parseInt(infillSteps.properties.value) == 0) +// { +// previousInfillDensity = parseInt(infillDensity.properties.value) +// newInfillDensity = 90 +// } else { +// newInfillDensity = previousInfillDensity +// } +// Cura.MachineManager.setSettingForAllExtruders("infill_sparse_density", "value", String(newInfillDensity)) +// +// var infill_steps_value = 0 +// if (parseInt(infillSteps.properties.value) == 0) +// { +// infill_steps_value = 5 +// } +// +// Cura.MachineManager.setSettingForAllExtruders("gradual_infill_steps", "value", infill_steps_value) +// } +// +// onEntered: base.showTooltip(enableGradualInfillCheckBox, Qt.point(-infillSliderContainer.x, 0), +// catalog.i18nc("@label", "Gradual infill will gradually increase the amount of infill towards the top.")) +// +// onExited: base.hideTooltip() +// +// } +// +// Label +// { +// id: gradualInfillLabel +// height: parent.height +// anchors.left: enableGradualInfillCheckBox.right +// anchors.leftMargin: Math.round(UM.Theme.getSize("thick_margin").width / 2) +// verticalAlignment: Text.AlignVCenter; +// text: catalog.i18nc("@label", "Enable gradual") +// font: UM.Theme.getFont("default") +// color: UM.Theme.getColor("text") +// } +// } +// +// // Infill list model for mapping icon +// ListModel +// { +// id: infillModel +// Component.onCompleted: +// { +// infillModel.append({ +// percentageMin: -1, +// percentageMax: 0, +// stepsMin: -1, +// stepsMax: 0, +// icon: "hollow" +// }) +// infillModel.append({ +// percentageMin: 0, +// percentageMax: 40, +// stepsMin: -1, +// stepsMax: 0, +// icon: "sparse" +// }) +// infillModel.append({ +// percentageMin: 40, +// percentageMax: 89, +// stepsMin: -1, +// stepsMax: 0, +// icon: "dense" +// }) +// infillModel.append({ +// percentageMin: 90, +// percentageMax: 9999999999, +// stepsMin: -1, +// stepsMax: 0, +// icon: "solid" +// }) +// infillModel.append({ +// percentageMin: 0, +// percentageMax: 9999999999, +// stepsMin: 1, +// stepsMax: 9999999999, +// icon: "gradual" +// }) +// } +// } } UM.SettingPropertyProvider diff --git a/resources/qml/PrintSetupSelector/Recommended/RecommendedPrintSetup.qml b/resources/qml/PrintSetupSelector/Recommended/RecommendedPrintSetup.qml index 40a1910c69..0dabc3ea1e 100644 --- a/resources/qml/PrintSetupSelector/Recommended/RecommendedPrintSetup.qml +++ b/resources/qml/PrintSetupSelector/Recommended/RecommendedPrintSetup.qml @@ -12,10 +12,10 @@ Item { id: base + height: childrenRect.height + 2 * padding + signal showTooltip(Item item, point location, string text) signal hideTooltip() -// width: parent.width - height: childrenRect.height + 2 * padding property Action configureSettings @@ -28,24 +28,11 @@ Item name: "cura" } -// Rectangle -// { -// width: parent.width - 2 * parent.padding -// anchors -// { -// left: parent.left -// right: parent.right -// top: parent.top -// margins: parent.padding -// } -// color: "blue" -// height: 50 -// } - Column { width: parent.width - 2 * parent.padding - spacing: UM.Theme.getSize("default_margin").height + spacing: UM.Theme.getSize("wide_margin").height + anchors { left: parent.left @@ -55,33 +42,27 @@ Item } // TODO - property real labelColumnWidth: Math.round(width / 3) - property real settingsColumnWidth: width - labelColumnWidth + property real firstColumnWidth: Math.round(width / 3) RecommendedQualityProfileSelector { width: parent.width // TODO Create a reusable component with these properties to not define them separately for each component - property real labelColumnWidth: parent.labelColumnWidth - property real settingsColumnWidth: parent.settingsColumnWidth + labelColumnWidth: parent.firstColumnWidth } -// RecommendedInfillDensitySelector -// { -// width: parent.width -// height: childrenRect.height -// // TODO Create a reusable component with these properties to not define them separately for each component -// property real labelColumnWidth: parent.labelColumnWidth -// property real settingsColumnWidth: parent.settingsColumnWidth -// } + RecommendedInfillDensitySelector + { + width: parent.width + // TODO Create a reusable component with these properties to not define them separately for each component + labelColumnWidth: parent.firstColumnWidth + } // // RecommendedSupportSelector // { // width: parent.width -// height: childrenRect.height // // TODO Create a reusable component with these properties to not define them separately for each component -// property real labelColumnWidth: parent.labelColumnWidth -// property real settingsColumnWidth: parent.settingsColumnWidth +// property real firstColumnWidth: parent.labelColumnWidth // } diff --git a/resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelector.qml b/resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelector.qml index f7e1d870c9..cddf01a4dc 100644 --- a/resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelector.qml +++ b/resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelector.qml @@ -17,6 +17,9 @@ Item id: qualityRow height: childrenRect.height + property real labelColumnWidth: Math.round(width / 3) + property real settingsColumnWidth: width - labelColumnWidth + Timer { id: qualitySliderChangeTimer @@ -158,6 +161,7 @@ Item } } + // Here are the elements that are shown in the left column Item { id: titleRow @@ -210,6 +214,7 @@ Item { anchors.left: speedSlider.left anchors.top: speedSlider.bottom + height: childrenRect.height Repeater { @@ -219,6 +224,8 @@ Item { anchors.verticalCenter: parent.verticalCenter anchors.top: parent.top + // The height has to be set manually, otherwise it's not automatically calculated in the repeater + height: UM.Theme.getSize("default_margin").height color: (Cura.MachineManager.activeMachine != null && Cura.QualityProfilesDropDownMenuModel.getItem(index).available) ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable") text: { @@ -268,7 +275,7 @@ Item } } - //Print speed slider + // Print speed slider // Two sliders are created, one at the bottom with the unavailable qualities // and the other at the top with the available quality profiles and so the handle to select them. Item @@ -287,6 +294,8 @@ Item Slider { id: unavailableSlider + + width: parent.width height: qualitySlider.height // Same height as the slider that is on top updateValueWhileDragging : false tickmarksEnabled: true @@ -297,8 +306,6 @@ Item maximumValue: qualityModel.totalTicks stepSize: 1 - width: parent.width - style: SliderStyle { //Draw Unvailable line @@ -329,7 +336,7 @@ Item 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) - (UM.Theme.getSize("print_setup_slider_tickmarks").width / 2) + (qualityModel.qualitySliderStepWidth * index)) + x: ((UM.Theme.getSize("print_setup_slider_handle").width / 2) - (implicitWidth / 2) + (qualityModel.qualitySliderStepWidth * index)) radius: Math.round(implicitWidth / 2) } } @@ -354,11 +361,19 @@ Item Slider { id: qualitySlider + + width: qualityModel.qualitySliderStepWidth * (qualityModel.availableTotalTicks - 1) + UM.Theme.getSize("print_setup_slider_handle").width height: UM.Theme.getSize("print_setup_slider_handle").height // The handle is the widest element of the slider enabled: qualityModel.totalTicks > 0 && !Cura.SimpleModeSettingsManager.isProfileCustomized visible: qualityModel.availableTotalTicks > 0 updateValueWhileDragging : false + anchors + { + right: parent.right + rightMargin: qualityModel.qualitySliderMarginRight + } + 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) @@ -367,11 +382,6 @@ Item 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