feat(Controls): introduce StatusNavBarTabButton

This component is used to render application tabs in the application
nav bar that is yet to be implemented.

`StatusNavBarTabButton` is a composition of `StatusIconTabButton`, `StatusToolTip`
and `StatusBadge` and exposes each of these to enable customization.

Usage:

```
StatusNavBarTabButton {
    checked: true/false // whether or not it's 'active'
    name: "string" // used to render a `StatusLetterIdenticon`
    badge.value: 30 // `StatusBadge` is exposed as `badge`
    tooltip.text: "Some tooltip" // `StatusTooltip` is exposed as `tooltip`
    icon.name: "message" // Behaves exactly like `StatusIconTabButton.icon`
}
```

Closes #17
This commit is contained in:
Pascal Precht 2021-05-06 14:47:57 +02:00 committed by Michał Cieślak
parent cc6d28b7ce
commit a9df397e71
3 changed files with 83 additions and 0 deletions

View File

@ -50,4 +50,39 @@ GridLayout {
y: parent.height / 2 - height / 2 + 4 y: parent.height / 2 - height / 2 + 4
} }
} }
StatusNavBarTabButton {
icon.name: "chat"
tooltip.text: "Chat"
}
StatusNavBarTabButton {
name: "#status"
tooltip.text: "Some Channel"
}
StatusNavBarTabButton {
icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
tooltip.text: "Some Community"
}
StatusNavBarTabButton {
icon.name: "profile"
tooltip.text: "Profile"
badge.value: 0
badge.visible: true
badge.anchors.leftMargin:-16
}
StatusNavBarTabButton {
icon.name: "chat"
tooltip.text: "Chat"
badge.value: 35
}
StatusNavBarTabButton {
icon.name: "chat"
tooltip.text: "Chat"
badge.value: 100
}
} }

View File

@ -0,0 +1,47 @@
import QtQuick 2.13
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
StatusIconTabButton {
id: statusNavBarTabButton
property alias badge: statusBadge
property alias tooltip: statusTooltip
signal clicked(var mouse)
StatusToolTip {
id: statusTooltip
visible: statusNavBarTabButton.hovered && !!statusTooltip.text
delay: 50
orientation: StatusToolTip.Orientation.Right
x: statusNavBarTabButton.width + 16
y: statusNavBarTabButton.height / 2 - height / 2 + 4
}
StatusBadge {
id: statusBadge
visible: value > 0
anchors.top: parent.top
anchors.left: parent.right
anchors.leftMargin: {
if (statusBadge.value > 99) {
return -22
}
if (statusBadge.value > 9) {
return -21
}
return -18
}
anchors.topMargin: 4
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: function (mouse) {
statusNavBarTabButton.checked = !statusNavBarTabButton.checked
statusNavBarTabButton.clicked(mouse)
}
}
}

View File

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