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