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

sandbox/ListItems.qml

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

src/StatusQ/Components/StatusChatListItem.qml

@@ -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
-
+            image: statusChatListItem.image
-            sourceComponent: !!statusChatListItem.image.source.toString() ?
+            icon: statusChatListItem.icon
-                                 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
-                }
-            }
         }
 
         StatusIcon {

src/StatusQ/Components/StatusExpandableItem.qml

@@ -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
-        active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
+        image: statusExpandableItem.image
-        sourceComponent: !!statusExpandableItem.image.source.toString() ? roundedImage :
+        icon: statusExpandableItem.icon
-                         !!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
+        active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
-            color: Theme.palette.miscColor5
-        }
     }
 
     StatusBaseText {

src/StatusQ/Components/StatusListItem.qml

@@ -47,11 +47,12 @@ Rectangle {
     property real rightPadding: 16
     property bool enabled: true
     property StatusIconSettings icon: StatusIconSettings {
-        height: 20
+        height: isLetterIdenticon ? 40 : 20
-        width: 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: {
+            image: statusListItem.image
-                if (statusListItem.icon.isLetterIdenticon) {
+            icon: statusListItem.icon
-                    return statusLetterIdenticon
+            name: statusListItem.title
-                }
-                return !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
-            }
-
             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

src/StatusQ/Components/StatusSmartIdenticon.qml

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

src/StatusQ/Components/qmldir

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

src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -18,8 +18,15 @@ Rectangle {
     property string subTitle: ""
     property bool muted: false
     property int pinnedMessagesCount: 0
-    property StatusImageSettings image: StatusImageSettings {}
+    property StatusImageSettings image: StatusImageSettings {
-    property StatusIconSettings icon: StatusIconSettings {}
+        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
-
+            image: statusChatInfoButton.image
-            sourceComponent: !!statusChatInfoButton.image.source.toString() ?
+            icon: statusChatInfoButton.icon
-                                 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
-            }
         }
 
         Item {

src/StatusQ/Controls/StatusIconTabButton.qml

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

src/StatusQ/Core/StatusIconSettings.qml

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

src/StatusQ/Popups/StatusSearchPopup.qml

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

src/StatusQ/Popups/StatusSearchPopupMenuItem.qml

@@ -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 {
+        Item {
-            Layout.preferredWidth: visible ? root.iconSettings.width : 0
+            Layout.preferredWidth: root.iconSettings.width
-            Layout.preferredHeight: visible ? root.iconSettings.height : 0
+            Layout.preferredHeight: root.iconSettings.height
             Layout.alignment: Qt.AlignVCenter
-            visible: !!root.iconSettings.name && !root.image.source.toString()
+            StatusSmartIdenticon {
-            icon:  root.iconSettings.name
+                id: identicon
-            color: (icon === "channel")? Theme.palette.directColor1 : root.iconSettings.color
+                anchors.centerIn: parent
-        }
+                image: root.image
-        StatusRoundedImage {
+                icon: root.iconSettings
-            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
+            }
         }
         StatusBaseText {
             Layout.fillWidth: true