Refactor the code a bit more to better align the components in the

recommended mode.

Contributes to CURA-5941.
This commit is contained in:
Diego Prado Gesto 2018-11-28 17:29:25 +01:00
parent 85b34d6005
commit 990c653af4
9 changed files with 1134 additions and 1242 deletions

View file

@ -12,7 +12,6 @@ Button
{ {
id: button id: button
property alias iconSource: buttonIcon.source property alias iconSource: buttonIcon.source
property alias iconSourceRight: buttonIconRight.source
property alias textFont: buttonText.font property alias textFont: buttonText.font
property alias cornerRadius: backgroundRect.radius property alias cornerRadius: backgroundRect.radius
property alias tooltip: tooltip.text property alias tooltip: tooltip.text
@ -37,8 +36,7 @@ Button
// we elide the text to the right so the text will be cut off with the three dots at the end. // we elide the text to the right so the text will be cut off with the three dots at the end.
property var fixedWidthMode: false property var fixedWidthMode: false
width: buttonIcon.width + buttonText.width + buttonIconRight.width contentItem: Row
contentItem: Item
{ {
UM.RecolorImage UM.RecolorImage
{ {
@ -66,20 +64,6 @@ Button
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
elide: Text.ElideRight elide: Text.ElideRight
} }
UM.RecolorImage
{
id: buttonIconRight
source: ""
height: Math.round(0.6 * parent.height)
width: height
sourceSize.width: width
sourceSize.height: height
color: button.hovered ? button.textHoverColor : button.textColor
visible: source != ""
anchors.verticalCenter: parent.verticalCenter
anchors.right: source != "" ? parent.right : undefined
}
} }
background: Rectangle background: Rectangle

View file

@ -74,7 +74,7 @@ Item
function togglePopup() function togglePopup()
{ {
if(popup.visible) if (popup.visible)
{ {
popup.close() popup.close()
} }

View file

@ -2,8 +2,7 @@
// Cura is released under the terms of the LGPLv3 or higher. // Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.7 import QtQuick 2.7
import QtQuick.Controls 2.1 import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import UM 1.1 as UM import UM 1.1 as UM
@ -48,7 +47,7 @@ Item
text: "Empty label" text: "Empty label"
elide: Text.ElideRight elide: Text.ElideRight
color: UM.Theme.getColor("text") color: UM.Theme.getColor("text")
font: UM.Theme.getFont("very_small") font: UM.Theme.getFont("default")
renderType: Text.NativeRendering renderType: Text.NativeRendering
} }
} }

View file

@ -11,7 +11,6 @@ Cura.ExpandableComponent
{ {
id: base id: base
property int currentModeIndex: -1
property bool hideSettings: PrintInformation.preSliced property bool hideSettings: PrintInformation.preSliced
property string enabledText: catalog.i18nc("@label:Should be short", "On") property string enabledText: catalog.i18nc("@label:Should be short", "On")
@ -27,13 +26,6 @@ Cura.ExpandableComponent
popupClosePolicy: Popup.CloseOnEscape popupClosePolicy: Popup.CloseOnEscape
onCurrentModeIndexChanged: UM.Preferences.setValue("cura/active_mode", currentModeIndex)
Component.onCompleted:
{
popupItemWrapper.width = base.width
}
UM.I18nCatalog UM.I18nCatalog
{ {
id: catalog id: catalog
@ -61,8 +53,5 @@ Cura.ExpandableComponent
id: extrudersModel id: extrudersModel
} }
popupItem: PrintSetupSelectorContents popupItem: PrintSetupSelectorContents {}
{
}
} }

View file

