137 lines
3.1 KiB
QML
137 lines
3.1 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
import ZShell.Config
|
|
import qs.Services
|
|
|
|
ColumnLayout {
|
|
id: root
|
|
|
|
default property alias content: contentColumn.data
|
|
property string description: ""
|
|
property bool expanded: false
|
|
property bool nested: false
|
|
property bool showBackground: false
|
|
required property string title
|
|
|
|
signal toggleRequested
|
|
|
|
Layout.fillWidth: true
|
|
spacing: Tokens.spacing.small
|
|
|
|
Item {
|
|
id: sectionHeaderItem
|
|
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: Math.max(titleRow.implicitHeight + Tokens.padding.normal * 2, 48)
|
|
|
|
RowLayout {
|
|
id: titleRow
|
|
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: Tokens.padding.normal
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: Tokens.padding.normal
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: Tokens.spacing.normal
|
|
|
|
CustomText {
|
|
font.pointSize: Tokens.font.size.larger
|
|
font.weight: 500
|
|
text: root.title
|
|
}
|
|
|
|
Item {
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
MaterialIcon {
|
|
color: Colors.palette.m3onSurfaceVariant
|
|
font.pointSize: Tokens.font.size.normal
|
|
rotation: root.expanded ? 180 : 0
|
|
text: "expand_more"
|
|
|
|
Behavior on rotation {
|
|
Anim {
|
|
duration: Tokens.anim.durations.small
|
|
easing.bezierCurve: Tokens.anim.curves.standard
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
StateLayer {
|
|
anchors.fill: parent
|
|
color: Colors.palette.m3onSurface
|
|
radius: Tokens.rounding.normal
|
|
showHoverBackground: false
|
|
|
|
onClicked: {
|
|
root.toggleRequested();
|
|
root.expanded = !root.expanded;
|
|
}
|
|
}
|
|
}
|
|
|
|
Item {
|
|
id: contentWrapper
|
|
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Tokens.spacing.small * 2) : 0
|
|
clip: true
|
|
|
|
Behavior on Layout.preferredHeight {
|
|
Anim {
|
|
easing.bezierCurve: Tokens.anim.curves.standard
|
|
}
|
|
}
|
|
|
|
CustomRect {
|
|
id: backgroundRect
|
|
|
|
anchors.fill: parent
|
|
color: Colors.transparency.enabled ? Colors.layer(Colors.palette.m3surfaceContainer, root.nested ? 3 : 2) : (root.nested ? Colors.palette.m3surfaceContainerHigh : Colors.palette.m3surfaceContainer)
|
|
opacity: root.showBackground && root.expanded ? 1.0 : 0.0
|
|
radius: Tokens.rounding.normal
|
|
visible: root.showBackground
|
|
|
|
Behavior on opacity {
|
|
Anim {
|
|
easing.bezierCurve: Tokens.anim.curves.standard
|
|
}
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
id: contentColumn
|
|
|
|
anchors.bottomMargin: Tokens.spacing.small
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: Tokens.padding.normal
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: Tokens.padding.normal
|
|
opacity: root.expanded ? 1.0 : 0.0
|
|
spacing: Tokens.spacing.small
|
|
y: Tokens.spacing.small
|
|
|
|
Behavior on opacity {
|
|
Anim {
|
|
easing.bezierCurve: Tokens.anim.curves.standard
|
|
}
|
|
}
|
|
|
|
CustomText {
|
|
id: descriptionText
|
|
|
|
Layout.bottomMargin: root.description !== "" ? Tokens.spacing.small : 0
|
|
Layout.fillWidth: true
|
|
Layout.topMargin: root.description !== "" ? Tokens.spacing.smaller : 0
|
|
color: Colors.palette.m3onSurfaceVariant
|
|
font.pointSize: Tokens.font.size.small
|
|
text: root.description
|
|
visible: root.description !== ""
|
|
wrapMode: Text.Wrap
|
|
}
|
|
}
|
|
}
|
|
}
|