GitHub-Proxy/Cura
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/Ultimaker/Cura synced 2025-08-12 17:59:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added background padding to expandable component

Browse Source 
CURA-5785
This commit is contained in:
Jaime van Kessel 2018-11-09 14:31:06 +01:00
parent 2adb79aa39
commit 1d775c984e
1 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
resources/qml/ExpandableComponent.qml
View File

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