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
This commit is contained in:
Pascal Precht 2021-05-27 14:41:14 +02:00 committed by Pascal Precht
parent c5ecfe087c
commit 8a79918284
6 changed files with 289 additions and 0 deletions

View File

@ -102,4 +102,36 @@ GridLayout {
} }
StatusCheckBox {} 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
}
} }

View File

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

View File

@ -1,5 +1,6 @@
module StatusQ.Controls module StatusQ.Controls
StatusChatInfoButton 0.1 StatusChatInfoButton.qml
StatusIconTabButton 0.1 StatusIconTabButton.qml StatusIconTabButton 0.1 StatusIconTabButton.qml
StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml
StatusToolTip 0.1 StatusToolTip.qml StatusToolTip 0.1 StatusToolTip.qml

View File

@ -147,5 +147,9 @@ ThemePalette {
property color borderColor: baseColor5 property color borderColor: baseColor5
property color hoverBorderColor: "#353A4D" property color hoverBorderColor: "#353A4D"
} }
property QtObject statusChatInfoButton: QtObject {
property color backgroundColor: baseColor3
}
} }

View File

@ -147,5 +147,9 @@ ThemePalette {
property color borderColor: baseColor4 property color borderColor: baseColor4
property color hoverBorderColor: "#DDE3F3" property color hoverBorderColor: "#DDE3F3"
} }
property QtObject statusChatInfoButton: QtObject {
property color backgroundColor: white
}
} }

View File

@ -109,6 +109,10 @@ QtObject {
property color hoverBorderColor property color hoverBorderColor
} }
property QtObject statusChatInfoButton: QtObject {
property color backgroundColor
}
function alphaColor(color, alpha) { function alphaColor(color, alpha) {
let actualColor = Qt.darker(color, 1) let actualColor = Qt.darker(color, 1)
actualColor.a = alpha actualColor.a = alpha