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 Michał Cieślak
parent 1456bf3a79
commit 97dbebc8aa
5 changed files with 123 additions and 8 deletions

View File

@ -38,6 +38,16 @@ Column {
onClicked: modalWithContentAccess.open() onClicked: modalWithContentAccess.open()
} }
StatusButton {
text: "Modal with letter identicon"
onClicked: modalWithLetterIdenticon.open()
}
StatusButton {
text: "Modal with identicon"
onClicked: modalWithIdenticon.open()
}
StatusModal { StatusModal {
id: simpleModal id: simpleModal
anchors.centerIn: parent 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 { property StatusImageSettings image: StatusImageSettings {
width: 40 width: 40
height: 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 title: header.title
subTitle: header.subTitle subTitle: header.subTitle
image: header.image image: header.image
icon: header.icon
onEditButtonClicked: statusModal.editButtonClicked() onEditButtonClicked: statusModal.editButtonClicked()
onClose: statusModal.close() onClose: statusModal.close()

View File

@ -16,18 +16,62 @@ Row {
property StatusImageSettings image: StatusImageSettings { property StatusImageSettings image: StatusImageSettings {
width: 40 width: 40
height: 40 height: 40
isIdenticon: false
}
property StatusIconSettings icon: StatusIconSettings {
width: 40
height: 40
isLetterIdenticon: false
} }
spacing: 8 spacing: 8
StatusRoundedImage { Loader {
id: headerImage id: iconOrImage
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
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 width: statusImageWithTitle.image.width
height: statusImageWithTitle.image.height height: statusImageWithTitle.image.height
StatusRoundedImage {
id: statusRoundedImage
image.source: statusImageWithTitle.image.source 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 showLoadingIndicator: true
visible: !!statusImageWithTitle.image.source.toString() }
Loader {
sourceComponent: statusLetterIdenticon
active: statusRoundedImage.image.status === Image.Error
}
}
} }
Column { Column {

View File

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