Style inferior panel and add icon buttons

retroshare-qml-app/src/ChatView.qml

@@ -20,7 +20,7 @@ import QtQuick 2.7
 import QtQuick.Controls 2.0
 import org.retroshare.qml_components.LibresapiLocalClient 1.0
 import "." //Needed for TokensManager singleton
-
+import "./components"
 Item
 {
 	id: chatView
@@ -73,20 +73,68 @@ Item
 
 	}
 
-	TextField
+	Item {
-	{
+
-		id: msgComposer
+		property var styles: StyleChat.inferiorPanel
+
+		id: inferiorPanel
+		height: styles.height
+		width: parent.width
 		anchors.bottom: parent.bottom
-		anchors.left: parent.left
+
-		width: chatView.width - sendButton.width
+		Rectangle {
+			anchors.fill: parent.fill
+			width: parent.width
+			height: parent.height
+			color:inferiorPanel.styles.backgroundColor
+			border.color: inferiorPanel.styles.borderColor
 		}
 
-	Button
+		BtnIcon {
+
+			id: attachButton
+
+			property var styles: StyleChat.inferiorPanel.btnIcon
+
+			height: styles.height
+			width: styles.width
+
+			anchors.verticalCenter: parent.verticalCenter
+			anchors.left: parent.left
+
+			imgUrl: styles.attachIconUrl
+		}
+
+
+		TextField
 		{
-		id: sendButton
+			property var styles: StyleChat.inferiorPanel.msgComposer
-		text: "Send"
+
+			id: msgComposer
 			anchors.bottom: parent.bottom
-		anchors.right: parent.right
+			anchors.left: attachButton.right
+
+			width: chatView.width - sendButton.width - attachButton.width
+			height: parent.height -5
+
+			placeholderText: styles.placeHolder
+			background: styles.background
+
+		}
+
+		BtnIcon {
+
+			id: sendButton
+
+			property var styles: StyleChat.inferiorPanel.btnIcon
+
+			height: styles.height
+			width: styles.width
+
+			anchors.verticalCenter: parent.verticalCenter
+			anchors.left: msgComposer.right
+
+			imgUrl:	styles.sendIconUrl
 
 			onClicked:
 			{
@@ -95,4 +143,6 @@ Item
 							   function(par) { msgComposer.text = ""; } )
 			}
 		}
+
+	}
 }

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

@@ -26,4 +26,35 @@ QtObject {
 	}
 
 
+	property QtObject inferiorPanel: QtObject{
+		// Panel globals
+		readonly property int height: 40
+		readonly property string backgroundColor: "transparent"
+		readonly property string borderColor: "lightGrey"
+
+		property QtObject msgComposer: QtObject{
+			readonly property string placeHolder: "Send message..."
+
+			property QtObject background: Rectangle {
+				color: "transparent"
+			}
+		}
+
+
+		// Button Icon
+		property QtObject btnIcon: QtObject{
+			readonly property int width: 30
+			readonly property int height: 30
+
+			readonly property string sendIconUrl: "/icons/send-message.svg"
+			readonly property string attachIconUrl: "/icons/attach.svg"
+
+		}
+
+
+
+
+	}
+
+
 }