messagelistview: fix the sizing for TypingIndicator and ReadStatus

Change-Id: Ie55660522b8eceaedcb3235d6d63f615a27e59c9

src/commoncomponents/SBSMessageBase.qml

@@ -48,7 +48,7 @@ Control {
     readonly property real senderMargin: 64
     readonly property real avatarSize: 32
     readonly property real msgRadius: 18
-    readonly property real hPadding: 12
+    readonly property real hPadding: JamiTheme.sbsMessageBasePreferredPadding
 
     width: ListView.view ? ListView.view.width : 0
     height: mainColumnLayout.implicitHeight

src/constant/JamiTheme.qml

@@ -303,6 +303,12 @@ Item {
     property real filesToSendDelegateButtonSize: 16
     property real filesToSendDelegateFontPointSize: textFontSize + 2
 
+    // SBSMessageBase
+    property int sbsMessageBasePreferredPadding: 12
+
+    // MessageBar
+    property int messageBarMarginSize: 10
+
     // InvitationView
     property real invitationViewAvatarSize: 112
     property real invitationViewButtonRadius: 25

src/mainview/components/MessageBar.qml

@@ -30,7 +30,7 @@ ColumnLayout {
 
     property alias text: textArea.text
     property var textAreaObj: textArea
-    property real marginSize: 10
+    property real marginSize: JamiTheme.messageBarMarginSize
     property bool sendButtonVisibility: false
     property bool animate: false
 

src/mainview/components/MessageListView.qml

@@ -168,7 +168,6 @@ ListView {
     }
 
     topMargin: 12
-    bottomMargin: 6
     spacing: 2
     anchors.centerIn: parent
     height: parent.height
@@ -277,79 +276,83 @@ ListView {
     header: Control {
         id: typeIndicatorContainer
 
-        topPadding: 3
+        topPadding: 6
 
         width: root.width
         height: typeIndicatorNameText.contentHeight + topPadding
 
         visible: MessagesAdapter.currentConvComposingList.length
 
-        TypingDots {
-            id: typingDots
-
+        RowLayout {
             anchors.left: typeIndicatorContainer.left
-            anchors.leftMargin: 5
-            anchors.verticalCenter: typeIndicatorContainer.verticalCenter
-        }
+            anchors.leftMargin: JamiTheme.messageBarMarginSize
+            anchors.bottom: typeIndicatorContainer.bottom
+            anchors.bottomMargin: 2
 
-        Text {
-            id: typeIndicatorNameText
+            spacing: 0
 
-            anchors.left: typingDots.right
-            anchors.leftMargin: 5
-            anchors.verticalCenter: typeIndicatorContainer.verticalCenter
+            TypingDots {
+                id: typingDots
 
-            width: {
-                var textSize = text ? JamiQmlUtils.getTextBoundingRect(font, text).width : 0
-                var typingContentWidth = typingDots.width + typingDots.anchors.leftMargin
-                                       + typeIndicatorNameText.anchors.leftMargin
-                                       + typeIndicatorEndingText.contentWidth
-                return Math.min(typeIndicatorContainer.width - 5 - typingContentWidth, textSize)
+                Layout.alignment: Qt.AlignVCenter
             }
 
-            font.pointSize: 8
-            font.bold: Font.DemiBold
-            elide: Text.ElideRight
-            color: JamiTheme.textColor
-            text: {
-                var finalText = ""
-                var nameList = MessagesAdapter.currentConvComposingList
+            Text {
+                id: typeIndicatorNameText
 
-                if (nameList.length > 4)
-                    return ""
-                if (nameList.length === 1)
-                    return nameList[0]
-
-                for (var i = 0; i < nameList.length; i++) {
-                    finalText += nameList[i]
-
-                    if (i === nameList.length - 2)
-                        finalText += JamiStrings.typeIndicatorAnd
-                    else if (i !== nameList.length - 1)
-                        finalText += ", "
+                Layout.alignment: Qt.AlignVCenter
+                Layout.leftMargin: JamiTheme.sbsMessageBasePreferredPadding
+                Layout.preferredWidth: {
+                    var textSize = text ? JamiQmlUtils.getTextBoundingRect(font, text).width : 0
+                    var typingContentWidth = typingDots.width + typingDots.anchors.leftMargin
+                                           + typeIndicatorNameText.anchors.leftMargin
+                                           + typeIndicatorEndingText.contentWidth
+                    return Math.min(typeIndicatorContainer.width - 5 - typingContentWidth, textSize)
                 }
 
-                return finalText
+                font.pointSize: 8
+                font.bold: Font.DemiBold
+                elide: Text.ElideRight
+                color: JamiTheme.textColor
+                text: {
+                    var finalText = ""
+                    var nameList = MessagesAdapter.currentConvComposingList
+
+                    if (nameList.length > 4)
+                        return ""
+                    if (nameList.length === 1)
+                        return nameList[0]
+
+                    for (var i = 0; i < nameList.length; i++) {
+                        finalText += nameList[i]
+
+                        if (i === nameList.length - 2)
+                            finalText += JamiStrings.typeIndicatorAnd
+                        else if (i !== nameList.length - 1)
+                            finalText += ", "
+                    }
+
+                    return finalText
+                }
             }
-        }
 
-        Text {
-            id: typeIndicatorEndingText
+            Text {
+                id: typeIndicatorEndingText
 
-            anchors.left: typeIndicatorNameText.right
-            anchors.verticalCenter: typeIndicatorContainer.verticalCenter
+                Layout.alignment: Qt.AlignVCenter
 
-            font.pointSize: 8
-            color: JamiTheme.textColor
-            text: {
-                var nameList = MessagesAdapter.currentConvComposingList
+                font.pointSize: 8
+                color: JamiTheme.textColor
+                text: {
+                    var nameList = MessagesAdapter.currentConvComposingList
 
-                if (nameList.length > 4)
-                    return JamiStrings.typeIndicatorMax
-                if (nameList.length === 1)
-                    return JamiStrings.typeIndicatorSingle.replace("{}", "")
+                    if (nameList.length > 4)
+                        return JamiStrings.typeIndicatorMax
+                    if (nameList.length === 1)
+                        return JamiStrings.typeIndicatorSingle.replace("{}", "")
 
-                return JamiStrings.typeIndicatorPlural.replace("{}", "")
+                    return JamiStrings.typeIndicatorPlural.replace("{}", "")
+                }
             }
         }
     }