feat: add nickname modal
This commit is contained in:
parent
c59ba5f24d
commit
697ae321d2
|
@ -0,0 +1,81 @@
|
||||||
|
import QtQuick 2.13
|
||||||
|
import QtQuick.Controls 2.13
|
||||||
|
import QtQuick.Layouts 1.13
|
||||||
|
import QtGraphicalEffects 1.13
|
||||||
|
import "../../../../imports"
|
||||||
|
import "../../../../shared"
|
||||||
|
import "./"
|
||||||
|
|
||||||
|
ModalPopup {
|
||||||
|
property int nicknameLength: nicknameInput.textField.text.length
|
||||||
|
readonly property int maxNicknameLength: 32
|
||||||
|
property bool nicknameTooLong: nicknameLength > maxNicknameLength
|
||||||
|
|
||||||
|
id: popup
|
||||||
|
|
||||||
|
header: Item {
|
||||||
|
height: childrenRect.height
|
||||||
|
width: parent.width
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
id: nicknameTitle
|
||||||
|
text: qsTr("Nickname")
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.topMargin: 18
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: Style.current.smallPadding
|
||||||
|
font.bold: true
|
||||||
|
font.pixelSize: 14
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: isEnsVerified ? alias : fromAuthor
|
||||||
|
width: 160
|
||||||
|
elide: !isEnsVerified ? Text.ElideMiddle : Text.ElideNone
|
||||||
|
anchors.left: nicknameTitle.left
|
||||||
|
anchors.top: nicknameTitle.bottom
|
||||||
|
anchors.topMargin: 2
|
||||||
|
font.pixelSize: 14
|
||||||
|
color: Style.current.secondaryText
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
id: descriptionText
|
||||||
|
text: qsTr("Nicknames help you identify others in Status. Only you can see the nicknames you’ve added")
|
||||||
|
font.pixelSize: 15
|
||||||
|
wrapMode: Text.WordWrap
|
||||||
|
color: Style.current.secondaryText
|
||||||
|
width: parent.width
|
||||||
|
}
|
||||||
|
|
||||||
|
Input {
|
||||||
|
id: nicknameInput
|
||||||
|
placeholderText: qsTr("Nickname")
|
||||||
|
anchors.top: descriptionText.bottom
|
||||||
|
anchors.topMargin: Style.current.padding
|
||||||
|
validationError: popup.nicknameTooLong ? qsTr("Your nickname is too long") : ""
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
id: lengthLimitText
|
||||||
|
text: popup.nicknameLength + "/" + popup.maxNicknameLength
|
||||||
|
font.pixelSize: 15
|
||||||
|
anchors.top: nicknameInput.bottom
|
||||||
|
anchors.topMargin: 12
|
||||||
|
anchors.right: parent.right
|
||||||
|
color: popup.nicknameTooLong ? Style.current.danger : Style.current.secondaryText
|
||||||
|
}
|
||||||
|
|
||||||
|
footer: StyledButton {
|
||||||
|
id: doneBtn
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: Style.current.smallPadding
|
||||||
|
label: qsTr("Done")
|
||||||
|
anchors.bottom: parent.bottom
|
||||||
|
disabled: popup.nicknameLength === 0 || popup.nicknameTooLong
|
||||||
|
onClicked: {
|
||||||
|
console.log('Nickname set')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -294,7 +294,15 @@ ModalPopup {
|
||||||
anchors.top: nicknameTitle.top
|
anchors.top: nicknameTitle.top
|
||||||
anchors.bottom: nicknameTitle.bottom
|
anchors.bottom: nicknameTitle.bottom
|
||||||
onClicked: {
|
onClicked: {
|
||||||
console.log('Go to nickname modal')
|
nicknamePopup.open()
|
||||||
|
popup.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
NicknamePopup {
|
||||||
|
id: nicknamePopup
|
||||||
|
onClosed: {
|
||||||
|
popup.open()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -155,6 +155,7 @@ DISTFILES += \
|
||||||
app/AppLayouts/Chat/components/EmojiSection.qml \
|
app/AppLayouts/Chat/components/EmojiSection.qml \
|
||||||
app/AppLayouts/Chat/components/InviteFriendsPopup.qml \
|
app/AppLayouts/Chat/components/InviteFriendsPopup.qml \
|
||||||
app/AppLayouts/Chat/components/MessageContextMenu.qml \
|
app/AppLayouts/Chat/components/MessageContextMenu.qml \
|
||||||
|
app/AppLayouts/Chat/components/NicknamePopup.qml \
|
||||||
app/AppLayouts/Profile/LeftTab/Constants.js \
|
app/AppLayouts/Profile/LeftTab/Constants.js \
|
||||||
app/AppLayouts/Profile/LeftTab/components/MenuButton.qml \
|
app/AppLayouts/Profile/LeftTab/components/MenuButton.qml \
|
||||||
app/AppLayouts/Chat/data/EmojiReactions.qml \
|
app/AppLayouts/Chat/data/EmojiReactions.qml \
|
||||||
|
|
Loading…
Reference in New Issue