3D-printing/Cura
1
0
Fork 0
mirror of https://github.com/Ultimaker/Cura.git synced 2025-08-07 22:13:58 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Add a disabled state to the expandable components

Browse source 
In this case, when the component is disabled, there is an optional message that will show. It works for instance when loading a gcode and the print setup panel has to be disabled.

Contributes to CURA-5941.
This commit is contained in:
Diego Prado Gesto 2018-12-10 14:17:56 +01:00
parent 90f822f683
commit 3f97f83c47
3 changed files with 110 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

96
resources/qml/ExpandablePopup.qml
View file

@ -37,6 +37,9 @@ Item
property alias enabled: mouseArea.enabled
// Text to show when this component is disabled
property alias disabledText: disabledLabel.text
// Defines the alignment of the content with respect of the headerItem, by default to the right
property int contentAlignment: ExpandablePopup.ContentAlignment.AlignRight
@ -86,6 +89,14 @@ Item
}
}
// Add this binding since the background color is not updated otherwise
Binding
{
target: background
property: "color"
value: enabled ? headerBackgroundColor : UM.Theme.getColor("disabled")
}
implicitHeight: 100 * screenScaleFactor
implicitWidth: 400 * screenScaleFactor
@ -94,47 +105,66 @@ Item
id: background
property real padding: UM.Theme.getSize("default_margin").width
color: headerBackgroundColor
color: base.enabled ? headerBackgroundColor : UM.Theme.getColor("disabled")
anchors.fill: parent
Loader
Label
{
id: headerItemLoader
anchors
{
left: parent.left
right: collapseButton.visible ? collapseButton.left : parent.right
top: parent.top
bottom: parent.bottom
margins: background.padding
}
id: disabledLabel
visible: !base.enabled
leftPadding: background.padding
text: "This component is disabled"
font: UM.Theme.getFont("default")
renderType: Text.NativeRendering
verticalAlignment: Text.AlignVCenter
color: UM.Theme.getColor("text")
height: parent.height
}
// A highlight that is shown when the content is expanded
Rectangle
Item
{
id: expandedHighlight
width: parent.width
height: UM.Theme.getSize("thick_lining").height
color: UM.Theme.getColor("primary")
visible: expanded
anchors.bottom: parent.bottom
}
anchors.fill: parent
visible: base.enabled
UM.RecolorImage
{
id: collapseButton
anchors
Loader
{
right: parent.right
verticalCenter: parent.verticalCenter
margins: background.padding
id: headerItemLoader
anchors
{
left: parent.left
right: collapseButton.visible ? collapseButton.left : parent.right
top: parent.top
bottom: parent.bottom
margins: background.padding
}
}
// A highlight that is shown when the content is expanded
Rectangle
{
id: expandedHighlight
width: parent.width
height: UM.Theme.getSize("thick_lining").height
color: UM.Theme.getColor("primary")
visible: expanded
anchors.bottom: parent.bottom
}
UM.RecolorImage
{
id: collapseButton
anchors
{
right: parent.right
verticalCenter: parent.verticalCenter
margins: background.padding
}
source: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
visible: source != ""
width: UM.Theme.getSize("standard_arrow").width
height: UM.Theme.getSize("standard_arrow").height
color: UM.Theme.getColor("small_button_text")
}
source: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
visible: source != "" && base.enabled
width: UM.Theme.getSize("standard_arrow").width
height: UM.Theme.getSize("standard_arrow").height
color: UM.Theme.getColor("small_button_text")
}
MouseArea
@ -144,7 +174,7 @@ Item
onClicked: toggleContent()
hoverEnabled: true
onEntered: background.color = headerHoverColor
onExited: background.color = headerBackgroundColor
onExited: background.color = base.enabled ? headerBackgroundColor : UM.Theme.getColor("disabled")
}
}