From 1569a8483a8911be67f4236550327cfc8e0e223e Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Tue, 25 May 2021 17:35:32 +0200
Subject: [PATCH] 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
---
 ui/StatusQ/sandbox/ListItems.qml              | 21 +++++++++
 .../Components/StatusNavigationListItem.qml   | 44 +++++++++++++++++++
 ui/StatusQ/src/StatusQ/Components/qmldir      |  1 +
 .../StatusQ/Core/Theme/StatusDarkTheme.qml    |  5 +++
 .../StatusQ/Core/Theme/StatusLightTheme.qml   |  5 +++
 .../src/StatusQ/Core/Theme/ThemePalette.qml   |  5 +++
 6 files changed, 81 insertions(+)
 create mode 100644 ui/StatusQ/src/StatusQ/Components/StatusNavigationListItem.qml

diff --git a/ui/StatusQ/sandbox/ListItems.qml b/ui/StatusQ/sandbox/ListItems.qml
index 071dfb903f..42417b7999 100644
--- a/ui/StatusQ/sandbox/ListItems.qml
+++ b/ui/StatusQ/sandbox/ListItems.qml
@@ -10,6 +10,27 @@ GridLayout {
     columnSpacing: 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 {
         id: test
         name: "public-channel"
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusNavigationListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusNavigationListItem.qml
new file mode 100644
index 0000000000..e833943d2b
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Components/StatusNavigationListItem.qml
@@ -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
+        }
+    ]
+}
diff --git a/ui/StatusQ/src/StatusQ/Components/qmldir b/ui/StatusQ/src/StatusQ/Components/qmldir
index c4cdd01e9a..473c7760e6 100644
--- a/ui/StatusQ/src/StatusQ/Components/qmldir
+++ b/ui/StatusQ/src/StatusQ/Components/qmldir
@@ -5,5 +5,6 @@ StatusChatListItem 0.1 StatusChatListItem.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusListItem 0.1 StatusListItem.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
+StatusNavigationListItem 0.1 StatusNavigationListItem.qml
 StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
index a4408ab75c..3300436bcc 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
@@ -132,6 +132,11 @@ ThemePalette {
         property color selectedBackgroundColor: directColor7
     }
 
+    property QtObject statusNavigationListItem: QtObject {
+        property color hoverBackgroundColor: directColor8
+        property color selectedBackgroundColor: directColor7
+    }
+
     property QtObject statusBadge: QtObject {
         property color foregroundColor: baseColor3
     }
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
index 81fdc7e8ee..dad070a505 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
@@ -132,6 +132,11 @@ ThemePalette {
         property color selectedBackgroundColor: baseColor3
     }
 
+    property QtObject statusNavigationListItem: QtObject {
+        property color hoverBackgroundColor: baseColor2
+        property color selectedBackgroundColor: baseColor3
+    }
+
     property QtObject statusBadge: QtObject {
         property color foregroundColor: white
     }
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
index 7d56f0ac8e..df9f15bd8d 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
@@ -93,6 +93,11 @@ QtObject {
         property color selectedBackgroundColor
     }
 
+    property QtObject statusNavigationListItem: QtObject {
+        property color hoverBackgroundColor
+        property color selectedBackgroundColor
+    }
+
     property QtObject statusBadge: QtObject {
         property color foregroundColor
     }