1import QtQuick 2.9
2import QtQuick.Controls 2.2
3import QtQuick.Layouts 1.3
4import QtQuick.Controls.Material 2.2
5import QtGraphicalEffects 1.0
6
7Pane {
8
9    id: expansionPanel
10
11    default property alias children: inner_space.data
12
13    readonly property int dynamicWidth: 648
14    readonly property int dynamicMargin: 32
15
16    property string label
17    property string description
18    property string keyImage
19    property string backgroundColor: defaultElevated
20
21    property bool isEnabled: true
22    property bool isExpanded: false
23    property bool isTopPanel: false
24    property bool isBottomPanel: false
25    property bool isSectionTitle: false
26    property bool dropShadow: true
27
28    property string toolButtonIcon
29    property string toolButtonToolTip
30    property alias toolButton: toolButton
31    property alias expandedContent: expandedContent
32
33    Layout.alignment: Qt.AlignCenter | Qt.AlignTop
34    Layout.fillWidth: true
35    Layout.minimumHeight: isExpanded ? panelHeader.height + expandedContent.height + 40 : panelHeader.height + 20
36    Layout.maximumWidth: dynamicWidth + dynamicMargin
37
38    Layout.leftMargin: -16
39    Layout.rightMargin: -16
40
41    Layout.topMargin: isExpanded && dropShadow && !isTopPanel ? 9 : -4
42    Layout.bottomMargin: isExpanded && dropShadow && !isBottomPanel ? 11 : -3
43    bottomPadding: panelDescription.lineCount > 1 ? 8 : 6
44
45    Material.background: backgroundColor
46    Material.elevation: dropShadow ? 1 : 0
47
48    function expandAction() {
49        function collapseAll() {
50            for (var i = 0; i < parent.children.length; ++i) {
51                if (!!parent.children[i] &&
52                        parent.children[i].toString().indexOf("StyledExpansionPanel") === 0) {
53                    parent.children[i].isExpanded = false
54                }
55            }
56        }
57
58        if (isEnabled) {
59            if (isExpanded) {
60                isExpanded = false
61            } else {
62                collapseAll()
63                isExpanded = true
64            }
65        }
66    }
67
68    MouseArea {
69        onClicked: expandAction()
70        anchors.top: parent.top
71        anchors.left: parent.left
72        anchors.right: parent.right
73        anchors.leftMargin: -16
74        anchors.rightMargin: -16
75        anchors.topMargin: -16
76        height: panelHeader.height + 40
77        enabled: isEnabled
78        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
79    }
80
81    ColumnLayout {
82
83        anchors.horizontalCenter: parent.horizontalCenter
84        Layout.alignment: Qt.AlignLeft | Qt.AlignTop
85        width: parent.width - dynamicMargin < dynamicWidth ? parent.width - dynamicMargin : dynamicWidth
86        spacing: 16
87
88        RowLayout {
89            Layout.leftMargin: -12
90            Layout.rightMargin: -24
91            id: panelHeader
92
93            Rectangle {
94                id: rectangle
95                width: 40
96                height: 40
97                color: formHighlightItem
98                radius: width * 0.5
99                visible: keyImage
100                Layout.rightMargin: 8
101                Layout.topMargin: 0
102                Layout.bottomMargin: 6
103                Image {
104                    id: key
105                    anchors.horizontalCenter: parent.horizontalCenter
106                    anchors.verticalCenter: parent.verticalCenter
107                    sourceSize.width: 32
108                    source: keyImage
109                    fillMode: Image.PreserveAspectFit
110                    visible: keyImage && !!yubiKey.currentDevice
111                }
112                StyledImage {
113                    anchors.horizontalCenter: parent.horizontalCenter
114                    anchors.verticalCenter: parent.verticalCenter
115                    iconWidth: 21
116                    iconHeight: 23
117                    source: keyImage
118                    visible: keyImage && !key.visible
119                    color: formImageOverlay
120                }
121            }
122
123            ColumnLayout {
124                Layout.fillHeight: true
125                Layout.fillWidth: true
126                Layout.alignment: Qt.AlignLeft | Qt.AlignTop
127                Layout.topMargin: 0
128                Layout.bottomMargin: 0
129                visible: label
130
131                Label {
132                    visible: isSectionTitle
133                    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
134                    text: label
135                    color: Material.primary
136                    font.pixelSize: 14
137                    font.weight: Font.Medium
138                    Layout.fillWidth: true
139                }
140
141                Label {
142                    visible: !isSectionTitle
143                    text: label
144                    font.pixelSize: 13
145                    font.bold: false
146                    color: primaryColor
147                    opacity: highEmphasis
148                    Layout.fillWidth: true
149                }
150                Label {
151                    id: panelDescription
152                    Layout.alignment: Qt.AlignRight | Qt.AlignTop
153                    Layout.fillWidth: true
154                    font.pixelSize: 13
155                    color: primaryColor
156                    opacity: lowEmphasis
157                    text: description
158                    wrapMode: Text.WordWrap
159                    maximumLineCount: isExpanded ? 4 : 2
160                    elide: Text.ElideRight
161                    lineHeight: 1.1
162                    visible: description
163                }
164            }
165
166            ToolButton {
167                id: expandButton
168                onClicked: expandAction()
169                icon.width: 24
170                icon.source: isExpanded ? "../images/up.svg" : "../images/down.svg"
171                icon.color: primaryColor
172                opacity: hovered ? fullEmphasis : lowEmphasis
173                visible: isEnabled
174                MouseArea {
175                    anchors.fill: parent
176                    cursorShape: Qt.PointingHandCursor
177                    enabled: false
178                }
179                ToolTip {
180                    text: isExpanded ? qsTr("Show less") : qsTr("Show more")
181                    delay: 1000
182                    parent: expandButton
183                    visible: parent.hovered
184                    Material.foreground: toolTipForeground
185                    Material.background: toolTipBackground
186                }
187            }
188
189            ToolButton {
190                id: toolButton
191                icon.width: 24
192                icon.source: toolButtonIcon
193                icon.color: primaryColor
194                opacity: hovered ? fullEmphasis : lowEmphasis
195                visible: !isEnabled && !!toolButtonIcon
196                MouseArea {
197                    anchors.fill: parent
198                    cursorShape: Qt.PointingHandCursor
199                    enabled: false
200                }
201                ToolTip {
202                    text: toolButtonToolTip
203                    delay: 1000
204                    parent: toolButton
205                    visible: parent.hovered
206                    Material.foreground: toolTipForeground
207                    Material.background: toolTipBackground
208                }
209            }
210        }
211
212        RowLayout {
213            id: expandedContent
214            visible: isExpanded
215            Layout.leftMargin: -12
216            Layout.rightMargin: -12
217            ColumnLayout {
218                id: inner_space
219            }
220        }
221    }
222}
223