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 2.3
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Controls 2.12 as QQC2
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1 import Qt.labs.platform 1.1
import "../Shared"
import "../../../imports" import "../../../imports"
StackLayout { StackLayout {
@ -109,14 +111,17 @@ StackLayout {
anchors.rightMargin: -15 anchors.rightMargin: -15
anchors.leftMargin: -15 anchors.leftMargin: -15
anchors.fill: parent anchors.fill: parent
onClicked: contextMenu.open() onClicked: {
contextMenu.arrowX = contextMenu.width - 40
contextMenu.popup(moreActionsBtn.x, moreActionsBtn.height + 10)
}
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton acceptedButtons: Qt.LeftButton | Qt.RightButton
Menu { PopupMenu {
id: contextMenu id: contextMenu
MenuItem { QQC2.Action {
text: "Leave Chat" text: qsTr("Leave Chat")
onTriggered: chatsModel.leaveActiveChat() 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 Qt.labs.platform 1.1
import QtGraphicalEffects 1.12 import QtGraphicalEffects 1.12
import "../../../imports" import "../../../imports"
import "../Shared"
import "./components" import "./components"
Item { Item {
@ -147,7 +148,7 @@ Item {
newChatMenu.popup(x, addChatLbl.height + 10) newChatMenu.popup(x, addChatLbl.height + 10)
} }
QQC2.Menu { PopupMenu {
id: newChatMenu id: newChatMenu
QQC2.Action { QQC2.Action {
text: qsTr("Start new chat") text: qsTr("Start new chat")
@ -171,74 +172,6 @@ Item {
onAboutToHide: { onAboutToHide: {
addChatLbl.state = "default" 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