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:
Pascal Precht 2021-05-25 17:35:32 +02:00 committed by Pascal Precht
parent a4e62fb2cf
commit 6327566889
6 changed files with 81 additions and 0 deletions

View File

@ -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"

View File

@ -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
}
]
}

View File

@ -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

View File

@ -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
} }

View File

@ -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
} }

View File

@ -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
} }