From 165271dbeae9dea98951285cf4198b6b47f09335 Mon Sep 17 00:00:00 2001 From: MishkaRogachev Date: Wed, 15 Feb 2023 16:24:18 +0400 Subject: [PATCH] fix(ActivityCenter): Fix CommunityBadge eliding Close #9402 --- .../src/StatusQ/Controls/StatusLinkText.qml | 64 +++++++++++++++++++ ui/StatusQ/src/StatusQ/Controls/qmldir | 1 + .../controls/CommunityBadge.qml | 35 ++++------ .../views/ActivityNotificationBase.qml | 2 + .../ActivityNotificationCommunityKicked.qml | 2 + ...NotificationCommunityMembershipRequest.qml | 1 + .../ActivityNotificationCommunityRequest.qml | 2 + .../views/ActivityNotificationMessage.qml | 3 +- 8 files changed, 85 insertions(+), 25 deletions(-) create mode 100644 ui/StatusQ/src/StatusQ/Controls/StatusLinkText.qml diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusLinkText.qml b/ui/StatusQ/src/StatusQ/Controls/StatusLinkText.qml new file mode 100644 index 0000000000..27dc0541a3 --- /dev/null +++ b/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() + } +} \ No newline at end of file diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir index 5db39c6a12..95bcf0214a 100644 --- a/ui/StatusQ/src/StatusQ/Controls/qmldir +++ b/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 diff --git a/ui/app/mainui/activitycenter/controls/CommunityBadge.qml b/ui/app/mainui/activitycenter/controls/CommunityBadge.qml index 8312153203..36a09e45fc 100644 --- a/ui/app/mainui/activitycenter/controls/CommunityBadge.qml +++ b/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 { - Layout.maximumWidth: 300 + StatusLinkText { + Layout.fillWidth: true Layout.alignment: Qt.AlignVCenter - text: Utils.getLinkStyle(root.communityName, hoveredLink, Theme.palette.baseColor1) - readOnly: true - textFormat: Text.RichText - clip: true - color: Theme.palette.baseColor1 - font.pixelSize: 13 - font.weight: Font.Medium - onLinkActivated: { - root.communityNameClicked() - } + text: root.communityName + onClicked: root.communityNameClicked() } StatusIcon { @@ -86,20 +81,12 @@ Badge { color: Theme.palette.baseColor1 } - StyledTextEdit { - Layout.maximumWidth: 300 + StatusLinkText { + Layout.fillWidth: true Layout.alignment: Qt.AlignVCenter visible: root.channelName.length > 0 - text: Utils.getLinkStyle("#" + root.channelName, hoveredLink, Theme.palette.baseColor1) - readOnly: true - textFormat: Text.RichText - clip: true - color: Theme.palette.baseColor1 - font.pixelSize: 13 - font.weight: Font.Medium - onLinkActivated: { - root.channelNameClicked() - } + text: "#" + root.channelName + onClicked: root.channelNameClicked() } } } diff --git a/ui/app/mainui/activitycenter/views/ActivityNotificationBase.qml b/ui/app/mainui/activitycenter/views/ActivityNotificationBase.qml index 493e73caba..c77b24278c 100644 --- a/ui/app/mainui/activitycenter/views/ActivityNotificationBase.qml +++ b/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 { diff --git a/ui/app/mainui/activitycenter/views/ActivityNotificationCommunityKicked.qml b/ui/app/mainui/activitycenter/views/ActivityNotificationCommunityKicked.qml index fb8801c078..46b2cff453 100644 --- a/ui/app/mainui/activitycenter/views/ActivityNotificationCommunityKicked.qml +++ b/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 { diff --git a/ui/app/mainui/activitycenter/views/ActivityNotificationCommunityMembershipRequest.qml b/ui/app/mainui/activitycenter/views/ActivityNotificationCommunityMembershipRequest.qml index ccbcf962c1..7aa4a939bc 100644 --- a/ui/app/mainui/activitycenter/views/ActivityNotificationCommunityMembershipRequest.qml +++ b/ui/app/mainui/activitycenter/views/ActivityNotificationCommunityMembershipRequest.qml @@ -42,6 +42,7 @@ ActivityNotificationMessage { root.store.setActiveCommunity(notification.communityId) root.closeActivityCenter() } + Layout.maximumWidth: 190 } ctaComponent: MembershipCta { diff --git a/ui/app/mainui/activitycenter/views/ActivityNotificationCommunityRequest.qml b/ui/app/mainui/activitycenter/views/ActivityNotificationCommunityRequest.qml index 1a8adaf637..c042f031f6 100644 --- a/ui/app/mainui/activitycenter/views/ActivityNotificationCommunityRequest.qml +++ b/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 { diff --git a/ui/app/mainui/activitycenter/views/ActivityNotificationMessage.qml b/ui/app/mainui/activitycenter/views/ActivityNotificationMessage.qml index 89813aa635..17afdfce53 100644 --- a/ui/app/mainui/activitycenter/views/ActivityNotificationMessage.qml +++ b/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: {