fix(EnsListView): Fixed preferred name message preview

ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml

@@ -28,4 +28,6 @@ import StatusQ.Core.Theme 0.1
 Text {
     font.family: Theme.palette.baseFont.name
     color: Theme.palette.directColor1
+    linkColor: hoveredLink ? Qt.lighter(Theme.palette.primaryColor1)
+                           : Theme.palette.primaryColor1
 }

ui/app/AppLayouts/CommunitiesPortal/popups/CreateCommunityPopup.qml

@@ -162,7 +162,6 @@ StatusStackModal {
                         Layout.topMargin: 8
                         Layout.alignment: Qt.AlignHCenter
                         horizontalAlignment: Qt.AlignHCenter
-                        linkColor: hoveredLink ? Qt.lighter(Theme.palette.primaryColor1) : Theme.palette.primaryColor1
                         text: qsTr("Export your Discord JSON data using %1")
                           .arg("<a href='https://github.com/Tyrrrz/DiscordChatExporter'>DiscordChatExporter</a>")
                         onLinkActivated: Global.openLink(link)
@@ -178,7 +177,6 @@ StatusStackModal {
                     StatusBaseText {
                         Layout.alignment: Qt.AlignHCenter
                         horizontalAlignment: Qt.AlignHCenter
-                        linkColor: hoveredLink ? Qt.lighter(Theme.palette.primaryColor1) : Theme.palette.primaryColor1
                         text: qsTr("Refer to this <a href='https://github.com/Tyrrrz/DiscordChatExporter/wiki'>wiki</a> if you have any queries")
                         onLinkActivated: Global.openLink(link)
                         HoverHandler {

ui/app/AppLayouts/Profile/popups/ENSPopup.qml

@@ -4,66 +4,72 @@ import QtQuick.Layouts 1.3
 import QtQml.Models 2.3
 
 import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups.Dialog 0.1
 
 import utils 1.0
 import shared 1.0
 import shared.panels 1.0
 import shared.popups 1.0
 
-// TODO: replace with StatusModal
+StatusDialog {
-ModalPopup {
+    id: root
-    id: popup
-
-    title: qsTr("Primary username")
 
     property var ensUsernamesStore
-    property string newUsername: ""
 
-    onOpened: {
+    title: qsTr("Primary username")
-        for(var i in ensNames.contentItem.children){
+    standardButtons: Dialog.ApplyRole
-            ensNames.contentItem.children[i].checked = ensNames.contentItem.children[i].text === popup.ensUsernamesStore.preferredUsername
+    implicitWidth: 400
+
+    onApplied: {
+        console.log("applied!")
+        ensUsernamesStore.setPrefferedEnsUsername(d.newUsername);
+        close();
     }
+
+    QtObject {
+        id: d
+
+        property string newUsername: ""
     }
 
+    ColumnLayout {
+        anchors.fill: parent
+        spacing: Style.current.padding
+
         StyledText {
-        id: lbl1
+            Layout.fillWidth: true
-        text: popup.ensUsernamesStore.preferredUsername ?
+            text: root.ensUsernamesStore.preferredUsername ?
                   qsTr("Your messages are displayed to others with this username:")
                   :
                   qsTr("Once you select a username, you won’t be able to disable it afterwards. You will only be able choose a different username to display.")
             font.pixelSize: 15
             wrapMode: Text.WordWrap
-        width: parent.width
         }
 
         StyledText {
-        id: lbl2
+            visible: root.ensUsernamesStore.preferredUsername
-        anchors.top: lbl1.bottom
+            text: root.ensUsernamesStore.preferredUsername
-        anchors.topMargin: Style.current.padding
-        text: popup.ensUsernamesStore.preferredUsername
             font.pixelSize: 17
             font.weight: Font.Bold
         }
 
-    StatusScrollView {
+        StatusListView {
-        anchors.fill: parent
+            id: ensNamesListView
-        anchors.top: lbl2.bottom
+
-        anchors.topMargin: 70
             Layout.fillWidth: true
             Layout.fillHeight: true
+            implicitHeight: contentHeight
 
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-        ScrollBar.vertical.policy: ensNames.contentHeight > ensNames.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
-
-        StatusListView {
-            anchors.fill: parent
             model: root.ensUsernamesStore.ensUsernamesModel
-            spacing: 0
+
-            id: ensNames
             delegate: RadioDelegate {
                 id: radioDelegate
+
+                width: ListView.view.width
                 text: ensUsername
-                checked: popup.ensUsernamesStore.preferredUsername === ensUsername
+                checked: root.ensUsernamesStore.preferredUsername === ensUsername
 
                 contentItem: StyledText {
                     color: Style.current.textColor
@@ -76,65 +82,12 @@ ModalPopup {
                     anchors.fill: parent
                     onClicked: {
                         parent.checked = true
-                        newUsername = ensUsername;
+                        d.newUsername = ensUsername;
                     }
                 }
             }
         }
     }
 
-    onNewUsernameChanged: {
-        btnSelectPreferred.state = newUsername === popup.ensUsernamesStore.preferredUsername ? "inactive" : "active"
-    }
-
-    footer: Item {
-        width: parent.width
-        height: btnSelectPreferred.height
-
-        Button {
-            id: btnSelectPreferred
-            width: 44
-            height: 44
-            anchors.bottom: parent.bottom
-            anchors.right: parent.right
-            state: "inactive"
-            states: [
-                State {
-                    name: "inactive"
-                    PropertyChanges {
-                        target: btnContinue
-                        source: Style.svg("arrow-right-btn-inactive")
-                    }
-                },
-                State {
-                    name: "active"
-                    PropertyChanges {
-                        target: btnContinue
-                        source: Style.svg("arrow-right-btn-active")
-                    }
-                }
-            ]
-
-            SVGImage {
-                id: btnContinue
-                width: 50
-                height: 50
-            }
-            background: Rectangle {
-                color: "transparent"
-            }
-            MouseArea {
-                cursorShape: btnSelectPreferred.state === "active" ? Qt.PointingHandCursor : Qt.ArrowCursor
-                anchors.fill: parent
-                onClicked : {
-                    if(btnSelectPreferred.state === "active"){
-                        popup.ensUsernamesStore.setPrefferedEnsUsername(newUsername);
-                        newUsername = "";
-                        popup.close();
-                    }
-                }
-            }
-        }
-    }
 }
 

ui/app/AppLayouts/Profile/views/EnsListView.qml

@@ -5,6 +5,7 @@ import QtQuick.Controls 2.14
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
 
 import shared 1.0
 import shared.panels 1.0
@@ -17,30 +18,32 @@ import "../popups"
 
 Item {
     id: root
-    signal addBtnClicked()
-    signal selectEns(string username)
 
     property var ensUsernamesStore
 
     property int profileContentWidth
 
-    // Defaults to show message
+    signal addBtnClicked()
-    property bool isMessage: true
+    signal selectEns(string username)
-    property bool isEmoji: false
+
-    property bool isCurrentUser: false
+
-    property int contentType: 1
+    QtObject {
-    property string message: qsTr("Hey")
+        id: d
-    property string authorCurrentMsg: "0"
-    property string authorPrevMsg: "1"
-    property bool isText: true
-    property var clickMessage: function(){}
 
         function shouldDisplayExampleMessage(){
             return root.ensUsernamesStore.ensUsernamesModel.count > 0 &&
                     root.ensUsernamesStore.numOfPendingEnsUsernames() !== root.ensUsernamesStore.ensUsernamesModel &&
                     store.ensUsernamesStore.preferredUsername !== ""
         }
-    anchors.fill: parent
+    }
+
+    Connections {
+        target: root.ensUsernamesStore.ensUsernamesModule
+        onUsernameConfirmed: {
+            messagesShownAs.updateVisibility()
+            chatSettingsLabel.visible = true
+        }
+    }
 
     Item {
         anchors.top: parent.top
@@ -124,11 +127,6 @@ Item {
             }
         }
 
-        ENSPopup {
-            id: ensPopup
-            ensUsernamesStore: root.ensUsernamesStore
-        }
-
         StatusBaseText {
             id: sectionTitle
             text: qsTr("ENS usernames")
@@ -226,7 +224,7 @@ Item {
             width: childrenRect.width
             height: childrenRect.height
 
-            id: preferredUsername
+            id: primaryUsernameItem
             anchors.left: parent.left
             anchors.top: chatSettingsLabel.bottom
             anchors.topMargin: 24
@@ -253,81 +251,45 @@ Item {
             MouseArea {
                 anchors.fill: parent
                 cursorShape: Qt.PointingHandCursor
-                onClicked: ensPopup.open()
+                onClicked: {
+                    Global.openPopup(ensPopupComponent)
+                }
             }
         }
 
-        Item {
+        StatusMessage {
             id: messagesShownAs
-            visible: shouldDisplayExampleMessage()
+
-            anchors.top: !visible ? separator.bottom : preferredUsername.bottom
+            function updateVisibility() {
+//                visible = d.shouldDisplayExampleMessage()
+            }
+
+            Component.onCompleted: {
+                updateVisibility()
+            }
+
+            anchors.top: !visible ? separator.bottom : primaryUsernameItem.bottom
             anchors.topMargin: Style.current.padding * 2
 
-            UserImage {
-                id: chatImage
-                anchors.left: parent.left
-                anchors.leftMargin: Style.current.padding
-                anchors.top: parent.top
-                anchors.topMargin: 20
-
-                image: root.ensUsernamesStore.icon
-
-                onClicked: root.parent.clickMessage(true, false, false, null, false, false, false)
-            }
-
-            UsernameLabel {
-                id: chatName
-                anchors.leftMargin: 20
-                anchors.top: parent.top
-                anchors.topMargin: 0
-                anchors.left: chatImage.right
-
-                displayName: "@" + (root.ensUsernamesStore.preferredUsername.replace(".stateofus.eth", ""))
-                localName: ""
-                amISender: true
-            }
-
-            Rectangle {
-                property int chatVerticalPadding: 7
-                property int chatHorizontalPadding: 12
-                id: chatBox
-                color: Style.current.secondaryBackground
-                height: 35
-                width:  80
-                radius: 16
-                anchors.left: chatImage.right
-                anchors.leftMargin: 8
-                anchors.top: chatImage.top
-
-                ChatTextView {
-                    id: chatText
-                    message: root.message
-                    anchors.top: parent.top
-                    anchors.topMargin: chatBox.chatVerticalPadding
-                    anchors.left: parent.left
-                    anchors.leftMargin: chatBox.chatHorizontalPadding
-                    width: parent.width
-                    anchors.right: parent.right
-                    store: root.store
-                }
-
-                RectangleCorner {}
-            }
-
-            ChatTimePanel {
-                id: chatTime
-                anchors.top: chatBox.bottom
-                anchors.topMargin: 4
-                anchors.bottomMargin: Style.current.padding
-                anchors.right: chatBox.right
-                anchors.rightMargin: Style.current.padding
             timestamp: new Date().getTime()
-                visible: true
+            disableHover: true
+            hideQuickActions: true
+            profileClickable: false
+
+            messageDetails: StatusMessageDetails {
+                contentType: StatusMessage.ContentType.Text
+                messageText: qsTr("Hey!")
+                amISender: false
+                sender.displayName: root.ensUsernamesStore.preferredUsername
+                // displayName: "@" + (root.ensUsernamesStore.preferredUsername.replace(".stateofus.eth", ""))
+                sender.profileImage.assetSettings.isImage: true
+                sender.profileImage.name: root.ensUsernamesStore.icon
+            }
         }
 
         StatusBaseText {
-                anchors.top: chatTime.bottom
+            anchors.top: messagesShownAs.bottom
-                anchors.left: chatImage.left
+            anchors.left: messagesShownAs.left
             anchors.topMargin: Style.current.padding
             text: qsTr("You’re displaying your ENS username in chats")
             font.pixelSize: 14
@@ -335,12 +297,13 @@ Item {
         }
     }
 
+    Component {
+        id: ensPopupComponent
 
-        Connections {
+        ENSPopup {
-            target: root.ensUsernamesStore.ensUsernamesModule
+            ensUsernamesStore: root.ensUsernamesStore
-            onUsernameConfirmed: {
+            onClosed: {
-                messagesShownAs.visible = shouldDisplayExampleMessage()
+                destroy()
-                chatSettingsLabel.visible = true
             }
         }
     }

ui/app/AppLayouts/Profile/views/EnsSearchView.qml

@@ -5,6 +5,7 @@ import QtQuick.Controls 2.14
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1 as StatusQControls
+import StatusQ.Components 0.1
 
 import utils 1.0
 import shared 1.0
@@ -142,7 +143,6 @@ Item {
             color: Theme.palette.primaryColor1
 
             SVGImage {
-                id: imgIcon
                 visible: ensStatus === Constants.ens_taken
                 fillMode: Image.PreserveAspectFit
                 source: Style.svg("block-icon-white")
@@ -221,8 +221,6 @@ Item {
             type: StatusQControls.StatusRoundButton.Type.Secondary
             objectName: "ensNextButton"
             icon.name: "arrow-right"
-            icon.width: 18
-            icon.height: 14
             visible: valid
             onClicked: {
                 if(!valid) return;

ui/app/AppLayouts/Profile/views/profile/MyProfileSettingsView.qml

@@ -35,7 +35,8 @@ ColumnLayout {
         property url profileLargeImage: profileHeader.previewIcon
     }
 
-    readonly property bool dirty: descriptionPanel.displayName.text !== profileStore.displayName ||
+    readonly property bool dirty: (!descriptionPanel.isEnsName &&
+                                   descriptionPanel.displayName.text !== profileStore.displayName) ||
                                   descriptionPanel.bio.text !== profileStore.bio ||
                                   profileStore.socialLinksDirty ||
                                   biometricsSwitch.checked !== biometricsSwitch.currentStoredValue ||
@@ -53,6 +54,7 @@ ColumnLayout {
     }
 
     function save() {
+        if (!descriptionPanel.isEnsName)
             profileStore.setDisplayName(descriptionPanel.displayName.text)
         profileStore.setBio(descriptionPanel.bio.text)
         profileStore.saveSocialLinks()
@@ -121,15 +123,20 @@ ColumnLayout {
     ProfileDescriptionPanel {
         id: descriptionPanel
 
-        Layout.fillWidth: true
+        readonly property bool isEnsName: profileStore.ensName
 
         function reevaluateSocialLinkInputs()  {
             socialLinksModel = null
             socialLinksModel = staticSocialLinksSubsetModel
         }
 
-        displayName.text: profileStore.displayName
+        Layout.fillWidth: true
-        displayName.validationMode: StatusInput.ValidationMode.Always
+
+        displayName.focus: !isEnsName
+        displayName.input.edit.readOnly: isEnsName
+        displayName.text: profileStore.ensName || profileStore.displayName
+        displayName.validationMode: isEnsName ? StatusInput.ValidationMode.None : StatusInput.ValidationMode.Always
+        displayName.validators: isEnsName ? [] : Constants.validators.displayName
         bio.text: profileStore.bio
         socialLinksModel: staticSocialLinksSubsetModel
 

ui/imports/shared/views/chat/ChatTextView.qml

@@ -1,189 +0,0 @@
-import QtQuick 2.13
-import QtGraphicalEffects 1.0
-
-import shared 1.0
-import shared.panels 1.0
-import shared.controls 1.0
-import utils 1.0
-
-import StatusQ.Core.Utils 0.1 as StatusQUtils
-
-Item {
-    id: root
-
-    property string message: ""
-    property var store
-    property bool longChatText: true
-    property bool veryLongChatText: globalUtils.plainText(message).length > Constants.limitLongChatTextCompactMode
-    property bool readMore: false
-    property alias textField: chatText
-
-    signal linkActivated(url link)
-    property alias hoveredLink: chatText.hoveredLink
-    property bool linkHovered: chatText.hoveredLink !== ""
-
-    z: 51
-
-    implicitHeight: {
-        if (!visible)
-           return 0;
-        if (!chatText.visible && showMoreLoader.active)
-            return childrenRect.height - 10;
-        if (root.veryLongChatText && !root.readMore)
-            return Math.min(chatText.contentHeight, 200);
-        if (chatText.getText(0, chatText.text.length) !== "")
-            return chatText.contentHeight;
-        return 0;
-    }
-
-    // This function is to avoid the binding loop warning
-    function setWidths() {
-        if (longChatText) {
-            root.width = 0;
-            chatText.width = Qt.binding(function () {return root.width})
-        } else {
-            chatText.width = Qt.binding(function () {return chatText.implicitWidth})
-            root.width = Qt.binding(function () {return chatText.width})
-        }
-    }
-
-    Component.onCompleted: {
-        root.setWidths()
-    }
-
-    StyledTextEdit {
-        id: chatText
-        objectName: "chatText"
-        textFormat: Text.RichText
-        wrapMode: Text.Wrap
-        font.pixelSize: Style.current.primaryTextFontSize
-        readOnly: true
-        selectByMouse: true
-        color: Style.current.textColor
-        clip: height < implicitHeight
-        onLinkActivated: {
-            root.linkActivated(link)
-
-            // Not Refactored Yet
-//            if(link.startsWith("#")) {
-//                const channelName = link.substring(1);
-//                const foundChannelObj = root.store.chatsModelInst.getChannel(channelName);
-
-//                if (!foundChannelObj)
-//                {
-//                    root.store.chatsModelInst.channelView.joinPublicChat(channelName)
-//                    if(root.store.chatsModelInst.communities.activeCommunity.active)
-//                    {
-//                        root.store.chatsModelInst.channelView.joinPublicChat(channelName)
-//                        Global.changeAppSectionBySectionType(Constants.appSection.chat)
-//                    }
-//                    return
-//                }
-
-//                let obj = JSON.parse(foundChannelObj)
-
-//                if(obj.chatType === -1 || obj.chatType === Constants.chatTypePublic)
-//                {
-//                    if(root.store.chatsModelInst.communities.activeCommunity.active) {
-//                        root.store.chatsModelInst.channelView.joinPublicChat(channelName)
-//                        Global.changeAppSectionBySectionType(Constants.appSection.chat)
-//                    }
-//                    root.store.chatsModelInst.channelView.setActiveChannel(channelName);
-//                }
-//                else if(obj.communityId === root.store.chatsModelInst.communities.activeCommunity.id &&
-//                        obj.chatType === Constants.chatTypeCommunity &&
-//                        root.store.chatsModelInst.channelView.activeChannel.id !== obj.id
-//                        )
-//                {
-//                    root.store.chatsModelInst.channelView.setActiveChannel(channelName);
-//                }
-
-//                return
-//            }
-
-            if (link.startsWith('//')) {
-                let pk = link.replace("//", "");
-                Global.openProfilePopup(pk)
-                return;
-            }
-
-            // Not Refactored Yet
-//            const data = Utils.getLinkDataForStatusLinks(link)
-//            if (data && data.callback) {
-//                return data.callback()
-//            }
-
-
-            Global.openLink(link)
-        }
-
-        onLinkHovered: {
-            cursorShape: Qt.PointingHandCursor
-        }
-
-        text: {
-            if (contentType === Constants.messageContentType.stickerType)
-                return "";
-            let msg = StatusQUtils.Utils.linkifyAndXSS(message);
-            if (isEmoji)
-                return StatusQUtils.Emoji.parse(msg, StatusQUtils.Emoji.size.middle, StatusQUtils.Emoji.format.png);
-            if (isEdited) {
-                let index = msg.endsWith("code>") ? msg.length : msg.length - 4
-                return StatusQUtils.Utils.getMessageWithStyle(StatusQUtils.Emoji.parse(msg.slice(0, index) + Constants.editLabel + msg.slice(index)), isCurrentUser, hoveredLink)
-            }
-            return StatusQUtils.Utils.getMessageWithStyle(StatusQUtils.Emoji.parse(msg), isCurrentUser, hoveredLink)
-        }
-    }
-
-    Loader {
-        id: mask
-        anchors.fill: chatText
-        active: showMoreLoader.active
-        visible: false
-        sourceComponent: LinearGradient {
-            start: Qt.point(0, 0)
-            end: Qt.point(0, chatText.height)
-            gradient: Gradient {
-                GradientStop { position: 0.0; color: "white" }
-                GradientStop { position: 0.85; color: "white" }
-                GradientStop { position: 1; color: "transparent" }
-            }
-        }
-    }
-
-    Loader {
-        id: opMask
-        active: showMoreLoader.active && !root.readMore
-        anchors.fill: chatText
-        sourceComponent: OpacityMask {
-            source: chatText
-            maskSource: mask
-        }
-    }
-
-    Loader {
-        id: showMoreLoader
-        active: root.veryLongChatText
-        anchors.top: chatText.bottom
-        anchors.topMargin: - Style.current.padding
-        anchors.horizontalCenter: parent.horizontalCenter
-        sourceComponent: Component {
-            SVGImage {
-                id: emojiImage
-                width: 256
-                height: 44
-                fillMode: Image.PreserveAspectFit
-                source: Style.svg("read-more")
-                z: 100
-                rotation: root.readMore ? 180 : 0
-                MouseArea {
-                    anchors.fill: parent
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: {
-                        root.readMore = !root.readMore
-                    }
-                }
-            }
-        }
-    }
-}

ui/imports/shared/views/chat/qmldir

@@ -1,6 +1,5 @@
 AcceptTransactionView 1.0 AcceptTransactionView.qml
 ChannelIdentifierView 1.0 ChannelIdentifierView.qml
-ChatTextView 1.0 ChatTextView.qml
 CompactMessageView 1.0 CompactMessageView.qml
 InvitationBubbleView 1.0 InvitationBubbleView.qml
 LinksMessageView 1.0 LinksMessageView.qml