diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml
index adca1aa8..f0488d21 100644
--- a/sandbox/DemoApp.qml
+++ b/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
diff --git a/sandbox/StatusChatInfoToolBarPage.qml b/sandbox/StatusChatInfoToolBarPage.qml
new file mode 100644
index 00000000..f22e3c44
--- /dev/null
+++ b/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"
+ }
+ }
+ }
+}
diff --git a/sandbox/main.qml b/sandbox/main.qml
index a09a55f5..3dd596ef 100644
--- a/sandbox/main.qml
+++ b/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
diff --git a/sandbox/qml.qrc b/sandbox/qml.qrc
index 4e1d556b..d0c4bdf1 100644
--- a/sandbox/qml.qrc
+++ b/sandbox/qml.qrc
@@ -5,5 +5,6 @@
Icons.qml
Others.qml
Buttons.qml
+ StatusChatInfoToolBarPage.qml
diff --git a/src/StatusQ/Components/StatusChatInfoToolBar.qml b/src/StatusQ/Components/StatusChatInfoToolBar.qml
new file mode 100644
index 00000000..dcaf4592
--- /dev/null
+++ b/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"
+ }
+ }
+ }
+ }
+
+}
diff --git a/src/StatusQ/Components/qmldir b/src/StatusQ/Components/qmldir
index d6677654..82b0ce7d 100644
--- a/src/StatusQ/Components/qmldir
+++ b/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
diff --git a/src/StatusQ/Controls/StatusChatInfoButton.qml b/src/StatusQ/Controls/StatusChatInfoButton.qml
index d7bf329a..0fcdb764 100644
--- a/src/StatusQ/Controls/StatusChatInfoButton.qml
+++ b/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
diff --git a/statusq.qrc b/statusq.qrc
index bd11e2f3..997f61b4 100644
--- a/statusq.qrc
+++ b/statusq.qrc
@@ -18,6 +18,7 @@
src/StatusQ/Popups/StatusMenuItem.qml
src/StatusQ/Components/qmldir
src/StatusQ/Components/StatusChatListItem.qml
+ src/StatusQ/Components/StatusChatInfoToolBar.qml
src/StatusQ/Components/StatusNavigationListItem.qml
src/StatusQ/Components/StatusChatToolBar.qml
src/StatusQ/Components/StatusRoundedImage.qml