From 454e73a838e0af5d6441d20a2e485edc0ff3f49a Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Mon, 14 Jun 2021 13:30:42 +0200 Subject: [PATCH] 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 --- sandbox/DemoApp.qml | 29 +++++ sandbox/StatusChatInfoToolBarPage.qml | 40 +++++++ sandbox/main.qml | 10 ++ sandbox/qml.qrc | 1 + .../Components/StatusChatInfoToolBar.qml | 105 ++++++++++++++++++ src/StatusQ/Components/qmldir | 1 + src/StatusQ/Controls/StatusChatInfoButton.qml | 2 +- statusq.qrc | 1 + 8 files changed, 188 insertions(+), 1 deletion(-) create mode 100644 sandbox/StatusChatInfoToolBarPage.qml create mode 100644 src/StatusQ/Components/StatusChatInfoToolBar.qml 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