blob: 0ed0e59c33b5bacfeb0756cb0bb2bad564eaaf52 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
import QtQuick
import QtQuick.Layouts
import qs.Common
import qs.Widgets
ColumnLayout {
id: root
required property string title
property string description: ""
property bool expanded: false
property bool showBackground: false
property alias headerColor: headerRect.color
signal toggleRequested
spacing: Theme.spacingS
Layout.fillWidth: true
Rectangle {
id: headerRect
Layout.fillWidth: true
Layout.preferredHeight: Math.max(titleRow.implicitHeight + Theme.paddingM * 2, 48)
radius: Theme.cornerRadius
color: "transparent"
RowLayout {
id: titleRow
anchors.fill: parent
anchors.leftMargin: Theme.paddingM
anchors.rightMargin: Theme.paddingM
spacing: Theme.spacingM
StyledText {
text: root.title
font.pixelSize: Theme.fontSizeLarge
font.weight: Font.Medium
Layout.fillWidth: true
}
DankIcon {
name: "expand_more"
size: Theme.iconSizeSmall
rotation: root.expanded ? 180 : 0
Behavior on rotation {
enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
DankAnim {
duration: Theme.shortDuration
easing.bezierCurve: Theme.expressiveCurves.standard
}
}
}
}
StateLayer {
anchors.fill: parent
onClicked: {
root.toggleRequested();
root.expanded = !root.expanded;
}
}
}
default property alias content: contentColumn.data
Item {
id: contentWrapper
Layout.fillWidth: true
Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Theme.spacingS * 2) : 0
clip: true
Behavior on Layout.preferredHeight {
enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
DankAnim {
duration: Theme.expressiveDurations.expressiveDefaultSpatial
easing.bezierCurve: Theme.expressiveCurves.standard
}
}
Rectangle {
id: backgroundRect
anchors.fill: parent
radius: Theme.cornerRadius
color: Theme.surfaceContainer
opacity: root.showBackground && root.expanded ? 1.0 : 0.0
visible: root.showBackground
Behavior on opacity {
enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
DankAnim {
duration: Theme.shortDuration
easing.bezierCurve: Theme.expressiveCurves.standard
}
}
}
ColumnLayout {
id: contentColumn
anchors.left: parent.left
anchors.right: parent.right
y: Theme.spacingS
anchors.leftMargin: Theme.paddingM
anchors.rightMargin: Theme.paddingM
anchors.bottomMargin: Theme.spacingS
spacing: Theme.spacingS
opacity: root.expanded ? 1.0 : 0.0
Behavior on opacity {
enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
DankAnim {
duration: Theme.shortDuration
easing.bezierCurve: Theme.expressiveCurves.standard
}
}
StyledText {
id: descriptionText
Layout.fillWidth: true
Layout.topMargin: root.description !== "" ? Theme.spacingXS : 0
Layout.bottomMargin: root.description !== "" ? Theme.spacingS : 0
visible: root.description !== ""
text: root.description
color: Theme.surfaceTextSecondary
font.pixelSize: Theme.fontSizeSmall
wrapMode: Text.Wrap
}
}
}
}
|