From 9a24d59ea86b68d0279df6fdb2a85fd93778bad0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= Date: Tue, 13 Sep 2022 15:08:06 +0200 Subject: [PATCH] fix(StatusChatInfoButton): pinned messages counter - fix the "pinned messages" counter, add plural handling (Fixes #899) - modernize using layouts (Fixes #898) - add some more examples --- sandbox/controls/Controls.qml | 12 +- sandbox/controls/Layout.qml | 34 +- src/StatusQ/Controls/StatusChatInfoButton.qml | 322 ++++++++---------- 3 files changed, 179 insertions(+), 189 deletions(-) diff --git a/sandbox/controls/Controls.qml b/sandbox/controls/Controls.qml index 7f82b491..f45f562a 100644 --- a/sandbox/controls/Controls.qml +++ b/sandbox/controls/Controls.qml @@ -150,13 +150,13 @@ GridLayout { implicitHeight: 48 StatusChatInfoButton { title: "Iuri Matias elided" - subTitle: "Contact" + subTitle: "Very long subtitle should elide as well" asset.color: Theme.palette.miscColor7 asset.isImage: true asset.name: "qrc:/demoapp/data/profile-image-1.jpeg" type: StatusChatInfoButton.Type.OneToOneChat muted: true - pinnedMessagesCount: 1 + pinnedMessagesCount: 10 width: 100 } } @@ -199,6 +199,14 @@ GridLayout { 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 { width: 360 from: 0 diff --git a/sandbox/controls/Layout.qml b/sandbox/controls/Layout.qml index f5ef36fb..1a2114bb 100644 --- a/sandbox/controls/Layout.qml +++ b/sandbox/controls/Layout.qml @@ -28,8 +28,8 @@ Column { headerContent: StatusChatInfoButton { width: Math.min(implicitWidth, parent.width) - title: "Some contact" - subTitle: "Contact" + title: "Muted public chat" + subTitle: "Some subtitle" asset.color: Theme.palette.miscColor7 type: StatusChatInfoButton.Type.PublicChat pinnedMessagesCount: 1 @@ -44,14 +44,35 @@ Column { headerContent: StatusChatInfoButton { width: Math.min(implicitWidth, parent.width) - title: "Some contact" - subTitle: "Contact" + title: "Group chat" + subTitle: "Group chat subtitle" asset.color: Theme.palette.miscColor7 - type: StatusChatInfoButton.Type.OneToOneChat + type: StatusChatInfoButton.Type.GroupChat 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 { notificationCount: 1 width: 518 @@ -473,8 +494,5 @@ Column { } } } - - } } - diff --git a/src/StatusQ/Controls/StatusChatInfoButton.qml b/src/StatusQ/Controls/StatusChatInfoButton.qml index b7c5962c..ef815444 100644 --- a/src/StatusQ/Controls/StatusChatInfoButton.qml +++ b/src/StatusQ/Controls/StatusChatInfoButton.qml @@ -1,24 +1,20 @@ import QtQuick 2.14 +import QtQuick.Controls 2.14 +import QtQuick.Layouts 1.14 + import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 import StatusQ.Components 0.1 -Rectangle { - id: statusChatInfoButton +Button { + id: root objectName: "chatInfoButton" - implicitWidth: identicon.width + - Math.max( - statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.implicitWidth, - statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.implicitWidth - ) + 8 - implicitHeight: 48 - - property string title: "" - property string subTitle: "" - property bool muted: false - property int pinnedMessagesCount: 0 + property string title: text + property string subTitle + property bool muted + property int pinnedMessagesCount property StatusAssetSettings asset: StatusAssetSettings { width: 36 @@ -29,9 +25,7 @@ Rectangle { property int type: StatusChatInfoButton.Type.PublicChat property alias tooltip: statusToolTip - property alias sensor: sensor - signal clicked(var mouse) signal pinnedMessagesCountClicked(var mouse) signal unmute() signal linkActivated(string link) @@ -46,192 +40,162 @@ Rectangle { CommunityChat // 6 } - radius: 8 - color: sensor.enabled && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent" + horizontalPadding: 4 + verticalPadding: 2 + spacing: 4 - MouseArea { - id: sensor - anchors.fill: parent - hoverEnabled: true - cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor + background: Rectangle { + radius: 8 + color: root.enabled && root.hovered ? Theme.palette.baseColor2 : "transparent" - onClicked: statusChatInfoButton.clicked(mouse) + MouseArea { + anchors.fill: parent + acceptedButtons: Qt.NoButton + cursorShape: root.hovered ? Qt.PointingHandCursor : undefined + } + } + contentItem: RowLayout { + spacing: root.spacing + + // identicon StatusSmartIdenticon { id: identicon - anchors.left: parent.left - anchors.leftMargin: 4 - anchors.verticalCenter: parent.verticalCenter - asset: statusChatInfoButton.asset - name: statusChatInfoButton.title + asset: root.asset + name: root.title } - Item { - id: statusChatInfoButtonTitle - anchors.top: identicon.top - anchors.topMargin: statusChatInfoButtonSubTitle.visible ? 0 : 8 - anchors.left: identicon.right - anchors.leftMargin: 8 + // text + ColumnLayout { + Layout.fillWidth: true + spacing: 2 - width: Math.min(parent.width - anchors.leftMargin - - identicon.width - identicon.anchors.leftMargin, - implicitWidth) - height: chatName.height + // title + RowLayout { + Layout.fillWidth: true + Layout.alignment: Qt.AlignLeading | Qt.AlignBottom + spacing: root.spacing - implicitWidth: statusIcon.width + chatName.anchors.leftMargin + chatName.implicitWidth - + mutedDelta + StatusIcon { + visible: root.type !== StatusChatInfoButton.Type.OneToOneChat + Layout.preferredWidth: 14 + Layout.preferredHeight: 14 + color: root.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1 + icon: { + switch (root.type) { + case StatusChatInfoButton.Type.PublicCat: + return "tiny/public-chat" + case StatusChatInfoButton.Type.GroupChat: + return "tiny/group" + case StatusChatInfoButton.Type.CommunityChat: + return "tiny/channel" + default: + return "tiny/public-chat" + } + } + } - property real mutedDelta: mutedIcon.visible ? mutedIcon.width + 8 : 0 + StatusBaseText { + objectName: "statusChatInfoButtonNameText" + Layout.fillWidth: true + elide: Text.ElideRight + text: root.type === StatusChatInfoButton.Type.PublicChat && !root.title.startsWith("#") ? + "#" + root.title + : root.title + color: root.muted ? Theme.palette.directColor5 : Theme.palette.directColor1 + font.weight: Font.Medium + } - StatusIcon { - id: statusIcon - anchors.top: parent.top - anchors.topMargin: -2 - anchors.left: parent.left + StatusIcon { + objectName: "mutedIcon" + Layout.preferredWidth: 13 + Layout.preferredHeight: 13 + icon: "tiny/muted" + color: mutedIconSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1 + visible: root.muted - visible: statusChatInfoButton.type !== StatusChatInfoButton.Type.OneToOneChat - width: visible ? 14 : 0 - color: statusChatInfoButton.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1 - icon: { - switch (statusChatInfoButton.type) { - case StatusChatInfoButton.Type.PublicCat: - return "tiny/public-chat" - break; - case StatusChatInfoButton.Type.GroupChat: - return "tiny/group" - break; - case StatusChatInfoButton.Type.CommunityChat: - return "tiny/channel" - break; - default: - return "tiny/public-chat" + MouseArea { + id: mutedIconSensor + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + anchors.fill: parent + onClicked: root.unmute() + } + + StatusToolTip { + id: statusToolTip + text: qsTr("Unmute") + visible: mutedIconSensor.containsMouse + orientation: StatusToolTip.Orientation.Bottom + y: parent.height + 12 } } } - StatusBaseText { - id: chatName - objectName: "statusChatInfoButtonNameText" + // subtitle + RowLayout { + id: subtitleRow + Layout.fillWidth: true + Layout.alignment: Qt.AlignLeading | Qt.AlignTop + Layout.rightMargin: 4 + spacing: 0 - anchors.left: statusIcon.visible ? statusIcon.right : parent.left - anchors.leftMargin: statusIcon.visible ? 1 : 0 - anchors.top: parent.top - - elide: Text.ElideRight - width: Math.min(implicitWidth, parent.width - - statusIcon.width - - statusChatInfoButtonTitle.mutedDelta) - - 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 - } - - StatusIcon { - objectName: "mutedIcon" - id: mutedIcon - anchors.left: chatName.right - anchors.leftMargin: 4 - anchors.top: chatName.top - anchors.topMargin: -2 - width: 13 - icon: "tiny/muted" - color: mutedIconSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1 - visible: statusChatInfoButton.muted - - MouseArea { - id: mutedIconSensor - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - anchors.fill: parent - onClicked: statusChatInfoButton.unmute() + StatusSelectableText { + Layout.fillWidth: implicitWidth + separator.width + pinIcon.width + pinText.width > subtitleRow.width + text: root.subTitle + color: Theme.palette.baseColor1 + font.pixelSize: 12 + onLinkActivated: root.linkActivated(link) } - StatusToolTip { - id: statusToolTip - text: "Unmute" - visible: mutedIconSensor.containsMouse - orientation: StatusToolTip.Orientation.Bottom - y: parent.height + 12 + Rectangle { + id: separator + Layout.preferredHeight: 12 + Layout.preferredWidth: 1 + Layout.leftMargin: 4 + Layout.rightMargin: 2 + color: Theme.palette.directColor7 + visible: root.subTitle && root.pinnedMessagesCount } - } - } - Item { - id: statusChatInfoButtonSubTitle - anchors.left: statusChatInfoButtonTitle.left - anchors.top: statusChatInfoButtonTitle.bottom - visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0 - height: visible ? chatType.height : 0 - width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin - - 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 { - id: chatType - text: statusChatInfoButton.subTitle - color: Theme.palette.baseColor1 - font.pixelSize: 12 - width: Math.min(parent.width - (pinIcon.visible ? divider.width + divider.anchors.leftMargin + pinIcon.width + pinIcon.anchors.leftMargin : 0), - implicitWidth) - onLinkActivated: statusChatInfoButton.linkActivated(link) - } - - Rectangle { - id: divider - height: 12 - width: 1 - color: Theme.palette.directColor7 - anchors.left: chatType.right - anchors.leftMargin: 4 - anchors.verticalCenter: chatType.verticalCenter - visible: !!chatType.text && pinIcon.visible - } - - StatusIcon { - id: pinIcon - - anchors.left: divider.visible ? divider.right : parent.left - anchors.leftMargin: -2 - anchors.verticalCenter: chatType.verticalCenter - height: 14 - visible: statusChatInfoButton.pinnedMessagesCount > 0 - icon: "pin" - color: Theme.palette.baseColor1 - } - - StatusBaseText { - objectName: "StatusChatInfo_pinText" - anchors.left: pinIcon.right - anchors.leftMargin: -6 - anchors.verticalCenter: pinIcon.verticalCenter - - width: 14 - text: statusChatInfoButton.pinnedMessagesCount - font.pixelSize: 12 - font.underline: pinCountSensor.containsMouse - visible: pinIcon.visible - color: pinCountSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1 - - MouseArea { - objectName: "pinMessagesCounterSensor" - id: pinCountSensor - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - onClicked: statusChatInfoButton.pinnedMessagesCountClicked(mouse) + StatusIcon { + id: pinIcon + Layout.preferredHeight: 14 + Layout.preferredWidth: 14 + visible: root.pinnedMessagesCount > 0 + icon: "pin" + color: Theme.palette.baseColor1 } + + StatusBaseText { + 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 + font.pixelSize: 12 + font.underline: pinCountSensor.containsMouse + 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) + } + } + + Item { Layout.fillWidth: true } } } }