From 8a799182849fba81ee206683193d7ba57d2c333b Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Thu, 27 May 2021 14:41:14 +0200 Subject: [PATCH] feat(Controls): introduce `StatusChatInfoButton` Usage: ```qml StatusChatInfoButton { title: "Iuri Matias" subTitle: "Contact" icon.color: Theme.palette.miscColor7 // identicon used as fallback when image source isn't available image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" type: StatusChatInfoButton.Type.OneToOneChat // PublicChat | GroupChat | CommunityChat muted: true // default `false` pinnedMessagesCount: 1 // default `0` } ``` Closes: #79 --- sandbox/Controls.qml | 32 +++ src/StatusQ/Controls/StatusChatInfoButton.qml | 244 ++++++++++++++++++ src/StatusQ/Controls/qmldir | 1 + src/StatusQ/Core/Theme/StatusDarkTheme.qml | 4 + src/StatusQ/Core/Theme/StatusLightTheme.qml | 4 + src/StatusQ/Core/Theme/ThemePalette.qml | 4 + 6 files changed, 289 insertions(+) create mode 100644 src/StatusQ/Controls/StatusChatInfoButton.qml diff --git a/sandbox/Controls.qml b/sandbox/Controls.qml index 91a46273..23b7f12c 100644 --- a/sandbox/Controls.qml +++ b/sandbox/Controls.qml @@ -102,4 +102,36 @@ GridLayout { } StatusCheckBox {} + + StatusChatInfoButton { + title: "Iuri Matias" + subTitle: "Contact" + icon.color: Theme.palette.miscColor7 + image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" + type: StatusChatInfoButton.Type.OneToOneChat + muted: true + pinnedMessagesCount: 1 + } + + StatusChatInfoButton { + title: "group" + subTitle: "Group Chat" + pinnedMessagesCount: 1 + icon.color: Theme.palette.miscColor7 + type: StatusChatInfoButton.Type.GroupChat + } + + StatusChatInfoButton { + title: "public-chat" + subTitle: "Public Chat" + icon.color: Theme.palette.miscColor7 + type: StatusChatInfoButton.Type.PublicChat + } + + StatusChatInfoButton { + title: "community-channel" + subTitle: "Community Chat" + icon.color: Theme.palette.miscColor7 + type: StatusChatInfoButton.Type.CommunityChat + } } diff --git a/src/StatusQ/Controls/StatusChatInfoButton.qml b/src/StatusQ/Controls/StatusChatInfoButton.qml new file mode 100644 index 00000000..428e9898 --- /dev/null +++ b/src/StatusQ/Controls/StatusChatInfoButton.qml @@ -0,0 +1,244 @@ +import QtQuick 2.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 + + implicitWidth: identicon.width + + Math.max( + statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.width, + statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.width + ) + 8 + implicitHeight: 48 + + property string title: "" + property string subTitle: "" + property bool muted: false + property int pinnedMessagesCount: 0 + property StatusImageSettings image: StatusImageSettings {} + property StatusIconSettings icon: StatusIconSettings {} + property int type: StatusChatInfoButton.Type.PublicChat + property alias tooltip: statusToolTip + + signal clicked(var mouse) + signal pinnedMessagesCountClicked(var mouse) + signal unmute() + + enum Type { + PublicChat, + GroupChat, + CommunityChat, + OneToOneChat + } + + radius: 8 + color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusChatInfoButton.backgroundColor + + MouseArea { + id: sensor + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + + onClicked: statusChatInfoButton.clicked(mouse) + + Loader { + id: identicon + + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + + sourceComponent: !!statusChatInfoButton.image.source.toString() ? + statusRoundImageComponent : + statusLetterIdenticonComponent + } + + Component { + id: statusRoundImageComponent + + Item { + width: 36 + height: 36 + StatusRoundedImage { + id: statusRoundImage + width: parent.width + height: parent.height + image.source: statusChatInfoButton.image.source + } + Loader { + sourceComponent: { + switch (statusRoundImage.image.status) { + case Image.Loading: + return statusLoadingIndicator + break; + case Image.Error: + return statusLetterIdenticonComponent + break; + } + } + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + active: statusRoundImage.image.status === Image.Loading || statusRoundImage.image.status === Image.Error + } + + Component { + id: statusLoadingIndicator + StatusLoadingIndicator { + color: Theme.palette.directColor6 + } + } + } + } + + Component { + id: statusLetterIdenticonComponent + + StatusLetterIdenticon { + width: 36 + height: 36 + name: statusChatInfoButton.title + color: statusChatInfoButton.icon.color + } + } + + Item { + id: statusChatInfoButtonTitle + anchors.top: identicon.top + anchors.left: identicon.right + anchors.leftMargin: 8 + + width: statusIcon.width + chatName.anchors.leftMargin + chatName.width + (mutedIcon.visible ? mutedIcon.width + mutedIcon.anchors.leftMargin : 0) + height: chatName.height + + StatusIcon { + id: statusIcon + anchors.top: parent.top + anchors.topMargin: -2 + anchors.left: parent.left + + 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 "public-chat" + break; + case StatusChatInfoButton.Type.GroupChat: + return "group" + break; + case StatusChatInfoButton.Type.CommunityChat: + return "channel" + break; + default: + return "public-chat" + } + } + } + + StatusBaseText { + id: chatName + + anchors.left: statusIcon.visible ? statusIcon.right : parent.left + anchors.leftMargin: statusIcon.visible ? 1 : 0 + anchors.top: parent.top + + text: statusChatInfoButton.title + color: statusChatInfoButton.muted ? Theme.palette.directColor5 : Theme.palette.directColor1 + font.pixelSize: 15 + font.weight: Font.Medium + } + + StatusIcon { + id: mutedIcon + anchors.left: chatName.right + anchors.leftMargin: 4 + anchors.top: chatName.top + anchors.topMargin: -2 + width: 13 + icon: "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() + } + + StatusToolTip { + id: statusToolTip + text: "Unmute" + visible: mutedIconSensor.containsMouse + orientation: StatusToolTip.Orientation.Bottom + y: parent.height + 12 + } + } + } + + Item { + id: statusChatInfoButtonSubTitle + anchors.left: statusChatInfoButtonTitle.left + anchors.top: statusChatInfoButtonTitle.bottom + height: chatType.height + width: childrenRect.width + + StatusBaseText { + id: chatType + text: statusChatInfoButton.subTitle + color: Theme.palette.baseColor1 + font.pixelSize: 12 + } + + Rectangle { + id: divider + height: 12 + width: 1 + color: Theme.palette.directColor7 + anchors.left: chatType.right + anchors.leftMargin: 4 + anchors.verticalCenter: chatType.verticalCenter + visible: pinIcon.visible + } + + StatusIcon { + id: pinIcon + + anchors.left: divider.right + anchors.leftMargin: -2 + anchors.verticalCenter: chatType.verticalCenter + height: 14 + visible: statusChatInfoButton.pinnedMessagesCount > 0 + icon: "pin" + color: Theme.palette.baseColor1 + } + + StatusBaseText { + 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 { + id: pinCountSensor + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: statusChatInfoButton.pinnedMessagesCountClicked(mouse) + } + } + } + } +} diff --git a/src/StatusQ/Controls/qmldir b/src/StatusQ/Controls/qmldir index fb9fed9a..cc4df9ac 100644 --- a/src/StatusQ/Controls/qmldir +++ b/src/StatusQ/Controls/qmldir @@ -1,5 +1,6 @@ module StatusQ.Controls +StatusChatInfoButton 0.1 StatusChatInfoButton.qml StatusIconTabButton 0.1 StatusIconTabButton.qml StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml StatusToolTip 0.1 StatusToolTip.qml diff --git a/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/src/StatusQ/Core/Theme/StatusDarkTheme.qml index 0edfcd9e..97e80746 100644 --- a/src/StatusQ/Core/Theme/StatusDarkTheme.qml +++ b/src/StatusQ/Core/Theme/StatusDarkTheme.qml @@ -147,5 +147,9 @@ ThemePalette { property color borderColor: baseColor5 property color hoverBorderColor: "#353A4D" } + + property QtObject statusChatInfoButton: QtObject { + property color backgroundColor: baseColor3 + } } diff --git a/src/StatusQ/Core/Theme/StatusLightTheme.qml b/src/StatusQ/Core/Theme/StatusLightTheme.qml index a689a119..655ff0b6 100644 --- a/src/StatusQ/Core/Theme/StatusLightTheme.qml +++ b/src/StatusQ/Core/Theme/StatusLightTheme.qml @@ -147,5 +147,9 @@ ThemePalette { property color borderColor: baseColor4 property color hoverBorderColor: "#DDE3F3" } + + property QtObject statusChatInfoButton: QtObject { + property color backgroundColor: white + } } diff --git a/src/StatusQ/Core/Theme/ThemePalette.qml b/src/StatusQ/Core/Theme/ThemePalette.qml index 6b680899..5c598bd6 100644 --- a/src/StatusQ/Core/Theme/ThemePalette.qml +++ b/src/StatusQ/Core/Theme/ThemePalette.qml @@ -109,6 +109,10 @@ QtObject { property color hoverBorderColor } + property QtObject statusChatInfoButton: QtObject { + property color backgroundColor + } + function alphaColor(color, alpha) { let actualColor = Qt.darker(color, 1) actualColor.a = alpha