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

@ -3,24 +3,26 @@
import QtQuick 2.7
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import UM 1.3 as UM
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: popupItemWrapper
height: total_height
id: popup
border.width: UM.Theme.getSize("default_lining").width
border.color: UM.Theme.getColor("lining")
width: UM.Theme.getSize("print_setup_widget").width
height: childrenRect.height
Item
property int currentModeIndex: -1
onCurrentModeIndexChanged: UM.Preferences.setValue("cura/active_mode", currentModeIndex)
// Header of the popup
Rectangle
{
id: popupItemHeader
height: 36
id: header
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
{
@ -31,8 +33,8 @@ Rectangle
Label
{
id: popupItemHeaderText
text: catalog.i18nc("@label", "Print settings");
id: headerLabel
text: catalog.i18nc("@label", "Print settings")
font: UM.Theme.getFont("default")
renderType: Text.NativeRendering
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
{
id: closeButton;
width: UM.Theme.getSize("message_close").width;
height: UM.Theme.getSize("message_close").height;
id: closeButton
width: UM.Theme.getSize("message_close").width
height: UM.Theme.getSize("message_close").height
anchors
{
right: parent.right;
rightMargin: UM.Theme.getSize("default_margin").width;
top: parent.top;
topMargin: 10
right: parent.right
rightMargin: UM.Theme.getSize("default_margin").width
verticalCenter: parent.verticalCenter
}
UM.RecolorImage
contentItem: UM.RecolorImage
{
anchors.fill: parent;
anchors.fill: parent
sourceSize.width: width
sourceSize.height: width
color: UM.Theme.getColor("message_text")
source: UM.Theme.getIcon("cross1")
}
onClicked: base.togglePopup() // Will hide the popup item
background: Item {}
background: Rectangle
{
color: UM.Theme.getColor("message_background")
}
onClicked: togglePopup() // Will hide the popup item
}
}
Rectangle
{
id: popupItemContent
width: parent.width
height: tabBar.height + sidebarContents.height
id: topSeparator
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
{
top: popupItemHeader.bottom
topMargin: UM.Theme.getSize("narrow_margin").height
right: parent.right
left: parent.left
top: header.bottom
leftMargin: UM.Theme.getSize("default_margin").width
rightMargin: UM.Theme.getSize("default_margin").width
}
sourceComponent: currentModeIndex == 0 ? recommendedPrintSetup : customPrintSetup
}
UM.TabRow
{
id: tabBar
anchors.topMargin: UM.Theme.getSize("default_margin").height
onCurrentIndexChanged: Cura.ExtruderManager.setActiveExtruderIndex(currentIndex)
z: 1
Repeater
{
model: extrudersModel
delegate: UM.TabRowButton
{
contentItem: Rectangle
{
z: 2
Cura.ExtruderIcon
{
anchors.horizontalCenter: parent.horizontalCenter
materialColor: model.color
extruderEnabled: model.enabled
width: parent.height
height: parent.height
}
}
// Item
// {
// id: content
// width: parent.width
// height: 100
////// height: tabBar.height + sidebarContents.height
////
// anchors
// {
// top: header.bottom
// leftMargin: UM.Theme.getSize("default_margin").width
// rightMargin: UM.Theme.getSize("default_margin").width
// }
////
//// 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")
//// }
// }
background: Rectangle
{
Rectangle
{
id: buttonsSeparator
width: parent.width
z: 1
border.width: UM.Theme.getSize("default_lining").width * 2
border.color: UM.Theme.getColor("action_button_border")
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()
}
}
anchors.top: loader.bottom
width: parent.width
height: UM.Theme.getSize("default_lining").height
color: UM.Theme.getColor("lining")
}
Item
{
id: footerControll
anchors.top: popupItemContent.bottom
anchors.topMargin: UM.Theme.getSize("narrow_margin").height * 2
width: parent.width
height: settingControlButton.height + UM.Theme.getSize("default_lining").height * 4
Rectangle
id: buttonRow
height: childrenRect.height
// The buttonsSeparator is inside the buttonRow. This is to avoid some weird behaviours with the scroll bar.
anchors
{
width: parent.width
height: UM.Theme.getSize("default_lining").height
color: UM.Theme.getColor("action_button_border")
top: buttonsSeparator.top
left: parent.left
right: parent.right
}
Cura.ActionButton
Cura.SecondaryButton
{
id: settingControlButton
anchors.left: parent.left
leftPadding: 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", "Custom")
color: UM.Theme.getColor("secondary")
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
text: catalog.i18nc("@button", "Recommended")
visible: currentModeIndex == 1
onClicked: currentModeIndex = 0
}
Cura.ActionButton
Cura.SecondaryButton
{
height: UM.Theme.getSize("action_panel_button").height
text: catalog.i18nc("@button", "Recommended")
color: UM.Theme.getColor("secondary")
hoverColor: UM.Theme.getColor("secondary")
textColor: UM.Theme.getColor("primary")
textHoverColor: UM.Theme.getColor("text")
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
}
anchors.right: parent.right
leftPadding: UM.Theme.getSize("default_margin").width
rightPadding: UM.Theme.getSize("default_margin").width
text: catalog.i18nc("@button", "Custom")
visible: currentModeIndex == 0
onClicked: currentModeIndex = 1
}
}
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:
{
print(height, "!!!!!!!!!!!!!!!!!!!!!!!")
var index = Math.round(UM.Preferences.getValue("cura/active_mode"))
if(index != null && !isNaN(index))