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
Pascal Precht
parent
c5ecfe087c
commit
8a79918284
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -147,5 +147,9 @@ ThemePalette {
|
|||
property color borderColor: baseColor5
|
||||
property color hoverBorderColor: "#353A4D"
|
||||
}
|
||||
|
||||
property QtObject statusChatInfoButton: QtObject {
|
||||
property color backgroundColor: baseColor3
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -147,5 +147,9 @@ ThemePalette {
|
|||
property color borderColor: baseColor4
|
||||
property color hoverBorderColor: "#DDE3F3"
|
||||
}
|
||||
|
||||
property QtObject statusChatInfoButton: QtObject {
|
||||
property color backgroundColor: white
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue