Add header and footer to sidebar

retroshare-qml-app/src/components/SideBar.qml

@@ -14,6 +14,12 @@ Drawer
 	width: Math.min(parent.width, parent.height) / 3 * styles.width
 	dragMargin: 10
 
+	Rectangle
+	{
+	width: parent.width
+	height: parent.height
+
+
 	    ListView
 		{
 			id: listView
@@ -33,15 +39,55 @@ Drawer
 				property var styles: StyleSideBar.header
 
 				width: parent.width
-			height: styles.height
+				height: colorHash.height + nickText.height + gxsText.height + 40
 				color: styles.color
-			Label {
-				        text: "Retroshare"
-						anchors.centerIn: parent
-						wrapMode: Text.WordWrap
+
+				AvatarOrColorHash
+				{
+					id: colorHash
+
+					gxs_id: (ChatCache.contactsCache.own)?ChatCache.contactsCache.own.gxs_id  : ""
+					height: styles.avatarHeight
+					anchors.margins: styles.avatarMargins
+					anchors.horizontalCenter: header.horizontalCenter
+					anchors.top: header.top
 				}
 
+				Text
+				{
+					id: nickText
+					text: (ChatCache.contactsCache.own)?ChatCache.contactsCache.own.name  : ""
+					height:  contentHeight
+					anchors.top: colorHash.bottom
+					anchors.left: header.left
+					anchors.right: header.right
+					anchors.leftMargin: 10
+					anchors.rightMargin: 10
+					horizontalAlignment:Text.AlignHCenter
+					wrapMode: Text.Wrap
+					color: styles.textColor
+					font.bold: true
+					font.pixelSize: styles.textNickSize
 				}
+				Text
+				{
+					id: gxsText
+					text: (ChatCache.contactsCache.own)?ChatCache.contactsCache.own.gxs_id  : ""
+					height:  contentHeight
+					wrapMode: Text.WrapAnywhere
+					width: header.width
+					anchors.top: nickText.bottom
+					anchors.left: header.left
+					anchors.right: header.right
+					anchors.leftMargin: 10
+					anchors.rightMargin: 10
+					horizontalAlignment:Text.AlignHCenter
+					color: styles.textColor
+					font.pixelSize: styles.textGxsidSize
+				}
+			}
+
+
 
 			delegate: Item
 			{
@@ -135,6 +181,11 @@ Drawer
 					{
 						stackView.push("qrc:/TrustedNodesView.qml");
 					},
+					"Search Contacts": function()
+					{
+						stackView.push("qrc:/Contacts.qml",
+									            {'searching': true} )
+					},
 					"Paste Link": function()
 					{
 						UriJs.URI.withinString(
@@ -154,6 +205,12 @@ Drawer
 					icon: "/icons/netgraph.svg"
 				}
 				ListElement
+				{
+					title: "Search Contacts"
+					showOnCoreReady: true
+					icon: "/icons/search.svg"
+				}
+				ListElement
 				{
 					title: "Paste Link"
 					showOnCoreReady: true
@@ -170,5 +227,29 @@ Drawer
 
 			ScrollIndicator.vertical: ScrollIndicator { }
 		}
+
+		Rectangle
+		{
+			property var styles: StyleSideBar.footer
+
+			width: parent.width
+			anchors.bottom: parent.bottom
+			height: Label.contentHeight
+			color: styles.color
+
+			Label
+			{
+				horizontalAlignment: Text.AlignRight
+				anchors.bottom: parent.bottom
+				anchors.right: parent.right
+				text:"Retroshare v.DEV"
+				color: parent.styles.textColor
+				anchors.rightMargin: parent.styles.margins
+				anchors.bottomMargin: parent.styles.margins
+
+			}
+		}
+
+	}
 }
 

retroshare-qml-app/src/styles/SideBarStyle.qml

@@ -15,8 +15,18 @@ QtObject {
 	}
 	property QtObject header: QtObject
 	{
-		property var height: 80
 		property var color: "#0398d5"
+		property var avatarHeight: 50
+		property var avatarMargins: 15
+		property var textColor: "white"
+		property var textNickSize: 14
+		property var textGxsidSize: 11
+	}
+	property QtObject footer: QtObject
+	{
+		property var color: "white"
+		property var textColor: "grey"
+		property var margins: 8
 	}
 
 }