From 7a2648f69f022ba4bc62d734aea62f89be0839d7 Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Thu, 24 Jun 2021 15:41:42 +0200
Subject: [PATCH] feat(StatusRoundedImage): introduce identicon support

This just introduces a new `StatusImageSettings` property `isIdenticon`
which can be used to determine whether a `StatusRoundedImage` should
render with a background + border (which is the case for identicons).

It also updates the `StatusChatList` delegate to consider that property
and have it properly decide how to render the UI.

Closes #173
---
 sandbox/DemoApp.qml                           |  3 ++-
 src/StatusQ/Components/StatusChatList.qml     | 19 ++++++++++++-------
 src/StatusQ/Components/StatusChatListItem.qml |  5 +++++
 src/StatusQ/Core/StatusImageSettings.qml      |  1 +
 src/StatusQ/Core/Theme/StatusDarkTheme.qml    |  4 ++++
 src/StatusQ/Core/Theme/StatusLightTheme.qml   |  4 ++++
 src/StatusQ/Core/Theme/ThemePalette.qml       |  4 ++++
 7 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml
index 244a58ac..d34fdf6b 100644
--- a/sandbox/DemoApp.qml
+++ b/sandbox/DemoApp.qml
@@ -684,7 +684,8 @@ Rectangle {
             muted: false
             hasUnreadMessages: false
             color: "green"
-            identicon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
+            identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
+CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
             unreadMessagesCount: 0
         }
         ListElement {
diff --git a/src/StatusQ/Components/StatusChatList.qml b/src/StatusQ/Components/StatusChatList.qml
index 4866ed0f..275f1ff9 100644
--- a/src/StatusQ/Components/StatusChatList.qml
+++ b/src/StatusQ/Components/StatusChatList.qml
@@ -32,7 +32,17 @@ Column {
     Repeater {
         id: statusChatListItems
         delegate: StatusChatListItem {
+
             id: statusChatListItem
+
+            property string profileImage: ""
+
+            Component.onCompleted: {
+                if (typeof statusChatList.profileImageFn === "function") {
+                    profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
+                }
+            }
+
             chatId: model.chatId || model.id
             name: model.name
             type: model.chatType
@@ -43,13 +53,8 @@ Column {
             selected: model.chatId === statusChatList.selectedChatId
 
             icon.color: model.color || ""
-            image.source: {
-                let profileImage = ""
-                if (typeof statusChatList.profileImageFn === "function") {
-                    profileImage = statusChatList.profileImageFn(model.chatId || model.id)
-                }
-                return profileImage || model.identityImage || model.identicon || ""
-            }
+            image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
+            image.source: profileImage || model.identityImage || model.identicon || ""
 
             onClicked: {
                 if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
diff --git a/src/StatusQ/Components/StatusChatListItem.qml b/src/StatusQ/Components/StatusChatListItem.qml
index 4712236d..dec32f80 100644
--- a/src/StatusQ/Components/StatusChatListItem.qml
+++ b/src/StatusQ/Components/StatusChatListItem.qml
@@ -88,6 +88,11 @@ Rectangle {
                     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 {
diff --git a/src/StatusQ/Core/StatusImageSettings.qml b/src/StatusQ/Core/StatusImageSettings.qml
index 1e23b871..080824bd 100644
--- a/src/StatusQ/Core/StatusImageSettings.qml
+++ b/src/StatusQ/Core/StatusImageSettings.qml
@@ -6,5 +6,6 @@ QtObject {
     property url source
     property real width
     property real height
+    property bool isIdenticon: false
 }
 
diff --git a/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/src/StatusQ/Core/Theme/StatusDarkTheme.qml
index 2c295670..04a21688 100644
--- a/src/StatusQ/Core/Theme/StatusDarkTheme.qml
+++ b/src/StatusQ/Core/Theme/StatusDarkTheme.qml
@@ -168,5 +168,9 @@ ThemePalette {
     property QtObject statusModal: QtObject {
         property color backgroundColor: baseColor3
     }
+
+    property QtObject statusRoundedImage: QtObject {
+        property color backgroundColor: baseColor3
+    }
 }
 
diff --git a/src/StatusQ/Core/Theme/StatusLightTheme.qml b/src/StatusQ/Core/Theme/StatusLightTheme.qml
index d95e1b46..bdc2c18e 100644
--- a/src/StatusQ/Core/Theme/StatusLightTheme.qml
+++ b/src/StatusQ/Core/Theme/StatusLightTheme.qml
@@ -166,5 +166,9 @@ ThemePalette {
     property QtObject statusModal: QtObject {
         property color backgroundColor: white
     }
+
+    property QtObject statusRoundedImage: QtObject {
+        property color backgroundColor: white
+    }
 }
 
diff --git a/src/StatusQ/Core/Theme/ThemePalette.qml b/src/StatusQ/Core/Theme/ThemePalette.qml
index 68875a32..0516eb21 100644
--- a/src/StatusQ/Core/Theme/ThemePalette.qml
+++ b/src/StatusQ/Core/Theme/ThemePalette.qml
@@ -130,6 +130,10 @@ QtObject {
         property color backgroundColor
     }
 
+    property QtObject statusRoundedImage: QtObject {
+        property color backgroundColor
+    }
+
     function alphaColor(color, alpha) {
         let actualColor = Qt.darker(color, 1)
         actualColor.a = alpha