refactor(NicknamePopup): use StatusModal and StatusButton from StatusQ

ui/app/AppLayouts/Chat/popups/NicknamePopup.qml

@@ -4,127 +4,104 @@ import QtQuick.Layouts 1.13
 import QtGraphicalEffects 1.13
 
 import utils 1.0
-import "../../../../shared"
-import "../../../../shared/controls"
-import "../../../../shared/popups"
-import "../../../../shared/panels"
-import "../../../../shared/status"
-import "./"
 
-// TODO: replace with StatusModal
+import StatusQ.Core 0.1
-ModalPopup {
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+import "../../../../shared/controls"
+
+StatusModal {
     property int nicknameLength: nicknameInput.textField.text.length
     readonly property int maxNicknameLength: 32
     property bool nicknameTooLong: nicknameLength > maxNicknameLength
     property var changeUsername: function () {}
     property var changeNickname: function () {}
+    anchors.centerIn: parent
 
     id: popup
     width: 400
     height: 390
 
-    noTopMargin: true
-
     onOpened: {
         nicknameInput.forceActiveFocus(Qt.MouseFocusReason)
     }
 
-    header: Item {
+    header.title: qsTr("Nickname")
-        height: 78
+    header.subTitle: isEnsVerified ? alias : fromAuthor
-        width: parent.width
+    header.subTitleElide: !isEnsVerified ? Text.ElideMiddle : Text.ElideNone
 
-        StyledText {
+    contentItem: Item {
-            id: nicknameTitle
+        width: popup.width
-            //% "Nickname"
+        height: childrenRect.height
-            text:  qsTrId("nickname")
+
+        Column {
             anchors.top: parent.top
-            anchors.topMargin: Style.current.padding
+            anchors.topMargin: 16
-            anchors.left: parent.left
+            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.leftMargin: Style.current.padding
+            width: parent.width - 32
-            font.bold: true
+            spacing: 16
-            font.pixelSize: 17
-        }
 
-        StyledText {
+            StatusBaseText {
-            text: isEnsVerified ? alias : fromAuthor
+                id: descriptionText
-            width: 160
+                //% "Nicknames help you identify others in Status. Only you can see the nicknames you’ve added"
-            elide: !isEnsVerified ? Text.ElideMiddle : Text.ElideNone
+                text: qsTrId("nicknames-help-you-identify-others-in-status--only-you-can-see-the-nicknames-you-ve-added")
-            anchors.left: nicknameTitle.left
+                font.pixelSize: 15
-            anchors.bottom: parent.bottom
+                wrapMode: Text.WordWrap
-            anchors.bottomMargin: Style.current.padding
+                color: Theme.palette.baseColor1
-            font.pixelSize: 15
+                width: parent.width
-            color: Style.current.secondaryText
+            }
-        }
 
-        Separator {
+            Input {
-            anchors.bottom: parent.bottom
+                id: nicknameInput
-            anchors.left: parent.left
+                //% "Nickname"
-            anchors.leftMargin: -Style.current.padding
+                placeholderText: qsTrId("nickname")
-            anchors.right: parent.right
+                text: nickname
-            anchors.rightMargin: -Style.current.padding
+                //% "Your nickname is too long"
-        }
+                validationError: popup.nicknameTooLong ? qsTrId("your-nickname-is-too-long") : ""
-    }
+                Keys.onReleased: {
+                    if (event.key === Qt.Key_Return) {
+                        doneBtn.onClicked();
+                    }
+                }
 
-    StyledText {
+                StatusBaseText {
-        id: descriptionText
+                    id: lengthLimitText
-        //% "Nicknames help you identify others in Status. Only you can see the nicknames you’ve added"
+                    text: popup.nicknameLength + "/" + popup.maxNicknameLength
-        text: qsTrId("nicknames-help-you-identify-others-in-status--only-you-can-see-the-nicknames-you-ve-added")
+                    font.pixelSize: 15
-        font.pixelSize: 15
+                    anchors.top: parent.bottom
-        wrapMode: Text.WordWrap
+                    anchors.topMargin: 12
-        color: Style.current.secondaryText
+                    anchors.right: parent.right
-        width: parent.width
+                    color: popup.nicknameTooLong ? Theme.palette.dangerColro1 : Theme.palette.baseColor1
-    }
+                }
-
-    Input {
-        id: nicknameInput
-        //% "Nickname"
-        placeholderText: qsTrId("nickname")
-        text: nickname
-        anchors.top: descriptionText.bottom
-        anchors.topMargin: Style.current.padding
-        //% "Your nickname is too long"
-        validationError: popup.nicknameTooLong ? qsTrId("your-nickname-is-too-long") : ""
-        Keys.onReleased: {
-            if (event.key === Qt.Key_Return) {
-                doneBtn.onClicked();
             }
         }
     }
 
-    StyledText {
+    rightButtons: [
-        id: lengthLimitText
+        StatusButton {
-        text: popup.nicknameLength + "/" + popup.maxNicknameLength
+            id: doneBtn
-        font.pixelSize: 15
+            //% "Done"
-        anchors.top: nicknameInput.bottom
+            text: qsTrId("done")
-        anchors.topMargin: 12
+            enabled: !popup.nicknameTooLong
-        anchors.right: parent.right
+            onClicked: {
-        color: popup.nicknameTooLong ? Style.current.danger : Style.current.secondaryText
+                if (!isEnsVerified) {
-    }
+                    // Change username title only if it was not an ENS name
-
+                    if (nicknameInput.textField.text === "") {
-    footer: StatusButton {
+                        // If we removed the nickname, go back to showing the alias
-        id: doneBtn
+                        popup.changeUsername(alias)
-        anchors.right: parent.right
+                    } else {
-        anchors.rightMargin: Style.current.smallPadding
+                        popup.changeUsername(nicknameInput.textField.text)
-        //% "Done"
+                    }
-        text: qsTrId("done")
+                }
-        anchors.bottom: parent.bottom
+                popup.changeNickname(nicknameInput.textField.text)
-        enabled: !popup.nicknameTooLong
+                profileModel.contacts.changeContactNickname(fromAuthor, nicknameInput.textField.text)
-        onClicked: {
+                popup.close()
-            if (!isEnsVerified) {
+                if (!!chatsModel.communities.activeCommunity) {
-                // Change username title only if it was not an ENS name
+                    chatsModel.communities.activeCommunity.triggerMembersUpdate()
-                 if (nicknameInput.textField.text === "") {
+                }
-                     // If we removed the nickname, go back to showing the alias
-                     popup.changeUsername(alias)
-                 } else {
-                     popup.changeUsername(nicknameInput.textField.text)
-                 }
-            }
-            popup.changeNickname(nicknameInput.textField.text)
-            profileModel.contacts.changeContactNickname(fromAuthor, nicknameInput.textField.text)
-            popup.close()
-            if (!!chatsModel.communities.activeCommunity) {
-                chatsModel.communities.activeCommunity.triggerMembersUpdate()
             }
         }
-    }
+    ]
 }