feat(Components): introduce StatusBadge component

This component can be used to render badges with additional information
as seen in the navbar tab buttons and menu items.

Here's how it can be used:

```
StatusBadge {
  value: 2
}
```

By default and based on value, StatusBadge will change its width.
If no value is provided, it renders as badge indicator as seen in the profile
tab button.

Closes #15
This commit is contained in:
Pascal Precht 2021-05-06 10:34:37 +02:00 committed by Pascal Precht
parent 09876c1f67
commit a89e218a9f
3 changed files with 55 additions and 0 deletions

View File

@ -21,4 +21,18 @@ GridLayout {
StatusRoundedImage {
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
}
StatusBadge {}
StatusBadge {
value: 1
}
StatusBadge {
value: 10
}
StatusBadge {
value: 100
}
}

View File

@ -0,0 +1,40 @@
import QtQuick 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Rectangle {
id: statusBadge
property int value
implicitHeight: statusBadge.value > 0 ? 18 + statusBadge.border.width : 10 + statusBadge.border.width
implicitWidth: {
if (statusBadge.value > 99) {
return 28 + statusBadge.border.width
}
if (statusBadge.value > 9) {
return 26 + statusBadge.border.width
}
if (statusBadge.value > 0) {
return 18 + statusBadge.border.width
}
return 10 + statusBadge.border.width
}
radius: height / 2
color: Theme.palette.primaryColor1
StatusBaseText {
id: value
visible: statusBadge.value > 0
font.pixelSize: statusBadge.value > 99 ? 10 : 12
font.weight: Font.Bold
color: Theme.palette.white
anchors.centerIn: parent
text: {
if (statusBadge.value > 99) {
return "99+";
}
return statusBadge.value;
}
}
}

View File

@ -1,5 +1,6 @@
module StatusQ.Components
StatusBadge 0.1 StatusBadge.qml
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
StatusRoundedImage 0.1 StatusRoundedImage.qml