From 5043b0b6251997fe63e43a7d20dc56dc09e6b706 Mon Sep 17 00:00:00 2001 From: "B.Melnik" Date: Wed, 13 Oct 2021 13:44:32 +0300 Subject: [PATCH] feat(StatusModal): Add edit avatar button Part of https://github.com/status-im/status-desktop/issues/3734 --- sandbox/Popups.qml | 32 +++++++++++ .../Core/StatusModalHeaderSettings.qml | 1 + src/StatusQ/Popups/StatusModal.qml | 3 ++ .../statusModal/StatusImageWithTitle.qml | 54 ++++++++++++++++--- .../Popups/statusModal/StatusModalHeader.qml | 28 +++++----- statusq.qrc | 39 ++++++++++++++ 6 files changed, 138 insertions(+), 19 deletions(-) diff --git a/sandbox/Popups.qml b/sandbox/Popups.qml index 8ccc220a..dae097e2 100644 --- a/sandbox/Popups.qml +++ b/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 diff --git a/src/StatusQ/Core/StatusModalHeaderSettings.qml b/src/StatusQ/Core/StatusModalHeaderSettings.qml index ecfd604e..ff2852c4 100644 --- a/src/StatusQ/Core/StatusModalHeaderSettings.qml +++ b/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 diff --git a/src/StatusQ/Popups/StatusModal.qml b/src/StatusQ/Popups/StatusModal.qml index 1affbf79..85120538 100644 --- a/src/StatusQ/Popups/StatusModal.qml +++ b/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() } diff --git a/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml b/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml index 45c16bcd..9bff23cb 100644 --- a/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml +++ b/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 diff --git a/src/StatusQ/Popups/statusModal/StatusModalHeader.qml b/src/StatusQ/Popups/statusModal/StatusModalHeader.qml index 9382d6d9..e08968c4 100644 --- a/src/StatusQ/Popups/statusModal/StatusModalHeader.qml +++ b/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 diff --git a/statusq.qrc b/statusq.qrc index f5a44a50..114ae3a9 100644 --- a/statusq.qrc +++ b/statusq.qrc @@ -270,5 +270,44 @@ src/assets/img/icons/snt.svg src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml src/StatusQ/Controls/StatusSelectableText.qml + src/assets/img/icons/tiny/add.svg + src/assets/img/icons/tiny/arrow-down.svg + src/assets/img/icons/tiny/channel-white.svg + src/assets/img/icons/tiny/channel.svg + src/assets/img/icons/tiny/chat.svg + src/assets/img/icons/tiny/chatbot.svg + src/assets/img/icons/tiny/checkmark.svg + src/assets/img/icons/tiny/chevron-down.svg + src/assets/img/icons/tiny/chevron-left.svg + src/assets/img/icons/tiny/chevron-right.svg + src/assets/img/icons/tiny/chevron-up.svg + src/assets/img/icons/tiny/clear.svg + src/assets/img/icons/tiny/community-1.svg + src/assets/img/icons/tiny/community.svg + src/assets/img/icons/tiny/contact.svg + src/assets/img/icons/tiny/double-checkmark.svg + src/assets/img/icons/tiny/edit.svg + src/assets/img/icons/tiny/external.svg + src/assets/img/icons/tiny/group-white.svg + src/assets/img/icons/tiny/group.svg + src/assets/img/icons/tiny/more.svg + src/assets/img/icons/tiny/message/delivered.svg + src/assets/img/icons/tiny/message/pending.svg + src/assets/img/icons/tiny/message/sent.svg + src/assets/img/icons/tiny/message/warning.svg + src/assets/img/icons/tiny/muted-white.svg + src/assets/img/icons/tiny/muted.svg + src/assets/img/icons/tiny/not-secure.svg + src/assets/img/icons/tiny/pending.svg + src/assets/img/icons/tiny/pin.svg + src/assets/img/icons/tiny/public-chat-white.svg + src/assets/img/icons/tiny/public-chat.svg + src/assets/img/icons/tiny/reply.svg + src/assets/img/icons/tiny/secure.svg + src/assets/img/icons/tiny/settings.svg + src/assets/img/icons/tiny/SNT.svg + src/assets/img/icons/tiny/time.svg + src/assets/img/icons/tiny/tribute-to-talk.svg + src/assets/img/icons/tiny/warning.svg