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 {
|
StatusRoundedImage {
|
||||||
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
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
|
module StatusQ.Components
|
||||||
|
|
||||||
|
StatusBadge 0.1 StatusBadge.qml
|
||||||
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
|
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
|
||||||
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
|
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
|
||||||
StatusRoundedImage 0.1 StatusRoundedImage.qml
|
StatusRoundedImage 0.1 StatusRoundedImage.qml
|
||||||
|
|
Loading…
Reference in New Issue