status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(StatusChatInfoButton): pinned messages counter 

- fix the "pinned messages" counter, add plural handling (Fixes #899)
- modernize using layouts (Fixes #898)
- add some more examples
This commit is contained in:
Lukáš Tinkl 2022-09-13 15:08:06 +02:00 committed by Lukáš Tinkl
parent e17088304b
commit 9a24d59ea8
3 changed files with 179 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
sandbox/controls/Controls.qml
View File

@ -150,13 +150,13 @@ GridLayout {
implicitHeight: 48 implicitHeight: 48
StatusChatInfoButton { StatusChatInfoButton {
title: "Iuri Matias elided" title: "Iuri Matias elided"
subTitle: "Contact" subTitle: "Very long subtitle should elide as well"
asset.color: Theme.palette.miscColor7 asset.color: Theme.palette.miscColor7
asset.isImage: true asset.isImage: true
asset.name: "qrc:/demoapp/data/profile-image-1.jpeg" asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
type: StatusChatInfoButton.Type.OneToOneChat type: StatusChatInfoButton.Type.OneToOneChat
muted: true muted: true
pinnedMessagesCount: 1 pinnedMessagesCount: 10
width: 100 width: 100
} }
} }
@ -199,6 +199,14 @@ GridLayout {
type: StatusChatInfoButton.Type.CommunityChat 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 { StatusSlider {
width: 360 width: 360
from: 0 from: 0

34
sandbox/controls/Layout.qml
View File

@ -28,8 +28,8 @@ Column {
headerContent: StatusChatInfoButton { headerContent: StatusChatInfoButton {
width: Math.min(implicitWidth, parent.width) width: Math.min(implicitWidth, parent.width)
title: "Some contact" title: "Muted public chat"
subTitle: "Contact" subTitle: "Some subtitle"
asset.color: Theme.palette.miscColor7 asset.color: Theme.palette.miscColor7
type: StatusChatInfoButton.Type.PublicChat type: StatusChatInfoButton.Type.PublicChat
pinnedMessagesCount: 1 pinnedMessagesCount: 1
@ -44,14 +44,35 @@ Column {
headerContent: StatusChatInfoButton { headerContent: StatusChatInfoButton {
width: Math.min(implicitWidth, parent.width) width: Math.min(implicitWidth, parent.width)
title: "Some contact" title: "Group chat"
subTitle: "Contact" subTitle: "Group chat subtitle"
asset.color: Theme.palette.miscColor7 asset.color: Theme.palette.miscColor7
type: StatusChatInfoButton.Type.OneToOneChat type: StatusChatInfoButton.Type.GroupChat
pinnedMessagesCount: 1 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 { StatusToolBar {
notificationCount: 1 notificationCount: 1
width: 518 width: 518
@ -473,8 +494,5 @@ Column {
} }
} }
} }
} }
} }

206
src/StatusQ/Controls/StatusChatInfoButton.qml
View File

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