diff --git a/ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml b/ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml index 8d6dc720a1..8d1aedbc02 100644 --- a/ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml +++ b/ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml @@ -154,20 +154,30 @@ Item { Item { id: chainsChatKeyImg Layout.alignment: Qt.AlignHCenter - Layout.preferredWidth: 181 + Layout.preferredWidth: 400 Layout.preferredHeight: 84 Image { anchors.horizontalCenter: parent.horizontalCenter source: Style.png("onboarding/chains") } EmojiHash { - anchors.bottom: parent.bottom + anchors { + bottom: parent.bottom + left: parent.left + leftMargin: 80 + } + publicKey: root.pubKey } StatusSmartIdenticon { id: userImageCopy - anchors.bottom: parent.bottom - anchors.right: parent.right + + anchors { + bottom: parent.bottom + right: parent.right + rightMargin: 116 + } + icon.width: 44 icon.height: 44 icon.color: "transparent" diff --git a/ui/app/AppLayouts/Profile/views/MyProfileView.qml b/ui/app/AppLayouts/Profile/views/MyProfileView.qml index bc7895068b..e68cfbb739 100644 --- a/ui/app/AppLayouts/Profile/views/MyProfileView.qml +++ b/ui/app/AppLayouts/Profile/views/MyProfileView.qml @@ -76,11 +76,7 @@ SettingsContentBase { displayNameVisible: false pubkeyVisible: false - - imageWidth: 80 - imageHeight: 80 - emojiSize: Qt.size(20,20) - supersampling: true + compact: false imageOverlay: Item { StatusFlatRoundButton { diff --git a/ui/imports/shared/controls/EmojiHash.qml b/ui/imports/shared/controls/EmojiHash.qml index 5c39305210..481e035b0b 100644 --- a/ui/imports/shared/controls/EmojiHash.qml +++ b/ui/imports/shared/controls/EmojiHash.qml @@ -1,24 +1,36 @@ import QtQuick 2.13 -import StatusQ.Core.Utils 0.1 as StatusQUtils -import utils 1.0 -Text { +import StatusQ.Core.Utils 0.1 as StatusQUtils + +import utils 1.0 +import shared.panels 1.0 + +Item { id: root + property string publicKey - property string size: "14x14" - renderType: Text.NativeRendering - font.pointSize: 1 // make sure there is no padding for emojis due to 'style: "vertical-align: top"' - text: { - const emojiHash = Utils.getEmojiHashAsJson(root.publicKey); - var emojiHashFirstLine = ""; - var emojiHashSecondLine = ""; - for (var i = 0; i < 7; i++) { - emojiHashFirstLine += emojiHash[i]; + + property real size: 16 + + implicitHeight: positioner.implicitHeight + implicitWidth: positioner.implicitWidth + + Grid { + id: positioner + + rows: 2 + columnSpacing: Math.ceil(root.size / 16) + rowSpacing: columnSpacing + 6 + + Repeater { + model: Utils.getEmojiHashAsJson(root.publicKey) + + SVGImage { + width: root.size + height: root.size + + source: StatusQUtils.Emoji.parse(modelData).match('src="(.*\\.svg)')[1] + } } - for (var j = 7; j < emojiHash.length; j++) { - emojiHashSecondLine += emojiHash[j]; - } - return StatusQUtils.Emoji.parse(emojiHashFirstLine, size) + "
" + - StatusQUtils.Emoji.parse(emojiHashSecondLine, size) } } diff --git a/ui/imports/shared/controls/chat/ProfileHeader.qml b/ui/imports/shared/controls/chat/ProfileHeader.qml index 53915debde..57a19307e6 100644 --- a/ui/imports/shared/controls/chat/ProfileHeader.qml +++ b/ui/imports/shared/controls/chat/ProfileHeader.qml @@ -15,14 +15,10 @@ Item { property string pubkey property string icon + property bool compact: true property bool displayNameVisible: true property bool pubkeyVisible: true - property alias imageWidth: userImage.imageWidth - property alias imageHeight: userImage.imageHeight - property size emojiSize: Qt.size(14, 14) - property bool supersampling: true - property alias imageOverlay: imageOverlay.sourceComponent signal clicked() @@ -33,6 +29,8 @@ Item { ColumnLayout { id: contentContainer + spacing: root.compact ? 4 : 12 + anchors { left: parent.left right: parent.right @@ -49,6 +47,8 @@ Item { pubkey: root.pubkey image: root.icon interactive: false + imageWidth: root.compact ? 36 : 80 + imageHeight: imageWidth Loader { id: imageOverlay @@ -86,13 +86,12 @@ Item { } EmojiHash { - id: emojihash - Layout.fillWidth: true - horizontalAlignment: Text.AlignHCenter + id: emojiHash + + Layout.alignment: Qt.AlignHCenter + publicKey: root.pubkey - readonly property size finalSize: supersampling ? Qt.size(emojiSize.width * 2, emojiSize.height * 2) : emojiSize - size: `${finalSize.width}x${finalSize.height}` - scale: supersampling ? 0.5 : 1 + size: root.compact ? 16 : 20 } } } diff --git a/ui/imports/shared/controls/chat/UserImage.qml b/ui/imports/shared/controls/chat/UserImage.qml index 87b872d597..c85a77319c 100644 --- a/ui/imports/shared/controls/chat/UserImage.qml +++ b/ui/imports/shared/controls/chat/UserImage.qml @@ -10,9 +10,8 @@ import StatusQ.Core.Theme 0.1 Loader { id: root - property int imageHeight: compact ? 36 : 40 - property int imageWidth: compact ? 36 : 40 - property bool compact: true + property int imageHeight: 36 + property int imageWidth: 36 property string name property string pubkey diff --git a/ui/imports/shared/popups/ProfilePopup.qml b/ui/imports/shared/popups/ProfilePopup.qml index f248a683f8..3d9854b8c5 100644 --- a/ui/imports/shared/popups/ProfilePopup.qml +++ b/ui/imports/shared/popups/ProfilePopup.qml @@ -113,11 +113,7 @@ StatusModal { displayNameVisible: false pubkeyVisible: false - supersampling: true - emojiSize: Qt.size(20,20) - - imageWidth: 80 - imageHeight: 80 + compact: false imageOverlay: Item { visible: popup.isCurrentUser