Added background padding to expandable component

CURA-5785
This commit is contained in:
Jaime van Kessel 2018-11-09 14:31:06 +01:00
parent 2adb79aa39
commit 1d775c984e

View File

@ -1,6 +1,8 @@
import QtQuick 2.7
import QtQuick.Controls 2.3
import UM 1.2 as UM
// The expandable component has 3 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.
@ -16,8 +18,13 @@ Item
// The background color of the popup
property color popupBackgroundColor: "white"
property alias headerBackgroundColor: background.color
// How much spacing is needed around the popupItem
property alias padding: popup.padding
property alias popupPadding: popup.padding
// How much padding is needed around the header & button
property alias headerPadding: background.padding
onPopupItemChanged:
{
@ -30,7 +37,13 @@ Item
implicitHeight: 100
implicitWidth: 400
Rectangle
{
id: background
property real padding: UM.Theme.getSize("default_margin").width
color: "white"
anchors.fill: parent
Loader
{
id: headerItemLoader
@ -40,6 +53,7 @@ Item
right: collapseButton.left
top: parent.top
bottom: parent.bottom
margins: background.padding
}
}
@ -51,26 +65,28 @@ Item
right: parent.right
top: parent.top
bottom: parent.bottom
margins: background.padding
}
text: popup.visible ? "close" : "open"
onClicked: popup.visible ? popup.close() : popup.open()
}
}
Popup
{
id: popup
// Ensure that the popup is located directly below the headerItem
y: headerItemLoader.height
y: headerItemLoader.height + 2 * background.padding
// Make the popup right aligned with the rest.
x: -width + collapseButton.width + headerItemLoader.width
// Make the popup right aligned with the rest. The 3x padding is due to left, right and padding between
//the button & text.
x: -width + collapseButton.width + headerItemLoader.width + 3 * background.padding
closePolicy: Popup.CloseOnPressOutsideParent
background: Rectangle
{
id: background
color: popupBackgroundColor
}
}