@ -3,24 +3,26 @@
import QtQuick 2.7 import QtQuick 2.7
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import UM 1.3 as UM import UM 1.3 as UM
import Cura 1.0 as Cura import Cura 1.0 as Cura
Rectangle Item
{ {
property var total_height: popupItemHeader.height + popupItemContent.height + footerControll.height + UM.Theme.getSize("narrow_margin").height * 2 id: popup
id: popupItemWrapper
height: total_height
border.width: UM.Theme.getSize("default_lining").width width: UM.Theme.getSize("print_setup_widget").width
border.color: UM.Theme.getColor("lining") height: childrenRect.height
Item property int currentModeIndex: -1
onCurrentModeIndexChanged: UM.Preferences.setValue("cura/active_mode", currentModeIndex)
// Header of the popup
Rectangle
{ {
id: popupItemHeader id: header
height: 36 height: UM.Theme.getSize("print_setup_widget_header").height
color: UM.Theme.getColor("action_button_hovered") // TODO: It's not clear the color that we need to use here
anchors anchors
{ {
@ -31,8 +33,8 @@ Rectangle
Label Label
{ {
id: popupItemHeaderText id: headerLabel
text: catalog.i18nc("@label", "Print settings"); text: catalog.i18nc("@label", "Print settings")
font: UM.Theme.getFont("default") font: UM.Theme.getFont("default")
renderType: Text.NativeRendering renderType: Text.NativeRendering
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
@ -47,221 +49,153 @@ Rectangle
} }
} }
Rectangle
{
width: parent.width
height: UM.Theme.getSize("default_lining").height
anchors.top: popupItemHeaderText.bottom
color: UM.Theme.getColor("action_button_border")
}
Button Button
{ {
id: closeButton; id: closeButton
width: UM.Theme.getSize("message_close").width; width: UM.Theme.getSize("message_close").width
height: UM.Theme.getSize("message_close").height; height: UM.Theme.getSize("message_close").height
anchors anchors
{ {
right: parent.right; right: parent.right
rightMargin: UM.Theme.getSize("default_margin").width; rightMargin: UM.Theme.getSize("default_margin").width
top: parent.top; verticalCenter: parent.verticalCenter
topMargin: 10
} }
UM.RecolorImage contentItem: UM.RecolorImage
{ {
anchors.fill: parent; anchors.fill: parent
sourceSize.width: width sourceSize.width: width
sourceSize.height: width sourceSize.height: width
color: UM.Theme.getColor("message_text") color: UM.Theme.getColor("message_text")
source: UM.Theme.getIcon("cross1") source: UM.Theme.getIcon("cross1")
} }
onClicked: base.togglePopup() // Will hide the popup item background: Item {}
background: Rectangle onClicked: togglePopup() // Will hide the popup item
{
color: UM.Theme.getColor("message_background")
}
} }
} }
Rectangle Rectangle
{ {
id: popupItemContent id: topSeparator
width: parent.width
height: tabBar.height + sidebarContents.height
anchors.bottom: header.bottom
width: parent.width
height: UM.Theme.getSize("default_lining").height
color: UM.Theme.getColor("lining")
}
Loader
{
id: loader
width: parent.width
anchors anchors
{ {
top: popupItemHeader.bottom top: header.bottom
topMargin: UM.Theme.getSize("narrow_margin").height
right: parent.right
left: parent.left
leftMargin: UM.Theme.getSize("default_margin").width leftMargin: UM.Theme.getSize("default_margin").width
rightMargin: UM.Theme.getSize("default_margin").width rightMargin: UM.Theme.getSize("default_margin").width
} }
sourceComponent: currentModeIndex == 0 ? recommendedPrintSetup : customPrintSetup
}
UM.TabRow // Item
{ // {
id: tabBar // id: content
anchors.topMargin: UM.Theme.getSize("default_margin").height // width: parent.width
onCurrentIndexChanged: Cura.ExtruderManager.setActiveExtruderIndex(currentIndex) // height: 100
z: 1 ////// height: tabBar.height + sidebarContents.height
Repeater ////
{ // anchors
model: extrudersModel // {
delegate: UM.TabRowButton // top: header.bottom
{ // leftMargin: UM.Theme.getSize("default_margin").width
contentItem: Rectangle // rightMargin: UM.Theme.getSize("default_margin").width
{ // }
z: 2 ////
Cura.ExtruderIcon //// Rectangle
{ //// {
anchors.horizontalCenter: parent.horizontalCenter //// id: sidebarContents
materialColor: model.color //// anchors.top: tabBar.bottom
extruderEnabled: model.enabled //// anchors.bottom: parent.bottom
width: parent.height //// anchors.left: parent.left
height: parent.height //// anchors.right: parent.right
} //// height: UM.Theme.getSize("print_setup_widget").height
} ////
//// border.width: UM.Theme.getSize("default_lining").width * 2
//// border.color: UM.Theme.getColor("action_button_border")
//// }
// }
background: Rectangle Rectangle
{ {
id: buttonsSeparator
width: parent.width anchors.top: loader.bottom
z: 1 width: parent.width
border.width: UM.Theme.getSize("default_lining").width * 2 height: UM.Theme.getSize("default_lining").height
border.color: UM.Theme.getColor("action_button_border") color: UM.Theme.getColor("lining")
visible:
{
return index == tabBar.currentIndex
}
// overlap bottom border
Rectangle
{
width: parent.width - UM.Theme.getSize("default_lining").width * 4
height: UM.Theme.getSize("default_lining").width * 4
anchors.bottom: parent.bottom
anchors.bottomMargin: - (UM.Theme.getSize("default_lining").width * 2)
anchors.leftMargin: UM.Theme.getSize("default_lining").width * 2
anchors.left: parent.left
}
}
}
}
}
Rectangle
{
id: sidebarContents
anchors.top: tabBar.bottom
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
height: UM.Theme.getSize("print_setup_widget").height
border.width: UM.Theme.getSize("default_lining").width * 2
border.color: UM.Theme.getColor("action_button_border")
RecommendedPrintSetup
{
anchors.topMargin: UM.Theme.getSize("print_setup_content_top_margin").height
anchors.fill: parent
visible: currentModeIndex != 1
onShowTooltip: base.showTooltip(item, location, text)
onHideTooltip: base.hideTooltip()
}
CustomPrintSetup
{
anchors.topMargin: UM.Theme.getSize("print_setup_content_top_margin").height
anchors.bottomMargin: 2 //don't overlap bottom border
anchors.fill: parent
visible: currentModeIndex == 1
onShowTooltip: base.showTooltip(item, location, text)
onHideTooltip: base.hideTooltip()
}
}
} }
Item Item
{ {
id: footerControll id: buttonRow
anchors.top: popupItemContent.bottom height: childrenRect.height
anchors.topMargin: UM.Theme.getSize("narrow_margin").height * 2
width: parent.width // The buttonsSeparator is inside the buttonRow. This is to avoid some weird behaviours with the scroll bar.
height: settingControlButton.height + UM.Theme.getSize("default_lining").height * 4 anchors
Rectangle
{ {
width: parent.width top: buttonsSeparator.top
height: UM.Theme.getSize("default_lining").height left: parent.left
color: UM.Theme.getColor("action_button_border") right: parent.right
} }
Cura.ActionButton Cura.SecondaryButton
{ {
id: settingControlButton anchors.left: parent.left
leftPadding: UM.Theme.getSize("default_margin").width leftPadding: UM.Theme.getSize("default_margin").width
rightPadding: UM.Theme.getSize("default_margin").width rightPadding: UM.Theme.getSize("default_margin").width
height: UM.Theme.getSize("action_panel_button").height text: catalog.i18nc("@button", "Recommended")
text: catalog.i18nc("@button", "Custom") visible: currentModeIndex == 1
color: UM.Theme.getColor("secondary") onClicked: currentModeIndex = 0
hoverColor: UM.Theme.getColor("secondary")
textColor: UM.Theme.getColor("primary")
textHoverColor: UM.Theme.getColor("text")
iconSourceRight: UM.Theme.getIcon("arrow_right")
width: UM.Theme.getSize("print_setup_action_button").width
fixedWidthMode: true
visible: currentModeIndex == 0
anchors
{
top: parent.top
topMargin: UM.Theme.getSize("narrow_margin").height * 2
bottomMargin: UM.Theme.getSize("narrow_margin").height * 2
right: parent.right
rightMargin: UM.Theme.getSize("narrow_margin").height
}
onClicked: currentModeIndex = 1
} }
Cura.ActionButton Cura.SecondaryButton
{ {
height: UM.Theme.getSize("action_panel_button").height anchors.right: parent.right
text: catalog.i18nc("@button", "Recommended") leftPadding: UM.Theme.getSize("default_margin").width
color: UM.Theme.getColor("secondary") rightPadding: UM.Theme.getSize("default_margin").width
hoverColor: UM.Theme.getColor("secondary") text: catalog.i18nc("@button", "Custom")
textColor: UM.Theme.getColor("primary") visible: currentModeIndex == 0
textHoverColor: UM.Theme.getColor("text") onClicked: currentModeIndex = 1
iconSource: UM.Theme.getIcon("arrow_left")
width: UM.Theme.getSize("print_setup_action_button").width
fixedWidthMode: true
visible: currentModeIndex == 1
anchors
{
top: parent.top
topMargin: UM.Theme.getSize("narrow_margin").height * 2
bottomMargin: UM.Theme.getSize("narrow_margin").height * 2
left: parent.left
leftMargin: UM.Theme.getSize("narrow_margin").height
}
MouseArea {
anchors.fill: parent
onClicked: currentModeIndex = 0
}
} }
} }
Component
{
id: recommendedPrintSetup
RecommendedPrintSetup
{
onShowTooltip: base.showTooltip(item, location, text)
onHideTooltip: base.hideTooltip()
}
}
Component
{
id: customPrintSetup
CustomPrintSetup
{
onShowTooltip: base.showTooltip(item, location, text)
onHideTooltip: base.hideTooltip()
}
}
Component.onCompleted: Component.onCompleted:
{ {
print(height, "!!!!!!!!!!!!!!!!!!!!!!!")
var index = Math.round(UM.Preferences.getValue("cura/active_mode")) var index = Math.round(UM.Preferences.getValue("cura/active_mode"))
if(index != null && !isNaN(index)) if(index != null && !isNaN(index))

View file

@ -10,7 +10,7 @@ import Cura 1.0 as Cura
RowLayout RowLayout
{ {
Cura.IconLabel Cura.IconWithText
{ {
source: UM.Theme.getIcon("category_layer_height") source: UM.Theme.getIcon("category_layer_height")
text: Cura.MachineManager.activeStack ? Cura.MachineManager.activeQualityOrQualityChangesName + " " + layerHeight.properties.value + "mm" : "" text: Cura.MachineManager.activeStack ? Cura.MachineManager.activeQualityOrQualityChangesName + " " + layerHeight.properties.value + "mm" : ""
@ -24,7 +24,7 @@ RowLayout
} }
} }
Cura.IconLabel Cura.IconWithText
{ {
source: UM.Theme.getIcon("category_infill") source: UM.Theme.getIcon("category_infill")
text: Cura.MachineManager.activeStack ? parseInt(infillDensity.properties.value) + "%" : "0%" text: Cura.MachineManager.activeStack ? parseInt(infillDensity.properties.value) + "%" : "0%"
@ -38,7 +38,7 @@ RowLayout
} }
} }
Cura.IconLabel Cura.IconWithText
{ {
source: UM.Theme.getIcon("category_support") source: UM.Theme.getIcon("category_support")
text: supportEnabled.properties.value == "True" ? enabledText : disabledText text: supportEnabled.properties.value == "True" ? enabledText : disabledText
@ -53,7 +53,7 @@ RowLayout
} }
} }
Cura.IconLabel Cura.IconWithText
{ {
source: UM.Theme.getIcon("category_adhesion") source: UM.Theme.getIcon("category_adhesion")
text: platformAdhesionType.properties.value != "skirt" && platformAdhesionType.properties.value != "none" ? enabledText : disabledText text: platformAdhesionType.properties.value != "skirt" && platformAdhesionType.properties.value != "none" ? enabledText : disabledText

File diff suppressed because it is too large Load diff

View file

@ -9,6 +9,7 @@ MaterialMenu 1.0 MaterialMenu.qml
NozzleMenu 1.0 NozzleMenu.qml NozzleMenu 1.0 NozzleMenu.qml
ActionPanelWidget 1.0 ActionPanelWidget.qml ActionPanelWidget 1.0 ActionPanelWidget.qml
IconLabel 1.0 IconLabel.qml IconLabel 1.0 IconLabel.qml
IconWithText 1.0 IconWithText.qml
OutputDevicesActionButton 1.0 OutputDevicesActionButton.qml OutputDevicesActionButton 1.0 OutputDevicesActionButton.qml
ExpandableComponent 1.0 ExpandableComponent.qml ExpandableComponent 1.0 ExpandableComponent.qml
PrinterTypeLabel 1.0 PrinterTypeLabel.qml PrinterTypeLabel 1.0 PrinterTypeLabel.qml

View file

@ -372,6 +372,7 @@
"print_setup_mode_toggle": [0.0, 2.0], "print_setup_mode_toggle": [0.0, 2.0],
"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],
"configuration_selector_mode_tabs": [0.0, 3.0], "configuration_selector_mode_tabs": [0.0, 3.0],