diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml index 773c57ef..44589789 100644 --- a/sandbox/DemoApp.qml +++ b/sandbox/DemoApp.qml @@ -57,6 +57,8 @@ Rectangle { appNavBar: StatusAppNavBar { + id: navBar + navBarChatButton: StatusNavBarTabButton { icon.name: "chat" tooltip.text: "Chat" @@ -74,6 +76,7 @@ Rectangle { } navBarCommunityTabButtons.delegate: StatusNavBarTabButton { + id: communityBtn anchors.horizontalCenter: parent.horizontalCenter name: model.name tooltip.text: model.tooltipText @@ -83,6 +86,35 @@ Rectangle { onClicked: { appView.sourceComponent = statusAppCommunityView } + + popupMenu: StatusPopupMenu { + + StatusMenuItem { + text: qsTr("Invite People") + icon.name: "share-ios" + } + + StatusMenuItem { + text: qsTr("View Community") + icon.name: "group" + } + + StatusMenuItem { + text: qsTr("Edit Community") + icon.name: "edit" + } + + StatusMenuSeparator {} + + StatusMenuItem { + text: qsTr("Leave Community") + icon.name: "arrow-right" + icon.width: 14 + iconRotation: 180 + type: StatusMenuItem.Type.Danger + } + } + } navBarTabButtons: [ diff --git a/src/StatusQ/Controls/StatusIconTabButton.qml b/src/StatusQ/Controls/StatusIconTabButton.qml index 5b19466b..dcb03101 100644 --- a/src/StatusQ/Controls/StatusIconTabButton.qml +++ b/src/StatusQ/Controls/StatusIconTabButton.qml @@ -9,6 +9,7 @@ TabButton { id: statusIconTabButton property string name: "" + property bool highlighted: false implicitWidth: 40 implicitHeight: 40 @@ -34,7 +35,7 @@ TabButton { icon: statusIconTabButton.icon.name height: statusIconTabButton.icon.height width: statusIconTabButton.icon.width - color: (statusIconTabButton.hovered || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color + color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color } } @@ -67,13 +68,13 @@ TabButton { height: 26 letterSize: 15 name: statusIconTabButton.name - color: (statusIconTabButton.hovered || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color + color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color } } } background: Rectangle { - color: hovered || ((!!icon.source.toString() || !!name) && checked) ? Theme.palette.primaryColor3 : "transparent" + color: hovered || highlighted || ((!!icon.source.toString() || !!name) && checked) ? Theme.palette.primaryColor3 : "transparent" border.color: Theme.palette.primaryColor1 border.width: (!!icon.source.toString() || !!name) && checked ? 1 : 0 radius: statusIconTabButton.width / 2 diff --git a/src/StatusQ/Controls/StatusNavBarTabButton.qml b/src/StatusQ/Controls/StatusNavBarTabButton.qml index ef6744ad..ad6cc4c9 100644 --- a/src/StatusQ/Controls/StatusNavBarTabButton.qml +++ b/src/StatusQ/Controls/StatusNavBarTabButton.qml @@ -1,13 +1,22 @@ import QtQuick 2.13 import StatusQ.Components 0.1 import StatusQ.Controls 0.1 +import StatusQ.Popups 0.1 StatusIconTabButton { id: statusNavBarTabButton property alias badge: statusBadge property alias tooltip: statusTooltip + property Component popupMenu + signal clicked(var mouse) + onPopupMenuChanged: { + if (!!popupMenu) { + popupMenuSlot.sourceComponent = popupMenu + } + } + StatusToolTip { id: statusTooltip visible: statusNavBarTabButton.hovered && !!statusTooltip.text @@ -38,7 +47,27 @@ StatusIconTabButton { anchors.fill: parent cursorShape: Qt.PointingHandCursor acceptedButtons: Qt.LeftButton | Qt.RightButton - onClicked: statusNavBarTabButton.clicked(mouse) + onClicked: { + if (mouse.button === Qt.RightButton) { + if (popupMenuSlot.active) { + statusNavBarTabButton.highlighted = true + let btnWidth = statusNavBarTabButton.width + popupMenuSlot.item.popup(parent.x + btnWidth + 4, parent.y - 2) + } + return + } + statusNavBarTabButton.clicked(mouse) + } + } + + Loader { + id: popupMenuSlot + active: !!statusNavBarTabButton.popupMenu + onLoaded: { + popupMenuSlot.item.closeHandler = function () { + statusNavBarTabButton.highlighted = false + } + } } }