From 1df60e85cb52e87d95b169cea014903e5c833033 Mon Sep 17 00:00:00 2001
From: Angela Mazzurco <giangiasoc17@gmail.com>
Date: Thu, 8 Jun 2017 19:11:37 +0200
Subject: [PATCH] Style inferior panel and add icon buttons

---
 retroshare-qml-app/src/ChatView.qml           | 88 +++++++++++++++----
 .../src/styles/ChatBubblesStyle.qml           | 55 +++++++++---
 2 files changed, 112 insertions(+), 31 deletions(-)

diff --git a/retroshare-qml-app/src/ChatView.qml b/retroshare-qml-app/src/ChatView.qml
index 625ceb1c4..efbe38d81 100644
--- a/retroshare-qml-app/src/ChatView.qml
+++ b/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,26 +73,76 @@ Item
 
 	}
 
-	TextField
-	{
-		id: msgComposer
-		anchors.bottom: parent.bottom
-		anchors.left: parent.left
-		width: chatView.width - sendButton.width
-	}
+	Item {
 
-	Button
-	{
-		id: sendButton
-		text: "Send"
-		anchors.bottom: parent.bottom
-		anchors.right: parent.right
+		property var styles: StyleChat.inferiorPanel
 
-		onClicked:
-		{
-			var jsonData = {"chat_id":chatView.chatId, "msg":msgComposer.text}
-			rsApi.request( "/chat/send_message", JSON.stringify(jsonData),
-						   function(par) { msgComposer.text = ""; } )
+		id: inferiorPanel
+		height: styles.height
+		width: parent.width
+		anchors.bottom: parent.bottom
+
+		Rectangle {
+			anchors.fill: parent.fill
+			width: parent.width
+			height: parent.height
+			color:inferiorPanel.styles.backgroundColor
+			border.color: inferiorPanel.styles.borderColor
 		}
+
+		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
+		{
+			property var styles: StyleChat.inferiorPanel.msgComposer
+
+			id: msgComposer
+			anchors.bottom: parent.bottom
+			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:
+			{
+				var jsonData = {"chat_id":chatView.chatId, "msg":msgComposer.text}
+				rsApi.request( "/chat/send_message", JSON.stringify(jsonData),
+							   function(par) { msgComposer.text = ""; } )
+			}
+		}
+
 	}
 }
diff --git a/retroshare-qml-app/src/styles/ChatBubblesStyle.qml b/retroshare-qml-app/src/styles/ChatBubblesStyle.qml
index 1c07bfcf0..ba3c879d1 100644
--- a/retroshare-qml-app/src/styles/ChatBubblesStyle.qml
+++ b/retroshare-qml-app/src/styles/ChatBubblesStyle.qml
@@ -5,23 +5,54 @@ QtObject {
 
 	property QtObject bubble: QtObject{
 		//	Bubble measures
-		    readonly property int lMarginBubble: 10
-			readonly property int rMarginBubble: 10
-			readonly property int tMarginBubble: 5
-			readonly property int bMarginBubble: 10
-			readonly property int aditionalBubbleHeight: tMarginBubble * 2
-			readonly property int aditionalBubbleWidth: 30
-			readonly property real bubbleMaxWidth: 0.5 // % from parent
+		readonly property int lMarginBubble: 10
+		readonly property int rMarginBubble: 10
+		readonly property int tMarginBubble: 5
+		readonly property int bMarginBubble: 10
+		readonly property int aditionalBubbleHeight: tMarginBubble * 2
+		readonly property int aditionalBubbleWidth: 30
+		readonly property real bubbleMaxWidth: 0.5 // % from parent
 
 		// BubbleProps
-			readonly property int radius: 5
+		readonly property int radius: 5
 
 
 		//	Colors
-			readonly property string colorIncoming: "lightGreen"
-			readonly property string colorOutgoing: "aliceblue"
-			readonly property string colorSenderName: "cornflowerblue"
-			readonly property string colorMessageTime: "grey"
+		readonly property string colorIncoming: "lightGreen"
+		readonly property string colorOutgoing: "aliceblue"
+		readonly property string colorSenderName: "cornflowerblue"
+		readonly property string colorMessageTime: "grey"
+
+	}
+
+
+	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"
+
+		}
+
+
+
 
 	}