From bf530a6cc4179734440636d4a7d50fbdb9eac751 Mon Sep 17 00:00:00 2001 From: Patryk Osmaczko Date: Thu, 7 Apr 2022 21:02:54 +0200 Subject: [PATCH] fix(@desktop/onboarding): show identicon ring and colors for profiles issue: #5358 --- .../modules/main/chat_section/base_item.nim | 3 +- .../color_hash_item.nim | 0 .../color_hash_model.nim | 0 src/app/modules/startup/login/item.nim | 30 +++++++++++++++++-- src/app/modules/startup/login/model.nim | 10 ++++++- src/app/modules/startup/login/module.nim | 2 +- .../startup/login/selected_account.nim | 12 ++++++++ .../controls/AccountViewDelegate.qml | 12 ++++++-- .../Onboarding/panels/AccountListPanel.qml | 2 ++ .../AppLayouts/Onboarding/views/LoginView.qml | 10 +++++-- ui/imports/shared/controls/chat/UserImage.qml | 11 ++++--- ui/imports/utils/Utils.qml | 13 ++++++++ 12 files changed, 89 insertions(+), 16 deletions(-) rename src/app/modules/{main/chat_section => shared_models}/color_hash_item.nim (100%) rename src/app/modules/{main/chat_section => shared_models}/color_hash_model.nim (100%) diff --git a/src/app/modules/main/chat_section/base_item.nim b/src/app/modules/main/chat_section/base_item.nim index c5a72b268a..99f40329e2 100644 --- a/src/app/modules/main/chat_section/base_item.nim +++ b/src/app/modules/main/chat_section/base_item.nim @@ -1,5 +1,6 @@ import sequtils, sugar -import color_hash_item, color_hash_model + +import ../../shared_models/[color_hash_item, color_hash_model] type ColorHashSegment* = tuple[len, colorIdx: int] diff --git a/src/app/modules/main/chat_section/color_hash_item.nim b/src/app/modules/shared_models/color_hash_item.nim similarity index 100% rename from src/app/modules/main/chat_section/color_hash_item.nim rename to src/app/modules/shared_models/color_hash_item.nim diff --git a/src/app/modules/main/chat_section/color_hash_model.nim b/src/app/modules/shared_models/color_hash_model.nim similarity index 100% rename from src/app/modules/main/chat_section/color_hash_model.nim rename to src/app/modules/shared_models/color_hash_model.nim diff --git a/src/app/modules/startup/login/item.nim b/src/app/modules/startup/login/item.nim index 2d1985fd7c..714bd81932 100644 --- a/src/app/modules/startup/login/item.nim +++ b/src/app/modules/startup/login/item.nim @@ -1,25 +1,49 @@ +import NimQml + +import sequtils, sugar +import ../../shared_models/[color_hash_item, color_hash_model] + +type + ColorHashSegment* = tuple[len, colorIdx: int] + type Item* = object name: string thumbnailImage: string largeImage: string keyUid: string + colorHash: color_hash_model.Model + colorHashVariant: QVariant + colorId: int -proc initItem*(name, thumbnailImage, largeImage, keyUid: string): +proc initItem*(name, thumbnailImage, largeImage, keyUid: string, colorHash: seq[ColorHashSegment], colorId: int): Item = result.name = name result.thumbnailImage = thumbnailImage result.largeImage = largeImage result.keyUid = keyUid + result.colorHash = color_hash_model.newModel() + result.colorHash.setItems(map(colorHash, x => color_hash_item.initItem(x.len, x.colorIdx))) + result.colorHashVariant = newQVariant(result.colorHash) + result.colorId = colorId proc getName*(self: Item): string = return self.name proc getThumbnailImage*(self: Item): string = - result = self.thumbnailImage + return self.thumbnailImage proc getLargeImage*(self: Item): string = - result = self.largeImage + return self.largeImage proc getKeyUid*(self: Item): string = return self.keyUid + +proc getColorHash*(self: Item): color_hash_model.Model = + return self.colorHash + +proc getColorHashVariant*(self: Item): QVariant = + return self.colorHashVariant + +proc getColorId*(self: Item): int = + return self.colorId diff --git a/src/app/modules/startup/login/model.nim b/src/app/modules/startup/login/model.nim index 8520078e91..7000272da4 100644 --- a/src/app/modules/startup/login/model.nim +++ b/src/app/modules/startup/login/model.nim @@ -8,6 +8,8 @@ type ThumbnailImage LargeImage KeyUid + ColorHash + ColorId QtObject: type @@ -33,7 +35,9 @@ QtObject: ModelRole.Name.int:"username", ModelRole.ThumbnailImage.int:"thumbnailImage", ModelRole.LargeImage.int:"largeImage", - ModelRole.KeyUid.int:"keyUid" + ModelRole.KeyUid.int:"keyUid", + ModelRole.ColorHash.int:"colorHash", + ModelRole.ColorId.int:"colorId" }.toTable method data(self: Model, index: QModelIndex, role: int): QVariant = @@ -55,6 +59,10 @@ QtObject: result = newQVariant(item.getLargeImage()) of ModelRole.KeyUid: result = newQVariant(item.getKeyUid()) + of ModelRole.ColorHash: + result = newQVariant(item.getColorHash()) + of ModelRole.ColorId: + result = newQVariant(item.getColorId()) proc setItems*(self: Model, items: seq[Item]) = self.beginResetModel() diff --git a/src/app/modules/startup/login/module.nim b/src/app/modules/startup/login/module.nim index ebf488f107..c6ec3070e3 100644 --- a/src/app/modules/startup/login/module.nim +++ b/src/app/modules/startup/login/module.nim @@ -56,7 +56,7 @@ method load*(self: Module) = var largeImage: string self.extractImages(acc, thumbnailImage, largeImage) items.add(initItem(acc.name, thumbnailImage, largeImage, - acc.keyUid)) + acc.keyUid, acc.colorHash, acc.colorId)) self.view.setModelItems(items) diff --git a/src/app/modules/startup/login/selected_account.nim b/src/app/modules/startup/login/selected_account.nim index 193d7e045b..68c8ce1775 100644 --- a/src/app/modules/startup/login/selected_account.nim +++ b/src/app/modules/startup/login/selected_account.nim @@ -30,6 +30,18 @@ QtObject: QtProperty[string] keyUid: read = getKeyUid + proc getColorHash(self: SelectedAccount): QVariant {.slot.} = + return self.item.getColorHashVariant() + + QtProperty[QVariant] colorHash: + read = getColorHash + + proc getColorId(self: SelectedAccount): int {.slot.} = + return self.item.getColorId() + + QtProperty[int] colorId: + read = getColorId + proc getThumbnailImage(self: SelectedAccount): string {.slot.} = return self.item.getThumbnailImage() diff --git a/ui/app/AppLayouts/Onboarding/controls/AccountViewDelegate.qml b/ui/app/AppLayouts/Onboarding/controls/AccountViewDelegate.qml index de6b2bb771..e4ac1d7a48 100644 --- a/ui/app/AppLayouts/Onboarding/controls/AccountViewDelegate.qml +++ b/ui/app/AppLayouts/Onboarding/controls/AccountViewDelegate.qml @@ -6,6 +6,7 @@ import utils 1.0 import shared 1.0 import shared.panels 1.0 import shared.status 1.0 +import shared.controls.chat 1.0 import StatusQ.Controls 0.1 as StatusQControls import StatusQ.Components 0.1 @@ -16,6 +17,8 @@ Rectangle { property string username: "Jotaro Kujo" property string keyUid: "0x123345677890987654321123456" property string address: "" + property var colorHash + property int colorId property url image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAg0lEQVR4nOzXwQmAMBAFURV7sQybsgybsgyr0QYUlE1g+Mw7ioQMe9lMQwhDaAyhMYTGEJqYkPnrj/t5XE/ft2UdW1yken7MRAyhMYTGEBpDaAyhKe9JbzvSX9WdLWYihtAYQuMLkcYQGkPUScxEDKExhMYQGkNoDKExhMYQmjsAAP//ZfIUZgXTZXQAAAAASUVORK5CYII=" property var onAccountSelect: function() {} property var isSelected: function() {} @@ -37,14 +40,17 @@ Rectangle { return Style.current.transparent } - StatusSmartIdenticon { + UserImage { id: accountImage + anchors.left: parent.left anchors.leftMargin: Style.current.padding anchors.verticalCenter: parent.verticalCenter + name: root.username - image.source: root.image - icon.charactersLen: 2 + image: root.image + colorId: root.colorId + colorHash: root.colorHash } StyledText { diff --git a/ui/app/AppLayouts/Onboarding/panels/AccountListPanel.qml b/ui/app/AppLayouts/Onboarding/panels/AccountListPanel.qml index c89578edb1..f88cba1311 100644 --- a/ui/app/AppLayouts/Onboarding/panels/AccountListPanel.qml +++ b/ui/app/AppLayouts/Onboarding/panels/AccountListPanel.qml @@ -20,6 +20,8 @@ ListView { image: model.thumbnailImage keyUid: model.keyUid address: model.address || '' + colorHash: model.colorHash + colorId: model.colorId isSelected: function (index, keyUid) { return accountsView.isSelected(index, keyUid) } diff --git a/ui/app/AppLayouts/Onboarding/views/LoginView.qml b/ui/app/AppLayouts/Onboarding/views/LoginView.qml index 9614c75ea9..e2e9716b49 100644 --- a/ui/app/AppLayouts/Onboarding/views/LoginView.qml +++ b/ui/app/AppLayouts/Onboarding/views/LoginView.qml @@ -10,6 +10,7 @@ import shared.panels 1.0 import shared.popups 1.0 import shared.status 1.0 import shared.controls 1.0 +import shared.controls.chat 1.0 import "../popups" import "../stores" @@ -87,12 +88,15 @@ Item { anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter - StatusSmartIdenticon { + UserImage { id: userImage + anchors.horizontalCenter: parent.horizontalCenter - image.source: LoginStore.currentAccount.thumbnailImage + + image: LoginStore.currentAccount.thumbnailImage name: LoginStore.currentAccount.username - icon.charactersLen: 2 + colorId: LoginStore.currentAccount.colorId + colorHash: LoginStore.currentAccount.colorHash } StyledText { diff --git a/ui/imports/shared/controls/chat/UserImage.qml b/ui/imports/shared/controls/chat/UserImage.qml index 037caf5444..87b872d597 100644 --- a/ui/imports/shared/controls/chat/UserImage.qml +++ b/ui/imports/shared/controls/chat/UserImage.qml @@ -5,6 +5,7 @@ import shared.panels 1.0 import utils 1.0 import StatusQ.Components 0.1 +import StatusQ.Core.Theme 0.1 Loader { id: root @@ -16,9 +17,12 @@ Loader { property string name property string pubkey property string image - property bool showRing: false + property bool showRing: true property bool interactive: true + property int colorId: Utils.colorIdForPubkey(pubkey) + property var colorHash: Utils.getColorHashAsJson(pubkey) + signal clicked() height: active ? item.height : 0 @@ -33,12 +37,11 @@ Loader { icon { width: root.imageWidth height: root.imageHeight - color: Style.current.background - textColor: Style.current.secondaryText + color: Theme.palette.userCustomizationColors[root.colorId] charactersLen: 2 } ringSettings { - ringSpecModel: root.showRing ? Utils.getColorHashAsJson(root.pubkey) : undefined + ringSpecModel: root.showRing ? root.colorHash : undefined } Loader { diff --git a/ui/imports/utils/Utils.qml b/ui/imports/utils/Utils.qml index c6c54335b2..30cc9ec903 100644 --- a/ui/imports/utils/Utils.qml +++ b/ui/imports/utils/Utils.qml @@ -1,7 +1,9 @@ pragma Singleton import QtQuick 2.13 + import shared 1.0 +import StatusQ.Core.Theme 0.1 QtObject { function isHex(value) { @@ -619,6 +621,17 @@ QtObject { return JSON.parse(jsonObj) } + function colorIdForPubkey(publicKey) { + if (publicKey === "") { + return 0 + } + return globalUtils.getColorId(publicKey) + } + + function colorForPubkey(publicKey) { + return Theme.palette.userCustomizationColors[colorIdForPubkey(publicKey)] + } + function getCompressedPk(publicKey) { if (publicKey === "") { return ""