From 40617cd710654ddc6596cb70b89aa3d2f63d73c6 Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Thu, 17 Jun 2021 14:58:19 +0200
Subject: [PATCH] feat(Components): introduce `StatusNavigationPanelHeadline`

Component to render navigation panel headlines.

Usage:

```qml
import StatusQ.Components 0.1

StatusNavigationPanelHeadline {
    text: "Profile"
}
```

Closes #162
---
 sandbox/DemoApp.qml                           | 38 ++++++++++++-------
 .../StatusNavigationPanelHeadline.qml         | 11 ++++++
 src/StatusQ/Components/qmldir                 |  1 +
 statusq.qrc                                   |  1 +
 4 files changed, 37 insertions(+), 14 deletions(-)
 create mode 100644 src/StatusQ/Components/StatusNavigationPanelHeadline.qml

diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml
index 2f4cce44..7345a0ad 100644
--- a/sandbox/DemoApp.qml
+++ b/sandbox/DemoApp.qml
@@ -157,18 +157,32 @@ Rectangle {
 
         StatusAppTwoPanelLayout {
 
-            leftPanel: StatusChatListAndCategories {
+            leftPanel: Item {
                 anchors.fill: parent
-                anchors.topMargin: 64
 
-                chatList.model: demoChatListItems
-                selectedChatId: "0"
-                onChatItemSelected: selectedChatId = id
-                onChatItemUnmuted: {
-                    for (var i = 0; i < demoChatListItems.count; i++) {
-                        let item = demoChatListItems.get(i);
-                        if (item.chatId === id) {
-                            demoChatListItems.setProperty(i, "muted", false)
+                StatusNavigationPanelHeadline {
+                    id: headline
+                    anchors.top: parent.top
+                    anchors.topMargin: 16
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    text: "Chat"
+                }
+
+                StatusChatListAndCategories {
+                    anchors.top: headline.bottom
+                    anchors.topMargin: 16
+                    anchors.bottom: parent.bottom
+                    width: parent.width
+
+                    chatList.model: demoChatListItems
+                    selectedChatId: "0"
+                    onChatItemSelected: selectedChatId = id
+                    onChatItemUnmuted: {
+                        for (var i = 0; i < demoChatListItems.count; i++) {
+                            let item = demoChatListItems.get(i);
+                            if (item.chatId === id) {
+                                demoChatListItems.setProperty(i, "muted", false)
+                            }
                         }
                     }
                 }
@@ -218,7 +232,6 @@ Rectangle {
                         }
                     }
                 }
-
             }
         }
     }
@@ -228,9 +241,6 @@ Rectangle {
 
         StatusAppTwoPanelLayout {
 
-
-
-
             leftPanel: Item {
                 anchors.fill: parent
 
diff --git a/src/StatusQ/Components/StatusNavigationPanelHeadline.qml b/src/StatusQ/Components/StatusNavigationPanelHeadline.qml
new file mode 100644
index 00000000..f680dc6f
--- /dev/null
+++ b/src/StatusQ/Components/StatusNavigationPanelHeadline.qml
@@ -0,0 +1,11 @@
+import QtQuick 2.13
+import StatusQ.Core.Theme 0.1
+
+import StatusQ.Core 0.1
+
+StatusBaseText {
+    font.pixelSize: 17
+    font.weight: Font.Bold
+    color: Theme.palette.directColor1
+}
+
diff --git a/src/StatusQ/Components/qmldir b/src/StatusQ/Components/qmldir
index 097ceae0..1c1d2a61 100644
--- a/src/StatusQ/Components/qmldir
+++ b/src/StatusQ/Components/qmldir
@@ -13,6 +13,7 @@ StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusListItem 0.1 StatusListItem.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
 StatusNavigationListItem 0.1 StatusNavigationListItem.qml
+StatusNavigationPanelHeadline 0.1 StatusNavigationPanelHeadline.qml
 StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml
 StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
diff --git a/statusq.qrc b/statusq.qrc
index 4504e6f1..95d6180b 100644
--- a/statusq.qrc
+++ b/statusq.qrc
@@ -21,6 +21,7 @@
         <file>src/StatusQ/Components/StatusChatListAndCategories.qml</file>
         <file>src/StatusQ/Components/StatusChatInfoToolBar.qml</file>
         <file>src/StatusQ/Components/StatusNavigationListItem.qml</file>
+        <file>src/StatusQ/Components/StatusNavigationPanelHeadline.qml</file>
         <file>src/StatusQ/Components/StatusChatToolBar.qml</file>
         <file>src/StatusQ/Components/StatusRoundedImage.qml</file>
         <file>src/StatusQ/Components/StatusRoundIcon.qml</file>