From ea118d716e15fe3d316a35cff1bd95c49b88d891 Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Thu, 6 May 2021 14:47:57 +0200
Subject: [PATCH] feat(Controls): introduce StatusNavBarTabButton

This component is used to render application tabs in the application
nav bar that is yet to be implemented.

`StatusNavBarTabButton` is a composition of `StatusIconTabButton`, `StatusToolTip`
and `StatusBadge` and exposes each of these to enable customization.

Usage:

```
StatusNavBarTabButton {
    checked: true/false // whether or not it's 'active'
    name: "string" // used to render a `StatusLetterIdenticon`
    badge.value: 30 // `StatusBadge` is exposed as `badge`
    tooltip.text: "Some tooltip" // `StatusTooltip` is exposed as `tooltip`
    icon.name: "message" // Behaves exactly like `StatusIconTabButton.icon`
}
```

Closes #17
---
 sandbox/Controls.qml                          | 35 ++++++++++++++
 .../Controls/StatusNavBarTabButton.qml        | 47 +++++++++++++++++++
 src/StatusQ/Controls/qmldir                   |  1 +
 3 files changed, 83 insertions(+)
 create mode 100644 src/StatusQ/Controls/StatusNavBarTabButton.qml

diff --git a/sandbox/Controls.qml b/sandbox/Controls.qml
index d81b1773..1341ff67 100644
--- a/sandbox/Controls.qml
+++ b/sandbox/Controls.qml
@@ -50,4 +50,39 @@ GridLayout {
             y: parent.height / 2 - height / 2 + 4
         }
     }
+
+    StatusNavBarTabButton {
+        icon.name: "chat"
+        tooltip.text: "Chat"
+    }
+
+    StatusNavBarTabButton {
+        name: "#status"
+        tooltip.text: "Some Channel"
+    }
+
+    StatusNavBarTabButton {
+        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        tooltip.text: "Some Community"
+    }
+
+    StatusNavBarTabButton {
+        icon.name: "profile"
+        tooltip.text: "Profile"
+        badge.value: 0
+        badge.visible: true
+        badge.anchors.leftMargin:-16
+    }
+
+    StatusNavBarTabButton {
+        icon.name: "chat"
+        tooltip.text: "Chat"
+        badge.value: 35
+    }
+
+    StatusNavBarTabButton {
+        icon.name: "chat"
+        tooltip.text: "Chat"
+        badge.value: 100
+    }
 }
diff --git a/src/StatusQ/Controls/StatusNavBarTabButton.qml b/src/StatusQ/Controls/StatusNavBarTabButton.qml
new file mode 100644
index 00000000..7da608d3
--- /dev/null
+++ b/src/StatusQ/Controls/StatusNavBarTabButton.qml
@@ -0,0 +1,47 @@
+import QtQuick 2.13
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+    
+StatusIconTabButton {
+    id: statusNavBarTabButton 
+    property alias badge: statusBadge
+    property alias tooltip: statusTooltip
+    signal clicked(var mouse)
+
+    StatusToolTip {
+        id: statusTooltip
+        visible: statusNavBarTabButton.hovered && !!statusTooltip.text
+        delay: 50
+        orientation: StatusToolTip.Orientation.Right
+        x: statusNavBarTabButton.width + 16
+        y: statusNavBarTabButton.height / 2 - height / 2 + 4
+    }
+
+    StatusBadge {
+        id: statusBadge
+        visible: value > 0
+        anchors.top: parent.top
+        anchors.left: parent.right
+        anchors.leftMargin: {
+            if (statusBadge.value > 99) {
+                return -22
+            }
+            if (statusBadge.value > 9) {
+                return -21
+            }
+            return -18
+        }
+        anchors.topMargin: 4
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onClicked: function (mouse) {
+            statusNavBarTabButton.checked = !statusNavBarTabButton.checked
+            statusNavBarTabButton.clicked(mouse)
+        }
+    }
+}
+
diff --git a/src/StatusQ/Controls/qmldir b/src/StatusQ/Controls/qmldir
index b1588676..196583b3 100644
--- a/src/StatusQ/Controls/qmldir
+++ b/src/StatusQ/Controls/qmldir
@@ -1,5 +1,6 @@
 module StatusQ.Controls
 
 StatusIconTabButton 0.1 StatusIconTabButton.qml
+StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml
 StatusToolTip 0.1 StatusToolTip.qml