status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: extract popup menu to ext component

This commit is contained in:
Richard Ramos 2020-05-27 16:42:24 -04:00 committed by RichΛrd
parent a7fd933578
commit cd08289146
4 changed files with 120 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/app/AppLayouts/Chat/ChatColumn.qml
View File

@ -1,7 +1,9 @@
import QtQuick 2.3
import QtQuick.Controls 2.3
import QtQuick.Controls 2.12 as QQC2
import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1
import "../Shared"
import "../../../imports"
StackLayout {
@ -109,14 +111,17 @@ StackLayout {
anchors.rightMargin: -15
anchors.leftMargin: -15
anchors.fill: parent
onClicked: contextMenu.open()
onClicked: {
contextMenu.arrowX = contextMenu.width - 40
contextMenu.popup(moreActionsBtn.x, moreActionsBtn.height + 10)
}
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
Menu {
PopupMenu {
id: contextMenu
MenuItem {
text: "Leave Chat"
QQC2.Action {
text: qsTr("Leave Chat")
onTriggered: chatsModel.leaveActiveChat()
}
}

71
ui/app/AppLayouts/Chat/ContactsColumn.qml
View File

@ -5,6 +5,7 @@ import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1
import QtGraphicalEffects 1.12
import "../../../imports"
import "../Shared"
import "./components"
Item {
@ -147,7 +148,7 @@ Item {
newChatMenu.popup(x, addChatLbl.height + 10)
}
QQC2.Menu {
PopupMenu {
id: newChatMenu
QQC2.Action {
text: qsTr("Start new chat")
@ -171,74 +172,6 @@ Item {
onAboutToHide: {
addChatLbl.state = "default"
}
topPadding: 16
bottomPadding: 16
delegate: QQC2.MenuItem {
id: addChatMenuItem
implicitWidth: 200
implicitHeight: 40
font.pixelSize: 15
icon.color: addChatMenuItem.highlighted ? "white" : Theme.blue
background: Rectangle {
implicitWidth: 220
implicitHeight: 40
color: addChatMenuItem.highlighted ? Theme.blue : "transparent"
}
}
background: Rectangle {
id: bgAddItemMenu
implicitWidth: 220
implicitHeight: 172
color: "transparent"
Rectangle {
id: bgAddItemMenuArrow
color: Theme.white2
height: 14
width: 14
rotation: 135
x: bgAddItemMenu.width / 2 - width / 2
layer.enabled: true
layer.effect: DropShadow {
width: bgAddItemMenuArrow.width
height: bgAddItemMenuArrow.height
x: bgAddItemMenuArrow.x
y: bgAddItemMenuArrow.y + 10
visible: bgAddItemMenuArrow.visible
source: bgAddItemMenuArrow
horizontalOffset: 0
verticalOffset: 5
radius: 10
samples: 15
color: "#22000000"
}
}
Rectangle {
id: bgAddItemMenu2
y: 7
implicitWidth: 220
implicitHeight: 152
color: Theme.white2
radius: 16
layer.enabled: true
layer.effect: DropShadow {
width: bgAddItemMenu2.width
height: bgAddItemMenu2.height
x: bgAddItemMenu2.x
y: bgAddItemMenu2.y + 10
visible: bgAddItemMenu2.visible
source: bgAddItemMenu2
horizontalOffset: 0
verticalOffset: 7
radius: 10
samples: 15
color: "#22000000"
}
}
}
}
}
}

107
ui/app/AppLayouts/Shared/PopupMenu.qml Normal file
View File

@ -0,0 +1,107 @@
import QtQuick 2.12
import QtQuick.Controls 2.3
import QtGraphicalEffects 1.12
import "../../../imports"
Menu {
property alias arrowX: bgPopupMenuTopArrow.x
id: popupMenu
topPadding: 16
bottomPadding: 16
delegate: MenuItem {
id: popupMenuItem
implicitWidth: 200
implicitHeight: 40
font.pixelSize: 15
icon.color: popupMenuItem.highlighted ? Theme.white : Theme.blue
contentItem: Item {
Item {
id: menuIcon
anchors.left: parent.left
anchors.leftMargin: 12
Image {
id: popupMenuItemIcon
source: popupMenuItem.icon.source
smooth: true
visible: false
}
ColorOverlay {
anchors.fill: popupMenuItemIcon
anchors.verticalCenter: parent.verticalCenter
source: popupMenuItemIcon
antialiasing: true
color: popupMenuItem.highlighted ? Theme.white : Theme.blue
}
}
Text {
anchors.left: menuIcon.right
anchors.leftMargin: 32
text: popupMenuItem.text
font: popupMenuItem.font
color: popupMenuItem.highlighted ? Theme.white : Theme.black
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
}
background: Rectangle {
implicitWidth: 220
implicitHeight: 40
color: popupMenuItem.highlighted ? Theme.blue : "transparent"
}
}
background: Rectangle {
id: bgPopupMenu
implicitWidth: 220
color: "transparent"
Rectangle {
id: bgPopupMenuTopArrow
color: Theme.white2
height: 14
width: 14
rotation: 135
x: bgPopupMenu.width / 2 - width / 2
layer.enabled: true
layer.effect: DropShadow{
width: bgPopupMenuTopArrow.width
height: bgPopupMenuTopArrow.height
x: bgPopupMenuTopArrow.x
y: bgPopupMenuTopArrow.y + 10
visible: bgPopupMenuTopArrow.visible
source: bgPopupMenuTopArrow
horizontalOffset: 0
verticalOffset: 5
radius: 10
samples: 15
color: "#22000000"
}
}
Rectangle {
id: bgPopupMenuContent
y: 7
implicitWidth: bgPopupMenu.width
implicitHeight: bgPopupMenu.height
color: Theme.white2
radius: 16
layer.enabled: true
layer.effect: DropShadow{
width: bgPopupMenuContent.width
height: bgPopupMenuContent.height
x: bgPopupMenuContent.x
y: bgPopupMenuContent.y + 10
visible: bgPopupMenuContent.visible
source: bgPopupMenuContent
horizontalOffset: 0
verticalOffset: 7
radius: 10
samples: 15
color: "#22000000"
}
}
}
}

3
ui/app/AppLayouts/Shared/qmldir
View File

@ -1 +1,2 @@
Separator 1.0 Separator.qml
Separator 1.0 Separator.qml
PopupMenu 1.0 PopupMenu.qml