feat(Components): introduce StatusNavigationListItem
This introduces the `StatusNavigationListItem` that can be used to render menu navigation items in secondary panels, such as the profile panel. Usage: ``` import StatusQ.Components 0.1 StatusNavigationListItem { title: "Menu Item" } StatusNavigationListItem { title: "Menu Item" icon.name: "info" } StatusNavigationListItem { title: "Menu Item" icon.name: "info" badge.value: 1 } StatusNavigationListItem { title: "Menu Item (selected)" selected: true icon.name: "info" badge.value: 1 } ``` Closes #72
This commit is contained in:
parent
a4e62fb2cf
commit
6327566889
|
@ -10,6 +10,27 @@ GridLayout {
|
||||||
columnSpacing: 5
|
columnSpacing: 5
|
||||||
rowSpacing: 5
|
rowSpacing: 5
|
||||||
|
|
||||||
|
StatusNavigationListItem {
|
||||||
|
title: "Menu Item"
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusNavigationListItem {
|
||||||
|
title: "Menu Item"
|
||||||
|
icon.name: "info"
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusNavigationListItem {
|
||||||
|
title: "Menu Item"
|
||||||
|
icon.name: "info"
|
||||||
|
badge.value: 1
|
||||||
|
}
|
||||||
|
StatusNavigationListItem {
|
||||||
|
title: "Menu Item (selected)"
|
||||||
|
selected: true
|
||||||
|
icon.name: "info"
|
||||||
|
badge.value: 1
|
||||||
|
}
|
||||||
|
|
||||||
StatusChatListItem {
|
StatusChatListItem {
|
||||||
id: test
|
id: test
|
||||||
name: "public-channel"
|
name: "public-channel"
|
||||||
|
|
|
@ -0,0 +1,44 @@
|
||||||
|
import QtQuick 2.13
|
||||||
|
import StatusQ.Core 0.1
|
||||||
|
import StatusQ.Core.Theme 0.1
|
||||||
|
import StatusQ.Components 0.1
|
||||||
|
|
||||||
|
StatusListItem {
|
||||||
|
id: statusNavigationListItem
|
||||||
|
|
||||||
|
signal clicked(var mouse)
|
||||||
|
property bool selected: false
|
||||||
|
property alias badge: statusBadge
|
||||||
|
|
||||||
|
implicitWidth: 286
|
||||||
|
implicitHeight: 48
|
||||||
|
|
||||||
|
icon.background.width: 20
|
||||||
|
icon.background.height: 20
|
||||||
|
icon.background.color: "transparent"
|
||||||
|
|
||||||
|
|
||||||
|
color: {
|
||||||
|
if (selected) {
|
||||||
|
return Theme.palette.statusNavigationListItem.selectedBackgroundColor
|
||||||
|
}
|
||||||
|
return sensor.containsMouse ?
|
||||||
|
Theme.palette.statusNavigationListItem.hoverBackgroundColor :
|
||||||
|
Theme.palette.baseColor4
|
||||||
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
id: sensor
|
||||||
|
anchors.fill: parent
|
||||||
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
hoverEnabled: true
|
||||||
|
onClicked: statusNavigationListitem.clicked(mouse)
|
||||||
|
}
|
||||||
|
|
||||||
|
components: [
|
||||||
|
StatusBadge {
|
||||||
|
id: statusBadge
|
||||||
|
visible: value > 0
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -5,5 +5,6 @@ StatusChatListItem 0.1 StatusChatListItem.qml
|
||||||
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
|
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
|
||||||
StatusListItem 0.1 StatusListItem.qml
|
StatusListItem 0.1 StatusListItem.qml
|
||||||
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
|
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
|
||||||
|
StatusNavigationListItem 0.1 StatusNavigationListItem.qml
|
||||||
StatusRoundIcon 0.1 StatusRoundIcon.qml
|
StatusRoundIcon 0.1 StatusRoundIcon.qml
|
||||||
StatusRoundedImage 0.1 StatusRoundedImage.qml
|
StatusRoundedImage 0.1 StatusRoundedImage.qml
|
||||||
|
|
|
@ -132,6 +132,11 @@ ThemePalette {
|
||||||
property color selectedBackgroundColor: directColor7
|
property color selectedBackgroundColor: directColor7
|
||||||
}
|
}
|
||||||
|
|
||||||
|
property QtObject statusNavigationListItem: QtObject {
|
||||||
|
property color hoverBackgroundColor: directColor8
|
||||||
|
property color selectedBackgroundColor: directColor7
|
||||||
|
}
|
||||||
|
|
||||||
property QtObject statusBadge: QtObject {
|
property QtObject statusBadge: QtObject {
|
||||||
property color foregroundColor: baseColor3
|
property color foregroundColor: baseColor3
|
||||||
}
|
}
|
||||||
|
|
|
@ -132,6 +132,11 @@ ThemePalette {
|
||||||
property color selectedBackgroundColor: baseColor3
|
property color selectedBackgroundColor: baseColor3
|
||||||
}
|
}
|
||||||
|
|
||||||
|
property QtObject statusNavigationListItem: QtObject {
|
||||||
|
property color hoverBackgroundColor: baseColor2
|
||||||
|
property color selectedBackgroundColor: baseColor3
|
||||||
|
}
|
||||||
|
|
||||||
property QtObject statusBadge: QtObject {
|
property QtObject statusBadge: QtObject {
|
||||||
property color foregroundColor: white
|
property color foregroundColor: white
|
||||||
}
|
}
|
||||||
|
|
|
@ -93,6 +93,11 @@ QtObject {
|
||||||
property color selectedBackgroundColor
|
property color selectedBackgroundColor
|
||||||
}
|
}
|
||||||
|
|
||||||
|
property QtObject statusNavigationListItem: QtObject {
|
||||||
|
property color hoverBackgroundColor
|
||||||
|
property color selectedBackgroundColor
|
||||||
|
}
|
||||||
|
|
||||||
property QtObject statusBadge: QtObject {
|
property QtObject statusBadge: QtObject {
|
||||||
property color foregroundColor
|
property color foregroundColor
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue