Conditionally show the image

2 files changed, 26 insertions, 6 deletions

diff --git a/framework/qml/Icons.qml b/framework/qml/Icons.qml
index 0769ee13..bacaadfa 100644
--- a/framework/qml/Icons.qml
+++ b/framework/qml/Icons.qml
@@ -44,6 +44,7 @@ Item {
     property string outbox_inverted: "mail-folder-outbox-inverted"
 
     property string menu_inverted: "application-menu-inverted"
+    property string user: "im-user"
     property string user_inverted: "im-user-inverted"
     property string search_inverted: "edit-find-inverted"
     property string mail_inverted: "mail-message-inverted"
diff --git a/framework/qml/People.qml b/framework/qml/People.qml
index 3445a5ba..f67d55f1 100644
--- a/framework/qml/People.qml
+++ b/framework/qml/People.qml
@@ -149,15 +149,25 @@ Item {
                                     }
                                 }
 
-                                Kube.KubeImage {
+                                Rectangle {
                                     id: avatarPlaceholder
 
                                     height: parent.height
                                     width: height
-
-                                    imageData: model.imageData
+                                    Kube.KubeImage {
+                                        anchors.fill: parent
+                                        visible: model.imageData != ""
+                                        imageData: model.imageData
+                                    }
+                                    Kube.Icon {
+                                        anchors.fill: parent
+                                        visible: model.imageData == ""
+                                        iconName: Kube.Icons.user
+                                    }
+                                    color: "lightgrey"
                                 }
 
+
                                 Column {
 
                                     width: parent.width
@@ -241,13 +251,22 @@ Item {
                         height: Kube.Units.gridUnit * 8
                         width: personPageRoot.width - Kube.Units.largeSpacing
 
-                        Kube.KubeImage {
+                        Rectangle {
                             id: avatar
 
                             height: parent.height
                             width: height
-
-                            imageData: contactController.imageData
+                            Kube.KubeImage {
+                                anchors.fill: parent
+                                visible: contactController.imageData != ""
+                                imageData: contactController.imageData
+                            }
+                            Kube.Icon {
+                                anchors.fill: parent
+                                visible: contactController.imageData == ""
+                                iconName: Kube.Icons.user
+                            }
+                            color: "lightgrey"
                         }
 
                         //TODO replace with Kube.Heading once it is there