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

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

@ -5,133 +5,66 @@ 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
title: qsTr("New chat")
Rectangle {
id: chatKeyBox
height: 44
color: Theme.grey
anchors.top: separator.bottom
anchors.topMargin: 16
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
}
anchors.right: parent.right
anchors.rightMargin: 16
anchors.left: parent.left
anchors.leftMargin: 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
}
Rectangle {
id: chatKeyBox
height: 44
color: Theme.grey
anchors.top: separator.bottom
anchors.topMargin: 16
radius: 8
anchors.right: parent.right
anchors.rightMargin: 16
TextField {
id: chatKey
placeholderText: qsTr("Enter ENS username or chat key")
anchors.left: parent.left
anchors.leftMargin: 16
TextField {
id: chatKey
placeholderText: qsTr("Enter ENS username or chat key")
anchors.left: parent.left
anchors.leftMargin: 16
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
background: Rectangle {
color: "#00000000"
}
width: popup.width - 65
}
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked : {
chatKey.forceActiveFocus(Qt.MouseFocusReason)
}
}
}
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
width: 44
height: 44
Image {
source: chatKey.text == "" ? "../../../img/arrow-button-inactive.svg" : "../../../img/arrow-btn-active.svg"
}
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
background: Rectangle {
color: "transparent"
color: "#00000000"
}
MouseArea {
id: btnMAnewChat
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked : {
if(chatKey.text === "") return;
chatsModel.joinChat(chatKey.text, Constants.chatTypeOneToOne);
popup.close();
}
width: chatKeyBox.width - 32
}
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked : {
chatKey.forceActiveFocus(Qt.MouseFocusReason)
}
}
}
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"
}
background: Rectangle {
color: "transparent"
}
MouseArea {
id: btnMAnewChat
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked : {
if(chatKey.text === "") return;
chatsModel.joinChat(chatKey.text, Constants.chatTypeOneToOne);
popup.close();
}
}
}
}
}

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

@ -5,195 +5,125 @@ 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 {
title: qsTr("Join public chat")
Row {
id: description
Layout.fillHeight: false
Layout.fillWidth: true
width: parent.width
padding: 20
Text {
id: modalDialogTitle
text: qsTr("Join public chat")
anchors.top: parent.top
width: parent.width - 20
font.pixelSize: 15
text: qsTr("A public chat is where you get to hang out with others, make friends and talk about subjects of your interest.")
wrapMode: Text.WordWrap
verticalAlignment: Text.AlignTop
}
}
Rectangle {
id: channelNameBox
height: 44
color: Theme.grey
anchors.top: description.bottom
radius: 8
anchors.right: parent.right
anchors.rightMargin: 16
anchors.left: parent.left
anchors.leftMargin: 16
TextField {
id: channelName
placeholderText: qsTr("chat-name")
anchors.left: parent.left
font.bold: true
font.pixelSize: 17
anchors.leftMargin: 16
anchors.topMargin: 16
anchors.leftMargin: 32
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
background: Rectangle {
color: "#00000000"
}
width: channelNameBox.width - 32
}
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
id: image4
anchors.left: parent.left
anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
source: "../../../img/hash.svg"
}
Row {
id: description
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked : {
channelName.forceActiveFocus(Qt.MouseFocusReason)
}
}
}
RowLayout {
id: row
Layout.fillHeight: false
Layout.fillWidth: true
anchors.right: parent.right
anchors.rightMargin: 65
anchors.left: parent.left
anchors.leftMargin: 65
anchors.top: channelNameBox.bottom
anchors.topMargin: 37
Flow {
Layout.fillHeight: false
Layout.fillWidth: true
anchors.top: separator.bottom
anchors.left: parent.left
anchors.right: parent.right
width: parent.width
padding: 20
spacing: 20
Text {
width: parent.width - 20
font.pixelSize: 15
text: qsTr("A public chat is where you get to hang out with others, make friends and talk about subjects of your interest.")
wrapMode: Text.WordWrap
verticalAlignment: Text.AlignTop
}
SuggestedChannel { channel: "ethereum" }
SuggestedChannel { channel: "status" }
SuggestedChannel { channel: "general" }
SuggestedChannel { channel: "dapps" }
SuggestedChannel { channel: "crypto" }
SuggestedChannel { channel: "introductions" }
SuggestedChannel { channel: "tech" }
SuggestedChannel { channel: "ama" }
SuggestedChannel { channel: "gaming" }
SuggestedChannel { channel: "sexychat" }
SuggestedChannel { channel: "nsfw" }
SuggestedChannel { channel: "science" }
SuggestedChannel { channel: "music" }
SuggestedChannel { channel: "movies" }
SuggestedChannel { channel: "sports" }
SuggestedChannel { channel: "politics" }
}
}
Rectangle {
id: channelNameBox
height: 44
color: Theme.grey
anchors.top: description.bottom
radius: 8
anchors.right: parent.right
anchors.rightMargin: 16
anchors.left: parent.left
anchors.leftMargin: 16
TextField {
id: channelName
placeholderText: qsTr("chat-name")
anchors.left: parent.left
anchors.leftMargin: 32
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
background: Rectangle {
color: "#00000000"
}
width: popup.width - 65
}
Image {
id: image4
anchors.left: parent.left
anchors.leftMargin: 10
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit
source: "../../../img/hash.svg"
}
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked : {
channelName.forceActiveFocus(Qt.MouseFocusReason)
}
}
footer: Button {
width: 44
height: 44
anchors.bottom: parent.bottom
anchors.right: parent.right
background: Rectangle {
color: "transparent"
}
RowLayout {
id: row
Layout.fillHeight: false
Layout.fillWidth: true
anchors.right: parent.right
anchors.rightMargin: 65
anchors.left: parent.left
anchors.leftMargin: 65
anchors.top: channelNameBox.bottom
anchors.topMargin: 37
Flow {
Layout.fillHeight: false
Layout.fillWidth: true
spacing: 20
SuggestedChannel { channel: "ethereum" }
SuggestedChannel { channel: "status" }
SuggestedChannel { channel: "general" }
SuggestedChannel { channel: "dapps" }
SuggestedChannel { channel: "crypto" }
SuggestedChannel { channel: "introductions" }
SuggestedChannel { channel: "tech" }
SuggestedChannel { channel: "ama" }
SuggestedChannel { channel: "gaming" }
SuggestedChannel { channel: "sexychat" }
SuggestedChannel { channel: "nsfw" }
SuggestedChannel { channel: "science" }
SuggestedChannel { channel: "music" }
SuggestedChannel { channel: "movies" }
SuggestedChannel { channel: "sports" }
SuggestedChannel { channel: "politics" }
}
Image {
source: channelName.text == "" ? "../../../img/arrow-button-inactive.svg" : "../../../img/arrow-btn-active.svg"
}
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
width: 44
height: 44
Image {
source: channelName.text == "" ? "../../../img/arrow-button-inactive.svg" : "../../../img/arrow-btn-active.svg"
}
background: Rectangle {
color: "transparent"
}
MouseArea {
id: btnMAJoinChat
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked : {
if(channelName.text === "") return;
MouseArea {
id: btnMAJoinChat
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked : {
if(channelName.text === "") return;
chatsModel.joinChat(channelName.text, Constants.chatTypePublic);
popup.close();
}
}
}
}
}
}

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