ListItem should be clickable - promote ListPressArea to ListItem

Remove all superfluous ListPressArea and reconnect any dependent logic to the ListItem Part of #1818
victronenergy · Jan 22, 2025 · eed4b6e · eed4b6e
1 parent 8dff051
commit eed4b6e
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 87 deletions.
diff --git a/components/listitems/ListLink.qml b/components/listitems/ListLink.qml
@@ -19,8 +19,6 @@ ListItem {
 
 	readonly property int mode: Qt.platform.os == "wasm" ? VenusOS.ListLink_Mode_LinkButton : VenusOS.ListLink_Mode_QRCode
 
-	down: pressArea.containsPress
-
 	content.children: [
 		SecondaryListLabel {
 			visible: root.mode === VenusOS.ListLink_Mode_LinkButton
@@ -37,7 +35,7 @@ ListItem {
 			anchors.verticalCenter: parent.verticalCenter
 			source: "qrc:/images/icon_open_link_32.svg"
 			rotation: 180
-			color: pressArea.containsPress ? Theme.color_listItem_down_forwardIcon : Theme.color_listItem_forwardIcon
+			color: root.down ? Theme.color_listItem_down_forwardIcon : Theme.color_listItem_forwardIcon
 		},
 
 		Item {
@@ -66,13 +64,8 @@ ListItem {
 		}
 	]
 
-	ListPressArea {
-		id: pressArea
-
-		enabled: root.mode === VenusOS.ListLink_Mode_LinkButton
-		radius: backgroundRect.radius
-		anchors.fill: root.backgroundRect
-		onClicked: {
+	onClicked: {
+		if(root.mode === VenusOS.ListLink_Mode_LinkButton) {
 			BackendConnection.openUrl(root.url)
 		}
 	}

diff --git a/components/listitems/core/ListButton.qml b/components/listitems/core/ListButton.qml
@@ -13,8 +13,6 @@ ListItem {
 	readonly property alias button: button
 	property alias secondaryText: button.text
 
-	signal clicked()
-
 	enabled: userHasWriteAccess
 
 	content.children: [

diff --git a/components/listitems/core/ListItem.qml b/components/listitems/core/ListItem.qml
@@ -14,8 +14,8 @@ Item {
 	property alias content: content
 	property alias bottomContent: bottomContent
 	property alias bottomContentChildren: bottomContent.children
-	property bool down
-	property bool flat
+	property bool down: pressArea.containsPress
+	property bool flat: false
 	property alias backgroundRect: backgroundRect
 	property int leftPadding: flat ? Theme.geometry_listItem_flat_content_horizontalMargin : Theme.geometry_listItem_content_horizontalMargin
 	property int rightPadding: flat ? Theme.geometry_listItem_flat_content_horizontalMargin : Theme.geometry_listItem_content_horizontalMargin
@@ -34,10 +34,23 @@ Item {
 				? VenusOS.ListItem_BottomContentSizeMode_Compact
 				: VenusOS.ListItem_BottomContentSizeMode_Stretch
 
+	signal clicked()
+
 	visible: preferredVisible && userHasReadAccess
 	implicitHeight: preferredVisible && userHasReadAccess ? (contentLayout.height + Theme.geometry_gradientList_spacing) : 0
 	implicitWidth: parent ? parent.width : 0
 
+	ListPressArea {
+		id: pressArea
+
+		// this is the added one Mike!!
+		// Note: this doesn't fill the root - its height is less the gradient list spacing
+
+		anchors.fill: backgroundRect
+		radius: backgroundRect.radius
+		onClicked: root.clicked() // hmm but do we want this or not?
+	}
+
 	ListItemBackground {
 		id: backgroundRect
 

diff --git a/components/listitems/core/ListNavigation.qml b/components/listitems/core/ListNavigation.qml
@@ -14,9 +14,6 @@ ListItem {
 	property alias secondaryLabel: secondaryLabel
 	property alias icon: icon
 
-	signal clicked()
-
-	down: pressArea.containsPress
 	enabled: userHasReadAccess
 
 	content.children: [
@@ -38,16 +35,8 @@ ListItem {
 			anchors.verticalCenter: parent.verticalCenter
 			source: "qrc:/images/icon_arrow_32.svg"
 			rotation: 180
-			color: pressArea.containsPress ? Theme.color_listItem_down_forwardIcon : Theme.color_listItem_forwardIcon
+			color: root.down ? Theme.color_listItem_down_forwardIcon : Theme.color_listItem_forwardIcon
 			visible: root.enabled
 		}
 	]
-
-	ListPressArea {
-		id: pressArea
-
-		anchors.fill: parent.backgroundRect
-		radius: backgroundRect.radius
-		onClicked: root.clicked()
-	}
 }
diff --git a/components/listitems/core/ListRadioButton.qml b/components/listitems/core/ListRadioButton.qml
@@ -13,9 +13,6 @@ ListItem {
 	property alias checked: radioButton.checked
 	property alias radioButton: radioButton
 
-	signal clicked()
-
-	down: pressArea.containsPress || radioButton.down
 	enabled: userHasWriteAccess
 
 	content.children: [
@@ -26,12 +23,4 @@ ListItem {
 			onClicked: root.clicked()
 		}
 	]
-
-	ListPressArea {
-		id: pressArea
-
-		anchors.fill: parent.backgroundRect
-		radius: backgroundRect.radius
-		onClicked: root.clicked()
-	}
 }
diff --git a/components/listitems/core/ListSwitch.qml b/components/listitems/core/ListSwitch.qml
@@ -19,22 +19,6 @@ ListItem {
 	property int valueTrue: 1
 	property int valueFalse: 0
 
-	signal clicked()
-
-	function _setChecked(c) {
-		if (updateDataOnClick) {
-			if (root.dataItem.uid.length > 0) {
-				if (invertSourceValue) {
-					dataItem.setValue(c ? valueFalse : valueTrue)
-				} else {
-					dataItem.setValue(c ? valueTrue : valueFalse)
-				}
-			}
-		}
-		clicked()
-	}
-
-	down: pressArea.containsPress
 	enabled: userHasWriteAccess && (dataItem.uid === "" || dataItem.isValid)
 
 	content.children: [
@@ -51,16 +35,20 @@ ListItem {
 
 			checked: invertSourceValue ? dataItem.value === valueFalse : dataItem.value === valueTrue
 			checkable: false
-			onClicked: root._setChecked(!checked)
+			onClicked: root.clicked()
 		}
 	]
 
-	ListPressArea {
-		id: pressArea
-
-		anchors.fill: parent.backgroundRect
-		radius: backgroundRect.radius
-		onClicked: root._setChecked(!switchItem.checked)
+	onClicked: {
+		if (updateDataOnClick) {
+			if (root.dataItem.uid.length > 0) {
+				if (invertSourceValue) {
+					dataItem.setValue(c ? valueFalse : valueTrue)
+				} else {
+					dataItem.setValue(c ? valueTrue : valueFalse)
+				}
+			}
+		}
 	}
 
 	VeQuickItem {

diff --git a/components/widgets/DcLoadsWidget.qml b/components/widgets/DcLoadsWidget.qml
@@ -55,19 +55,13 @@ OverviewWidget {
 						Units.getCombinedDisplayText(VenusOS.Units_Watt, dcDevice.power),
 					]
 
+					onClicked: root._showSettingsPage(device)
+
 					DcDevice {
 						id: dcDevice
 						serviceUid: deviceDelegate.device.serviceUid
 					}
 
-					ListPressArea {
-						id: delegatePressArea
-
-						anchors.fill: parent.backgroundRect
-						radius: backgroundRect.radius
-						onClicked: root._showSettingsPage(device)
-					}
-
 					CP.ColorImage {
 						parent: deviceDelegate.content
 						anchors.verticalCenter: parent.verticalCenter

diff --git a/pages/settings/PageSettingsVecanDevices.qml b/pages/settings/PageSettingsVecanDevices.qml
@@ -34,20 +34,11 @@ Page {
 				anchors.verticalCenter: parent.verticalCenter
 				source: "qrc:/images/icon_arrow_32.svg"
 				rotation: 180
-				color: listDelegate.containsPress ? Theme.color_listItem_down_forwardIcon : Theme.color_listItem_forwardIcon
+				color: listDelegate.down ? Theme.color_listItem_down_forwardIcon : Theme.color_listItem_forwardIcon
 			}
 
-			ListPressArea {
-				id: mouseArea
-
-				parent: listDelegate.backgroundRect
-				radius: listDelegate.backgroundRect.radius
-				anchors.fill: parent
-				onClicked: {
-					Global.pageManager.pushPage("/pages/settings/PageSettingsVecanDevice.qml",
-						{ bindPrefix: model.uid, title: text })
-				}
-			}
+			onClicked: Global.pageManager.pushPage("/pages/settings/PageSettingsVecanDevice.qml",
+												   { bindPrefix: model.uid, title: text })
 
 			VeQuickItem {
 				id: modelName

diff --git a/pages/settings/debug/PageDebug.qml b/pages/settings/debug/PageDebug.qml
@@ -15,19 +15,12 @@ Page {
 			component SwitchItem : ListItem {
 				id: switchItem
 
-				signal clicked
 				property alias checked: childSwitch.checked
 
 				content.children: Switch {
 					id: childSwitch
 					onClicked: switchItem.clicked()
 				}
-
-				ListPressArea {
-					anchors.fill: switchItem.backgroundRect
-					radius: switchItem.backgroundRect.radius
-					onClicked: switchItem.clicked()
-				}
 			}
 
 			ListText {