qml/app/Collapsible.qml

0001 /**
0002  * \file Collapsible.qml
0003  * Base component for collapsibles.
0004  *
0005  * \b Project: Kid3
0006  * \author Urs Fleisch
0007  * \date 16 Feb 2015
0008  *
0009  * Copyright (C) 2015-2018  Urs Fleisch
0010  *
0011  * This program is free software; you can redistribute it and/or modify
0012  * it under the terms of the GNU Lesser General Public License as published by
0013  * the Free Software Foundation; version 3.
0014  *
0015  * This program is distributed in the hope that it will be useful,
0016  * but WITHOUT ANY WARRANTY; without even the implied warranty of
0017  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
0018  * GNU Lesser General Public License for more details.
0019  *
0020  * You should have received a copy of the GNU Lesser General Public License
0021  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
0022  */
0023
0024 import QtQuick 2.11
0025 import QtQuick.Controls 2.4
0026
0027 Column {
0028   property alias text: label.text
0029   property alias checked: checkBox.checked
0030   property alias buttons: buttonContainer.data
0031   property alias content: contentContainer.content
0032   property alias labelColor: label.color
0033
0034   Rectangle {
0035     id: collapsibleRect
0036
0037     height: constants.rowHeight
0038     width: parent.width
0039
0040     gradient: Gradient {
0041       GradientStop { position: 0.0; color: "#666" }
0042       GradientStop { position: 1.0; color: "#333" }
0043     }
0044
0045     Item {
0046       id: checkBox
0047       anchors.left: parent.left
0048       anchors.verticalCenter: parent.verticalCenter
0049
0050       property bool checked
0051
0052       width: constants.controlHeight
0053       height: constants.controlHeight
0054
0055       ScaledImage {
0056         anchors.centerIn: parent
0057         source: "../icons/" +
0058                 (checked ? "triangle_down.svg" : "triangle_right.svg")
0059       }
0060
0061       MouseArea {
0062         anchors.fill: parent
0063         onClicked: {
0064           checkBox.checked = !checkBox.checked
0065         }
0066       }
0067     }
0068     Label {
0069       id: label
0070       anchors.left: checkBox.right
0071       anchors.right: buttonContainer.left
0072       anchors.verticalCenter: parent.verticalCenter
0073       anchors.margins: constants.margins
0074       anchors.rightMargin: 0
0075       color: "#e6e6e6"
0076       clip: true
0077     }
0078     Row {
0079       id: buttonContainer
0080       anchors.right: parent.right
0081       anchors.verticalCenter: parent.verticalCenter
0082       anchors.margins: constants.margins
0083       spacing: constants.spacing
0084     }
0085   }
0086   Item {
0087     id: contentContainer
0088     property Item content
0089     anchors.left: parent.left
0090     anchors.right: parent.right
0091     width: content ? content.width : undefined
0092     height: content ? content.height : undefined
0093     onContentChanged: {
0094       if (content) content.parent = contentContainer;
0095     }
0096     visible: checked
0097   }
0098 }