Commit db6b26b0 authored by Nate Graham's avatar Nate Graham
Browse files

ExpandableListItem: port to *Handlers

We already had one TapHandler to handle left clicks and taps; we can use
another one for right-clicks too, and a HoverHandler for hover. This will
let us remove the parent MouseArea item for greater semantic correctness
and performance.
parent b3ca8b5e
Pipeline #82234 passed with stage
in 1 minute and 44 seconds
......@@ -4,7 +4,7 @@
SPDX-License-Identifier: LGPL-2.0-or-later
*/
import QtQuick 2.14
import QtQuick 2.15
import QtQuick.Layouts 1.1
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents3
......@@ -356,161 +356,163 @@ Item {
}
}
// We still need a MouseArea to handle right-click
MouseArea {
anchors.fill: parent
enabled: listItem.isEnabled
// Handle right-click for items with context menus; don't accept stylus input
// or else it steals events from the buttons on the list item
TapHandler {
enabled: listItem.isEnabled && listItem.contextMenu != undefined
acceptedPointerTypes: PointerDevice.GenericPointer | PointerDevice.Finger
acceptedButtons: Qt.RightButton
hoverEnabled: true
onContainsMouseChanged: listItem.ListView.view.currentIndex = (containsMouse ? index : -1)
// Handle right-click, if so defined
onClicked: {
if (contextMenu != undefined) {
contextMenu.visualParent = parent
contextMenu.prepare();
contextMenu.open(mouse.x, mouse.y)
return
}
onTapped: {
listItem.contextMenu.visualParent = parent
listItem.contextMenu.prepare();
// eventPoint.scenePosition.y seems to be randomly incorrect; 0 is correct more of the time
listItem.contextMenu.open(eventPoint.scenePosition.x, 0 )
return
}
}
ColumnLayout {
id: mainLayout
// Handle hover
HoverHandler {
onHoveredChanged: listItem.ListView.view.currentIndex = (hovered ? index : -1)
}
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
ColumnLayout {
id: mainLayout
spacing: 0
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
RowLayout {
id: mainRowLayout
spacing: 0
Layout.fillWidth: true
Layout.margins: PlasmaCore.Units.smallSpacing
// Otherwise it becomes taller when the button appears
Layout.minimumHeight: defaultActionButton.height
enabled: listItem.isEnabled
// Icon and optional emblem
PlasmaCore.IconItem {
id: listItemIcon
RowLayout {
id: mainRowLayout
usesPlasmaTheme: listItem.iconUsesPlasmaSVG
Layout.fillWidth: true
Layout.margins: PlasmaCore.Units.smallSpacing
// Otherwise it becomes taller when the button appears
Layout.minimumHeight: defaultActionButton.height
implicitWidth: PlasmaCore.Units.iconSizes.medium
implicitHeight: PlasmaCore.Units.iconSizes.medium
// Icon and optional emblem
PlasmaCore.IconItem {
id: listItemIcon
PlasmaCore.IconItem {
id: iconEmblem
usesPlasmaTheme: listItem.iconUsesPlasmaSVG
visible: source != undefined && source.length > 0
implicitWidth: PlasmaCore.Units.iconSizes.medium
implicitHeight: PlasmaCore.Units.iconSizes.medium
anchors.right: parent.right
anchors.bottom: parent.bottom
PlasmaCore.IconItem {
id: iconEmblem
implicitWidth: PlasmaCore.Units.iconSizes.small
implicitHeight: PlasmaCore.Units.iconSizes.small
}
visible: source != undefined && source.length > 0
anchors.right: parent.right
anchors.bottom: parent.bottom
implicitWidth: PlasmaCore.Units.iconSizes.small
implicitHeight: PlasmaCore.Units.iconSizes.small
}
}
// Title and subtitle
ColumnLayout {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
// Title and subtitle
ColumnLayout {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
spacing: 0
spacing: 0
PlasmaExtras.Heading {
id: listItemTitle
PlasmaExtras.Heading {
id: listItemTitle
visible: text.length > 0
visible: text.length > 0
Layout.fillWidth: true
Layout.fillWidth: true
level: 5
level: 5
textFormat: listItem.allowStyledText ? Text.StyledText : Text.PlainText
elide: Text.ElideRight
maximumLineCount: 1
textFormat: listItem.allowStyledText ? Text.StyledText : Text.PlainText
elide: Text.ElideRight
maximumLineCount: 1
// Even if it's the default item, only make it bold when
// there's more than one item in the list, or else there's
// only one item and it's bold, which is a little bit weird
font.weight: listItem.isDefault && listItem.ListView.view.count > 1
? Font.Bold
: Font.Normal
}
// Even if it's the default item, only make it bold when
// there's more than one item in the list, or else there's
// only one item and it's bold, which is a little bit weird
font.weight: listItem.isDefault && listItem.ListView.view.count > 1
? Font.Bold
: Font.Normal
}
PlasmaComponents3.Label {
id: listItemSubtitle
PlasmaComponents3.Label {
id: listItemSubtitle
visible: text.length > 0
font: PlasmaCore.Theme.smallestFont
visible: text.length > 0
font: PlasmaCore.Theme.smallestFont
// Otherwise colored text can be hard to see
opacity: color === PlasmaCore.Theme.textColor ? 0.7 : 1.0
// Otherwise colored text can be hard to see
opacity: color === PlasmaCore.Theme.textColor ? 0.7 : 1.0
Layout.fillWidth: true
Layout.fillWidth: true
textFormat: listItem.allowStyledText ? Text.StyledText : Text.PlainText
elide: Text.ElideRight
maximumLineCount: subtitleCanWrap ? 9999 : 1
wrapMode: subtitleCanWrap ? Text.WordWrap : Text.NoWrap
}
textFormat: listItem.allowStyledText ? Text.StyledText : Text.PlainText
elide: Text.ElideRight
maximumLineCount: subtitleCanWrap ? 9999 : 1
wrapMode: subtitleCanWrap ? Text.WordWrap : Text.NoWrap
}
}
// Busy indicator
PlasmaComponents3.BusyIndicator {
id: busyIndicator
// Busy indicator
PlasmaComponents3.BusyIndicator {
id: busyIndicator
visible: listItem.isBusy
visible: listItem.isBusy
// Otherwise it makes the list item taller when it appears
Layout.maximumHeight: defaultActionButton.implicitHeight
Layout.maximumWidth: Layout.maximumHeight
}
// Otherwise it makes the list item taller when it appears
Layout.maximumHeight: defaultActionButton.implicitHeight
Layout.maximumWidth: Layout.maximumHeight
}
// Default action button
PlasmaComponents3.ToolButton {
id: defaultActionButton
// Default action button
PlasmaComponents3.ToolButton {
id: defaultActionButton
enabled: listItem.isEnabled
visible: defaultActionButtonAction
&& listItem.defaultActionButtonVisible
&& (!busyIndicator.visible || listItem.showDefaultActionButtonWhenBusy)
}
enabled: listItem.isEnabled
visible: defaultActionButtonAction
&& listItem.defaultActionButtonVisible
&& (!busyIndicator.visible || listItem.showDefaultActionButtonWhenBusy)
}
// Expand/collapse button
PlasmaComponents3.ToolButton {
visible: listItem.hasExpandableContent
icon.name: expandedView.active? "collapse" : "expand"
// Expand/collapse button
PlasmaComponents3.ToolButton {
visible: listItem.hasExpandableContent
icon.name: expandedView.active? "collapse" : "expand"
onClicked: listItem.toggleExpanded()
}
onClicked: listItem.toggleExpanded()
}
}
// Expanded view, by default showing the actions list
Loader {
id: expandedView
// Expanded view, by default showing the actions list
Loader {
id: expandedView
visible: active
opacity: active ? 1.0 : 0
visible: active
opacity: active ? 1.0 : 0
active: false
sourceComponent: customExpandedViewContent
active: false
sourceComponent: customExpandedViewContent
Layout.fillWidth: true
Layout.margins: PlasmaCore.Units.smallSpacing
Layout.fillWidth: true
Layout.margins: PlasmaCore.Units.smallSpacing
Behavior on opacity {
NumberAnimation {
duration: PlasmaCore.Units.veryLongDuration
easing.type: Easing.InOutCubic
}
Behavior on opacity {
NumberAnimation {
duration: PlasmaCore.Units.veryLongDuration
easing.type: Easing.InOutCubic
}
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment