diff --git a/ui/app/AppLayouts/Chat/ContactsColumn.qml b/ui/app/AppLayouts/Chat/ContactsColumn.qml index 6c3be88f1f..2da214c509 100644 --- a/ui/app/AppLayouts/Chat/ContactsColumn.qml +++ b/ui/app/AppLayouts/Chat/ContactsColumn.qml @@ -27,6 +27,10 @@ Item { font.pixelSize: 17 } + PublicChatPopup { + id: publicChatPopup + } + Rectangle { id: searchBox height: 36 @@ -41,7 +45,7 @@ Item { TextField { id: searchText - placeholderText: qsTr("Search or join channel") + placeholderText: qsTr("Search") anchors.left: parent.left anchors.leftMargin: 32 anchors.verticalCenter: parent.verticalCenter @@ -162,11 +166,7 @@ Item { QQC2.Action { text: qsTr("Join public chat") icon.source: "../../img/public_chat.svg" - onTriggered: { - chatGroupsListView.currentIndex = chatsModel.joinChat( - searchText.text) - searchText.text = "" - } + onTriggered: publicChatPopup.open() } onAboutToHide: { addChatLbl.state = "default" diff --git a/ui/app/AppLayouts/Chat/components/PublicChatPopup.qml b/ui/app/AppLayouts/Chat/components/PublicChatPopup.qml new file mode 100644 index 0000000000..b168b76e10 --- /dev/null +++ b/ui/app/AppLayouts/Chat/components/PublicChatPopup.qml @@ -0,0 +1,199 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.3 +import QtQuick.Layouts 1.3 +import "../../../../imports" +import "../../Shared" +import "./" + +Item { + function open(){ + popup.open() + channelName.forceActiveFocus(Qt.MouseFocusReason) + } + + function close(){ + popup.close() + } + + Popup { + id: popup + modal: true + closePolicy: Popup.NoAutoClose + 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 + } + + 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 + + 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 + } + } + + 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) + } + } + } + + 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" } + } + } + + 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; + + chatsModel.joinChat(channelName.text) + popup.close() + } + } + } + } + } +} diff --git a/ui/app/AppLayouts/Chat/components/qmldir b/ui/app/AppLayouts/Chat/components/qmldir index ce59d59180..358b86ac2e 100644 --- a/ui/app/AppLayouts/Chat/components/qmldir +++ b/ui/app/AppLayouts/Chat/components/qmldir @@ -1 +1,2 @@ SuggestedChannel 1.0 SuggestedChannel.qml +PublicChatPopup 1.0 PublicChatPopup.qml \ No newline at end of file diff --git a/ui/app/AppLayouts/Shared/Separator.qml b/ui/app/AppLayouts/Shared/Separator.qml new file mode 100644 index 0000000000..066b260aa1 --- /dev/null +++ b/ui/app/AppLayouts/Shared/Separator.qml @@ -0,0 +1,10 @@ +import QtQuick 2.12 +import "../../../imports" + +Rectangle { + id: separator + width: parent.width + height: 1 + color: Theme.grey + anchors.topMargin: 16 +} \ No newline at end of file diff --git a/ui/app/AppLayouts/Shared/qmldir b/ui/app/AppLayouts/Shared/qmldir new file mode 100644 index 0000000000..e6bb309b10 --- /dev/null +++ b/ui/app/AppLayouts/Shared/qmldir @@ -0,0 +1 @@ +Separator 1.0 Separator.qml \ No newline at end of file diff --git a/ui/app/img/arrow-btn-active.svg b/ui/app/img/arrow-btn-active.svg new file mode 100644 index 0000000000..f5cfe6a3f5 --- /dev/null +++ b/ui/app/img/arrow-btn-active.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/app/img/arrow-button-inactive.svg b/ui/app/img/arrow-button-inactive.svg new file mode 100644 index 0000000000..f3e5a2f428 --- /dev/null +++ b/ui/app/img/arrow-button-inactive.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/app/img/close.svg b/ui/app/img/close.svg new file mode 100644 index 0000000000..26cae722b9 --- /dev/null +++ b/ui/app/img/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/app/img/hash.svg b/ui/app/img/hash.svg new file mode 100644 index 0000000000..55e5432675 --- /dev/null +++ b/ui/app/img/hash.svg @@ -0,0 +1,3 @@ + + +