feat(StatusModal): Add edit avatar button

Part of https://github.com/status-im/status-desktop/issues/3734

ui/StatusQ/sandbox/Popups.qml

@@ -53,6 +53,11 @@ Column {
         onClicked: modalWithIdenticon.open()
     }
 
+    StatusButton {
+        text: "Modal with editable identicon"
+        onClicked: modalWithEditableIdenticon.open()
+    }
+
     StatusButton {
         text: "Modal with long titles"
         onClicked: modalWithLongTitles.open()
@@ -259,6 +264,33 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         ]
     }
 
+    StatusModal {
+        id: modalWithEditableIdenticon
+        anchors.centerIn: parent
+        header.title: "Header"
+        header.subTitle: "SubTitle"
+        header.headerImageEditable: true
+        header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+        header.image.isIdenticon: true
+
+        contentItem: StatusBaseText {
+            anchors.centerIn: parent
+            text: "Some text content"
+            font.pixelSize: 15
+            color: Theme.palette.directColor1
+        }
+
+        rightButtons: [
+            StatusButton {
+                text: "Change text"
+                onClicked: {
+                    modalWithIdenticon.contentItem.text = "Changed!"
+                }
+            }
+        ]
+    }
+
     StatusModal {
         id: modalWithLongTitles
         anchors.centerIn: parent

ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml

@@ -5,6 +5,7 @@ QtObject {
     property string subTitle
     property int titleElide: Text.ElideRight
     property int subTitleElide: Text.ElideRight
+    property bool headerImageEditable: false
     property Component popupMenu
     property StatusImageSettings image: StatusImageSettings {
         width: 40

ui/StatusQ/src/StatusQ/Popups/StatusModal.qml

@@ -20,6 +20,7 @@ QC.Popup {
     property bool showFooter: true
 
     signal editButtonClicked()
+    signal headerImageClicked()
 
     parent: QC.Overlay.overlay
 
@@ -54,8 +55,10 @@ QC.Popup {
             image: header.image
             icon: header.icon
             popupMenu: header.popupMenu
+            headerImageEditable: header.headerImageEditable
 
             onEditButtonClicked: statusModal.editButtonClicked()
+            onHeaderImageClicked: statusModal.headerImageClicked()
             onClose: statusModal.close()
         }
 

ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml

@@ -12,8 +12,10 @@ Row {
     property int titleElide: Text.ElideRight
     property int subTitleElide: Text.ElideRight
     property bool editable: false
+    property bool headerImageEditable: false
 
     signal editButtonClicked
+    signal headerImageClicked
 
     property StatusImageSettings image: StatusImageSettings {
         width: 40
@@ -39,7 +41,7 @@ Row {
             }
             return statusRoundedImageCmp
         }
-        active: statusImageWithTitle.icon.isLetterIdenticon || 
+        active: statusImageWithTitle.icon.isLetterIdenticon ||
                 !!statusImageWithTitle.image.source.toString()
     }
 
@@ -64,12 +66,51 @@ Row {
                 width: statusImageWithTitle.image.width
                 height: statusImageWithTitle.image.height
                 color: statusImageWithTitle.image.isIdenticon ?
-                    Theme.palette.statusRoundedImage.backgroundColor :
+                           Theme.palette.statusRoundedImage.backgroundColor :
-                    "transparent"
+                           "transparent"
                 border.width: statusImageWithTitle.image.isIdenticon ? 1 : 0
                 border.color: Theme.palette.directColor7
                 showLoadingIndicator: true
             }
+
+            Rectangle {
+                id: editAvatarIcon
+
+                objectName: "editAvatarImage"
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: -3
+                anchors.rightMargin: -2
+                width: 18
+                height: 18
+                radius: width / 2
+
+                visible: statusImageWithTitle.headerImageEditable
+
+                color: Theme.palette.primaryColor1;
+                border.color: Theme.palette.indirectColor1
+                border.width: Theme.palette.name === "light" ? 1 : 0
+
+                StatusIcon {
+                    anchors.centerIn: parent
+                    width: 11
+                    color: Theme.palette.indirectColor1
+                    icon: "tiny/edit"
+                }
+            }
+
+            MouseArea {
+                anchors.fill: parent
+
+                cursorShape: enabled ? Qt.PointingHandCursor
+                                     : Qt.ArrowCursor
+                enabled: statusImageWithTitle.headerImageEditable
+
+                onClicked: {
+                    statusImageWithTitle.headerImageClicked()
+                }
+            }
+
             Loader {
                 sourceComponent: statusLetterIdenticon
                 active: statusRoundedImage.image.status === Image.Error
@@ -80,7 +121,7 @@ Row {
     Column {
         id: textLayout
         width: !iconOrImage.active ? parent.width :
-              parent.width - iconOrImage.width - parent.spacing
+                                     parent.width - iconOrImage.width - parent.spacing
         Row {
             id: headerTitleRow
             width: parent.width
@@ -92,11 +133,12 @@ Row {
                 font.bold: true
                 elide: statusImageWithTitle.titleElide
                 color: Theme.palette.directColor1
-                width: !editButton.visible ? parent.width : 
+                width: !editButton.visible ? parent.width :
-                      parent.width - editButton.width - parent.spacing
+                                             parent.width - editButton.width - parent.spacing
             }
             StatusFlatRoundButton {
                 id: editButton
+                objectName: "editAvatarbButton"
                 visible: statusImageWithTitle.editable
                 anchors.bottom: headerTitle.bottom
                 anchors.bottomMargin: -1

ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml

@@ -18,9 +18,11 @@ Rectangle {
     property alias image: imageWithTitle.image
     property alias icon: imageWithTitle.icon
     property bool editable: false
+    property alias headerImageEditable: imageWithTitle.headerImageEditable
     property Component popupMenu
 
     signal editButtonClicked
+    signal headerImageClicked
     signal close
 
     implicitHeight: visible? Math.max(closeButton.height, imageWithTitle.implicitHeight) + 32 : 0
@@ -36,6 +38,18 @@ Rectangle {
         }
     }
 
+    Rectangle {
+        anchors.bottom: parent.bottom
+        width: parent.width
+        height: parent.radius
+        color: parent.color
+
+        StatusModalDivider {
+            anchors.bottom: parent.bottom
+            width: parent.width
+        }
+    }
+
     StatusImageWithTitle {
         id: imageWithTitle
         anchors.verticalCenter: parent.verticalCenter
@@ -46,7 +60,7 @@ Rectangle {
         editable: statusModalHeader.editable
         titleElide: statusModalHeader.titleElide
         subTitleElide: statusModalHeader.subTitleElide
-        onEditButtonClicked: statusModalHeader.editButtonClicked()
+        onHeaderImageClicked: statusModalHeader.headerImageClicked()
     }
 
     MouseArea {
@@ -83,18 +97,6 @@ Rectangle {
         onClicked: statusModalHeader.close()
     }
 
-    Rectangle {
-        anchors.bottom: parent.bottom
-        width: parent.width
-        height: parent.radius
-        color: parent.color
-
-        StatusModalDivider {
-            anchors.bottom: parent.bottom
-            width: parent.width
-        }
-    }
-
     Loader {
         id: popupMenuSlot
         active: !!statusModalHeader.popupMenu

ui/StatusQ/statusq.qrc

@@ -270,5 +270,44 @@
         <file>src/assets/img/icons/snt.svg</file>
         <file>src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml</file>
         <file>src/StatusQ/Controls/StatusSelectableText.qml</file>
+        <file>src/assets/img/icons/tiny/add.svg</file>
+        <file>src/assets/img/icons/tiny/arrow-down.svg</file>
+        <file>src/assets/img/icons/tiny/channel-white.svg</file>
+        <file>src/assets/img/icons/tiny/channel.svg</file>
+        <file>src/assets/img/icons/tiny/chat.svg</file>
+        <file>src/assets/img/icons/tiny/chatbot.svg</file>
+        <file>src/assets/img/icons/tiny/checkmark.svg</file>
+        <file>src/assets/img/icons/tiny/chevron-down.svg</file>
+        <file>src/assets/img/icons/tiny/chevron-left.svg</file>
+        <file>src/assets/img/icons/tiny/chevron-right.svg</file>
+        <file>src/assets/img/icons/tiny/chevron-up.svg</file>
+        <file>src/assets/img/icons/tiny/clear.svg</file>
+        <file>src/assets/img/icons/tiny/community-1.svg</file>
+        <file>src/assets/img/icons/tiny/community.svg</file>
+        <file>src/assets/img/icons/tiny/contact.svg</file>
+        <file>src/assets/img/icons/tiny/double-checkmark.svg</file>
+        <file>src/assets/img/icons/tiny/edit.svg</file>
+        <file>src/assets/img/icons/tiny/external.svg</file>
+        <file>src/assets/img/icons/tiny/group-white.svg</file>
+        <file>src/assets/img/icons/tiny/group.svg</file>
+        <file>src/assets/img/icons/tiny/more.svg</file>
+        <file>src/assets/img/icons/tiny/message/delivered.svg</file>
+        <file>src/assets/img/icons/tiny/message/pending.svg</file>
+        <file>src/assets/img/icons/tiny/message/sent.svg</file>
+        <file>src/assets/img/icons/tiny/message/warning.svg</file>
+        <file>src/assets/img/icons/tiny/muted-white.svg</file>
+        <file>src/assets/img/icons/tiny/muted.svg</file>
+        <file>src/assets/img/icons/tiny/not-secure.svg</file>
+        <file>src/assets/img/icons/tiny/pending.svg</file>
+        <file>src/assets/img/icons/tiny/pin.svg</file>
+        <file>src/assets/img/icons/tiny/public-chat-white.svg</file>
+        <file>src/assets/img/icons/tiny/public-chat.svg</file>
+        <file>src/assets/img/icons/tiny/reply.svg</file>
+        <file>src/assets/img/icons/tiny/secure.svg</file>
+        <file>src/assets/img/icons/tiny/settings.svg</file>
+        <file>src/assets/img/icons/tiny/SNT.svg</file>
+        <file>src/assets/img/icons/tiny/time.svg</file>
+        <file>src/assets/img/icons/tiny/tribute-to-talk.svg</file>
+        <file>src/assets/img/icons/tiny/warning.svg</file>
     </qresource>
 </RCC>