feat(StatusModal): Add popup menu support for StatusModal

Added logic to support a popup menu to be launched from the StatusModal header.
Added an example in sandbox to demonstrate its usage.

fixes #374
This commit is contained in:
Khushboo Mehta 2021-09-03 18:29:19 +02:00 committed by Michał Cieślak
parent 49c9348f65
commit 9bb00e43a2
4 changed files with 57 additions and 0 deletions

View File

@ -53,6 +53,11 @@ Column {
onClicked: modalWithLongTitles.open()
}
StatusButton {
text: "Modal with Header Popup Menu"
onClicked: modalWithHeaderPopupMenu.open()
}
StatusModal {
id: simpleModal
anchors.centerIn: parent
@ -264,4 +269,33 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
}
]
}
StatusModal {
id: modalWithHeaderPopupMenu
anchors.centerIn: parent
header.title: "helloworld.eth"
header.subTitle: "Basic address"
header.popupMenu: StatusPopupMenu {
id: popupMenu
Repeater {
model: dummyAccountsModel
delegate: Loader {
sourceComponent: popupMenu.delegate
onLoaded: {
item.action.text = model.name
item.action.iconSettings.name = model.iconName
}
}
}
onMenuItemClicked: {
popupMenu.dismiss()
}
}
}
ListModel {
id: dummyAccountsModel
ListElement{name: "Account 1"; iconName: "filled-account"}
ListElement{name: "Account 2"; iconName: "filled-account"}
}
}

View File

@ -5,6 +5,7 @@ QtObject {
property string subTitle
property int titleElide: Text.ElideRight
property int subTitleElide: Text.ElideRight
property Component popupMenu
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40

View File

@ -54,6 +54,7 @@ QC.Popup {
subTitleElide: header.subTitleElide
image: header.image
icon: header.icon
popupMenu: header.popupMenu
onEditButtonClicked: statusModal.editButtonClicked()
onClose: statusModal.close()

View File

@ -18,6 +18,7 @@ Rectangle {
property alias image: imageWithTitle.image
property alias icon: imageWithTitle.icon
property bool editable: false
property Component popupMenu
signal editButtonClicked
signal close
@ -29,6 +30,12 @@ Rectangle {
color: Theme.palette.statusModal.backgroundColor
onPopupMenuChanged: {
if (!!popupMenu) {
popupMenuSlot.sourceComponent = popupMenu
}
}
StatusImageWithTitle {
id: imageWithTitle
anchors.verticalCenter: parent.verticalCenter
@ -42,6 +49,15 @@ Rectangle {
onEditButtonClicked: statusModalHeader.editButtonClicked()
}
MouseArea {
anchors.fill: imageWithTitle
visible: !!statusModalHeader.popupMenu
cursorShape: Qt.PointingHandCursor
onClicked: {
popupMenuSlot.item.popup(imageWithTitle.x, imageWithTitle.y + imageWithTitle.height + 8)
}
}
Loader {
id: actionButtonLoader
anchors.right: closeButton.left
@ -78,4 +94,9 @@ Rectangle {
width: parent.width
}
}
Loader {
id: popupMenuSlot
active: !!statusModalHeader.popupMenu
}
}