diff --git a/ui/app/AppLayouts/Chat/components/NicknamePopup.qml b/ui/app/AppLayouts/Chat/components/NicknamePopup.qml new file mode 100644 index 0000000000..bf5d6cbef2 --- /dev/null +++ b/ui/app/AppLayouts/Chat/components/NicknamePopup.qml @@ -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') + } + } +} diff --git a/ui/app/AppLayouts/Chat/components/ProfilePopup.qml b/ui/app/AppLayouts/Chat/components/ProfilePopup.qml index 51ff71a4c3..7b76521025 100644 --- a/ui/app/AppLayouts/Chat/components/ProfilePopup.qml +++ b/ui/app/AppLayouts/Chat/components/ProfilePopup.qml @@ -294,7 +294,15 @@ ModalPopup { anchors.top: nicknameTitle.top anchors.bottom: nicknameTitle.bottom onClicked: { - console.log('Go to nickname modal') + nicknamePopup.open() + popup.close() + } + } + + NicknamePopup { + id: nicknamePopup + onClosed: { + popup.open() } } } diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 1c01bff5e2..8b93f1e41a 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -155,6 +155,7 @@ DISTFILES += \ app/AppLayouts/Chat/components/EmojiSection.qml \ app/AppLayouts/Chat/components/InviteFriendsPopup.qml \ app/AppLayouts/Chat/components/MessageContextMenu.qml \ + app/AppLayouts/Chat/components/NicknamePopup.qml \ app/AppLayouts/Profile/LeftTab/Constants.js \ app/AppLayouts/Profile/LeftTab/components/MenuButton.qml \ app/AppLayouts/Chat/data/EmojiReactions.qml \