134 lines
4.3 KiB
QML
134 lines
4.3 KiB
QML
/*
|
|
* This file is part of the Flowee project
|
|
* Copyright (C) 2021 Tom Zander <tom@flowee.org>
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
import QtQuick 2.11
|
|
import QtQuick.Controls 2.11
|
|
import QtQuick.Layouts 1.11
|
|
|
|
Item {
|
|
id: root
|
|
|
|
property bool collapsable: true
|
|
property bool collapsed: false
|
|
/**
|
|
* This is like collapsed, but when the user changes the groupbox collapse-state, this is updated.
|
|
* We never overwrite the 'collapsed' property to enable binding it to a model, this is the effective
|
|
* collapsed state taking both changes from the `collapsed` property and from user input.
|
|
*/
|
|
property bool effectiveCollapsed: collapsed
|
|
property alias title: titleLabel.text
|
|
property alias summary: summaryLabel.text
|
|
default property alias content: child.children
|
|
property alias columns: child.columns
|
|
activeFocusOnTab: collapsable
|
|
clip: true
|
|
|
|
onCollapsedChanged: effectiveCollapsed = collapsed
|
|
|
|
width: 200 // should be changed by user
|
|
implicitHeight: arrowPoint.height + (effectiveCollapsed ? 0 : child.implicitHeight + 25) // 25 = 15 top, 5 bottom of content area
|
|
|
|
Rectangle { // the outline
|
|
width: parent.width
|
|
y: titleArea.visible ? titleLabel.height / 2 : arrowPoint.height / 2
|
|
height: root.effectiveCollapsed ? 1 : parent.height - y;
|
|
color: "#00000000"
|
|
border.color: titleLabel.palette.button
|
|
border.width: 2
|
|
radius: 3
|
|
}
|
|
MouseArea {
|
|
width: parent.width
|
|
height: 20
|
|
enabled: root.collapsable
|
|
visible: enabled // this line is needed to make the cursor shape not be set when not enabled (Qt bug)
|
|
onClicked: root.effectiveCollapsed = !root.effectiveCollapsed
|
|
cursorShape: Qt.PointingHandCursor
|
|
}
|
|
|
|
Rectangle {
|
|
id: titleArea
|
|
visible: titleLabel.text !== ""
|
|
color: titleLabel.palette.window
|
|
width: titleLabel.width + 18 + (summaryLabel.visible ? summaryLabel.width + 20 : 0)
|
|
height: titleLabel.height
|
|
anchors.left: arrowPoint.right
|
|
Label {
|
|
id: titleLabel
|
|
x: 12
|
|
|
|
// focus indicator
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
anchors.leftMargin: -2
|
|
anchors.rightMargin: -2
|
|
color: "#00000000"
|
|
border.color: parent.palette.highlight
|
|
border.width: 2
|
|
visible: root.activeFocus
|
|
}
|
|
}
|
|
|
|
Label {
|
|
id: summaryLabel
|
|
anchors.left: titleLabel.right
|
|
anchors.leftMargin: 20
|
|
visible: root.effectiveCollapsed && text !== ""
|
|
font.italic: true
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: arrowPoint
|
|
visible: parent.collapsable
|
|
color: titleLabel.palette.window
|
|
width: point.width + 12
|
|
height: point.height + 2
|
|
x: 6
|
|
y: 2
|
|
ArrowPoint {
|
|
id: point
|
|
x: 10
|
|
color: Pay.useDarkSkin ? "white" : "black"
|
|
rotation: root.effectiveCollapsed ? 0 : 90
|
|
transformOrigin: Item.Center
|
|
|
|
Behavior on rotation { NumberAnimation {} }
|
|
}
|
|
}
|
|
|
|
GridLayout { // user set content
|
|
id: child
|
|
x: 10
|
|
y: titleArea.height + 10
|
|
width: root.width - 20
|
|
height: implicitHeight
|
|
visible: !root.effectiveCollapsed
|
|
columns: 1
|
|
}
|
|
|
|
Behavior on implicitHeight { NumberAnimation { } }
|
|
Keys.onPressed: {
|
|
if (event.key === Qt.Key_Space || event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
|
|
if (root.collapsable) {
|
|
root.effectiveCollapsed = !root.effectiveCollapsed
|
|
event.accepted = true
|
|
}
|
|
}
|
|
}
|
|
}
|