treeview/qml/TreeViewDecoration.qml

0001 /*
0002  *  SPDX-FileCopyrightText: 2020 Marco Martin <mart@kde.org>
0003  *
0004  *  SPDX-License-Identifier: LGPL-2.0-or-later
0005  */
0006
0007 import QtQuick 2.6
0008 import QtQuick.Layouts 1.4
0009 import QtQuick.Controls 2.2 as QQC2
0010 import QtQuick.Templates 2.2 as T2
0011 import org.kde.kitemmodels 1.0
0012 import org.kde.kirigami 2.14 as Kirigami
0013
0014 /**
0015  * The tree expander decorator for item views.
0016  *
0017  * It will have a "> v" expander button graphics, and will have indentation on the left
0018  * depending on the level of the tree the item is in
0019  */
0020 RowLayout {
0021     /**
0022      * This property holds the delegate there this decoration will live in.
0023      * It needs to be assigned explicitly by the developer.
0024      */
0025     property T2.ItemDelegate parentDelegate
0026
0027     /**
0028      * This property holds the KDescendantsProxyModel the view is showing.
0029      * It needs to be assigned explicitly by the developer.
0030      */
0031     property KDescendantsProxyModel model
0032
0033     /**
0034      * This property holds the color of the decoration highlight.
0035      */
0036     property color decorationHighlightColor
0037
0038     Layout.topMargin: -parentDelegate.topPadding
0039     Layout.bottomMargin: -parentDelegate.bottomPadding
0040     Repeater {
0041         model: kDescendantLevel - 1
0042         delegate: Item {
0043             Layout.preferredWidth: controlRoot.width
0044             Layout.fillHeight: true
0045
0046             Rectangle {
0047                 anchors {
0048                     horizontalCenter: parent.horizontalCenter
0049                     top: parent.top
0050                     bottom: parent.bottom
0051                 }
0052                 visible: kDescendantHasSiblings[modelData]
0053                 color: Kirigami.Theme.textColor
0054                 opacity: 0.5
0055                 width: 1
0056             }
0057         }
0058     }
0059     T2.Button {
0060         id: controlRoot
0061         Layout.preferredWidth: Kirigami.Units.gridUnit
0062         Layout.fillHeight: true
0063         enabled: kDescendantExpandable
0064         onClicked: model.toggleChildren(index)
0065         contentItem: Item {
0066             id: styleitem
0067             implicitWidth: Kirigami.Units.gridUnit
0068             Rectangle {
0069                 anchors {
0070                     horizontalCenter: parent.horizontalCenter
0071                     top: parent.top
0072                     bottom: expander.visible ? expander.top : parent.verticalCenter
0073                 }
0074                 color: Kirigami.Theme.textColor
0075                 opacity: 0.5
0076                 width: 1
0077             }
0078             Kirigami.Icon {
0079                 id: expander
0080                 anchors.centerIn: parent
0081                 width: Kirigami.Units.iconSizes.small
0082                 height: width
0083                 source: kDescendantExpanded ? "go-down-symbolic" : (Qt.application.layoutDirection == Qt.RightToLeft ? "go-previous-symbolic" : "go-next-symbolic")
0084                 isMask: true
0085                 color: controlRoot.hovered ? decorationLayout.decorationHighlightColor ? decorationLayout.decorationHighlightColor : Kirigami.Theme.highlightColor : Kirigami.Theme.textColor
0086                 Kirigami.Theme.highlightColor : Kirigami.Theme.textColor
0087                 Behavior on color { ColorAnimation { duration: Kirigami.Units.shortDuration; easing.type: Easing.InOutQuad } }
0088                 visible: kDescendantExpandable
0089             }
0090             Rectangle {
0091                 anchors {
0092                     horizontalCenter: parent.horizontalCenter
0093                     top: expander.visible ? expander.bottom : parent.verticalCenter
0094                     bottom: parent.bottom
0095                 }
0096                 visible: kDescendantHasSiblings[kDescendantHasSiblings.length - 1]
0097                 color: Kirigami.Theme.textColor
0098                 opacity: 0.5
0099                 width: 1
0100             }
0101             Rectangle {
0102                 anchors {
0103                     verticalCenter: parent.verticalCenter
0104                     left: expander.visible ? expander.right : parent.horizontalCenter
0105                     right: parent.right
0106                 }
0107                 color: Kirigami.Theme.textColor
0108                 opacity: 0.5
0109                 height: 1
0110             }
0111         }
0112         background: Item {}
0113     }
0114 }