Style the trusted node details view

retroshare-qml-app/src/TrustedNodeDetails.qml

@@ -18,6 +18,7 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 2.0
+import "components/."
 
 Item
 {
@@ -25,19 +26,48 @@ Item
 
 	property string pgpName
 	property alias pgpId: pgpIdTxt.text
+	property bool isOnline
 
 	property string nodeCert
 
 	property var locations
 
+
+	Image
+	{
+		id: nodeStatusImage
+		source: isOnline?
+					"icons/state-ok.png" :
+					"icons/state-offline.png"
+
+		fillMode: Image.PreserveAspectFit
+
+		anchors.top: parent.top
+		anchors.topMargin: 6
+		anchors.horizontalCenter: parent.horizontalCenter
+	}
+
+
+
 	Column
 	{
 		id: pgpColumn
 
-		anchors.top: parent.top
+		anchors.top: nodeStatusImage.bottom
+		width: parent.width
 
-		Text { text: nodeDetailsRoot.pgpName.replace(" (Generated by RetroShare) <>", "") }
-		Text { id: pgpIdTxt }
+		Text
+		{
+			text: nodeDetailsRoot.pgpName.replace(" (Generated by RetroShare) <>", "")
+			anchors.horizontalCenter: parent.horizontalCenter
+			font.pixelSize: 20
+		}
+		Text
+		{
+			id: pgpIdTxt
+			anchors.horizontalCenter: parent.horizontalCenter
+			color: "darkslategrey"
+		}
 	}
 
 	JSONListModel
@@ -48,10 +78,36 @@ Item
 
 	ListView
 	{
-		width: parent.width
+		width: parent.width * .75
 		anchors.top: pgpColumn.bottom
+		anchors.topMargin: 5
 		anchors.bottom: buttonsRow.top
 		model: jsonModel.model
+		anchors.horizontalCenter: parent.horizontalCenter
+		headerPositioning: ListView.OverlayHeader
+
+		clip: true
+		snapMode: ListView.SnapToItem
+
+		header:Rectangle
+		{
+			color: "aliceblue"
+			width: parent.width
+			z: 2
+			height: headetText.contentHeight + 10
+			radius: 10
+
+			Text
+			{
+				id: headetText
+				text: "Node locations ("+jsonModel.model.count+")"
+				anchors.horizontalCenter: parent.horizontalCenter
+				anchors.verticalCenter: parent.verticalCenter
+				font.italic: true
+			}
+
+		}
+
 		delegate: Column
 		{
 			height: 60
@@ -61,8 +117,9 @@ Item
 
 			Row
 			{
+				id: idRow
 				height: 30
-				spacing: 10
+				spacing: 4
 
 				Image
 				{
@@ -83,7 +140,14 @@ Item
 				}
 			}
 
-			Text { text: model.peer_id }
+			TextAndIcon
+			{
+				width: parent.width
+				innerText:  model.peer_id
+				anchors.horizontalCenter: parent.horizontalCenter
+				iconUrl:  "/icons/keyring.svg"
+
+			}
 		}
 	}
 

retroshare-qml-app/src/TrustedNodesView.qml

@@ -67,13 +67,14 @@ Item
 		model: jsonModel.model
 		delegate: Item
 		{
+			property bool isOnline: jsonModel.isOnline(model.pgp_id)
 			height: 30
 			width: parent.width
 
 			Image
 			{
 				id: statusImage
-				source: jsonModel.isOnline(model.pgp_id) ?
+				source:  isOnline?
 							"icons/state-ok.png" :
 							"icons/state-offline.png"
 
@@ -100,6 +101,7 @@ Item
 								{
 									pgpName: model.name,
 									pgpId: model.pgp_id,
+									isOnline: isOnline,
 									locations: jsonModel.getLocations(
 												   model.pgp_id)
 								}