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

Create a reusable modal popup

This commit is contained in:
Richard Ramos 2020-05-29 12:27:50 -04:00 committed by Iuri Matias
parent 9d86082cfe
commit 1c00bb2dff
5 changed files with 275 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml
View File

@ -5,67 +5,9 @@ import "../../../../imports"
import "../../../../shared"
import "./"
Item {
function open() {
popup.open()
chatKey.text = "";
chatKey.forceActiveFocus(Qt.MouseFocusReason)
}
function close() {
popup.close()
}
Popup {
ModalPopup {
id: popup
modal: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
Overlay.modal: Rectangle {
color: "#60000000"
}
parent: Overlay.overlay
x: Math.round((parent.width - width) / 2)
y: Math.round((parent.height - height) / 2)
width: 480
height: 509
background: Rectangle {
color: Theme.white
radius: 8
}
padding: 0
contentItem: Item {
Text {
id: modalDialogTitle
text: qsTr("New chat")
anchors.top: parent.top
anchors.left: parent.left
font.bold: true
font.pixelSize: 17
anchors.leftMargin: 16
anchors.topMargin: 16
}
Image {
id: closeModalImg
anchors.top: parent.top
anchors.right: parent.right
anchors.rightMargin: 16
anchors.topMargin: 16
source: "../../../img/close.svg"
MouseArea {
id: closeModalMouseArea
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked : {
popup.close()
}
}
}
Separator {
id: separator
anchors.top: modalDialogTitle.bottom
}
title: qsTr("New chat")
Rectangle {
id: chatKeyBox
@ -89,7 +31,7 @@ Item {
background: Rectangle {
color: "#00000000"
}
width: popup.width - 65
width: chatKeyBox.width - 32
}
MouseArea {
@ -101,20 +43,13 @@ Item {
}
}
Separator {
id: separator2
anchors.bottom: parent.bottom
anchors.bottomMargin: 75
}
Button {
id: btnNewChat
anchors.bottom: parent.bottom
anchors.right: parent.right
anchors.bottomMargin: 16
anchors.rightMargin: 16
footer: Button {
width: 44
height: 44
anchors.bottom: parent.bottom
anchors.right: parent.right
Image {
source: chatKey.text == "" ? "../../../img/arrow-button-inactive.svg" : "../../../img/arrow-btn-active.svg"
}
@ -132,6 +67,4 @@ Item {
}
}
}
}
}
}

90
ui/app/AppLayouts/Chat/components/PublicChatPopup.qml
View File

@ -5,75 +5,15 @@ import "../../../../imports"
import "../../../../shared"
import "./"
Item {
function open(){
popup.open()
channelName.text = "";
channelName.forceActiveFocus(Qt.MouseFocusReason)
}
function close(){
popup.close()
}
Popup {
ModalPopup {
id: popup
modal: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
Overlay.modal: Rectangle {
color: "#60000000"
}
parent: Overlay.overlay
x: Math.round((parent.width - width) / 2)
y: Math.round((parent.height - height) / 2)
width: 480
height: 509
background: Rectangle {
color: Theme.white
radius: 8
}
padding: 0
contentItem: Item {
Text {
id: modalDialogTitle
text: qsTr("Join public chat")
anchors.top: parent.top
anchors.left: parent.left
font.bold: true
font.pixelSize: 17
anchors.leftMargin: 16
anchors.topMargin: 16
}
Image {
id: closeModalImg
anchors.top: parent.top
anchors.right: parent.right
anchors.rightMargin: 16
anchors.topMargin: 16
source: "../../../img/close.svg"
MouseArea {
id: closeModalMouseArea
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked : {
popup.close()
}
}
}
Separator {
id: separator
anchors.top: modalDialogTitle.bottom
}
title: qsTr("Join public chat")
Row {
id: description
Layout.fillHeight: false
Layout.fillWidth: true
anchors.top: separator.bottom
anchors.left: parent.left
anchors.right: parent.right
width: parent.width
padding: 20
@ -107,7 +47,7 @@ Item {
background: Rectangle {
color: "#00000000"
}
width: popup.width - 65
width: channelNameBox.width - 32
}
Image {
@ -163,26 +103,17 @@ Item {
}
}
Separator {
id: separator2
anchors.bottom: parent.bottom
anchors.bottomMargin: 75
}
Button {
id: btnJoinChat
anchors.bottom: parent.bottom
anchors.right: parent.right
anchors.bottomMargin: 16
anchors.rightMargin: 16
footer: Button {
width: 44
height: 44
Image {
source: channelName.text == "" ? "../../../img/arrow-button-inactive.svg" : "../../../img/arrow-btn-active.svg"
}
anchors.bottom: parent.bottom
anchors.right: parent.right
background: Rectangle {
color: "transparent"
}
Image {
source: channelName.text == "" ? "../../../img/arrow-button-inactive.svg" : "../../../img/arrow-btn-active.svg"
}
MouseArea {
id: btnMAJoinChat
cursorShape: Qt.PointingHandCursor
@ -194,6 +125,5 @@ Item {
}
}
}
}
}
}

1
ui/nim-status-client.pro
View File

@ -142,6 +142,7 @@ DISTFILES += \
onboarding/img/wallet@3x.jpg \
onboarding/qmldir \
shared/Input.qml \
shared/ModalPopup.qml \
shared/PopupMenu.qml \
shared/Separator.qml \
shared/StatusTabButton.qml \

121
ui/shared/ModalPopup.qml Normal file
View File

@ -0,0 +1,121 @@
import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import "../imports"
import "./"
Item {
function open(){
popup.open()
channelName.text = "";
channelName.forceActiveFocus(Qt.MouseFocusReason)
}
function close(){
popup.close()
}
property alias title: modalDialogTitle.text
default property alias content : popupContent.children
property alias footer : footerContent.children
Popup {
id: popup
modal: true
Overlay.modal: Rectangle {
color: "#60000000"
}
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
parent: Overlay.overlay
x: Math.round((parent.width - width) / 2)
y: Math.round((parent.height - height) / 2)
width: 480
height: 509
background: Rectangle {
color: Theme.white
radius: 8
}
padding: 0
contentItem: Item {
Text {
id: modalDialogTitle
text: "Default Title"
anchors.top: parent.top
anchors.left: parent.left
font.bold: true
font.pixelSize: 17
anchors.leftMargin: 16
anchors.topMargin: 16
}
Rectangle {
id: closeButton
height: 32
width: 32
anchors.top: parent.top
anchors.topMargin: Theme.padding
anchors.rightMargin: Theme.padding
anchors.right: parent.right
radius: 8
Image {
id: closeModalImg
source: "../../../img/close.svg"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
MouseArea {
id: closeModalMouseArea
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
hoverEnabled: true
onExited: {
closeButton.color = Theme.white
}
onEntered:{
closeButton.color = Theme.grey
}
onClicked : {
popup.close()
}
}
}
Separator {
id: separator
anchors.top: modalDialogTitle.bottom
}
Item {
id: popupContent
anchors.top: separator.bottom
anchors.bottom: separator2.top
anchors.left: popup.left
anchors.right: popup.right
width: popup.width
}
Separator {
id: separator2
anchors.bottom: parent.bottom
anchors.bottomMargin: 75
}
Item {
id: footerContent
width: parent.width
anchors.top: separator2.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.bottomMargin: Theme.padding
anchors.rightMargin: Theme.padding
anchors.leftMargin: Theme.padding
}
}
}
}

1
ui/shared/qmldir
View File

@ -1,5 +1,6 @@
StyledButton 1.0 StyledButton.qml
RoundedIcon 1.0 RoundedIcon.qml
ModalPopup 1.0 ModalPopup.qml
PopupMenu 1.0 PopupMenu.qml
Separator 1.0 Separator.qml
StatusTabButton 1.0 StatusTabButton.qml