Add ListLink component to show either QR code or link button

Part of #1811
victronenergy · Jan 8, 2025 · 8edf37c · 8edf37c
1 parent 806f440
commit 8edf37c
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 0 deletions.
diff --git a/CMakeLists.txt b/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

diff --git a/components/listitems/ListLink.qml b/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)
+		}
+	}
+}
diff --git a/images/icon_open_link_32.svg b/images/icon_open_link_32.svg
diff --git a/pages/settings/debug/PageSettingsDemo.qml b/pages/settings/debug/PageSettingsDemo.qml
@@ -327,6 +327,11 @@ Page {
 					}
 				]
 			}
+
+			ListLink {
+				text: "Victron Energy"
+				url: "https://www.victronenergy.com"
+			}
 		}
 	}
 

diff --git a/src/enums.h b/src/enums.h
@@ -737,6 +737,12 @@ class Enums : public QObject
 	};
 	Q_ENUM(ListItem_BottomContentSizeMode)
 
+	enum ListLink_Mode {
+		ListLink_Mode_LinkButton,
+		ListLink_Mode_QRCode
+	};
+	Q_ENUM(ListLink_Mode)
+
 	Q_INVOKABLE QString battery_modeToText(Battery_Mode mode) const;
 	Q_INVOKABLE Battery_Mode battery_modeFromPower(qreal power) const;
 

diff --git a/themes/geometry/FiveInch.json b/themes/geometry/FiveInch.json
@@ -58,6 +58,8 @@
     "geometry_listItem_textField_minimumWidth": 200,
     "geometry_listItem_textField_maximumWidth": 376,
 
+    "geometry_listLink_qrCodeSize": 96,
+
     "geometry_slider_groove_height": 8,
     "geometry_slider_groove_radius": 8,
 

diff --git a/themes/geometry/SevenInch.json b/themes/geometry/SevenInch.json
@@ -58,6 +58,8 @@
     "geometry_listItem_textField_minimumWidth": 236,
     "geometry_listItem_textField_maximumWidth": 472,
 
+    "geometry_listLink_qrCodeSize": 96,
+
     "geometry_slider_groove_height": 8,
     "geometry_slider_groove_radius": 8,
-Original file line number
+Diff line change
@@ Expand Up / @@ -327,6 +327,11 @@ Page { @@
     					}
     				]
     			}
+    			ListLink {
+    				text: "Victron Energy"
+    				url: "https://www.victronenergy.com"
+    			}
     		}
     	}
@@ Expand Down @@