fix(StatusChatInfoButton): Add self-calculated implicitWIdth and elide to texts

This commit add elide flags to text in title and subtitle and add flexibility to width. Now compoents use next rules:
1. If width is set - text should be elided when implicit text  width is more than root object width
2. Component grows if width is not set based on inner elements natural sizes

Closes: #335 and #338

sandbox/Controls.qml

@@ -115,6 +115,36 @@ GridLayout {
         pinnedMessagesCount: 1
     }
 
+    Item {
+        implicitWidth: 100
+        implicitHeight: 48
+        StatusChatInfoButton {
+            title: "Iuri Matias elided"
+            subTitle: "Contact"
+            icon.color: Theme.palette.miscColor7
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            type: StatusChatInfoButton.Type.OneToOneChat
+            muted: true
+            pinnedMessagesCount: 1
+            width: 100
+        }
+    }
+
+    Item {
+        implicitWidth: 100
+        implicitHeight: 48
+        StatusChatInfoButton {
+            title: "Iuri Matias big not elided"
+            subTitle: "Contact"
+            icon.color: Theme.palette.miscColor7
+            image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            type: StatusChatInfoButton.Type.OneToOneChat
+            muted: true
+            pinnedMessagesCount: 1
+            width: 400
+        }
+    }
+
     StatusChatInfoButton {
         title: "group"
         subTitle: "Group Chat"

src/StatusQ/Components/StatusChatToolBar.qml

@@ -37,6 +37,7 @@ Rectangle {
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
         anchors.leftMargin: 12
+        width: Math.min(implicitWidth, parent.width - actionButtons.implicitWidth - anchors.leftMargin * 2)
         onClicked: statusChatToolBar.chatInfoButtonClicked()
     }
 

src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -7,11 +7,11 @@ import StatusQ.Components 0.1
 Rectangle {
     id: statusChatInfoButton
 
-    implicitWidth: identicon.width + 
+    implicitWidth: identicon.width +
-        Math.max(
+                   Math.max(
-          statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.width,
+                       statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.implicitWidth,
-          statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.width
+                       statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.implicitWidth
-        ) + 8
+                       ) + 8
     implicitHeight: 48
 
     property string title: ""
@@ -57,8 +57,8 @@ Rectangle {
             anchors.verticalCenter: parent.verticalCenter
 
             sourceComponent: !!statusChatInfoButton.image.source.toString() ?
-                statusRoundImageComponent :
+                                 statusRoundImageComponent :
-                statusLetterIdenticonComponent
+                                 statusLetterIdenticonComponent
         }
 
         Component {
@@ -103,9 +103,16 @@ Rectangle {
             anchors.left: identicon.right
             anchors.leftMargin: 8
 
-            width: statusIcon.width + chatName.anchors.leftMargin + chatName.width + (mutedIcon.visible ? mutedIcon.width + mutedIcon.anchors.leftMargin : 0)
+            width: Math.min(parent.width - anchors.leftMargin
+                            - identicon.width - identicon.anchors.leftMargin,
+                            implicitWidth)
             height: chatName.height
 
+            implicitWidth: statusIcon.width + chatName.anchors.leftMargin + chatName.implicitWidth
+                           + mutedDelta
+
+            property real mutedDelta: mutedIcon.visible ? mutedIcon.width + 8 : 0
+
             StatusIcon {
                 id: statusIcon
                 anchors.top: parent.top
@@ -117,17 +124,17 @@ Rectangle {
                 color: statusChatInfoButton.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1
                 icon: {
                     switch (statusChatInfoButton.type) {
-                        case StatusChatInfoButton.Type.PublicCat:
+                    case StatusChatInfoButton.Type.PublicCat:
-                            return "tiny/public-chat"
+                        return "tiny/public-chat"
-                            break;
+                        break;
-                        case StatusChatInfoButton.Type.GroupChat:
+                    case StatusChatInfoButton.Type.GroupChat:
-                            return "tiny/group"
+                        return "tiny/group"
-                            break;
+                        break;
-                        case StatusChatInfoButton.Type.CommunityChat:
+                    case StatusChatInfoButton.Type.CommunityChat:
-                            return "tiny/channel"
+                        return "tiny/channel"
-                            break;
+                        break;
-                        default:
+                    default:
-                            return "tiny/public-chat"
+                        return "tiny/public-chat"
                     }
                 }
             }
@@ -139,10 +146,15 @@ Rectangle {
                 anchors.leftMargin: statusIcon.visible ? 1 : 0
                 anchors.top: parent.top
 
+                elide: Text.ElideRight
+                width: Math.min(implicitWidth, parent.width
+                                - statusIcon.width
+                                - statusChatInfoButtonTitle.mutedDelta)
+
                 text: statusChatInfoButton.type === StatusChatInfoButton.Type.PublicChat &&
-                    !statusChatInfoButton.title.startsWith("#") ?
+                      !statusChatInfoButton.title.startsWith("#") ?
-                    "#" + statusChatInfoButton.title :
+                          "#" + statusChatInfoButton.title :
-                    statusChatInfoButton.title
+                          statusChatInfoButton.title
                 color: statusChatInfoButton.muted ? Theme.palette.directColor5 : Theme.palette.directColor1
                 font.pixelSize: 15
                 font.weight: Font.Medium
@@ -162,7 +174,7 @@ Rectangle {
                 MouseArea {
                     id: mutedIconSensor
                     hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor 
+                    cursorShape: Qt.PointingHandCursor
                     anchors.fill: parent
                     onClicked: statusChatInfoButton.unmute()
                 }
@@ -183,13 +195,26 @@ Rectangle {
             anchors.top: statusChatInfoButtonTitle.bottom
             visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0
             height: visible ? chatType.height : 0
-            width: childrenRect.width
+            width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin
+                            - identicon.width - identicon.anchors.leftMargin - 8,
+                            implicitWidth)
+
+            implicitWidth: chatType.implicitWidth + pinIconDelta + 8
+
+
+            property real pinIconDelta: pinIcon.visible ? pinIcon.width + pinIcon.anchors.leftMargin
+                                                          + divider.width + divider.anchors.leftMargin
+                                                        : 0
 
             StatusBaseText {
                 id: chatType
                 text: statusChatInfoButton.subTitle
                 color: Theme.palette.baseColor1
                 font.pixelSize: 12
+
+                elide: Text.ElideRight
+                width: Math.min(parent.width - (pinIcon.visible ? divider.width + divider.anchors.leftMargin + pinIcon.width + pinIcon.anchors.leftMargin : 0),
+                                implicitWidth)
             }
 
             Rectangle {
@@ -231,7 +256,7 @@ Rectangle {
                     id: pinCountSensor
                     anchors.fill: parent
                     hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor 
+                    cursorShape: Qt.PointingHandCursor
                     onClicked: statusChatInfoButton.pinnedMessagesCountClicked(mouse)
                 }
             }