Rework ListItem layout and add ListLink component

CMakeLists.txt

@@ -322,6 +322,7 @@ set (VENUS_QML_MODULE_SOURCES
     components/listitems/ListFirmwareCheckButton.qml
     components/listitems/ListFirmwareVersion.qml
     components/listitems/ListGeneratorError.qml
+    components/listitems/ListLink.qml
     components/listitems/ListMqttAccessSwitch.qml
     components/listitems/ListMountStateButton.qml
     components/listitems/ListPvInverterPositionRadioButtonGroup.qml
@@ -1049,6 +1050,7 @@ qt_add_resources(${PROJECT_NAME} "${PROJECT_NAME}_large_resources"
         images/icon_hydraulic_oil_24.svg
         images/icon_lng_24.svg
         images/icon_lpg_24.svg
+        images/icon_open_link_32.svg
         images/icon_to_grid.svg
         images/fueltank.svg
         images/gauge_intro_5_matte_black.gif

components/listitems/ListLink.qml

@@ -0,0 +1,79 @@
+/*
+** Copyright (C) 2024 Victron Energy B.V.
+** See LICENSE.txt for license information.
+*/
+
+import QtQuick
+import QtQuick.Controls.impl as CP
+import Victron.VenusOS
+
+ListItem {
+	id: root
+
+	property string url
+	property string caption: root.mode === VenusOS.ListLink_Mode_LinkButton ? ""
+		  //: %1 = url text
+		  //% "Scan the QR code with your portable device.<br />Or insert the link: %1"
+		: qsTrId("listlink_scan_qr_code").arg(formattedUrl)
+	readonly property string formattedUrl: "<font color=\"%1\">%2</font>".arg(Theme.color_font_primary).arg(url)
+
+	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
+			anchors.verticalCenter: parent.verticalCenter
+			width: Math.min(implicitWidth, root.maximumContentWidth - icon.width - root.content.spacing)
+			//% "Open link"
+			text: qsTrId("listlink_open_link")
+		},
+
+		CP.ColorImage {
+			id: icon
+
+			visible: root.mode === VenusOS.ListLink_Mode_LinkButton
+			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
+		},
+
+		Item {
+			visible: root.mode === VenusOS.ListLink_Mode_QRCode
+			width: Theme.geometry_listLink_qrCodeSize
+			height: Theme.geometry_listLink_qrCodeSize + (2 * Theme.geometry_listItem_content_verticalMargin)
+
+			Image {
+				anchors.centerIn: parent
+				source: root.mode === VenusOS.ListLink_Mode_QRCode
+						? `image://QZXing/encode/${root.url}?correctionLevel=M&format=qrcode`
+						: ""
+				sourceSize.width: Theme.geometry_listLink_qrCodeSize
+				sourceSize.height: Theme.geometry_listLink_qrCodeSize
+			}
+		}
+	]
+
+	bottomContentChildren: [
+		PrimaryListLabel {
+			font.pixelSize: Theme.font_size_body1
+			horizontalAlignment: Text.AlignLeft
+			color: Theme.color_listItem_secondaryText
+			text: root.caption
+			visible: root.mode === VenusOS.ListLink_Mode_QRCode
+		}
+	]
+
+	ListPressArea {
+		id: pressArea
+
+		enabled: root.mode === VenusOS.ListLink_Mode_LinkButton
+		radius: backgroundRect.radius
+		anchors.fill: root.backgroundRect
+		onClicked: {
+			BackendConnection.openUrl(root.url)
+		}
+	}
+}

components/listitems/core/ListItem.qml

@@ -4,6 +4,7 @@
 */
 
 import QtQuick
