feat(Components): introduce `StatusChatInfoToolBar` component

Usage:

```qml
import StatusQ.Components 0.1

StatusChatInfoToolBar {
    chatInfoButton.title: "Cryptokitties"
    chatInfoButton.subTitle: "128 Members"
    chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
    chatInfoButton.icon.color: Theme.palette.miscColor6

    popupMenu: StatusPopupMenu {

        StatusMenuItem {
            text: "Create channel"
            icon.name: "channel"
        }

        StatusMenuItem {
            text: "Create category"
            icon.name: "channel-category"
        }

        StatusMenuSeparator {}

        StatusMenuItem {
            text: "Invite people"
            icon.name: "share-ios"
        }
    }
}
```

Closes #141

ui/StatusQ/sandbox/DemoApp.qml

@@ -236,6 +236,35 @@ Rectangle {
             leftPanel: Item {
                 anchors.fill: parent
 
+                StatusChatInfoToolBar {
+                    chatInfoButton.title: "Cryptokitties"        
+                    chatInfoButton.subTitle: "128 Members"
+                    chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+                    chatInfoButton.icon.color: Theme.palette.miscColor6
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    popupMenu: StatusPopupMenu {
+
+                        StatusMenuItem {
+                            text: "Create channel"
+                            icon.name: "channel"
+                        }
+
+                        StatusMenuItem {
+                            text: "Create category"
+                            icon.name: "channel-category"
+                        }
+
+                        StatusMenuSeparator {}
+
+                        StatusMenuItem {
+                            text: "Invite people"
+                            icon.name: "share-ios"
+                        }
+
+                    }
+                }
+
                 Column {
                     anchors.top: parent.top
                     anchors.topMargin: 64

ui/StatusQ/sandbox/StatusChatInfoToolBarPage.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.13
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+GridLayout {
+    columns: 1
+    columnSpacing: 5
+    rowSpacing: 5
+
+    StatusChatInfoToolBar {
+        chatInfoButton.title: "Cryptokitties"        
+        chatInfoButton.subTitle: "128 Members"
+        chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+        chatInfoButton.icon.color: Theme.palette.miscColor6
+
+        popupMenu: StatusPopupMenu {
+
+            StatusMenuItem {
+                text: "Create channel"
+                icon.name: "channel"
+            }
+
+            StatusMenuItem {
+                text: "Create category"
+                icon.name: "channel-category"
+            }
+
+            StatusMenuSeparator {}
+
+            StatusMenuItem {
+                text: "Invite people"
+                icon.name: "share-ios"
+            }
+        }
+    }
+}

ui/StatusQ/sandbox/main.qml

@@ -149,6 +149,11 @@ StatusWindow {
                             selected: page.sourceComponent == listItemsComponent
                             onClicked: page.sourceComponent = listItemsComponent
                         }
+                        StatusNavigationListItem { 
+                            title: "StatusChatInfoToolBar"
+                            selected: page.sourceComponent == chatInfoToolBarComponent
+                            onClicked: page.sourceComponent = chatInfoToolBarComponent
+                        }
                         StatusNavigationListItem { 
                             title: "Others"
                             selected: page.sourceComponent == othersComponent
@@ -252,6 +257,11 @@ StatusWindow {
         StatusPopupMenuPage {}
     }
 
+    Component {
+        id: chatInfoToolBarComponent
+        StatusChatInfoToolBarPage {}
+    }
+
     Component {
         id: demoAppCmp
 

ui/StatusQ/sandbox/qml.qrc

@@ -5,5 +5,6 @@
         <file>Icons.qml</file>
         <file>Others.qml</file>
         <file>Buttons.qml</file>
+        <file>StatusChatInfoToolBarPage.qml</file>
     </qresource>
 </RCC>

ui/StatusQ/src/StatusQ/Components/StatusChatInfoToolBar.qml

@@ -0,0 +1,105 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+Item {
+    id: statusChatInfoToolBar
+
+    implicitWidth: 288
+    implicitHeight: 56
+
+    property alias chatInfoButton: statusChatInfoButton
+    property Component popupMenu
+
+    signal chatInfoButtonClicked()
+    signal addButtonClicked(var mouse)
+
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
+    StatusChatInfoButton {
+        id: statusChatInfoButton
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 5
+        type: StatusChatInfoButton.Type.OneToOneChat
+        onClicked: statusChatInfoToolBar.chatInfoButtonClicked()
+    }
+
+    StatusRoundButton {
+        id: menuButton
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.verticalCenter: parent.verticalCenter
+
+        visible: popupMenuSlot.active
+        width: 32
+        height: 32
+
+        type: StatusRoundButton.Type.Secondary
+        icon.name: "add"
+        state: "default"
+
+        states: [
+            State {
+                name: "default"
+                PropertyChanges {
+                    target: menuButton
+                    icon.rotation: 0
+                }
+            },
+            State {
+                name: "pressed"
+                PropertyChanges {
+                    target: menuButton
+                    icon.rotation: 45
+                    highlighted: true
+                }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                from: "default"
+                to: "pressed"
+
+                RotationAnimation {
+                    duration: 150
+                    direction: RotationAnimation.Clockwise
+                    easing.type: Easing.InCubic
+                }
+            },
+            Transition {
+								from: "pressed"
+								to: "default"
+								RotationAnimation {
+										duration: 150
+										direction: RotationAnimation.Counterclockwise
+										easing.type: Easing.OutCubic
+								}
+        		}
+        ]
+
+        onClicked: {
+            statusChatInfoToolBar.addButtonClicked(mouse)
+            menuButton.state = "pressed"
+            popupMenuSlot.item.popup(menuButton.width-popupMenuSlot.item.width, menuButton.height + 4)
+        }
+
+        Loader {
+            id: popupMenuSlot
+            active: !!statusChatInfoToolBar.popupMenu
+            onLoaded: {
+                popupMenuSlot.item.closeHandler = function () {
+                    menuButton.state = "default"
+                }
+            }
+        }
+    }
+
+}

ui/StatusQ/src/StatusQ/Components/qmldir

@@ -1,6 +1,7 @@
 module StatusQ.Components
 
 StatusBadge 0.1 StatusBadge.qml
+StatusChatInfoToolBar 0.1 StatusChatInfoToolBar.qml
 StatusChatList 0.1 StatusChatList.qml
 StatusChatListItem 0.1 StatusChatListItem.qml
 StatusChatListCategory 0.1 StatusChatListCategory.qml

ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -35,7 +35,7 @@ Rectangle {
     }
 
     radius: 8
-    color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusChatInfoButton.backgroundColor
+    color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
 
     MouseArea {
         id: sensor

ui/StatusQ/statusq.qrc

@@ -18,6 +18,7 @@
         <file>src/StatusQ/Popups/StatusMenuItem.qml</file>
         <file>src/StatusQ/Components/qmldir</file>
         <file>src/StatusQ/Components/StatusChatListItem.qml</file>
+        <file>src/StatusQ/Components/StatusChatInfoToolBar.qml</file>
         <file>src/StatusQ/Components/StatusNavigationListItem.qml</file>
         <file>src/StatusQ/Components/StatusChatToolBar.qml</file>
         <file>src/StatusQ/Components/StatusRoundedImage.qml</file>