refactor(user-profile): `name`, `icon` and `isIdenticon` properties added to global instance `userProfile`

Apart of all properties we have, now we have 3 new added props which will be used almost always when we need the following details about logged in user: - `name` - this will return an ens name in a pretty form or an alias if ens name was not set (verified). Apart of this there are still `username` and `ensName` properties for fetching them when it's needed. - `icon` - this will return a thumbnail image if it's set, otherwise it will return identicon. Apart of this there are still `identicon` and `thumbnailImage` properties for fetching them when it's needed. - `isIdenticon` - this will return `false` if a thumbnail image is set, otherwise it will return `true`
2021-12-01 13:46:21 +01:00 · 2021-12-01 13:46:21 +01:00 · c8b429388f
parent 45d93649b6
commit c8b429388f
10 changed files with 155 additions and 75 deletions
--- a/src/app/global/user_profile.nim
+++ b/src/app/global/user_profile.nim
@ -8,6 +8,7 @@ QtObject:
    identicon: string
    pubKey: string
    # fields which may change during runtime
+    isIdenticon: bool
    ensName: string
    thumbnailImage: string
    largeImage: string
@ -29,16 +30,7 @@ QtObject:
    self.address = address
    self.identicon = identicon
    self.pubKey = pubKey
-
-  proc getIdenticon*(self: UserProfile): string {.slot.} =
-    self.identicon
-  
-  proc getUsername*(self: UserProfile): string {.slot.} = 
-    self.username
-  
-  QtProperty[string] username:
-    read = getUsername
-
+    self.isIdenticon = true

  proc getAddress*(self: UserProfile): string {.slot.} = 
    self.address
@ -54,7 +46,14 @@ QtObject:
    read = getPubKey


-  proc ensNameChanged*(self: UserProfile) {.signal.}
+  proc nameChanged*(self: UserProfile) {.signal.}
+
+  proc getUsername*(self: UserProfile): string {.slot.} = 
+    self.username
+  
+  QtProperty[string] username:
+    read = getUsername
+    notify = nameChanged

  proc getEnsName*(self: UserProfile): string {.slot.} =
    self.ensName
@ -64,16 +63,38 @@ QtObject:
    if(self.ensName == name):
      return
    self.ensName = name
-    self.ensNameChanged()
+    self.nameChanged()
      
  QtProperty[string] ensName:
    read = getEnsName
-    notify = ensNameChanged
+    notify = nameChanged
+
+  proc getName*(self: UserProfile): string {.slot.} =
+    if(self.ensName.len > 0):
+      return self.ensName
+    return self.username
+      
+  QtProperty[string] name:
+    read = getName
+    notify = nameChanged


-  proc thumbnailImageChanged*(self: UserProfile) {.signal.}
+  proc imageChanged*(self: UserProfile) {.signal.}
+
+  proc getIsIdenticon*(self: UserProfile): bool {.slot.} =
+    return self.isIdenticon
+
+  proc getIdenticon*(self: UserProfile): string {.slot.} =
+    self.identicon

  proc getThumbnailImage*(self: UserProfile): string {.slot.} =
+    return self.thumbnailImage
+
+  QtProperty[bool] isIdenticon:
+    read = getIsIdenticon
+    notify = imageChanged
+
+  proc getIcon*(self: UserProfile): string {.slot.} =
    if(self.thumbnailImage.len > 0):
      return self.thumbnailImage

@ -85,12 +106,20 @@ QtObject:
      return

    self.thumbnailImage = image
-    self.thumbnailImageChanged()
-      
+    self.isIdenticon = self.thumbnailImage.len == 0
+    self.imageChanged()
+
+  QtProperty[string] icon:
+    read = getIcon
+    notify = imageChanged
+
+  QtProperty[string] identicon:
+    read = getIdenticon
+    notify = imageChanged
+
  QtProperty[string] thumbnailImage:
    read = getThumbnailImage
-    notify = thumbnailImageChanged
-
+    notify = imageChanged
  
  proc largeImageChanged*(self: UserProfile) {.signal.}

