feat(Components): introduce `StatusChatToolBar`

Usage:

```qml
import StatusQ.Components 0.1

StatusChatToolBar {
    chatInfoButton.[...]: ... // StatusChatInfoButton
    notificationCount: 1 // default `0`

    onChatInfoButtonClicked: ...
    onMenuButtonClicked: ...
    onNotificationButtonClicked: ...
}
```

Closes #80
This commit is contained in:
Pascal Precht 2021-05-27 16:28:39 +02:00 committed by Pascal Precht
parent 8a79918284
commit a4421b5b42
3 changed files with 345 additions and 230 deletions

View File

@ -5,13 +5,39 @@ import QtQuick.Layouts 1.14
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Layout 0.1 import StatusQ.Layout 0.1
GridLayout { Column {
columns: 6 spacing: 5
columnSpacing: 5
rowSpacing: 5
StatusChatToolBar {
chatInfoButton.title: "Some contact"
chatInfoButton.subTitle: "Contact"
chatInfoButton.icon.color: Theme.palette.miscColor7
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
}
StatusChatToolBar {
chatInfoButton.title: "Some contact"
chatInfoButton.subTitle: "Contact"
chatInfoButton.icon.color: Theme.palette.miscColor7
chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
chatInfoButton.pinnedMessagesCount: 1
chatInfoButton.muted: true
}
StatusChatToolBar {
chatInfoButton.title: "Some contact"
chatInfoButton.subTitle: "Contact"
chatInfoButton.icon.color: Theme.palette.miscColor7
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
chatInfoButton.pinnedMessagesCount: 1
notificationCount: 1
}
Row {
spacing: 5
Button { Button {
id: btn id: btn
text: "Append" text: "Append"
@ -265,4 +291,5 @@ GridLayout {
] ]
} }
} }
}

View File

@ -0,0 +1,87 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
Rectangle {
id: statusChatToolBar
implicitWidth: 518
height: 56
color: Theme.palette.statusAppLayout.backgroundColor
property alias chatInfoButton: statusChatInfoButton
property int notificationCount: 0
signal chatInfoButtonClicked()
signal menuButtonClicked()
signal notificationButtonClicked()
StatusChatInfoButton {
id: statusChatInfoButton
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 12
onClicked: statusChatToolBar.chatInfoButtonClicked()
}
Row {
anchors.right: parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
spacing: 8
StatusFlatRoundButton {
width: 32
height: 32
icon.name: "more"
type: StatusFlatRoundButton.Type.Secondary
onClicked: statusChatToolBar.menuButtonClicked()
}
Rectangle {
height: 24
width: 1
color: Theme.palette.directColor7
anchors.verticalCenter: parent.verticalCenter
}
StatusFlatRoundButton {
width: 32
height: 32
icon.name: "notification"
icon.height: 21
type: StatusFlatRoundButton.Type.Secondary
onClicked: statusChatToolBar.notificationButtonClicked()
StatusBadge {
id: statusBadge
visible: value > 0
anchors.top: parent.top
anchors.left: parent.right
anchors.topMargin: -3
anchors.leftMargin: {
if (statusBadge.value > 99) {
return -22
}
if (statusBadge.value > 9) {
return -21
}
return -18
}
value: statusChatToolBar.notificationCount
border.width: 2
border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
}
}
}
}

View File

@ -2,6 +2,7 @@ module StatusQ.Components
StatusBadge 0.1 StatusBadge.qml StatusBadge 0.1 StatusBadge.qml
StatusChatListItem 0.1 StatusChatListItem.qml StatusChatListItem 0.1 StatusChatListItem.qml
StatusChatToolBar 0.1 StatusChatToolBar.qml
StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
StatusListItem 0.1 StatusListItem.qml StatusListItem 0.1 StatusListItem.qml