+import QtQuick.Layouts
 import Victron.VenusOS
 
 Item {
@@ -16,8 +17,6 @@ Item {
 	property bool down
 	property bool flat
 	property alias backgroundRect: backgroundRect
-	property int spacing: Theme.geometry_gradientList_spacing
-	property int bottomContentMargin: Theme.geometry_listItem_content_spacing
 	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
 
@@ -28,17 +27,16 @@ Item {
 
 	readonly property bool defaultAllowed: userHasReadAccess
 	readonly property alias primaryLabel: primaryLabel
-	readonly property int defaultImplicitHeight: {
-		const bottomHeight = bottomContent.height > 0 ? bottomContent.height + bottomContentMargin : 0
-		const labelHeight = primaryLabel.implicitHeight + Theme.geometry_listItem_content_verticalMargin*2
-		return Math.max(flat ? Theme.geometry_listItem_flat_height : Theme.geometry_listItem_height,
-						Math.max(content.height, labelHeight) + bottomHeight)
-	}
 
+	readonly property int defaultImplicitHeight: contentLayout.height + Theme.geometry_gradientList_spacing
 	readonly property int availableWidth: width - leftPadding - rightPadding - content.spacing
 	property int maximumContentWidth: availableWidth * 0.7
 	property bool allowed: defaultAllowed
 
+	property int bottomContentSizeMode: content.height > primaryLabel.height
+				? VenusOS.ListItem_BottomContentSizeMode_Compact
+				: VenusOS.ListItem_BottomContentSizeMode_Stretch
+
 	visible: allowed
 	implicitHeight: allowed ? defaultImplicitHeight : 0
 	implicitWidth: parent ? parent.width : 0
@@ -47,7 +45,7 @@ Item {
 		id: backgroundRect
 
 		z: -2
-		height: root.height - root.spacing
+		height: root.height - Theme.geometry_gradientList_spacing
 		color: Theme.color_listItem_background
 		visible: !root.flat
 		// TODO how to indicate read-only setting?
@@ -69,39 +67,46 @@ Item {
 		}
 	}
 
-	Label {
-		id: primaryLabel
-
-		anchors {
-			left: parent.left
-			leftMargin: root.leftPadding
-			verticalCenter: parent.verticalCenter
-			verticalCenterOffset: -root.spacing/2
-				- (bottomContent.height > 0
-						? bottomContent.height/2 + bottomContentMargin/2
-						: 0)
-		}
-		font.pixelSize: flat ? Theme.font_size_body1 : Theme.font_size_body2
-		wrapMode: Text.Wrap
-		width: root.availableWidth - content.width - Theme.geometry_listItem_content_spacing
-	}
+	GridLayout {
+		id: contentLayout
 
-	Row {
-		id: content
+		width: parent.width
+		columns: 2
+		columnSpacing: Theme.geometry_listItem_content_spacing
+		rowSpacing: 0
+
+		Label {
+			id: primaryLabel
+
+			Layout.topMargin: Theme.geometry_listItem_content_verticalMargin
+			Layout.leftMargin: root.leftPadding
+			Layout.fillWidth: true
+			Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+			font.pixelSize: flat ? Theme.font_size_body1 : Theme.font_size_body2
+			wrapMode: Text.Wrap
+			width: root.availableWidth - content.width - Theme.geometry_listItem_content_spacing
+		}
 
-		anchors {
-			right: parent.right
-			rightMargin: root.rightPadding
-			verticalCenter: primaryLabel.verticalCenter
+		Row {
+			id: content
+
+			// The topMargin ensures the content is vertically aligned with primaryLabel when the
+			// content height is small and there is no bottom content.
+			Layout.topMargin: height <= primaryLabel.height ? Theme.geometry_listItem_content_verticalMargin : 0
+			Layout.rightMargin: root.rightPadding
+			Layout.maximumWidth: root.maximumContentWidth
+			Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+			Layout.rowSpan: root.bottomContentSizeMode === VenusOS.ListItem_BottomContentSizeMode_Stretch ? 1 : 2
+			spacing: Theme.geometry_listItem_content_spacing
 		}
-		spacing: Theme.geometry_listItem_content_spacing
-		width: Math.min(implicitWidth, root.maximumContentWidth)
-	}
 
-	Column {
-		id: bottomContent
-		y: Math.max(primaryLabel.y + primaryLabel.height + bottomContentMargin,
-			content.y + content.height + bottomContentMargin)
-		width: parent.width
+		Column {
+			id: bottomContent
+
+			Layout.fillWidth: true
+			Layout.columnSpan: root.bottomContentSizeMode === VenusOS.ListItem_BottomContentSizeMode_Stretch ? 2 : 1
+			Layout.topMargin: height > 0 ? Theme.geometry_listItem_content_verticalMargin / 2 : 0
+			Layout.bottomMargin: Theme.geometry_listItem_content_verticalMargin
+		}
 	}
 }

components/listitems/core/ListNavigation.qml

@@ -27,7 +27,7 @@ ListItem {
 			font.pixelSize: Theme.font_size_body2
 			color: Theme.color_listItem_secondaryText
 			wrapMode: Text.Wrap
-			width: Math.min(implicitWidth, root.maximumContentWidth - icon.width - parent.spacing)
+			width: Math.min(implicitWidth, root.maximumContentWidth - icon.width - root.content.spacing)
 			horizontalAlignment: Text.AlignRight
 		},
 
@@ -37,19 +37,16 @@ ListItem {
 			anchors.verticalCenter: parent.verticalCenter
 			source: "qrc:/images/icon_arrow_32.svg"
 			rotation: 180
-			color: root.containsPress ? Theme.color_listItem_down_forwardIcon : Theme.color_listItem_forwardIcon
+			color: pressArea.containsPress ? Theme.color_listItem_down_forwardIcon : Theme.color_listItem_forwardIcon
 			visible: root.enabled
 		}
 	]
 
 	ListPressArea {
 		id: pressArea
 
+		anchors.fill: parent.backgroundRect
 		radius: backgroundRect.radius
-		anchors {
-			fill: parent
-			bottomMargin: root.spacing
-		}
 		onClicked: root.clicked()
 	}
 }

components/listitems/core/ListQuantityGroupNavigation.qml

@@ -21,6 +21,6 @@ ListNavigation {
 			right: parent.right
 			rightMargin: Theme.geometry_listItem_content_horizontalMargin + Theme.geometry_icon_size_medium
 		}
-		height: parent.height - parent.spacing
+		height: parent.height - Theme.geometry_gradientList_spacing
 	}
 }

