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

Adds a a popup dialog to join a public channel

This commit is contained in:
Richard Ramos 2020-05-27 16:11:56 -04:00 committed by Iuri Matias
parent 567445ea30
commit a7fd933578
9 changed files with 231 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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"

199
ui/app/AppLayouts/Chat/components/PublicChatPopup.qml Normal file
View File

@ -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()
}
}
}
}
}
}

1
ui/app/AppLayouts/Chat/components/qmldir
View File

@ -1 +1,2 @@
SuggestedChannel 1.0 SuggestedChannel.qml
PublicChatPopup 1.0 PublicChatPopup.qml

10
ui/app/AppLayouts/Shared/Separator.qml Normal file
View File

@ -0,0 +1,10 @@
import QtQuick 2.12
import "../../../imports"
Rectangle {
id: separator
width: parent.width
height: 1
color: Theme.grey
anchors.topMargin: 16
}

1
ui/app/AppLayouts/Shared/qmldir Normal file
View File

@ -0,0 +1 @@
Separator 1.0 Separator.qml

4
ui/app/img/arrow-btn-active.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="22" cy="22" r="22" fill="#ECEFFC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.496 23.3333L22.3889 26.4254C21.8795 26.9323 21.872 27.7699 22.3866 28.282C22.9047 28.7976 23.7363 28.793 24.2521 28.2797L29.6111 22.9465C29.8369 22.7218 29.9641 22.4321 29.9909 22.1346C30.0368 21.7486 29.9094 21.3466 29.6111 21.0497L24.2521 15.7166C23.7428 15.2097 22.9011 15.2022 22.3866 15.7143C21.8685 16.2299 21.8731 17.0575 22.3889 17.5708L25.4997 20.6667H15.3274C14.5931 20.6667 14 21.2636 14 22C14 22.7415 14.5943 23.3333 15.3274 23.3333H25.496Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 675 B

4
ui/app/img/arrow-button-inactive.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="22" cy="22" r="22" fill="#EEF2F5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.496 23.3333L22.3889 26.4254C21.8795 26.9323 21.872 27.7699 22.3866 28.282C22.9047 28.7976 23.7363 28.793 24.2521 28.2797L29.6111 22.9465C29.8369 22.7218 29.9641 22.4321 29.9909 22.1346C30.0368 21.7486 29.9094 21.3466 29.6111 21.0497L24.2521 15.7166C23.7428 15.2097 22.9011 15.2022 22.3866 15.7143C21.8685 16.2299 21.8731 17.0575 22.3889 17.5708L25.4997 20.6667H15.3274C14.5931 20.6667 14 21.2636 14 22C14 22.7415 14.5943 23.3333 15.3274 23.3333H25.496Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 675 B

3
ui/app/img/close.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.574L7.72275 6.2968C7.32616 5.90021 6.68994 5.90241 6.29617 6.29617C5.89966 6.69269 5.90269 7.32864 6.2968 7.72275L10.574 12L6.2968 16.2772C5.90021 16.6738 5.90241 17.3101 6.29617 17.7038C6.69269 18.1003 7.32864 18.0973 7.72275 17.7032L12 13.426L16.2772 17.7032C16.6738 18.0998 17.3101 18.0976 17.7038 17.7038C18.1003 17.3073 18.0973 16.6714 17.7032 16.2772L13.426 12L17.7032 7.72275C18.0998 7.32616 18.0976 6.68994 17.7038 6.29617C17.3073 5.89966 16.6714 5.90269 16.2772 6.2968L12 10.574Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 664 B

3
ui/app/img/hash.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9901 5.14143C11.0682 4.59469 10.6883 4.08816 10.1415 4.01006C9.59481 3.93195 9.08828 4.31185 9.01018 4.85858L8.64236 7.43334C8.59591 7.75849 8.31744 8 7.98899 8H6C5.44772 8 5 8.44772 5 9C5 9.55228 5.44772 10 6 10H7.5147C7.91635 10 8.22487 10.3557 8.16807 10.7533L7.78521 13.4333C7.73876 13.7585 7.4603 14 7.13185 14H5.5C4.94772 14 4.5 14.4477 4.5 15C4.5 15.5523 4.94772 16 5.5 16H6.65756C7.0592 16 7.36773 16.3557 7.31093 16.7533L7.01018 18.8586C6.93207 19.4053 7.31197 19.9118 7.85871 19.99C8.40544 20.0681 8.91197 19.6882 8.99008 19.1414L9.3579 16.5667C9.40435 16.2415 9.68282 16 10.0113 16H12.6576C13.0592 16 13.3677 16.3557 13.3109 16.7533L13.0102 18.8586C12.9321 19.4053 13.312 19.9118 13.8587 19.99C14.4054 20.0681 14.912 19.6882 14.9901 19.1414L15.3579 16.5667C15.4044 16.2415 15.6828 16 16.0113 16H18C18.5523 16 19 15.5523 19 15C19 14.4477 18.5523 14 18 14H16.4856C16.0839 14 15.7754 13.6443 15.8322 13.2467L16.215 10.5667C16.2615 10.2415 16.54 10 16.8684 10H18.5C19.0523 10 19.5 9.55228 19.5 9C19.5 8.44772 19.0523 8 18.5 8H17.3427C16.9411 8 16.6325 7.64427 16.6893 7.24666L16.9901 5.14143C17.0682 4.59469 16.6883 4.08816 16.1415 4.01006C15.5948 3.93195 15.0883 4.31185 15.0102 4.85858L14.6424 7.43334C14.5959 7.75849 14.3174 8 13.989 8H11.3427C10.9411 8 10.6325 7.64427 10.6893 7.24666L10.9901 5.14143ZM14.1681 10.7533C14.2249 10.3557 13.9163 10 13.5147 10H10.8684C10.54 10 10.2615 10.2415 10.215 10.5667L9.83219 13.2467C9.77539 13.6443 10.0839 14 10.4856 14H13.1318C13.4603 14 13.7388 13.7585 13.7852 13.4333L14.1681 10.7533Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB