status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(StatusModal): Add edit avatar button 

Part of https://github.com/status-im/status-desktop/issues/3734
This commit is contained in:
B.Melnik 2021-10-13 13:44:32 +03:00 committed by Pascal Precht
parent 694a4ca1ec
commit 5043b0b625
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
6 changed files with 138 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
sandbox/Popups.qml
View File

@ -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

1
src/StatusQ/Core/StatusModalHeaderSettings.qml
View File

@ -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

3
src/StatusQ/Popups/StatusModal.qml
View File

@ -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()
}

54
src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml
View File

@ -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

28
src/StatusQ/Popups/statusModal/StatusModalHeader.qml
View File

@ -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

39
statusq.qrc
View File

@ -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>