fix(StatusChatInfoButton): pinned messages counter

- fix the "pinned messages" counter, add plural handling (Fixes #899)
- modernize using layouts (Fixes #898)
- add some more examples

ui/StatusQ/sandbox/controls/Controls.qml

@@ -150,13 +150,13 @@ GridLayout {
         implicitHeight: 48
         StatusChatInfoButton {
             title: "Iuri Matias elided"
-            subTitle: "Contact"
+            subTitle: "Very long subtitle should elide as well"
             asset.color: Theme.palette.miscColor7
             asset.isImage: true
             asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
             type: StatusChatInfoButton.Type.OneToOneChat
             muted: true
-            pinnedMessagesCount: 1
+            pinnedMessagesCount: 10
             width: 100
         }
     }
@@ -199,6 +199,14 @@ GridLayout {
         type: StatusChatInfoButton.Type.CommunityChat
     }
 
+    StatusChatInfoButton {
+        title: "community-channel"
+        subTitle: "Some very long description text to see how the whole item wraps or elides"
+        asset.color: Theme.palette.miscColor7
+        type: StatusChatInfoButton.Type.CommunityChat
+        pinnedMessagesCount: 3
+    }
+
     StatusSlider {
         width: 360
         from: 0

ui/StatusQ/sandbox/controls/Layout.qml

@@ -28,8 +28,8 @@ Column {
 
         headerContent: StatusChatInfoButton {
             width: Math.min(implicitWidth, parent.width)
-            title: "Some contact"
+            title: "Muted public chat"
-            subTitle: "Contact"
+            subTitle: "Some subtitle"
             asset.color: Theme.palette.miscColor7
             type: StatusChatInfoButton.Type.PublicChat
             pinnedMessagesCount: 1
@@ -44,14 +44,35 @@ Column {
 
         headerContent: StatusChatInfoButton {
             width: Math.min(implicitWidth, parent.width)
-            title: "Some contact"
+            title: "Group chat"
-            subTitle: "Contact"
+            subTitle: "Group chat subtitle"
             asset.color: Theme.palette.miscColor7
-            type: StatusChatInfoButton.Type.OneToOneChat
+            type: StatusChatInfoButton.Type.GroupChat
             pinnedMessagesCount: 1
         }
     }
 
+    StatusToolBar {
+        width: 518
+
+        headerContent: StatusChatInfoButton {
+            title: "Community chat"
+            subTitle: "Some very long description text to see how the whole item wraps or ellides"
+            asset.color: Theme.palette.miscColor7
+            type: StatusChatInfoButton.Type.CommunityChat
+            pinnedMessagesCount: 3
+        }
+    }
+
+    StatusToolBar {
+        headerContent: StatusChatInfoButton {
+            title: "Very long chat name"
+            asset.color: Theme.palette.miscColor7
+            type: StatusChatInfoButton.Type.CommunityChat
+            pinnedMessagesCount: 1234567891
+        }
+    }
+
     StatusToolBar {
         notificationCount: 1
         width: 518
@@ -473,8 +494,5 @@ Column {
                 }
             }
         }
-
-
     }
 }
-

ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -1,24 +1,20 @@
 import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 
-Rectangle {
+Button {
-    id: statusChatInfoButton
+    id: root
     objectName: "chatInfoButton"
 
-    implicitWidth: identicon.width +
+    property string title: text
-                   Math.max(
+    property string subTitle
-                       statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.implicitWidth,
+    property bool muted
-                       statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.implicitWidth
+    property int pinnedMessagesCount
-                       ) + 8
-    implicitHeight: 48
-
-    property string title: ""
-    property string subTitle: ""
-    property bool muted: false
-    property int pinnedMessagesCount: 0
 
     property StatusAssetSettings asset: StatusAssetSettings {
         width: 36
@@ -29,9 +25,7 @@ Rectangle {
 
     property int type: StatusChatInfoButton.Type.PublicChat
     property alias tooltip: statusToolTip
-    property alias sensor: sensor
 
-    signal clicked(var mouse)
     signal pinnedMessagesCountClicked(var mouse)
     signal unmute()
     signal linkActivated(string link)
@@ -46,192 +40,162 @@ Rectangle {
         CommunityChat // 6
     }
 
-    radius: 8
+    horizontalPadding: 4
-    color: sensor.enabled && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
+    verticalPadding: 2
+    spacing: 4
 
-    MouseArea {
+    background: Rectangle {
-        id: sensor
+        radius: 8
-        anchors.fill: parent
+        color: root.enabled && root.hovered ? Theme.palette.baseColor2 : "transparent"
-        hoverEnabled: true
-        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
 
-        onClicked: statusChatInfoButton.clicked(mouse)
+        MouseArea {
+            anchors.fill: parent
+            acceptedButtons: Qt.NoButton
+            cursorShape: root.hovered ? Qt.PointingHandCursor : undefined
+        }
+    }
 
+    contentItem: RowLayout {
+        spacing: root.spacing
+
+        // identicon
         StatusSmartIdenticon {
             id: identicon
-            anchors.left: parent.left
+            asset: root.asset
-            anchors.leftMargin: 4
+            name: root.title
-            anchors.verticalCenter: parent.verticalCenter
-            asset: statusChatInfoButton.asset
-            name: statusChatInfoButton.title
         }
 
-        Item {
+        // text
-            id: statusChatInfoButtonTitle
+        ColumnLayout {
-            anchors.top: identicon.top
+            Layout.fillWidth: true
-            anchors.topMargin: statusChatInfoButtonSubTitle.visible ? 0 : 8
+            spacing: 2
-            anchors.left: identicon.right
-            anchors.leftMargin: 8
 
-            width: Math.min(parent.width - anchors.leftMargin
+            // title
-                            - identicon.width - identicon.anchors.leftMargin,
+            RowLayout {
-                            implicitWidth)
+                Layout.fillWidth: true
-            height: chatName.height
+                Layout.alignment: Qt.AlignLeading | Qt.AlignBottom
+                spacing: root.spacing
 
-            implicitWidth: statusIcon.width + chatName.anchors.leftMargin + chatName.implicitWidth
+                StatusIcon {
-                           + mutedDelta
+                    visible: root.type !== StatusChatInfoButton.Type.OneToOneChat
+                    Layout.preferredWidth: 14
+                    Layout.preferredHeight: 14
+                    color: root.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1
+                    icon: {
+                        switch (root.type) {
+                        case StatusChatInfoButton.Type.PublicCat:
+                            return "tiny/public-chat"
+                        case StatusChatInfoButton.Type.GroupChat:
+                            return "tiny/group"
+                        case StatusChatInfoButton.Type.CommunityChat:
+                            return "tiny/channel"
+                        default:
+                            return "tiny/public-chat"
+                        }
+                    }
+                }
 
-            property real mutedDelta: mutedIcon.visible ? mutedIcon.width + 8 : 0
+                StatusBaseText {
+                    objectName: "statusChatInfoButtonNameText"
+                    Layout.fillWidth: true
+                    elide: Text.ElideRight
+                    text: root.type === StatusChatInfoButton.Type.PublicChat && !root.title.startsWith("#") ?
+                              "#" + root.title
+                            : root.title
+                    color: root.muted ? Theme.palette.directColor5 : Theme.palette.directColor1
+                    font.weight: Font.Medium
+                }
 
-            StatusIcon {
+                StatusIcon {
-                id: statusIcon
+                    objectName: "mutedIcon"
-                anchors.top: parent.top
+                    Layout.preferredWidth: 13
-                anchors.topMargin: -2
+                    Layout.preferredHeight: 13
-                anchors.left: parent.left
+                    icon: "tiny/muted"
+                    color: mutedIconSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
+                    visible: root.muted
 
-                visible: statusChatInfoButton.type !== StatusChatInfoButton.Type.OneToOneChat
+                    MouseArea {
-                width: visible ? 14 : 0
+                        id: mutedIconSensor
-                color: statusChatInfoButton.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1
+                        hoverEnabled: true
-                icon: {
+                        cursorShape: Qt.PointingHandCursor
-                    switch (statusChatInfoButton.type) {
+                        anchors.fill: parent
-                    case StatusChatInfoButton.Type.PublicCat:
+                        onClicked: root.unmute()
-                        return "tiny/public-chat"
+                    }
-                        break;
+
-                    case StatusChatInfoButton.Type.GroupChat:
+                    StatusToolTip {
-                        return "tiny/group"
+                        id: statusToolTip
-                        break;
+                        text: qsTr("Unmute")
-                    case StatusChatInfoButton.Type.CommunityChat:
+                        visible: mutedIconSensor.containsMouse
-                        return "tiny/channel"
+                        orientation: StatusToolTip.Orientation.Bottom
-                        break;
+                        y: parent.height + 12
-                    default:
-                        return "tiny/public-chat"
                     }
                 }
             }
 
-            StatusBaseText {
+            // subtitle
-                id: chatName
+            RowLayout {
-                objectName: "statusChatInfoButtonNameText"
+                id: subtitleRow
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignLeading | Qt.AlignTop
+                Layout.rightMargin: 4
+                spacing: 0
 
-                anchors.left: statusIcon.visible ? statusIcon.right : parent.left
+                StatusSelectableText {
-                anchors.leftMargin: statusIcon.visible ? 1 : 0
+                    Layout.fillWidth: implicitWidth + separator.width + pinIcon.width + pinText.width > subtitleRow.width
-                anchors.top: parent.top
+                    text: root.subTitle
-
+                    color: Theme.palette.baseColor1
-                elide: Text.ElideRight
+                    font.pixelSize: 12
-                width: Math.min(implicitWidth, parent.width
+                    onLinkActivated: root.linkActivated(link)
-                                - statusIcon.width
-                                - statusChatInfoButtonTitle.mutedDelta)
-
-                text: statusChatInfoButton.type === StatusChatInfoButton.Type.PublicChat &&
-                      !statusChatInfoButton.title.startsWith("#") ?
-                          "#" + statusChatInfoButton.title :
-                          statusChatInfoButton.title
-                color: statusChatInfoButton.muted ? Theme.palette.directColor5 : Theme.palette.directColor1
-                font.pixelSize: 15
-                font.weight: Font.Medium
-            }
-
-            StatusIcon {
-                objectName: "mutedIcon"
-                id: mutedIcon
-                anchors.left: chatName.right
-                anchors.leftMargin: 4
-                anchors.top: chatName.top
-                anchors.topMargin: -2
-                width: 13
-                icon: "tiny/muted"
-                color: mutedIconSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
-                visible: statusChatInfoButton.muted
-
-                MouseArea {
-                    id: mutedIconSensor
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                    anchors.fill: parent
-                    onClicked: statusChatInfoButton.unmute()
                 }
 
-                StatusToolTip {
+                Rectangle {
-                    id: statusToolTip
+                    id: separator
-                    text: "Unmute"
+                    Layout.preferredHeight: 12
-                    visible: mutedIconSensor.containsMouse
+                    Layout.preferredWidth: 1
-                    orientation: StatusToolTip.Orientation.Bottom
+                    Layout.leftMargin: 4
-                    y: parent.height + 12
+                    Layout.rightMargin: 2
+                    color: Theme.palette.directColor7
+                    visible: root.subTitle && root.pinnedMessagesCount
                 }
-            }
-        }
 
-        Item {
+                StatusIcon {
-            id: statusChatInfoButtonSubTitle
+                    id: pinIcon
-            anchors.left: statusChatInfoButtonTitle.left
+                    Layout.preferredHeight: 14
-            anchors.top: statusChatInfoButtonTitle.bottom
+                    Layout.preferredWidth: 14
-            visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0
+                    visible: root.pinnedMessagesCount > 0
-            height: visible ? chatType.height : 0
+                    icon: "pin"
-            width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin
+                    color: Theme.palette.baseColor1
-                            - 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
-
-            StatusSelectableText {
-                id: chatType
-                text: statusChatInfoButton.subTitle
-                color: Theme.palette.baseColor1
-                font.pixelSize: 12
-                width: Math.min(parent.width - (pinIcon.visible ? divider.width + divider.anchors.leftMargin + pinIcon.width + pinIcon.anchors.leftMargin : 0),
-                                implicitWidth)
-                onLinkActivated: statusChatInfoButton.linkActivated(link)
-            }
-
-            Rectangle {
-                id: divider
-                height: 12
-                width: 1
-                color: Theme.palette.directColor7
-                anchors.left: chatType.right
-                anchors.leftMargin: 4
-                anchors.verticalCenter: chatType.verticalCenter
-                visible: !!chatType.text && pinIcon.visible
-            }
-
-            StatusIcon {
-                id: pinIcon
-
-                anchors.left: divider.visible ? divider.right : parent.left
-                anchors.leftMargin: -2
-                anchors.verticalCenter: chatType.verticalCenter
-                height: 14
-                visible: statusChatInfoButton.pinnedMessagesCount > 0
-                icon: "pin"
-                color: Theme.palette.baseColor1
-            }
-
-            StatusBaseText {
-                objectName: "StatusChatInfo_pinText"
-                anchors.left: pinIcon.right
-                anchors.leftMargin: -6
-                anchors.verticalCenter: pinIcon.verticalCenter
-
-                width: 14
-                text: statusChatInfoButton.pinnedMessagesCount
-                font.pixelSize: 12
-                font.underline: pinCountSensor.containsMouse
-                visible: pinIcon.visible
-                color: pinCountSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
-
-                MouseArea {
-                    objectName: "pinMessagesCounterSensor"
-                    id: pinCountSensor
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: statusChatInfoButton.pinnedMessagesCountClicked(mouse)
                 }
+
+                StatusBaseText {
+                    id: pinText
+                    TextMetrics {
+                         id: tm
+                         font: pinText.font
+                         elide: Text.ElideRight
+                         elideWidth: pinText.width
+                         text: qsTr("%Ln pinned message(s)", "", root.pinnedMessagesCount)
+                     }
+
+                    objectName: "StatusChatInfo_pinText"
+                    Layout.fillWidth: true
+                    text: tm.elidedText !== tm.text ? root.pinnedMessagesCount : tm.text
+                    font.pixelSize: 12
+                    font.underline: pinCountSensor.containsMouse
+                    visible: root.pinnedMessagesCount
+                    color: pinCountSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
+
+                    MouseArea {
+                        objectName: "pinMessagesCounterSensor"
+                        id: pinCountSensor
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: root.pinnedMessagesCountClicked(mouse)
+                    }
+                }
+
+                Item { Layout.fillWidth: true }
             }
         }
     }