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:
parent
09876c1f67
commit
a89e218a9f
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue