3D-printing/Cura
1
0
Fork 0
mirror of https://github.com/Ultimaker/Cura.git synced 2025-11-02 20:52:20 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge branch 'ui_rework_4_0' into place_print_info_back

Browse source
This commit is contained in:
Diego Prado Gesto 2018-12-07 13:19:19 +01:00
commit 46fa33fda5
52 changed files with 2296 additions and 2087 deletions
Download patch file Download diff file Expand all files Collapse all files

119
resources/qml/ExpandableComponent.qml
View file

@ -6,16 +6,15 @@ import Cura 1.0 as Cura
import QtGraphicalEffects 1.0 // For the dropshadow
// The expandable component has 3 major sub components:
// The expandable component has 2 major sub components:
// * The headerItem; Always visible and should hold some info about what happens if the component is expanded
// * The popupItem; The content that needs to be shown if the component is expanded.
// * The icon; An icon that is displayed on the right of the drawer.
// * The contentItem; The content that needs to be shown if the component is expanded.
Item
{
id: base
// Enumeration with the different possible alignments of the popup with respect of the headerItem
enum PopupAlignment
// Enumeration with the different possible alignments of the content with respect of the headerItem
enum ContentAlignment
{
AlignLeft,
AlignRight
@ -24,21 +23,25 @@ Item
// The headerItem holds the QML item that is always displayed.
property alias headerItem: headerItemLoader.sourceComponent
// The popupItem holds the QML item that is shown when the "open" button is pressed
property var popupItem
// The contentItem holds the QML item that is shown when the "open" button is pressed
property alias contentItem: content.contentItem
property color popupBackgroundColor: UM.Theme.getColor("action_button")
property color contentBackgroundColor: UM.Theme.getColor("action_button")
property color headerBackgroundColor: UM.Theme.getColor("action_button")
property color headerActiveColor: UM.Theme.getColor("secondary")
property color headerHoverColor: UM.Theme.getColor("action_button_hovered")
property alias enabled: mouseArea.enabled
// Defines the alignment of the popup with respect of the headerItem, by default to the right
property int popupAlignment: ExpandableComponent.PopupAlignment.AlignRight
// Defines the alignment of the content with respect of the headerItem, by default to the right
property int contentAlignment: ExpandableComponent.ContentAlignment.AlignRight
// How much spacing is needed around the popupItem
property alias popupPadding: popup.padding
// How much spacing is needed around the contentItem
property alias contentPadding: content.padding
// How much spacing is needed for the contentItem by Y coordinate
property var contentSpacingY: UM.Theme.getSize("narrow_margin").width
// How much padding is needed around the header & button
property alias headerPadding: background.padding
@ -52,9 +55,7 @@ Item
property alias iconSize: collapseButton.height
// Is the "drawer" open?
readonly property alias expanded: popup.visible
property alias expandedHighlightColor: expandedHighlight.color
readonly property alias expanded: content.visible
// What should the radius of the header be. This is also influenced by the headerCornerSide
property alias headerRadius: background.radius
@ -68,33 +69,9 @@ Item
property int shadowOffset: 2
function togglePopup()
function toggleContent()
{
if(popup.visible)
{
popup.close()
}
else
{
popup.open()
}
}
onPopupItemChanged:
{
// Since we want the size of the popup to be set by the size of the content,
// we need to do it like this.
popup.width = popupItem.width + 2 * popup.padding
popup.height = popupItem.height + 2 * popup.padding
popup.contentItem = popupItem
}
Connections
{
// Since it could be that the popup is dynamically populated, we should also take these changes into account.
target: popupItem
onWidthChanged: popup.width = popupItem.width + 2 * popup.padding
onHeightChanged: popup.height = popupItem.height + 2 * popup.padding
content.visible = !content.visible
}
implicitHeight: 100 * screenScaleFactor
@ -121,17 +98,6 @@ Item
}
}
// A highlight that is shown when the popup 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
@ -141,22 +107,25 @@ Item
verticalCenter: parent.verticalCenter
margins: background.padding
}
source: UM.Theme.getIcon("pencil")
visible: source != "" && base.enabled
width: height
height: Math.round(0.2 * base.height)
color: UM.Theme.getColor("small_button_text")
// color: UM.Theme.getColor("small_button_text")
width: UM.Theme.getSize("standard_arrow").width
height: UM.Theme.getSize("standard_arrow").height
color: UM.Theme.getColor("text")
}
MouseArea
{
id: mouseArea
anchors.fill: parent
onClicked: togglePopup()
onClicked: toggleContent()
hoverEnabled: true
onEntered: background.color = headerHoverColor
onExited: background.color = headerBackgroundColor
onExited: background.color = expanded ? headerActiveColor : headerBackgroundColor
}
}
DropShadow
{
id: shadow
@ -171,26 +140,46 @@ Item
z: background.z - 1
}
Popup
Control
{
id: popup
id: content
visible: false
// Ensure that the popup is located directly below the headerItem
y: headerItemLoader.height + 2 * background.padding + base.shadowOffset
// Ensure that the content is located directly below the headerItem
y: background.height + base.shadowOffset + base.contentSpacingY
// Make the popup aligned with the rest, using the property popupAlignment to decide whether is right or left.
// Make the content aligned with the rest, using the property contentAlignment to decide whether is right or left.
// In case of right alignment, the 3x padding is due to left, right and padding between the button & text.
x: popupAlignment == ExpandableComponent.PopupAlignment.AlignRight ? -width + collapseButton.width + headerItemLoader.width + 3 * background.padding : 0
x: contentAlignment == ExpandableComponent.ContentAlignment.AlignRight ? -width + collapseButton.width + headerItemLoader.width + 3 * background.padding : 0
padding: UM.Theme.getSize("default_margin").width
closePolicy: Popup.CloseOnPressOutsideParent
background: Cura.RoundedRectangle
{
cornerSide: Cura.RoundedRectangle.Direction.Down
color: popupBackgroundColor
color: contentBackgroundColor
border.width: UM.Theme.getSize("default_lining").width
border.color: UM.Theme.getColor("lining")
radius: UM.Theme.getSize("default_radius").width
}
contentItem: Item {}
onContentItemChanged:
{
// Since we want the size of the content to be set by the size of the content,
// we need to do it like this.
content.width = contentItem.width + 2 * content.padding
content.height = contentItem.height + 2 * content.padding
}
}
// DO NOT MOVE UP IN THE CODE: This connection has to be here, after the definition of the content item.
// Apparently the order in which these are handled matters and so the height is correctly updated if this is here.
Connections
{
// Since it could be that the content is dynamically populated, we should also take these changes into account.
target: content.contentItem
onWidthChanged: content.width = content.contentItem.width + 2 * content.padding
onHeightChanged: content.height = content.contentItem.height + 2 * content.padding
}
}