components/listitems/core/ListRadioButton.qml

@@ -30,12 +30,8 @@ ListItem {
 	ListPressArea {
 		id: pressArea
 
+		anchors.fill: parent.backgroundRect
 		radius: backgroundRect.radius
-		anchors {
-			fill: parent
-			bottomMargin: root.spacing
-		}
-
 		onClicked: root.clicked()
 	}
 }

components/listitems/core/ListRadioButtonGroup.qml

@@ -116,7 +116,6 @@ ListNavigation {
 					C.ButtonGroup.group: radioButtonGroup
 
 					bottomContent.z: model.index === optionsListView.currentIndex ? 1 : -1
-					bottomContentMargin: Theme.geometry_radioButton_bottomContentMargin
 					bottomContentChildren: Loader {
 						id: bottomContentLoader
 

components/listitems/core/ListSwitch.qml

@@ -43,7 +43,7 @@ ListItem {
 			anchors.verticalCenter: switchItem.verticalCenter
 			color: Theme.color_font_secondary
 			font.pixelSize: Theme.font_size_body2
-			width: Math.min(implicitWidth, root.maximumContentWidth - switchItem.width - parent.spacing)
+			width: Math.min(implicitWidth, root.maximumContentWidth - switchItem.width - root.content.spacing)
 			wrapMode: Text.Wrap
 		},
 		Switch {
@@ -58,12 +58,8 @@ ListItem {
 	ListPressArea {
 		id: pressArea
 
+		anchors.fill: parent.backgroundRect
 		radius: backgroundRect.radius
-		anchors {
-			fill: parent
-			bottomMargin: root.spacing
-		}
-
 		onClicked: root._setChecked(!switchItem.checked)
 	}
 

components/widgets/DcLoadsWidget.qml

@@ -63,11 +63,8 @@ OverviewWidget {
 					ListPressArea {
 						id: delegatePressArea
 
+						anchors.fill: parent.backgroundRect
 						radius: backgroundRect.radius
-						anchors {
-							fill: parent
-							bottomMargin: deviceDelegate.spacing
-						}
 						onClicked: root._showSettingsPage(device)
 					}
 

pages/settings/PageSettingsWifi.qml

@@ -84,10 +84,8 @@ Page {
 			primaryLabel.leftPadding: Theme.geometry_icon_size_medium + Theme.geometry_listItem_content_spacing
 
 			CP.ColorImage {
-				anchors {
-					left: delagate.primaryLabel.left
-					verticalCenter: delagate.primaryLabel.verticalCenter
-				}
+				parent: delagate.primaryLabel
+				anchors.verticalCenter: parent.verticalCenter
 				source: "qrc:/images/icon_checkmark_32.svg"
 				color: Theme.color_green
 				visible: model.favorite

pages/settings/debug/PageDebug.qml

@@ -24,11 +24,8 @@ Page {
 				}
 
 				ListPressArea {
+					anchors.fill: switchItem.backgroundRect
 					radius: switchItem.backgroundRect.radius
-					anchors {
-						fill: parent
-						bottomMargin: switchItem.spacing
-					}
 					onClicked: switchItem.clicked()
 				}
 			}