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 {}
|
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
|
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
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue