diff --git a/ui/StatusQ/sandbox/Popups.qml b/ui/StatusQ/sandbox/Popups.qml index 57d7a4301c..1a65d44b69 100644 --- a/ui/StatusQ/sandbox/Popups.qml +++ b/ui/StatusQ/sandbox/Popups.qml @@ -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!" + } + } + ] + } } diff --git a/ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml b/ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml index 957f5c3055..1b759a8cb9 100644 --- a/ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml +++ b/ui/StatusQ/src/StatusQ/Core/StatusModalHeaderSettings.qml @@ -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 } } diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml b/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml index 6e0e7702a6..808d115603 100644 --- a/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml +++ b/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml @@ -51,6 +51,7 @@ QC.Popup { title: header.title subTitle: header.subTitle image: header.image + icon: header.icon onEditButtonClicked: statusModal.editButtonClicked() onClose: statusModal.close() diff --git a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml index 4f03d0ef87..bd5cd46b36 100644 --- a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml +++ b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml @@ -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 { diff --git a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml index ef542fe072..a7d238491b 100644 --- a/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml +++ b/ui/StatusQ/src/StatusQ/Popups/statusModal/StatusModalHeader.qml @@ -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