feat: introduce StatusIdenticon components

This component introduces `StatusLetterIdenticon`, `StatusImageIdenticon` and `StatusIdenticon`. - `StatusLetterIdenticon` renders an identicon with a single letter based on a name. - `StatusImageIdenticon` renders an actual image based on an identicon URL - `StatusIdenticon` is a composition of the former both, but with a loading mechanism to decide which should be rendered The commit also ensures all of these components are used respectively throughout the application.
2020-09-22 16:45:09 +02:00 · 2020-09-22 16:45:09 +02:00 · fac0e50e37
parent c347430864
commit fac0e50e37
15 changed files with 132 additions and 37 deletions
--- a/ui/app/AppLayouts/Chat/ChatColumn/SuggestionBox.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/SuggestionBox.qml
@ -22,6 +22,7 @@ import QtQuick.Controls 2.13
 import QtGraphicalEffects 1.13
 import "../../../../imports"
 import "../../../../shared"
+import "../../../../shared/status"

 Rectangle {
    id: container
@ -98,7 +99,7 @@ Rectangle {
                    width: container.width
                    color: hovered ? Style.current.blue : "white"

-                    Identicon {
+                    StatusImageIdenticon {
                        id: accountImage
                        anchors.left: parent.left
                        anchors.leftMargin: Style.current.smallPadding
--- a/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml
@ -2,11 +2,11 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import "../../../../shared"
+import "../../../../shared/status"
 import "../../../../imports"
 import "../components"

 Rectangle {
-    property string channelNameStr: "#" + chatsModel.activeChannel.id
    property int iconSize: 16

    id: chatTopBarContent
--- a/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml
+++ b/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml
@ -1,6 +1,7 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 import "../../../../shared"
+import "../../../../shared/status"
 import "../../../../imports"
 import "../components"

@ -43,17 +44,16 @@ Rectangle {
        }
    }

-    ChannelIcon {
-      id: contactImage
-      height: !isCompact ? 40 : 20
-      width: !isCompact ? 40 : 20
-      fontSize: !isCompact ? this.defaultFontSize : 14
-      channelName: wrapper.name
-      channelType: wrapper.chatType
-      channelIdenticon: wrapper.identicon
-      anchors.left: parent.left
-      anchors.leftMargin: !isCompact ? Style.current.padding : Style.current.smallPadding
-      anchors.verticalCenter: parent.verticalCenter
+    StatusIdenticon {
+        id: contactImage
+        height: !isCompact ? 40 : 20
+        width: !isCompact ? 40 : 20
+        chatName: wrapper.name
+        chatType: wrapper.chatType
+        identicon: wrapper.identicon
+        anchors.left: parent.left
+        anchors.leftMargin: !isCompact ? Style.current.padding : Style.current.smallPadding
+        anchors.verticalCenter: parent.verticalCenter
    }

    SVGImage {
--- a/ui/app/AppLayouts/Chat/components/Contact.qml
+++ b/ui/app/AppLayouts/Chat/components/Contact.qml
@ -4,6 +4,7 @@ import QtQuick.Layouts 1.3
 import Qt.labs.platform 1.1
 import "../../../../imports"
 import "../../../../shared"
+import "../../../../shared/status"

 Rectangle {
    property string pubKey: "0x123456"
@ -29,7 +30,7 @@ Rectangle {
    radius: Style.current.radius
    color: Style.current.transparent

-    Identicon {
+    StatusImageIdenticon {
        id: accountImage
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
--- a/ui/app/AppLayouts/Chat/components/GroupInfoPopup.qml
+++ b/ui/app/AppLayouts/Chat/components/GroupInfoPopup.qml
@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import "../../../../imports"
 import "../../../../shared"
+import "../../../../shared/status"
 import "./"

 ModalPopup {
@ -50,24 +51,15 @@ ModalPopup {
      height: children[0].height
      width: parent.width

-      Rectangle {
+
+      StatusLetterIdenticon {
          id: letterIdenticon
          width: 36
          height: 36
-          radius: 50
          anchors.top: parent.top
          anchors.topMargin: Style.current.padding
          color: chatsModel.activeChannel.color
-  
-          StyledText {
-            text: chatsModel.activeChannel.name.charAt(0).toUpperCase();
-            opacity: 0.7
-            font.weight: Font.Bold
-            font.pixelSize: 21
-            color: Style.current.white
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-          }
+          chatName: chatsModel.activeChannel.name
      }
    
      StyledTextEdit {
--- a/ui/app/AppLayouts/Chat/components/MessageContextMenu.qml
+++ b/ui/app/AppLayouts/Chat/components/MessageContextMenu.qml
@ -4,6 +4,7 @@ import QtQuick.Layouts 1.3
 import QtQml.Models 2.3
 import "../../../../imports"
 import "../../../../shared"
+import "../../../../shared/status"
 import "./"

 PopupMenu {
@ -48,7 +49,7 @@ PopupMenu {
        height: visible ? profileImage.height + username.height + Style.current.padding : 0
        color: hovered ? Style.current.secondaryBackground : Style.current.transparent

-        Identicon {
+        StatusImageIdenticon {
            id: profileImage
            source: profilePopup.identicon
            anchors.top: parent.top
--- a/ui/app/AppLayouts/Profile/Sections/Contacts/Contact.qml
+++ b/ui/app/AppLayouts/Profile/Sections/Contacts/Contact.qml
@ -27,7 +27,7 @@ Rectangle {
    radius: Style.current.radius
    color: Style.current.transparent

-    Identicon {
+    StatusImageIdenticon {
        id: accountImage
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
--- a/ui/onboarding/Login.qml
+++ b/ui/onboarding/Login.qml
@ -4,6 +4,7 @@ import QtQuick.Layouts 1.13
 import QtQuick.Dialogs 1.3
 import QtGraphicalEffects 1.13
 import "../shared"
+import "../shared/status"
 import "../imports"
 import "./Login"

@ -31,10 +32,8 @@ Item {
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter

-        Identicon {
+        StatusImageIdenticon {
            id: userImage
-            width: 40
-            height: 40
            anchors.horizontalCenter: parent.horizontalCenter
            source: loginModel.currentAccount.identicon
        }
--- a/ui/onboarding/Login/AddressView.qml
+++ b/ui/onboarding/Login/AddressView.qml
@ -2,6 +2,7 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import "../../imports"
 import "../../shared"
+import "../../shared/status"

 Rectangle {
    property string username: "Jotaro Kujo"
@ -22,7 +23,7 @@ Rectangle {
    color: selected || isHovered ? Style.current.grey : Style.current.transparent
    radius: Style.current.radius

-    Identicon {
+    StatusImageIdenticon {
        id: accountImage
        anchors.left: parent.left
        anchors.leftMargin: Style.current.padding
--- a/ui/shared/ContactSelector.qml
+++ b/ui/shared/ContactSelector.qml
@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import QtGraphicalEffects 1.13
 import "../imports"
+import "../shared/status"

 Item {
    id: root
@ -43,7 +44,7 @@ Item {
        menuAlignment: Select.MenuAlignment.Left
        selectedItemView: Item {
            anchors.fill: parent
-            Identicon {
+            StatusImageIdenticon {
                id: iconImg
                anchors.left: parent.left
                anchors.leftMargin: 14
@ -92,13 +93,11 @@ Item {

            width: parent.width
            height: visible ? 72 : 0
-            Identicon {
+            StatusImageIdenticon {
                id: iconImg
                anchors.left: parent.left
                anchors.leftMargin: Style.current.padding
                anchors.verticalCenter: parent.verticalCenter
-                width: 40
-                height: 40
                source: identicon
            }
            Column {
--- a/ui/shared/TransactionPreview.qml
+++ b/ui/shared/TransactionPreview.qml
@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import QtGraphicalEffects 1.13
 import "../imports"
+import "../shared/status"

 Item {
    id: root
@ -197,7 +198,7 @@ Item {
                    visible: false
                    source: imgToWallet
                }
-                Identicon {
+                StatusImageIdenticon {
                    id: idtToContact
                    visible: false
                    anchors.right: parent.right
--- a/ui/shared/status/StatusIdenticon.qml
+++ b/ui/shared/status/StatusIdenticon.qml
@ -0,0 +1,41 @@
+import QtQuick 2.13
+import "../../imports"
+import "../../shared"
+import "../../shared/status"
+
+Item {
+    id: root
+
+    property string chatName
+    property int chatType
+    property string identicon
+
+    width: 40
+    height: 40
+
+    Loader {
+        sourceComponent: root.chatType == Constants.chatTypeOneToOne ? imageIdenticon : letterIdenticon
+        anchors.fill: parent
+    }
+
+    Component {
+        id: letterIdenticon
+
+        StatusLetterIdenticon {
+            chatName: root.chatName
+            width: parent.width
+            height: parent.height
+        }
+    }
+
+    Component {
+        id: imageIdenticon
+
+        StatusImageIdenticon {
+            source: root.identicon
+            width: parent.width
+            height: parent.height
+        }
+    }
+}
+
--- a/ui/shared/status/StatusImageIdenticon.qml
+++ b/ui/shared/status/StatusImageIdenticon.qml
@ -0,0 +1,26 @@
+import QtQuick 2.13
+import "../../imports"
+import "../../shared"
+
+Rectangle {
+    id: root
+    property url source:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAg0lEQVR4nOzXwQmAMBAFURV7sQybsgybsgyr0QYUlE1g+Mw7ioQMe9lMQwhDaAyhMYTGEJqYkPnrj/t5XE/ft2UdW1yken7MRAyhMYTGEBpDaAyhKe9JbzvSX9WdLWYihtAYQuMLkcYQGkPUScxEDKExhMYQGkNoDKExhMYQmjsAAP//ZfIUZgXTZXQAAAAASUVORK5CYII="
+    width: 40
+    height: 40
+    color: Style.current.background
+    radius: width / 2
+    border.width: 1
+    border.color: Style.current.borderSecondary
+
+    Image {
+        width: parent.width
+        height: parent.height
+        fillMode: Image.PreserveAspectFit
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        source: root.source
+        mipmap: true
+        smooth: false
+        antialiasing: true
+    }
+}
--- a/ui/shared/status/StatusLetterIdenticon.qml
+++ b/ui/shared/status/StatusLetterIdenticon.qml
@ -0,0 +1,31 @@
+import QtQuick 2.13
+import "../../imports"
+import "../../shared"
+
+Rectangle {
+    id: root
+
+    property string chatName
+
+    width: 40
+    height: 40
+    radius: width / 2
+
+    color: {
+        const color = chatsModel.getChannelColor(root.chatName)
+        if (!color) {
+            return Style.current.transparent
+        }
+        return color
+    }
+
+    StyledText {
+        text: (root.chatName.charAt(0) == "#" ? root.chatName.charAt(1) : root.chatName.charAt(0)).toUpperCase()
+        opacity: 0.7
+        font.weight: Font.Bold
+        font.pixelSize: root.isCompact ? 14 : 21
+        color: "white"
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+    }
+}
--- a/ui/shared/status/qmldir
+++ b/ui/shared/status/qmldir
@ -1,4 +1,6 @@
 StatusButton 1.0 StatusButton.qml
+StatusImageIdenticon 1.0 StatusImageIdenticon.qml
+StatusLetterIdenticon 1.0 StatusLetterIdenticon.qml
 StatusRadioButton 1.0 StatusRadioButton.qml
 StatusRoundButton 1.0 StatusRoundButton.qml
 StatusSectionHeadline 1.0 StatusSectionHeadline.qml