/* * This file is part of the Flowee project * Copyright (C) 2021 Tom Zander * * 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 . */ 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 } } } }