Style inferior panel and add icon buttons

This commit is contained in:
Angela Mazzurco 2017-06-08 19:11:37 +02:00
parent 66d63c29b3
commit 1df60e85cb
2 changed files with 112 additions and 31 deletions

View File

@ -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 = ""; } )
}
}
}
}

View File

@ -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"
}
}