From 5d0d3e7135f663e6fb26556cdf242074e97fe880 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= Date: Mon, 24 Oct 2022 12:58:00 +0200 Subject: [PATCH] feat(storybook): add controls to profile page now one can play around with various UI aspects of the new Profile Dialog --- storybook/pages/ProfileDialogViewPage.qml | 322 ++++++++++++------ ui/imports/shared/views/ProfileDialogView.qml | 2 +- 2 files changed, 225 insertions(+), 99 deletions(-) diff --git a/storybook/pages/ProfileDialogViewPage.qml b/storybook/pages/ProfileDialogViewPage.qml index c91e6b2c2a..f2f568733f 100644 --- a/storybook/pages/ProfileDialogViewPage.qml +++ b/storybook/pages/ProfileDialogViewPage.qml @@ -1,5 +1,6 @@ import QtQuick 2.14 import QtQuick.Controls 2.14 +import QtQuick.Layouts 1.14 import Storybook 1.0 @@ -9,54 +10,67 @@ import shared.views 1.0 SplitView { id: root - // globalUtilsInst and mainModuleInst injection/replacement - QtObject { - Component.onCompleted: { - Utils.globalUtilsInst = { - getEmojiHashAsJson: function(publicKey) { - return JSON.stringify(["👨🏻‍🍼", "🏃🏿‍♂️", "🌇", "🤶🏿", "🏮","🤷🏻‍♂️", "🤦🏻", "📣", "🤎", "👷🏽", "😺", "🥞", "🔃", "🧝🏽‍♂️"]) - }, - getColorId: function(publicKey) { return 0 }, // TODO - getCompressedPk: function(publicKey) { return publicKey } - } - Utils.mainModuleInst = { - getContactDetailsAsJson: function(publicKey, getVerificationRequest) // TODO make an editor for this - { - return JSON.stringify({ displayName: "Mock User Name", - optionalName: "OriginalMockUser", - displayIcon: "", // TODO - publicKey: publicKey, - name: "mock-ens-name", - ensVerified: true, - alias: "Mock User Triplet", - lastUpdated: Date.now(), - lastUpdatedLocally: Date.now(), - localNickname: "MockNickname", - thumbnailImage: "", // TODO - largeImage: "", // TODO - isContact: true, - isAdded: true, - isBlocked: false, - removed: false, - requestReceived: true, - hasAddedUs: true, // same as above - isSyncing: false, - removed: false, - trustStatus: Constants.trustStatus.unknown, - verificationStatus: Constants.verificationStatus.unverified, - incomingVerificationStatus: Constants.verificationStatus.unverified, - socialLinks: "", // TODO - bio: "Hello from MockMainModule, I am a mock user and this is my bio." - }) - } - } - } + property bool globalUtilsReady: false + property bool mainModuleReady: false + // globalUtilsInst mock + QtObject { + function getEmojiHashAsJson(publicKey) { + return JSON.stringify(["👨🏻‍🍼", "🏃🏿‍♂️", "🌇", "🤶🏿", "🏮","🤷🏻‍♂️", "🤦🏻", "📣", "🤎", "👷🏽", "😺", "🥞", "🔃", "🧝🏽‍♂️"]) + } + function getColorId(publicKey) { return colorId.value } + + function getCompressedPk(publicKey) { return "zx3sh" + publicKey } + + function getColorHashAsJson(publicKey) { return JSON.stringify("") } // TODO + + Component.onCompleted: { + Utils.globalUtilsInst = this + root.globalUtilsReady = true + + } Component.onDestruction: { - Qt.callLater(function () { - Utils.globalUtilsInst = {} - Utils.mainModuleInst = {} - }) + root.globalUtilsReady = false + Utils.globalUtilsInst = {} + } + } + + // mainModuleInst mock + QtObject { + function getContactDetailsAsJson(publicKey, getVerificationRequest) { + return JSON.stringify({ displayName: displayName.text || "Mock User Name", + optionalName: optionalName.text, + displayIcon: "", + publicKey: publicKey, + name: name.text, + ensVerified: ensVerified.checked, + alias: "Mock Alias Triplet", + lastUpdated: Date.now(), + lastUpdatedLocally: Date.now(), + localNickname: "MockNickname", + thumbnailImage: "", + largeImage: userImage.checked ? Style.png("status-logo") : "", + isContact: isContact.checked, + isAdded: isAdded.checked, + isBlocked: isBlocked.checked, + removed: removed.checked, + requestReceived: hasAddedUs.checked, + hasAddedUs: hasAddedUs.checked, // same as above + isSyncing: false, + trustStatus: trustStatus.currentValue, + verificationStatus: Constants.verificationStatus.unverified, + incomingVerificationStatus: Constants.verificationStatus.unverified, + bio: bio.text, + socialLinks: "" // TODO + }) + } + Component.onCompleted: { + root.mainModuleReady = true + Utils.mainModuleInst = this + } + Component.onDestruction: { + root.mainModuleReady = false + Utils.mainModuleInst = {} } } @@ -75,64 +89,70 @@ SplitView { height: parent.height clip: true - ProfileDialogView { - implicitWidth: 640 + Loader { + active: root.globalUtilsReady && root.mainModuleReady + width: parent.availableWidth + height: parent.availableHeight - publicKey: switchOwnProfile.checked ? "0xdeadbeef" : "0xrandomguy" + sourceComponent: ProfileDialogView { + implicitWidth: 640 - Component.onCompleted: { - Global.appMain = root // FIXME this is here for the popups to work - } + publicKey: switchOwnProfile.checked ? "0xdeadbeef" : "0xrandomguy" - profileStore: QtObject { - readonly property string pubkey: "0xdeadbeef" - property string ensName: "mock-ens-name" // TODO match "myPublicKey" from contactsStore/MockMainModule - - function getQrCodeSource() { - return "" - } - function copyToClipboard(text) { - logs.logEvent("profileStore::copyToClipboard", ["text"], arguments) - } - } - - contactsStore: QtObject { - readonly property string myPublicKey: "0xdeadbeef" - - function hasReceivedVerificationRequestFrom(publicKey) { - return false + Component.onCompleted: { + Global.appMain = root // FIXME this is here for the popups to work } - function joinPrivateChat(publicKey) { - logs.logEvent("contactsStore::joinPrivateChat", ["publicKey"], arguments) + profileStore: QtObject { + readonly property string pubkey: "0xdeadbeef" + readonly property string ensName: name.text + + function getQrCodeSource() { + return "" + } + function copyToClipboard(text) { + logs.logEvent("profileStore::copyToClipboard", ["text"], arguments) + } } - function markUntrustworthy(publicKey) { - logs.logEvent("contactsStore::markUntrustworthy", ["publicKey"], arguments) - } + contactsStore: QtObject { + readonly property string myPublicKey: "0xdeadbeef" - function removeContact(publicKey) { - logs.logEvent("contactsStore::removeContact", ["publicKey"], arguments) - } + function hasReceivedVerificationRequestFrom(publicKey) { + return false + } - function acceptContactRequest(publicKey) { - logs.logEvent("contactsStore::acceptContactRequest", ["publicKey"], arguments) - } + function joinPrivateChat(publicKey) { + logs.logEvent("contactsStore::joinPrivateChat", ["publicKey"], arguments) + } - function dismissContactRequest(publicKey) { - logs.logEvent("contactsStore::dismissContactRequest", ["publicKey"], arguments) - } + function markUntrustworthy(publicKey) { + logs.logEvent("contactsStore::markUntrustworthy", ["publicKey"], arguments) + } - function removeTrustStatus(publicKey) { - logs.logEvent("contactsStore::removeTrustStatus", ["publicKey"], arguments) - } + function removeContact(publicKey) { + logs.logEvent("contactsStore::removeContact", ["publicKey"], arguments) + } - function removeContactRequestRejection(publicKey) { - logs.logEvent("contactsStore::removeContactRequestRejection", ["publicKey"], arguments) - } + function acceptContactRequest(publicKey) { + logs.logEvent("contactsStore::acceptContactRequest", ["publicKey"], arguments) + } - function verifiedUntrustworthy(publicKey) { - logs.logEvent("contactsStore::verifiedUntrustworthy", ["publicKey"], arguments) + function dismissContactRequest(publicKey) { + logs.logEvent("contactsStore::dismissContactRequest", ["publicKey"], arguments) + } + + function removeTrustStatus(publicKey) { + logs.logEvent("contactsStore::removeTrustStatus", ["publicKey"], arguments) + } + + function removeContactRequestRejection(publicKey) { + logs.logEvent("contactsStore::removeContactRequestRejection", ["publicKey"], arguments) + } + + function verifiedUntrustworthy(publicKey) { + logs.logEvent("contactsStore::verifiedUntrustworthy", ["publicKey"], arguments) + } } } } @@ -141,16 +161,122 @@ SplitView { LogsAndControlsPanel { SplitView.minimumHeight: 100 - SplitView.preferredHeight: 200 + SplitView.preferredHeight: 350 logsView.logText: logs.logText - Row { - Switch { - id: switchOwnProfile - anchors.verticalCenter: parent.verticalCenter - text: "Own profile" - checked: false + ColumnLayout { + width: parent.width + RowLayout { + Layout.fillWidth: true + Switch { + id: switchOwnProfile + text: "Own profile" + checked: false + } + } + RowLayout { + Layout.fillWidth: true + Label { text: "displayName:" } + TextField { + id: displayName + placeholderText: "Display Name" + } + Label { text: "optionalName:" } + TextField { + id: optionalName + placeholderText: "Optional/Original Name" + text: "" + } + } + RowLayout { + CheckBox { + id: userImage + text: "User image" + checked: true + } + Label { + font.italic: true + text: "or" + } + Label { + enabled: !userImage.checked + text: "colorId" + } + SpinBox { + id: colorId + enabled: !userImage.checked + from: 0 + to: 11 // Theme.palette.userCustomizationColors.length + } + } + RowLayout { + Layout.fillWidth: true + CheckBox { + id: ensVerified + checked: true + text: "ensVerified" + } + + Label { text: "name:" } + TextField { + id: name + enabled: ensVerified.checked + text: ensVerified.checked ? "mock-ens-name" : "" + placeholderText: "ENS name" + } + } + RowLayout { + Layout.fillWidth: true + enabled: !switchOwnProfile.checked + CheckBox { + id: isContact + enabled: false + checked: isAdded.checked && hasAddedUs.checked + text: "isContact" + } + CheckBox { + id: isAdded + checked: true + text: "isAdded" + } + CheckBox { + id: hasAddedUs + checked: true + text: "hasAddedUs" + } + CheckBox { + id: removed + text: "removed" + } + CheckBox { + id: isBlocked + text: "isBlocked" + } + } + RowLayout { + Layout.fillWidth: true + enabled: !switchOwnProfile.checked + Label { text: "trustStatus:" } + ComboBox { + id: trustStatus + textRole: "text" + valueRole: "value" + model: [ + { value: Constants.trustStatus.unknown, text: "unknown" }, + { value: Constants.trustStatus.trusted, text: "trusted" }, + { value: Constants.trustStatus.untrustworthy, text: "untrustworthy" } + ] + } + } + RowLayout { + Layout.fillWidth: true + Label { text: "Bio:" } + TextField { + Layout.fillWidth: true + id: bio + text: "Hello from MockMainModule, I am a mock user and this is my bio." + } } } } diff --git a/ui/imports/shared/views/ProfileDialogView.qml b/ui/imports/shared/views/ProfileDialogView.qml index 8b81cae21c..428faad3a9 100644 --- a/ui/imports/shared/views/ProfileDialogView.qml +++ b/ui/imports/shared/views/ProfileDialogView.qml @@ -296,7 +296,7 @@ Pane { text: { let result = "" if (d.userNickName) { - if (d.contactDetails.ensVerified) + if (d.contactDetails.ensVerified && d.contactDetails.name) result = d.prettyEnsName else result = d.contactDetails.optionalName // original display name