fix(ActivityCenter): Fix CommunityBadge eliding

Close #9402

ui/StatusQ/src/StatusQ/Controls/StatusLinkText.qml

@@ -0,0 +1,64 @@
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+import QtQuick 2.0
+import QtQuick.Layouts 1.0
+
+import StatusQ.Core 0.1
+/*!
+   \qmltype StatusLinkText
+   \inherits StatusBaseText
+   \inqmlmodule StatusQ.Controls
+   \since StatusQ.Controls 0.1
+   \brief Displays text abailable for mouse interaction and styled as link.
+
+   Example of how to use it:
+
+   \qml
+        StatusLinkText {
+            text: qsTr("Click me")
+            onClicked: console,log("link clicked")
+        }
+   \endqml
+
+   For a list of components available see StatusQ.
+*/
+
+StatusBaseText {
+    id: root
+
+    /*!
+       \qmlproperty StatusLinkText StatusLinkText::linkColor
+       This property holds text color while it's hovered by mouse cursor
+    */
+    property color linkColor: Theme.palette.primaryColor1
+
+    /*!
+       \qmlproperty StatusLinkText StatusLinkText::normalColor
+       This property holds text color in unhovered state
+    */
+    property color normalColor: Theme.palette.baseColor1
+
+    /*!
+       \qmlproperty StatusLinkText StatusLinkText::containsMouse
+       This property true whenever text is hoverd by mouse cursor
+    */
+    readonly property alias containsMouse: textMouseArea.containsMouse
+
+    signal clicked()
+
+    maximumLineCount: 1
+    elide: Text.ElideRight
+    color: root.containsMouse ? root.linkColor : root.normalColor
+    font.pixelSize: 13
+    font.weight: Font.Medium
+    font.underline: root.containsMouse
+
+    MouseArea {
+        id: textMouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: root.clicked()
+    }
+}

ui/StatusQ/src/StatusQ/Controls/qmldir

@@ -54,3 +54,4 @@ StatusTextArea 0.1 StatusTextArea.qml
 StatusBackButton 0.1 StatusBackButton.qml
 StatusPasswordInput 0.1 StatusPasswordInput.qml
 StatusTextWithLoadingState 0.1 StatusTextWithLoadingState.qml
+StatusLinkText 0.1 StatusLinkText.qml

ui/app/mainui/activitycenter/controls/CommunityBadge.qml

@@ -4,6 +4,7 @@ import QtGraphicalEffects 1.13
 
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 
 import utils 1.0
@@ -30,6 +31,7 @@ Badge {
 
     RowLayout {
         id: layout
+        anchors.fill: parent
 
         anchors {
             fill: parent
@@ -61,21 +63,14 @@ Badge {
 
         RowLayout {
             spacing: 0
+            Layout.fillWidth: true
             Layout.alignment: Qt.AlignVCenter
 
-            StyledTextEdit {
+            StatusLinkText {
-                Layout.maximumWidth: 300
+                Layout.fillWidth: true
                 Layout.alignment: Qt.AlignVCenter
-                text: Utils.getLinkStyle(root.communityName, hoveredLink, Theme.palette.baseColor1)
+                text: root.communityName
-                readOnly: true
+                onClicked: root.communityNameClicked()
-                textFormat: Text.RichText
-                clip: true
-                color: Theme.palette.baseColor1
-                font.pixelSize: 13
-                font.weight: Font.Medium
-                onLinkActivated: {
-                    root.communityNameClicked()
-                }
             }
 
             StatusIcon {
@@ -86,20 +81,12 @@ Badge {
                 color: Theme.palette.baseColor1
             }
 
-            StyledTextEdit {
+            StatusLinkText {
-                Layout.maximumWidth: 300
+                Layout.fillWidth: true
                 Layout.alignment: Qt.AlignVCenter
                 visible: root.channelName.length > 0
-                text: Utils.getLinkStyle("#" + root.channelName, hoveredLink, Theme.palette.baseColor1)
+                text: "#" + root.channelName
-                readOnly: true
+                onClicked: root.channelNameClicked()
-                textFormat: Text.RichText
-                clip: true
-                color: Theme.palette.baseColor1
-                font.pixelSize: 13
-                font.weight: Font.Medium
-                onLinkActivated: {
-                    root.channelNameClicked()
-                }
             }
         }
     }

ui/app/mainui/activitycenter/views/ActivityNotificationBase.qml

@@ -51,7 +51,9 @@ Item {
         anchors.top: dateGroupLabel.visible ? dateGroupLabel.bottom : parent.top
         anchors.topMargin: Style.current.smallPadding
         anchors.right: ctaLoader.left
+        anchors.rightMargin: Style.current.smallPadding
         anchors.left: parent.left
+        clip: true
     }
 
     Loader {

ui/app/mainui/activitycenter/views/ActivityNotificationCommunityKicked.qml

@@ -16,6 +16,7 @@ ActivityNotificationBase {
     id: root
 
     bodyComponent: RowLayout {
+        width: parent.width
         height: 50
         readonly property var community: notification ?
                                 root.store.getCommunityDetailsAsJson(notification.communityId) :
@@ -46,6 +47,7 @@ ActivityNotificationBase {
             communityColor: community ? community.color : "black"
             onCommunityNameClicked: root.store.setActiveCommunity(notification.communityId)
             Layout.alignment: Qt.AlignVCenter
+            Layout.maximumWidth: 190
         }
 
         Item {

ui/app/mainui/activitycenter/views/ActivityNotificationCommunityMembershipRequest.qml

@@ -42,6 +42,7 @@ ActivityNotificationMessage {
             root.store.setActiveCommunity(notification.communityId)
             root.closeActivityCenter()
         }
+        Layout.maximumWidth: 190
     }
 
     ctaComponent: MembershipCta {

ui/app/mainui/activitycenter/views/ActivityNotificationCommunityRequest.qml

@@ -16,6 +16,7 @@ ActivityNotificationBase {
     id: root
 
     bodyComponent: RowLayout {
+        width: parent.width
         height: 50
         readonly property var community: notification ? 
                                 root.store.getCommunityDetailsAsJson(notification.communityId) :
@@ -48,6 +49,7 @@ ActivityNotificationBase {
             communityColor: community ? community.color : "black"
             onCommunityNameClicked: root.store.setActiveCommunity(notification.communityId)
             Layout.alignment: Qt.AlignVCenter
+            Layout.maximumWidth: 190
         }
 
         StatusBaseText {

ui/app/mainui/activitycenter/views/ActivityNotificationMessage.qml

@@ -62,7 +62,8 @@ ActivityNotificationBase {
     }
 
     bodyComponent: MouseArea {
-        height: messageView.implicitHeight
+        implicitWidth: parent.width
+        implicitHeight: messageView.implicitHeight
         hoverEnabled: root.messageBadgeComponent
         cursorShape: Qt.PointingHandCursor
         onClicked: {