status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(StatusSmartIdenticon): Created a new StatusQ componnent to accomodate: 

1. A StatusRoundedImage
2. StatusRoundIcon
3. LetterIdenticon

Fallback in case of an error in loading Image to the LetterIdenticon
This commit is contained in:
Khushboo Mehta 2021-10-20 16:35:54 +02:00 committed by Michał Cieślak
parent c1021977d6
commit 32e69e6a8e
11 changed files with 154 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/StatusQ/sandbox/ListItems.qml
View File

@ -286,7 +286,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusListItem {
title: "Title"
icon.isLetterIdenticon: true
icon.background.color: "orange"
icon.color: "orange"
}
StatusListItem {

52
ui/StatusQ/src/StatusQ/Components/StatusChatListItem.qml
View File

@ -20,9 +20,15 @@ Rectangle {
property bool hasUnreadMessages: false
property bool hasMention: false
property bool muted: false
property StatusImageSettings image: StatusImageSettings {}
property StatusImageSettings image: StatusImageSettings {
width: 24
height: 24
}
property StatusIconSettings icon: StatusIconSettings {
width: 24
height: 24
color: Theme.palette.miscColor5
letterSize: 15
}
property int type: StatusChatListItem.Type.PublicChat
property bool highlighted: false
@ -67,50 +73,14 @@ Rectangle {
onClicked: statusChatListItem.clicked(mouse)
Loader {
StatusSmartIdenticon {
id: identicon
anchors.left: parent.left
anchors.leftMargin: 8
anchors.verticalCenter: parent.verticalCenter
sourceComponent: !!statusChatListItem.image.source.toString() ?
statusRoundedImageCmp : statusLetterIdenticonCmp
}
Component {
id: statusLetterIdenticonCmp
StatusLetterIdenticon {
height: 24
width: 24
name: statusChatListItem.name
letterSize: 15
color: statusChatListItem.icon.color
}
}
Component {
id: statusRoundedImageCmp
Item {
height: 24
width: 24
StatusRoundedImage {
id: statusRoundedImage
width: parent.width
height: parent.height
image.source: statusChatListItem.image.source
showLoadingIndicator: true
color: statusChatListItem.image.isIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
border.width: statusChatListItem.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
Loader {
sourceComponent: statusLetterIdenticonCmp
active: statusRoundedImage.image.status === Image.Error
}
}
image: statusChatListItem.image
icon: statusChatListItem.icon
name: statusChatListItem.name
}
StatusIcon {

39
ui/StatusQ/src/StatusQ/Components/StatusExpandableItem.qml
View File

@ -18,6 +18,8 @@ Rectangle {
property bool expanded: false
property StatusIconSettings icon: StatusIconSettings {
width: !!statusExpandableItem.icon.name.toString() ? 24 : 40
height: !!statusExpandableItem.icon.name.toString() ? 24 : 40
color: Theme.palette.directColor1
background: StatusIconBackgroundSettings {
width: 32
@ -55,44 +57,17 @@ Rectangle {
visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary)
}
Loader {
StatusSmartIdenticon {
id: identicon
anchors.top: parent.top
anchors.topMargin: 25
anchors.left: parent.left
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 0 : 11
image: statusExpandableItem.image
icon: statusExpandableItem.icon
name: primaryText.text
active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
sourceComponent: !!statusExpandableItem.image.source.toString() ? roundedImage :
!!statusExpandableItem.icon.name.toString() ? roundedIcon : letterIdenticon
}
Component {
id: roundedImage
StatusRoundedImage {
image.source: statusExpandableItem.image.source
}
}
Component {
id: roundedIcon
StatusRoundIcon {
icon.background.width: statusExpandableItem.icon.background.width
icon.background.height: statusExpandableItem.icon.background.height
icon.background.color: statusExpandableItem.icon.background.color
icon.color: statusExpandableItem.icon.color
icon.name: statusExpandableItem.icon.name
}
}
Component {
id: letterIdenticon
StatusLetterIdenticon {
height: 40
width: 40
name: primaryText.text
letterSize: 20
color: Theme.palette.miscColor5
}
}
StatusBaseText {

57
ui/StatusQ/src/StatusQ/Components/StatusListItem.qml
View File

@ -47,11 +47,12 @@ Rectangle {
property real rightPadding: 16
property bool enabled: true
property StatusIconSettings icon: StatusIconSettings {
height: 20
width: 20
height: isLetterIdenticon ? 40 : 20
width: isLetterIdenticon ? 40 : 20
rotation: 0
isLetterIdenticon: false
color: type === StatusListItem.Type.Danger ?
letterSize: 21
color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ?
Theme.palette.dangerColor1 : Theme.palette.primaryColor1
background: StatusIconBackgroundSettings {
width: 40
@ -110,62 +111,20 @@ Rectangle {
statusListItem.clicked(statusListItem.itemId)
}
Loader {
StatusSmartIdenticon {
id: iconOrImage
anchors.left: parent.left
anchors.leftMargin: statusListItem.leftPadding
anchors.top: parent.top
anchors.topMargin: 12
sourceComponent: {
if (statusListItem.icon.isLetterIdenticon) {
return statusLetterIdenticon
}
return !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
}
image: statusListItem.image
icon: statusListItem.icon
name: statusListItem.title
active: statusListItem.icon.isLetterIdenticon ||
!!statusListItem.icon.name ||
!!statusListItem.image.source.toString()
}
Component {
id: statusRoundedIcon
StatusRoundIcon {
icon.width: statusListItem.icon.width
icon.height: statusListItem.icon.height
icon.name: statusListItem.icon.name
icon.rotation: statusListItem.icon.rotation
icon.color: statusListItem.icon.color
color: statusListItem.icon.background.color
width: statusListItem.icon.background.width
height: statusListItem.icon.background.height
}
}
Component {
id: statusRoundedImage
StatusRoundedImage {
image.source: statusListItem.image.source
image.height: statusListItem.image.height
image.width: statusListItem.image.width
color: statusListItem.image.isIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
border.width: statusListItem.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
}
Component {
id: statusLetterIdenticon
StatusLetterIdenticon {
width: statusListItem.icon.background.width
height: statusListItem.icon.background.height
color: statusListItem.icon.background.color
name: statusListItem.title
}
}
Item {
id: statusListItemTitleArea
anchors.left: iconOrImage.active ? iconOrImage.right : parent.left

78
ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml Normal file
View File

@ -0,0 +1,78 @@
import QtQuick 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Loader {
id: statusSmartIdenticon
property string name: ""
property StatusIconSettings icon: StatusIconSettings {
width: 40
height: 40
}
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
}
sourceComponent: statusSmartIdenticon.icon.isLetterIdenticon ? letterIdenticon :
!!statusSmartIdenticon.image.source.toString() ? roundedImage :
!!statusSmartIdenticon.icon.name.toString() ? roundedIcon : letterIdenticon
Component {
id: roundedImage
Item {
width: statusSmartIdenticon.image.width
height: statusSmartIdenticon.image.height
StatusRoundedImage {
id: statusRoundImage
width: parent.width
height: parent.height
image.source: statusSmartIdenticon.image.source
showLoadingIndicator: true
border.width: statusSmartIdenticon.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
color: statusSmartIdenticon.image.isIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
}
Loader {
anchors.centerIn: parent
active: statusRoundImage.image.status === Image.Error
sourceComponent: letterIdenticon
onLoaded: {
item.color = Theme.palette.miscColor5
item.width = statusSmartIdenticon.image.width
item.height = statusSmartIdenticon.image.height
}
}
}
}
Component {
id: roundedIcon
StatusRoundIcon {
icon.background.width: statusSmartIdenticon.icon.background.width
icon.background.height: statusSmartIdenticon.icon.background.height
icon.background.color: statusSmartIdenticon.icon.background.color
icon.width: statusSmartIdenticon.icon.width
icon.height: statusSmartIdenticon.icon.height
icon.name: statusSmartIdenticon.icon.name
icon.rotation: statusSmartIdenticon.icon.rotation
icon.color: statusSmartIdenticon.icon.color
}
}
Component {
id: letterIdenticon
StatusLetterIdenticon {
width: statusSmartIdenticon.icon.width
height: statusSmartIdenticon.icon.height
color: statusSmartIdenticon.icon.color
name: statusSmartIdenticon.name
letterSize: statusSmartIdenticon.icon.letterSize
}
}
}

1
ui/StatusQ/src/StatusQ/Components/qmldir
View File

@ -22,3 +22,4 @@ StatusRoundedImage 0.1 StatusRoundedImage.qml
StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
StatusListItemBadge 0.1 StatusListItemBadge.qml
StatusExpandableItem 0.1 StatusExpandableItem.qml
StatusSmartIdenticon 0.1 StatusSmartIdenticon.qml

56
ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml
View File

@ -18,8 +18,15 @@ Rectangle {
property string subTitle: ""
property bool muted: false
property int pinnedMessagesCount: 0
property StatusImageSettings image: StatusImageSettings {}
property StatusIconSettings icon: StatusIconSettings {}
property StatusImageSettings image: StatusImageSettings {
width: 36
height: 36
}
property StatusIconSettings icon: StatusIconSettings {
width: 36
height: 36
letterSize: 20
}
property int type: StatusChatInfoButton.Type.PublicChat
property alias tooltip: statusToolTip
property alias sensor: sensor
@ -50,51 +57,14 @@ Rectangle {
onClicked: statusChatInfoButton.clicked(mouse)
Loader {
StatusSmartIdenticon {
id: identicon
anchors.left: parent.left
anchors.leftMargin: 4
anchors.verticalCenter: parent.verticalCenter
sourceComponent: !!statusChatInfoButton.image.source.toString() ?
statusRoundImageComponent :
statusLetterIdenticonComponent
}
Component {
id: statusRoundImageComponent
Item {
width: 36
height: 36
StatusRoundedImage {
id: statusRoundImage
width: parent.width
height: parent.height
image.source: statusChatInfoButton.image.source
showLoadingIndicator: true
border.width: statusChatInfoButton.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
Loader {
sourceComponent: statusLetterIdenticonComponent
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
active: statusRoundImage.image.status === Image.Error
}
}
}
Component {
id: statusLetterIdenticonComponent
StatusLetterIdenticon {
width: 36
height: 36
name: statusChatInfoButton.title
color: statusChatInfoButton.icon.color
}
image: statusChatInfoButton.image
icon: statusChatInfoButton.icon
name: statusChatInfoButton.title
}
Item {

60
ui/StatusQ/src/StatusQ/Controls/StatusIconTabButton.qml
View File

@ -20,56 +20,20 @@ TabButton {
contentItem: Item {
anchors.fill: parent
Loader {
active: true
StatusSmartIdenticon {
id: identicon
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
sourceComponent: statusIconTabButton.name !== "" && !icon.source.toString() ? letterIdenticon :
!!icon.source.toString() ? imageIcon : defaultIcon
}
Component {
id: defaultIcon
StatusIcon {
icon: statusIconTabButton.icon.name
height: statusIconTabButton.icon.height
width: statusIconTabButton.icon.width
color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
}
}
Component {
id: imageIcon
Item {
width: 28
height: 28
StatusRoundedImage {
id: statusRoundImage
showLoadingIndicator: true
width: parent.width
height: parent.height
image.source: icon.source
}
Loader {
sourceComponent:letterIdenticon
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
active: statusRoundImage.image.status === Image.Error
}
}
}
Component {
id: letterIdenticon
StatusLetterIdenticon {
width: 26
height: 26
letterSize: 15
name: statusIconTabButton.name
color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
}
image.source: statusIconTabButton.icon.source
image.width: 28
image.height: 28
icon.height: statusIconTabButton.icon.height
icon.width: statusIconTabButton.icon.width
icon.name: statusIconTabButton.icon.name
icon.color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
icon.isLetterIdenticon: statusIconTabButton.name !== "" && !statusIconTabButton.icon.source.toString()
icon.letterSize: 15
name: statusIconTabButton.name
}
}

1
ui/StatusQ/src/StatusQ/Core/StatusIconSettings.qml
View File

@ -12,5 +12,6 @@ QtObject {
property url source
property int rotation
property bool isLetterIdenticon
property int letterSize
property StatusIconBackgroundSettings background: StatusIconBackgroundSettings {}
}

65
ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml
View File

@ -113,11 +113,16 @@ StatusModal {
property string primaryText: ""
property string secondaryText: ""
property StatusIconSettings iconSettings: StatusIconSettings {
width: 16
height: 16
name: ""
isLetterIdenticon: false
letterSize: 11
}
property StatusImageSettings image: StatusImageSettings {
width: 16
height: 16
source: ""
isIdenticon: false
}
@ -155,67 +160,17 @@ StatusModal {
font.weight: Font.Medium
}
Loader {
StatusSmartIdenticon {
id: identicon
Layout.preferredWidth: active ? 16 : 0
Layout.preferredHeight: 16
image: searchOptionsMenuButton.image
icon: searchOptionsMenuButton.iconSettings
name: searchOptionsMenuButton.primaryText
active: searchOptionsMenuButton.primaryText !== defaultSearchLocationText &&
(searchOptionsMenuButton.iconSettings.name ||
searchOptionsMenuButton.iconSettings.isLetterIdenticon ||
!!searchOptionsMenuButton.image.source.toString())
sourceComponent: {
if (!!searchOptionsMenuButton.image.source.toString()) {
return statusRoundedImageCmp
}
if (!!searchOptionsMenuButton.iconSettings.isLetterIdenticon || !searchOptionsMenuButton.iconSettings.name) {
return statusLetterIdenticonCmp
}
return statusIconCmp
}
}
Component {
id: statusIconCmp
StatusIcon {
width: 16
icon: searchOptionsMenuButton.iconSettings.name
color: searchOptionsMenuButton.iconSettings.color
}
}
Component {
id: statusRoundedImageCmp
Item {
width: 16
height: 16
StatusRoundedImage {
id: statusRoundedImage
implicitWidth: parent.width
implicitHeight: parent.height
image.source: searchOptionsMenuButton.image.source
color: searchOptionsMenuButton.image.isIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
border.width: searchOptionsMenuButton.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
Loader {
sourceComponent: statusLetterIdenticonCmp
active: statusRoundedImage.image.status === Image.Error
}
}
}
Component {
id: statusLetterIdenticonCmp
StatusLetterIdenticon {
implicitWidth: 16
implicitHeight: 16
letterSize: 11
color: searchOptionsMenuButton.iconSettings.color
name: searchOptionsMenuButton.primaryText
}
}
StatusBaseText {

36
ui/StatusQ/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml
View File

@ -22,7 +22,8 @@ MenuItem {
isLetterIdenticon: (root.image.source.toString() === ""
&& root.iconSettings.name.toString() === "")
background: StatusIconBackgroundSettings {}
color: "transparent"
color: (name === "channel") ? Theme.palette.directColor1 : "transparent"
letterSize: 11
}
background: Rectangle {
@ -32,30 +33,17 @@ MenuItem {
contentItem: RowLayout {
anchors.left: parent.left
anchors.leftMargin: 12
StatusIcon {
Layout.preferredWidth: visible ? root.iconSettings.width : 0
Layout.preferredHeight: visible ? root.iconSettings.height : 0
Item {
Layout.preferredWidth: root.iconSettings.width
Layout.preferredHeight: root.iconSettings.height
Layout.alignment: Qt.AlignVCenter
visible: !!root.iconSettings.name && !root.image.source.toString()
icon: root.iconSettings.name
color: (icon === "channel")? Theme.palette.directColor1 : root.iconSettings.color
}
StatusRoundedImage {
Layout.preferredWidth: visible ? root.image.width : 0
Layout.preferredHeight: visible ? root.image.height : 0
Layout.alignment: Qt.AlignVCenter
visible: root.image.source.toString() !== ""
image.source: root.image.source
border.width: root.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
StatusLetterIdenticon {
Layout.preferredWidth: visible ? root.iconSettings.width : 0
Layout.preferredHeight: visible ? root.iconSettings.height : 0
visible: root.iconSettings.isLetterIdenticon && !root.iconSettings.name && !root.image.source.toString()
color: root.iconSettings.color
name: root.text
letterSize: 11
StatusSmartIdenticon {
id: identicon
anchors.centerIn: parent
image: root.image
icon: root.iconSettings
name: root.text
}
}
StatusBaseText {
Layout.fillWidth: true