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.plasma.core 2.0 as PlasmaCore
0011
0012 /**
0013  * Ignores the theme's listItem margins, and uses custom highlight(pressed) area.
0014  * Could break some themes but the majority look fine.
0015  * Also includes a separator to be used in sections.
0016  */
0017 MouseArea {
0018     id: listItem
0019
0020     property bool checked: false
0021     property bool separator: false
0022     property rect highlightRect: Qt.rect(0, 0, width, height)
0023
0024     width: parent.width
0025
0026     // Sections have spacing above but not below. Will use 2 of them below.
0027     height: separator ? separatorLine.height + PlasmaCore.Units.smallSpacing * 3 : parent.height
0028     hoverEnabled: true
0029
0030     PlasmaCore.Svg {
0031         id: lineSvg
0032         imagePath: "widgets/line"
0033     }
0034     PlasmaCore.SvgItem {
0035         id: separatorLine
0036         anchors {
0037             horizontalCenter: parent.horizontalCenter
0038             top: parent.top
0039             topMargin: PlasmaCore.Units.smallSpacing
0040         }
0041         elementId: "horizontal-line"
0042         width: parent.width - PlasmaCore.Units.gridUnit * 2
0043         svg: lineSvg
0044         visible: separator
0045     }
0046
0047     PlasmaCore.FrameSvgItem {
0048         id : background
0049         imagePath: "widgets/listitem"
0050         prefix: "normal"
0051         anchors.fill: parent
0052         visible: separator ? false : true
0053     }
0054
0055     PlasmaCore.FrameSvgItem {
0056         id : pressed
0057         imagePath: "widgets/listitem"
0058         prefix: "pressed"
0059         opacity: checked ? 1 : 0
0060         Behavior on opacity { NumberAnimation { duration: PlasmaCore.Units.shortDuration } }
0061
0062         x: highlightRect.x
0063         y: highlightRect.y
0064         height: highlightRect.height
0065         width: highlightRect.width
0066     }
0067 }