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

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!"
+                }
+            }
+        ]
+    }
 }

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

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()

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 {

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