fix: truncation of channel description and pinned message text

The chat title/subtitle no longer bleed into the action buttons

- handle long texts in chat description, elide them and show the whole
text in a tooltip
- minor UI fixes in ChatHeaderContentView and StatusToolBar
- adjust Sandbox' Controls page

Fixes #9583

ui/StatusQ/sandbox/controls/Controls.qml

@@ -5,12 +5,8 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 
-import Sandbox 0.1
+ColumnLayout {
-
+    spacing: 5
-GridLayout {
-    columns: 1
-    columnSpacing: 5
-    rowSpacing: 5
 
     StatusSelectableText {
         color: Theme.palette.baseColor1
@@ -146,7 +142,7 @@ GridLayout {
     }
 
     Item {
-        implicitWidth: 100
+        implicitWidth: 140
         implicitHeight: 48
         StatusChatInfoButton {
             title: "Iuri Matias elided"
@@ -157,7 +153,7 @@ GridLayout {
             type: StatusChatInfoButton.Type.OneToOneChat
             muted: true
             pinnedMessagesCount: 10
-            width: 100
+            width: parent.width
         }
     }
 
@@ -183,6 +179,7 @@ GridLayout {
         pinnedMessagesCount: 1
         asset.color: Theme.palette.miscColor7
         type: StatusChatInfoButton.Type.GroupChat
+        muted: true
     }
 
     StatusChatInfoButton {
@@ -193,11 +190,17 @@ GridLayout {
     }
 
     StatusChatInfoButton {
-        title: "community-channel"
+        title: "public-chat-type"
-        subTitle: "Some very long description text to see how the whole item wraps or elides"
+        subTitle: "Some very long description text with hover disabled to see how the whole item wraps or elides"
         asset.color: Theme.palette.miscColor7
-        type: StatusChatInfoButton.Type.CommunityChat
+        type: StatusChatInfoButton.Type.PublicChat
         pinnedMessagesCount: 3
+        hoverEnabled: false
+    }
+
+    StatusChatInfoButton {
+        title: "No subtitle and no type"
+        asset.color: Theme.palette.miscColor7
     }
 
     StatusSlider {

ui/StatusQ/src/StatusQ/Components/StatusChatInfoToolBar.qml

@@ -73,19 +73,17 @@ Item {
                     duration: 150
                     direction: RotationAnimation.Clockwise
                     easing.type: Easing.InCubic
-                    running: visible
                 }
             },
             Transition {
-								from: "pressed"
+                from: "pressed"
-								to: "default"
+                to: "default"
-								RotationAnimation {
+                RotationAnimation {
-										duration: 150
+                    duration: 150
-										direction: RotationAnimation.Counterclockwise
+                    direction: RotationAnimation.Counterclockwise
-										easing.type: Easing.OutCubic
+                    easing.type: Easing.OutCubic
-										running: visible
+                }
-								}
+            }
-        		}
         ]
 
         onClicked: {

ui/StatusQ/src/StatusQ/Components/StatusToolBar.qml

@@ -56,6 +56,7 @@ ToolBar {
 
         StatusActivityCenterButton {
             id: notificationButton
+            Layout.leftMargin: 8
             unreadNotificationsCount: root.notificationCount
             hasUnseenNotifications: root.hasUnseenNotifications
             onClicked: root.notificationButtonClicked()

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

@@ -1,6 +1,6 @@
-import QtQuick 2.14
+import QtQuick 2.15
-import QtQuick.Controls 2.14
+import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.14
+import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -28,7 +28,7 @@ Button {
     property int type: StatusChatInfoButton.Type.Unknown0
     property alias tooltip: statusToolTip
 
-    signal pinnedMessagesCountClicked(var mouse)
+    signal pinnedMessagesCountClicked()
     signal unmute()
     signal linkActivated(string link)
 
@@ -50,10 +50,29 @@ Button {
         radius: 8
         color: root.enabled && root.hovered ? Theme.palette.baseColor2 : "transparent"
 
-        MouseArea {
+        HoverHandler {
-            anchors.fill: parent
+            enabled: root.hoverEnabled
-            acceptedButtons: Qt.NoButton
+            cursorShape: enabled ? Qt.PointingHandCursor : undefined
-            cursorShape: root.hovered ? Qt.PointingHandCursor : undefined
+        }
+    }
+
+    component TruncatedTextWithTooltip: StatusBaseText {
+        readonly property alias hovered: truncatedHandler.hovered
+        property alias cursorShape: truncatedHandler.cursorShape
+
+        elide: Text.ElideRight
+
+        StatusToolTip {
+            text: parent.text
+            visible: truncatedHandler.hovered && parent.truncated
+            orientation: StatusToolTip.Orientation.Bottom
+            delay: 500
+            y: parent.height + 12
+        }
+
+        HoverHandler {
+            id: truncatedHandler
+            cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : undefined
         }
     }
 
@@ -79,28 +98,29 @@ Button {
                 spacing: 1
 
                 StatusIcon {
-                    visible: root.type !== StatusChatInfoButton.Type.OneToOneChat && !forceHideTypeIcon
+                    visible: root.type !== StatusChatInfoButton.Type.OneToOneChat && !forceHideTypeIcon && icon
                     Layout.preferredWidth: 14
                     Layout.preferredHeight: 14
                     color: root.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1
                     icon: {
                         switch (root.type) {
-                        case StatusChatInfoButton.Type.PublicCat:
+                        case StatusChatInfoButton.Type.PublicChat:
                             return "tiny/public-chat"
                         case StatusChatInfoButton.Type.GroupChat:
                             return "tiny/group"
                         case StatusChatInfoButton.Type.CommunityChat:
                             return "tiny/channel"
                         default:
-                            return "tiny/public-chat"
+                            return ""
                         }
                     }
                 }
 
-                StatusBaseText {
+                TruncatedTextWithTooltip {
-                    objectName: "statusChatInfoButtonNameText"
                     Layout.fillWidth: true
-                    elide: Text.ElideRight
+                    Layout.maximumWidth: Math.ceil(implicitWidth)
+                    Layout.alignment: Qt.AlignVCenter
+                    objectName: "statusChatInfoButtonNameText"
                     text: root.title
                     color: root.muted ? Theme.palette.directColor5 : Theme.palette.directColor1
                     font.weight: Font.Medium
@@ -134,23 +154,22 @@ Button {
 
             // subtitle
             RowLayout {
-                id: subtitleRow
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignLeading | Qt.AlignTop
-                Layout.rightMargin: 4
+                visible: root.subTitle || root.pinnedMessagesCount
                 spacing: 0
 
-                StatusSelectableText {
+                TruncatedTextWithTooltip {
-                    Layout.fillWidth: implicitWidth + separator.width + pinIcon.width + pinText.width > subtitleRow.width
+                    Layout.fillWidth: true
+                    Layout.maximumWidth: Math.ceil(implicitWidth)
                     text: root.subTitle
-                    visible: root.subTitle
+                    visible: text
                     color: Theme.palette.baseColor1
                     font.pixelSize: 12
                     onLinkActivated: root.linkActivated(link)
                 }
 
                 Rectangle {
-                    id: separator
                     Layout.preferredHeight: 12
                     Layout.preferredWidth: 1
                     Layout.leftMargin: 4
@@ -160,44 +179,31 @@ Button {
                 }
 
                 StatusIcon {
-                    id: pinIcon
                     Layout.preferredHeight: 14
                     Layout.preferredWidth: 14
-                    visible: root.pinnedMessagesCount > 0
+                    visible: root.pinnedMessagesCount
                     icon: "pin"
-                    color: Theme.palette.baseColor1
+                    color: pinText.hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1
                 }
 
-                StatusBaseText {
+                TruncatedTextWithTooltip {
                     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
+                    Layout.maximumWidth: Math.ceil(implicitWidth)
+                    text: qsTr("%Ln pinned message(s)", "", root.pinnedMessagesCount)
                     font.pixelSize: 12
-                    font.underline: pinCountSensor.containsMouse
+                    font.underline: hovered
                     visible: root.pinnedMessagesCount
-                    color: pinCountSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
+                    color: hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1
-
+                    cursorShape: Qt.PointingHandCursor
-                    MouseArea {
+                    TapHandler {
-                        objectName: "pinMessagesCounterSensor"
+                        onSingleTapped: root.pinnedMessagesCountClicked()
-                        id: pinCountSensor
-                        anchors.fill: parent
-                        hoverEnabled: true
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: root.pinnedMessagesCountClicked(mouse)
                     }
                 }
-
-                Item { Layout.fillWidth: true }
             }
         }
+
+        Item { Layout.fillWidth: true }
     }
 }

ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml

@@ -67,6 +67,7 @@ ToolTip {
     contentItem: StatusBaseText {
         text: statusToolTip.text
         color: Theme.palette.white
+        linkColor: Theme.palette.white
         wrapMode: Text.WordWrap
         font.pixelSize: 13
         font.weight: Font.Medium

ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml

@@ -51,18 +51,11 @@ Item {
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         anchors.left: parent.left
-        anchors.right: d.selectingMembers ? parent.right : undefined
+        anchors.right: d.selectingMembers ? parent.right : actionButtons.left
 
         sourceComponent: d.selectingMembers ? membersSelector : statusChatInfoButton
     }
 
-    Rectangle {
-        anchors.fill: actionButtons
-        visible: actionButtons.visible
-        opacity: 0.8
-        color: Style.current.background
-    }
-
     RowLayout {
         id: actionButtons