--- a/ui/app/AppLayouts/Chat/popups/GroupChatPopup.qml
+++ b/ui/app/AppLayouts/Chat/popups/GroupChatPopup.qml
@ -38,11 +38,11 @@ ModalPopup {

        popup.store.addToGroupContacts.append({
            //% "(You)"
-            name: userProfile.username + " " + qsTrId("(you)"),
+            name: userProfile.name + " " + qsTrId("(you)"),
            pubKey: userProfile.pubKey,
            address: "",
-            identicon: userProfile.identicon,
-            thumbnailImage: userProfile.thumbnailImage,
+            identicon: userProfile.icon,
+            thumbnailImage: userProfile.icon,
            isUser: true
        });
        noContactsRect.visible = !popup.store.allContacts.hasAddedContacts();
--- a/ui/app/AppLayouts/Chat/popups/community/CommunityDetailPopup.qml
+++ b/ui/app/AppLayouts/Chat/popups/community/CommunityDetailPopup.qml
@ -199,8 +199,7 @@ StatusModal {
            onClicked: {
                let error
                if (access === Constants.communityChatOnRequestAccess && !root.isMember) {
-                    error = root.store.chatsModelInst.communities.requestToJoinCommunity(root.communityId,
-                            root.store.profileModelInst.profile.ensVerified ? userProfile.username : "")
+                    error = root.store.chatsModelInst.communities.requestToJoinCommunity(root.communityId, userProfile.name)
                    if (!error) {
                        enabled = false
                        //% "Pending"
--- a/ui/app/AppLayouts/Chat/views/ChatColumnView.qml
+++ b/ui/app/AppLayouts/Chat/views/ChatColumnView.qml
@ -415,7 +415,7 @@ Item {
        }

        EmptyChatPanel {
-            onShareChatKeyClicked: openProfilePopup(userProfile.username, userProfile.pubKey, userProfile.thumbnailImage);
+            onShareChatKeyClicked: openProfilePopup(userProfile.name, userProfile.pubKey, userProfile.icon);
        }

        Loader {
--- a/ui/app/AppLayouts/Profile/views/EnsListView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsListView.qml
@ -34,7 +34,7 @@ Item {
    property bool isText: true
    property var clickMessage: function(){}
    property string identicon: store.identicon
-    //property string identicon: userProfile.thumbnailImage
+    //property string identicon: userProfile.icon
    property int timestamp: 1577872140
    property var messageStore

--- a/ui/app/AppMain.qml
+++ b/ui/app/AppMain.qml
@ -51,7 +51,7 @@ Item {

    function getProfileImage(pubkey, isCurrentUser, useLargeImage) {
        if (isCurrentUser || (isCurrentUser === undefined && pubkey === userProfile.pubKey)) {
-            return userProfile.thumbnailImage
+            return userProfile.icon
        }

        const index = appMain.rootStore.contactsModuleInst.model.list.getContactIndexByPubkey(pubkey)
@ -313,7 +313,7 @@ Item {
                id: profileButton
                property bool opened: false

-                icon.source: userProfile.thumbnailImage
+                icon.source: appMain.rootStore.userProfileInst.icon
                badge.visible: true
                badge.anchors.rightMargin: 4
                badge.anchors.topMargin: 25
--- a/ui/imports/shared/controls/chat/UserImage.qml
+++ b/ui/imports/shared/controls/chat/UserImage.qml
@ -43,7 +43,7 @@ Loader {
                        return profileImageSource
                    }
                    identiconImage.showLoadingIndicator = false
-                    return !isCurrentUser || isReplyImage ? identicon : userProfile.thumbnailImage
+                    return !isCurrentUser || isReplyImage ? identicon : userProfile.icon
                }
                smooth: false
                antialiasing: true
--- a/ui/imports/shared/popups/UserStatusContextMenu.qml
+++ b/ui/imports/shared/popups/UserStatusContextMenu.qml
@ -30,12 +30,12 @@ PopupMenu {
            anchors.top: parent.top
            anchors.topMargin: 4
            anchors.horizontalCenter: parent.horizontalCenter
-            image.source: root.store.userProfileInst.thumbnailImage || ""
-            image.isIdenticon: true
+            image.source: root.store.userProfileInst.icon
+            image.isIdenticon: root.store.userProfileInst.isIdenticon
        }
        StyledText {
            id: username
-            text: Utils.removeStatusEns(profileModel.ens.preferredUsername || root.store.userProfileInst.username)
+            text: root.store.userProfileInst.name
            elide: Text.ElideRight
            maximumLineCount: 3
            horizontalAlignment: Text.AlignHCenter
@ -71,7 +71,7 @@ PopupMenu {
            hoverEnabled: true
            cursorShape: Qt.PointingHandCursor
            onClicked: {
-                openProfilePopup(userProfile.username, userProfile.pubKey, userProfile.thumbnailImage);
+                openProfilePopup(root.store.userProfileInst.name, root.store.userProfileInst.pubKey, root.store.userProfileInst.icon)
                root.close()
            }
        }
--- a/ui/imports/shared/status/StatusChatInput.qml
+++ b/ui/imports/shared/status/StatusChatInput.qml
@ -40,8 +40,8 @@ Rectangle {
    property var stickerPackList

    property int extraHeightFactor: calculateExtraHeightFactor()
-    property int messageLimit: 2000
-    property int messageLimitVisible: 200
+    property int messageLimit: control.isStatusUpdateInput ? 300 : 2000
+    property int messageLimitVisible: control.isStatusUpdateInput ? 50 : 200

    property int chatType

@ -49,6 +49,7 @@ Rectangle {
    property string chatInputPlaceholder: qsTrId("type-a-message-")

    property alias textInput: messageInputField
+    property bool isStatusUpdateInput: chatType === Constants.chatTypeStatusUpdate

    property var fileUrls: []

@ -63,21 +64,21 @@ Rectangle {

    height: {
        if (extendedArea.visible) {
-            return messageInput.height + extendedArea.height + Style.current.bigPadding
+            return messageInput.height + extendedArea.height + (control.isStatusUpdateInput ? 0 : Style.current.bigPadding)
        }
        if (messageInput.height > messageInput.defaultInputFieldHeight) {
            if (messageInput.height >= messageInput.maxInputFieldHeight) {
-                return (messageInput.maxInputFieldHeight + Style.current.bigPadding)
+                return messageInput.maxInputFieldHeight + (control.isStatusUpdateInput ? 0 : Style.current.bigPadding)
            }
-            return (messageInput.height + Style.current.bigPadding)
+            return messageInput.height + (control.isStatusUpdateInput ? 0 : Style.current.bigPadding)
        }
-        return 64
+        return control.isStatusUpdateInput ? 56 : 64
    }
    anchors.left: parent.left
    anchors.right: parent.right

    color: Style.current.transparent
-
+    
    function calculateExtraHeightFactor() {
        const factor = (messageInputField.length / 500) + 1;
        return (factor > 5) ? 5 : factor;
@ -159,6 +160,10 @@ Rectangle {
                event.accepted = true;
                return
            }
+
+            if (control.isStatusUpdateInput) {
+                return // Status update require the send button to be clicked
+            }
            if (messageInputField.length < messageLimit) {
                control.sendMessage(event)
                control.hideExtendedArea();
@ -226,19 +231,11 @@ Rectangle {

        isColonPressed = (event.key === Qt.Key_Colon) && (event.modifiers & Qt.ShiftModifier);

-        if (suggestionsBox.visible) {
-            let aliasName = suggestionsBox.formattedPlainTextFilter;
-            let lastCursorPosition = suggestionsBox.suggestionFilter.cursorPosition;
-            let lastAtPosition = suggestionsBox.suggestionFilter.lastAtPosition;
-            if (aliasName.toLowerCase() === suggestionsBox.suggestionsModel.get(suggestionsBox.listView.currentIndex).alias.toLowerCase()
-                && (event.key !== Qt.Key_Backspace) && (event.key !== Qt.Key_Delete)) {
-                insertMention(aliasName, lastAtPosition, lastCursorPosition);
-            } else if (event.key === Qt.Key_Space) {
-                var plainTextToReplace = messageInputField.getText(lastAtPosition, lastCursorPosition);
-                messageInputField.remove(lastAtPosition, lastCursorPosition);
-                messageInputField.insert(lastAtPosition, plainTextToReplace);
-                suggestionsBox.hide();
-            }
+        if (event.key === Qt.Key_Space && suggestionsBox.formattedPlainTextFilter.length > 1 && suggestionsBox.formattedPlainTextFilter.trim().split(" ").length === 1) {
+            let aliasName = suggestionsBox.formattedPlainTextFilter
+            let lastCursorPosition = suggestionsBox.suggestionFilter.cursorPosition
+            let lastAtPosition = suggestionsBox.suggestionFilter.lastAtPosition
+            insertMention(aliasName, lastAtPosition, lastCursorPosition)
        }
    }

@ -584,6 +581,7 @@ Rectangle {
        ]
        onAccepted: {
            imageBtn.highlighted = false
+            imageBtn2.highlighted = false
            let validImages = validateImages(imageDialog.fileUrls)
            if (validImages.length > 0) {
                control.showImageArea(validImages)
@ -592,6 +590,7 @@ Rectangle {
        }
        onRejected: {
            imageBtn.highlighted = false
+            imageBtn2.highlighted = false
        }
    }

@ -714,7 +713,7 @@ Rectangle {
        anchors.bottomMargin: 16
        icon.name: "chat-commands"
        type: StatusQ.StatusFlatRoundButton.Type.Tertiary
-        visible: !isEdit && control.chatType === Constants.chatTypeOneToOne
+        visible: !isEdit && control.chatType === Constants.chatTypeOneToOne && !control.isStatusUpdateInput
        enabled: !control.isContactBlocked
        onClicked: {
            chatCommandsPopup.opened ?
@ -733,7 +732,7 @@ Rectangle {
        anchors.bottomMargin: 16
        icon.name: "image"
        type: StatusQ.StatusFlatRoundButton.Type.Tertiary
-        visible: !isEdit && control.chatType !== Constants.chatTypePublic
+        visible: !isEdit && control.chatType !== Constants.chatTypePublic && !control.isStatusUpdateInput
        enabled: !control.isContactBlocked
        onClicked: {
            highlighted = true
@ -744,12 +743,13 @@ Rectangle {
    Rectangle {
        id: messageInput
        enabled: !control.isContactBlocked
-        property int maxInputFieldHeight: 112
-        property int defaultInputFieldHeight: 40
+        property int maxInputFieldHeight: control.isStatusUpdateInput ? 124 : 112
+        property int defaultInputFieldHeight: control.isStatusUpdateInput ? 56 : 40
        anchors.left: imageBtn.visible ? imageBtn.right : parent.left
        anchors.leftMargin: imageBtn.visible ? 5 : Style.current.smallPadding
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 12
+        anchors.top: control.isStatusUpdateInput ? parent.top : undefined
+        anchors.bottom: !control.isStatusUpdateInput ? parent.bottom : undefined
+        anchors.bottomMargin: control.isStatusUpdateInput ? 0 : 12
        anchors.right: unblockBtn.visible ? unblockBtn.left : parent.right
        anchors.rightMargin: Style.current.smallPadding
        height: {
@ -763,7 +763,8 @@ Rectangle {
        }

        color: isEdit ? Theme.palette.statusChatInput.secondaryBackgroundColor : Style.current.inputBackground
-        radius: height > defaultInputFieldHeight + 1 || extendedArea.visible ? 16 : 32
+        radius: control.isStatusUpdateInput ? 36 :
+                                              height > defaultInputFieldHeight + 1 || extendedArea.visible ? 16 : 32

        ColumnLayout {
            id: validators
@ -802,25 +803,29 @@ Rectangle {
            }
            anchors.left: messageInput.left
            anchors.right: messageInput.right
-            anchors.bottom: messageInput.top
+            anchors.bottom: control.isStatusUpdateInput ? undefined : messageInput.top
+            anchors.top: control.isStatusUpdateInput ? messageInput.bottom : undefined
+            anchors.topMargin: control.isStatusUpdateInput ? -Style.current.halfPadding : 0
            color: isEdit ? Style.current.secondaryInputBackground : Style.current.inputBackground
-            radius: 16
+            radius: control.isStatusUpdateInput ? 36 : 16

            Rectangle {
                color: parent.color
                anchors.right: parent.right
                anchors.left: parent.left
-                height: 30
-                anchors.bottom: parent.bottom
-                anchors.bottomMargin: -height/2
+                height: control.isStatusUpdateInput ? 64 : 30
+                anchors.top: control.isStatusUpdateInput ? parent.top : undefined
+                anchors.topMargin: control.isStatusUpdateInput ? -24 : 0
+                anchors.bottom: control.isStatusUpdateInput ? undefined : parent.bottom
+                anchors.bottomMargin: control.isStatusUpdateInput ? 0 : -height/2
            }

            StatusChatInputImageArea {
                id: imageArea
                anchors.left: parent.left
-                anchors.leftMargin: Style.current.halfPadding
+                anchors.leftMargin: control.isStatusUpdateInput ? profileImage.width + Style.current.padding : Style.current.halfPadding
                anchors.right: parent.right
-                anchors.rightMargin: Style.current.halfPadding
+                anchors.rightMargin: control.isStatusUpdateInput ? actions.width + 2* Style.current.padding : Style.current.halfPadding
                anchors.top: parent.top
                anchors.topMargin: Style.current.halfPadding
                visible: isImage
@ -850,11 +855,22 @@ Rectangle {
            }
        }

+        StatusSmartIdenticon {
+            id: profileImage
+            anchors.left: parent.left
+            anchors.leftMargin: Style.current.smallPadding
+            anchors.top: parent.top
+            anchors.topMargin: Style.current.halfPadding
+            image.source: userProfile.icon
+            image.isIdenticon: userProfile.isIdenticon
+            visible: control.isStatusUpdateInput
+        }
+
        ScrollView {
            id: scrollView
            anchors.top: parent.top
            anchors.bottom: parent.bottom
-            anchors.left: parent.left
+            anchors.left: profileImage.visible ? profileImage.right : parent.left
            anchors.leftMargin: Style.current.smallPadding
            anchors.right: actions.left
            anchors.rightMargin: Style.current.halfPadding
@ -871,8 +887,8 @@ Rectangle {
                placeholderTextColor: Style.current.secondaryText
                selectByMouse: true
                color: isEdit ? Theme.palette.directColor1 : Style.current.textColor
-                topPadding: Style.current.smallPadding
-                bottomPadding: 12
+                topPadding: control.isStatusUpdateInput ? 18 : Style.current.smallPadding
+                bottomPadding: control.isStatusUpdateInput ? 14 : 12
                Keys.onPressed: onKeyPress(event)
                Keys.onReleased: onRelease(event) // gives much more up to date cursorPosition
                Keys.onShortcutOverride: event.accepted = isUploadFilePressed(event)
@ -1016,6 +1032,7 @@ Rectangle {
            color: parent.color
            anchors.bottom: parent.bottom
            anchors.right: parent.right
+            visible: !control.isStatusUpdateInput
            height: parent.height / 2
            width: 32
            radius: Style.current.radius
@ -1029,26 +1046,62 @@ Rectangle {
            color: (remainingChars <= 0) ? Style.current.danger : Style.current.textColor
            anchors.right: parent.right
            anchors.bottom: actions.top
-            anchors.rightMargin: Style.current.radius
+            anchors.rightMargin: control.isStatusUpdateInput ? Style.current.padding : Style.current.radius
            leftPadding: Style.current.halfPadding
            rightPadding: Style.current.halfPadding
        }

        Item {
            id: actions
-            width: emojiBtn.width + stickersBtn.anchors.leftMargin + stickersBtn.width
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 4
+            width: control.isStatusUpdateInput ?
+                       imageBtn2.width + sendBtn.anchors.leftMargin + sendBtn.width :
+                       emojiBtn.width + stickersBtn.anchors.leftMargin + stickersBtn.width
+            anchors.bottom: control.isStatusUpdateInput && extendedArea.visible ? extendedArea.bottom : parent.bottom
+            anchors.bottomMargin: control.isStatusUpdateInput ? Style.current.smallPadding+2: 4
            anchors.right: parent.right
            anchors.rightMargin: Style.current.radius
            height: emojiBtn.height

+            StatusQ.StatusFlatRoundButton {
+                id: imageBtn2
+                implicitHeight: 32
+                implicitWidth: 32
+                anchors.right: sendBtn.left
+                anchors.rightMargin: 2
+                anchors.bottom: parent.bottom
+                icon.name: "image"
+                type: StatusQ.StatusFlatRoundButton.Type.Tertiary
+                visible: control.isStatusUpdateInput
+
+                onClicked: {
+                    highlighted = true
+                    imageDialog.open()
+                }
+            }
+
+            StatusQ.StatusFlatButton {
+                id: sendBtn
+                icon.name: "send"
+                text: qsTr("Send")
+                size: StatusQ.StatusBaseButton.Size.Small
+                anchors.right: parent.right
+                anchors.rightMargin: Style.current.halfPadding
+                anchors.verticalCenter: parent.verticalCenter
+                visible: imageBtn2.visible
+                enabled: (chatsModel.plainText(Emoji.deparse(messageInputField.text)).length > 0 || isImage) && messageInputField.length < messageLimit
+                onClicked: function (event) {
+                    control.sendMessage(event)
+                    control.hideExtendedArea();
+                }
+            }
+
            StatusQ.StatusFlatRoundButton {
                id: emojiBtn
                implicitHeight: 32
                implicitWidth: 32
                anchors.left: parent.left
                anchors.bottom: parent.bottom
+                visible: !imageBtn2.visible
                icon.name: "emojis"
                type: StatusQ.StatusFlatRoundButton.Type.Tertiary
                color: "transparent"
--- a/ui/imports/shared/views/chat/InvitationBubbleView.qml
+++ b/ui/imports/shared/views/chat/InvitationBubbleView.qml
@ -308,8 +308,7 @@ Item {
                                    error = root.store.chatsModelInst.communities.joinCommunity(communityId, true)
                                }
                                else if (rectangleBubble.state === "requestToJoin") {
-                                    error = root.store.chatsModelInst.communities.requestToJoinCommunity(communityId,
-                                                                                          root.store.profileModelInst.profile.ensVerified ? userProfile.username : "")
+                                    error = root.store.chatsModelInst.communities.requestToJoinCommunity(communityId, userProfile.name)
                                    if (!error) {
                                        rectangleBubble.isPendingRequest = root.store.chatsModelInst.communities.isCommunityRequestPending(communityId)
                                    }