Refactor message composer to fit text size and wrap it

This commit is contained in:
Angela Mazzurco 2017-06-09 17:58:52 +02:00
parent 6e3de73501
commit 80b4c839bb
2 changed files with 27 additions and 12 deletions

View File

@ -18,6 +18,7 @@
import QtQuick 2.7 import QtQuick 2.7
import QtQuick.Controls 2.0 import QtQuick.Controls 2.0
import QtQuick.Layouts 1.2
import org.retroshare.qml_components.LibresapiLocalClient 1.0 import org.retroshare.qml_components.LibresapiLocalClient 1.0
import "." //Needed for TokensManager singleton import "." //Needed for TokensManager singleton
import "./components" import "./components"
@ -78,11 +79,12 @@ Item
property var styles: StyleChat.inferiorPanel property var styles: StyleChat.inferiorPanel
id: inferiorPanel id: inferiorPanel
height: styles.height height: (msgComposer.height > styles.height)? msgComposer.height: styles.height
width: parent.width width: parent.width
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
Rectangle { Rectangle {
id: backgroundRectangle
anchors.fill: parent.fill anchors.fill: parent.fill
width: parent.width width: parent.width
height: parent.height height: parent.height
@ -99,27 +101,36 @@ Item
height: styles.height height: styles.height
width: styles.width width: styles.width
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.margins: styles.margin
imgUrl: styles.attachIconUrl imgUrl: styles.attachIconUrl
} }
TextField TextArea
{ {
property var styles: StyleChat.inferiorPanel.msgComposer property var styles: StyleChat.inferiorPanel.msgComposer
id: msgComposer id: msgComposer
anchors.bottom: parent.bottom
anchors.verticalCenter: parent.verticalCenter
anchors.left: attachButton.right anchors.left: attachButton.right
width: chatView.width - sendButton.width - attachButton.width - emojiButton.width height: (contentHeight > font.pixelSize)? contentHeight +font.pixelSize : parent.styles.height
height: parent.height -5 width: chatView.width -
(sendButton.width + sendButton.anchors.margins) -
(attachButton.width + attachButton.anchors.margins) -
(emojiButton.width + emojiButton.anchors.margins)
placeholderText: styles.placeHolder placeholderText: styles.placeHolder
background: styles.background background: styles.background
wrapMode: TextEdit.Wrap
onTextChanged: { onTextChanged: {
if (msgComposer.length == 0) if (msgComposer.length == 0)
{ {
@ -142,8 +153,10 @@ Item
height: styles.height height: styles.height
width: styles.width width: styles.width
anchors.verticalCenter: parent.verticalCenter anchors.right: sendButton.left
anchors.left: msgComposer.right anchors.bottom: parent.bottom
anchors.margins: styles.margin
imgUrl: styles.emojiIconUrl imgUrl: styles.emojiIconUrl
} }
@ -158,8 +171,10 @@ Item
height: styles.height height: styles.height
width: styles.width width: styles.width
anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right
anchors.left: emojiButton.right anchors.bottom: parent.bottom
anchors.margins: styles.margin
imgUrl: styles.microIconUrl imgUrl: styles.microIconUrl

View File

@ -46,7 +46,7 @@ QtObject {
readonly property int width: 30 readonly property int width: 30
readonly property int height: 30 readonly property int height: 30
readonly property int margin: 10 readonly property int margin: 5
readonly property string sendIconUrl: "/icons/send-message.svg" readonly property string sendIconUrl: "/icons/send-message.svg"
readonly property string attachIconUrl: "/icons/attach.svg" readonly property string attachIconUrl: "/icons/attach.svg"