status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Lukáš Tinkl 2023-02-21 11:58:48 +01:00 committed by Alexandra Betouni
parent ff75e862e5
commit 79645b53ce
6 changed files with 76 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui/StatusQ/sandbox/controls/Controls.qml
View File

@ -5,12 +5,8 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import Sandbox 0.1
GridLayout {
columns: 1
columnSpacing: 5
rowSpacing: 5
ColumnLayout {
spacing: 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"
subTitle: "Some very long description text to see how the whole item wraps or elides"
title: "public-chat-type"
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 {

18
ui/StatusQ/src/StatusQ/Components/StatusChatInfoToolBar.qml
View File

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

1
ui/StatusQ/src/StatusQ/Components/StatusToolBar.qml
View File

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

96
ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml
View File

@ -1,6 +1,6 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtQuick 2.15
import QtQuick.Controls 2.15
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 {
anchors.fill: parent
acceptedButtons: Qt.NoButton
cursorShape: root.hovered ? Qt.PointingHandCursor : undefined
HoverHandler {
enabled: root.hoverEnabled
cursorShape: enabled ? 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 {
objectName: "statusChatInfoButtonNameText"
TruncatedTextWithTooltip {
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 {
Layout.fillWidth: implicitWidth + separator.width + pinIcon.width + pinText.width > subtitleRow.width
TruncatedTextWithTooltip {
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
MouseArea {
objectName: "pinMessagesCounterSensor"
id: pinCountSensor
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: root.pinnedMessagesCountClicked(mouse)
color: hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1
cursorShape: Qt.PointingHandCursor
TapHandler {
onSingleTapped: root.pinnedMessagesCountClicked()
}
}
Item { Layout.fillWidth: true }
}
}
Item { Layout.fillWidth: true }
}
}

1
ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml
View File

@ -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

9
ui/app/AppLayouts/Chat/views/ChatHeaderContentView.qml
View File

@ -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