feat(StatusModal): Add edit avatar button

Part of https://github.com/status-im/status-desktop/issues/3734
2021-10-13 13:44:32 +03:00 · 2021-10-13 13:44:32 +03:00 · a0d97fb464
parent a065abf01b
commit a0d97fb464
6 changed files with 138 additions and 19 deletions
--- a/ui/StatusQ/sandbox/Popups.qml
+++ b/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
--- a/ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml
+++ b/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
--- a/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml
+++ b/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()
        }

--- a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml
+++ b/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 :
-                    "transparent"
+                           Theme.palette.statusRoundedImage.backgroundColor :
+                           "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 : 
-                      parent.width - editButton.width - parent.spacing
+                width: !editButton.visible ? parent.width :
+                                             parent.width - editButton.width - parent.spacing
            }
            StatusFlatRoundButton {
                id: editButton
+                objectName: "editAvatarbButton"
                visible: statusImageWithTitle.editable
                anchors.bottom: headerTitle.bottom
                anchors.bottomMargin: -1
--- a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml
+++ b/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
--- a/ui/StatusQ/statusq.qrc
+++ b/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>