contents/ui/ListItem.qml

0001 /*
0002     SPDX-FileCopyrightText: 2010 Marco Martin <notmart@gmail.com>
0003     SPDX-FileCopyrightText: 2016 Jan Grulich <jgrulich@redhat.com>
0004     SPDX-FileCopyrightText: 2020 George Vogiatzis <gvgeo@protonmail.com>
0005
0006     SPDX-License-Identifier: LGPL-2.1-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
0007 */
0008
0009 import QtQuick 2.1
0010 import org.kde.kirigami 2.20 as Kirigami
0011 import org.kde.ksvg 1.0 as KSvg
0012
0013 /**
0014  * Ignores the theme's listItem margins, and uses custom highlight(pressed) area.
0015  * Could break some themes but the majority look fine.
0016  * Also includes a separator to be used in sections.
0017  */
0018 MouseArea {
0019     id: listItem
0020
0021     property bool checked: false
0022     property bool separator: false
0023     property rect highlightRect: Qt.rect(0, 0, width, height)
0024
0025     width: parent.width
0026
0027     // Sections have spacing above but not below. Will use 2 of them below.
0028     height: separator ? separatorLine.height + Kirigami.Units.smallSpacing * 3 : parent.height
0029     hoverEnabled: true
0030
0031     KSvg.SvgItem {
0032         id: separatorLine
0033         anchors {
0034             horizontalCenter: parent.horizontalCenter
0035             top: parent.top
0036             topMargin: Kirigami.Units.smallSpacing
0037         }
0038         imagePath: "widgets/line"
0039         elementId: "horizontal-line"
0040         width: parent.width - Kirigami.Units.gridUnit * 2
0041         visible: separator
0042     }
0043
0044     KSvg.FrameSvgItem {
0045         id: background
0046         imagePath: "widgets/listitem"
0047         prefix: "normal"
0048         anchors.fill: parent
0049         visible: separator ? false : true
0050     }
0051
0052     KSvg.FrameSvgItem {
0053         id: pressed
0054         imagePath: "widgets/listitem"
0055         prefix: "pressed"
0056         opacity: checked ? 1 : 0
0057         Behavior on opacity { NumberAnimation { duration: Kirigami.Units.shortDuration } }
0058
0059         x: highlightRect.x
0060         y: highlightRect.y
0061         height: highlightRect.height
0062         width: highlightRect.width
0063     }
0064 }