feat(storybook): add controls to profile page

now one can play around with various UI aspects of the new Profile Dialog
This commit is contained in:
Lukáš Tinkl 2022-10-24 12:58:00 +02:00 committed by Lukáš Tinkl
parent 594983c889
commit 5d0d3e7135
2 changed files with 225 additions and 99 deletions

View File

@ -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."
}
}
}
}

View File

@ -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