feat(StatusModal): introduce support for identicons and letter identicons

Usage:

```qml
StatusModal {

    header.image.isIdenticon: ...

    // or

    header.icon.isLetterIdenticon: ...
    header.icon.background.color: ...
}
```

Closes #269
This commit is contained in:
Pascal Precht 2021-07-20 13:21:34 +02:00 committed by Pascal Precht
parent 6775460356
commit fda9b71f7b
5 changed files with 123 additions and 8 deletions

View File

@ -38,6 +38,16 @@ Column {
onClicked: modalWithContentAccess.open()
}
StatusButton {
text: "Modal with letter identicon"
onClicked: modalWithLetterIdenticon.open()
}
StatusButton {
text: "Modal with identicon"
onClicked: modalWithIdenticon.open()
}
StatusModal {
id: simpleModal
anchors.centerIn: parent
@ -171,4 +181,57 @@ Column {
}
]
}
StatusModal {
id: modalWithLetterIdenticon
anchors.centerIn: parent
header.title: "Header"
header.subTitle: "SubTitle"
header.icon.isLetterIdenticon: true
header.icon.background.color: "red"
content: StatusBaseText {
id: text
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
color: Theme.palette.directColor1
}
rightButtons: [
StatusButton {
text: "Change text"
onClicked: {
modalWithContentAccess.contentComponent.text = "Changed!"
}
}
]
}
StatusModal {
id: modalWithIdenticon
anchors.centerIn: parent
header.title: "Header"
header.subTitle: "SubTitle"
header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
header.image.isIdenticon: true
content: StatusBaseText {
id: text
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
color: Theme.palette.directColor1
}
rightButtons: [
StatusButton {
text: "Change text"
onClicked: {
modalWithContentAccess.contentComponent.text = "Changed!"
}
}
]
}
}

View File

@ -7,5 +7,12 @@ QtObject {
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
isIdenticon: false
}
property StatusIconSettings icon: StatusIconSettings {
width: 40
height: 40
isLetterIdenticon: false
}
}

View File

@ -51,6 +51,7 @@ QC.Popup {
title: header.title
subTitle: header.subTitle
image: header.image
icon: header.icon
onEditButtonClicked: statusModal.editButtonClicked()
onClose: statusModal.close()

View File

@ -16,18 +16,62 @@ Row {
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
isIdenticon: false
}
property StatusIconSettings icon: StatusIconSettings {
width: 40
height: 40
isLetterIdenticon: false
}
spacing: 8
StatusRoundedImage {
id: headerImage
Loader {
id: iconOrImage
anchors.verticalCenter: parent.verticalCenter
width: statusImageWithTitle.image.width
height: statusImageWithTitle.image.height
image.source: statusImageWithTitle.image.source
showLoadingIndicator: true
visible: !!statusImageWithTitle.image.source.toString()
sourceComponent: {
if (statusImageWithTitle.icon.isLetterIdenticon) {
return statusLetterIdenticon
}
return statusRoundedImageCmp
}
active: statusImageWithTitle.icon.isLetterIdenticon ||
!!statusImageWithTitle.image.source.toString()
}
Component {
id: statusLetterIdenticon
StatusLetterIdenticon {
width: statusImageWithTitle.icon.width
height: statusImageWithTitle.icon.height
color: statusImageWithTitle.icon.background.color
name: statusImageWithTitle.title
}
}
Component {
id: statusRoundedImageCmp
Item {
width: statusImageWithTitle.image.width
height: statusImageWithTitle.image.height
StatusRoundedImage {
id: statusRoundedImage
image.source: statusImageWithTitle.image.source
width: statusImageWithTitle.image.width
height: statusImageWithTitle.image.height
color: statusImageWithTitle.image.isIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
border.width: statusImageWithTitle.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
showLoadingIndicator: true
}
Loader {
sourceComponent: statusLetterIdenticon
active: statusRoundedImage.image.status === Image.Error
}
}
}
Column {

View File

@ -14,6 +14,7 @@ Rectangle {
property alias actionButton: actionButtonLoader.sourceComponent
property alias image: imageWithTitle.image
property alias icon: imageWithTitle.icon
property bool editable: false
signal editButtonClicked
@ -26,7 +27,6 @@ Rectangle {
color: Theme.palette.statusModal.backgroundColor
StatusImageWithTitle {
id: imageWithTitle
anchors.verticalCenter: parent.verticalCenter