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
Lukáš Tinkl
parent
594983c889
commit
5d0d3e7135
|
|
@ -1,5 +1,6 @@
|
|||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import Storybook 1.0
|
||||
|
||||
|
|
@ -9,55 +10,68 @@ import shared.views 1.0
|
|||
SplitView {
|
||||
id: root
|
||||
|
||||
// globalUtilsInst and mainModuleInst injection/replacement
|
||||
property bool globalUtilsReady: false
|
||||
property bool mainModuleReady: false
|
||||
|
||||
// globalUtilsInst mock
|
||||
QtObject {
|
||||
Component.onCompleted: {
|
||||
Utils.globalUtilsInst = {
|
||||
getEmojiHashAsJson: function(publicKey) {
|
||||
function getEmojiHashAsJson(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."
|
||||
})
|
||||
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: {
|
||||
root.globalUtilsReady = false
|
||||
Utils.globalUtilsInst = {}
|
||||
}
|
||||
}
|
||||
|
||||
Component.onDestruction: {
|
||||
Qt.callLater(function () {
|
||||
Utils.globalUtilsInst = {}
|
||||
Utils.mainModuleInst = {}
|
||||
// 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 = {}
|
||||
}
|
||||
}
|
||||
|
||||
Logs { id: logs }
|
||||
|
|
@ -75,7 +89,12 @@ SplitView {
|
|||
height: parent.height
|
||||
clip: true
|
||||
|
||||
ProfileDialogView {
|
||||
Loader {
|
||||
active: root.globalUtilsReady && root.mainModuleReady
|
||||
width: parent.availableWidth
|
||||
height: parent.availableHeight
|
||||
|
||||
sourceComponent: ProfileDialogView {
|
||||
implicitWidth: 640
|
||||
|
||||
publicKey: switchOwnProfile.checked ? "0xdeadbeef" : "0xrandomguy"
|
||||
|
|
@ -86,7 +105,7 @@ SplitView {
|
|||
|
||||
profileStore: QtObject {
|
||||
readonly property string pubkey: "0xdeadbeef"
|
||||
property string ensName: "mock-ens-name" // TODO match "myPublicKey" from contactsStore/MockMainModule
|
||||
readonly property string ensName: name.text
|
||||
|
||||
function getQrCodeSource() {
|
||||
return ""
|
||||
|
|
@ -138,21 +157,128 @@ SplitView {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
LogsAndControlsPanel {
|
||||
SplitView.minimumHeight: 100
|
||||
SplitView.preferredHeight: 200
|
||||
SplitView.preferredHeight: 350
|
||||
|
||||
logsView.logText: logs.logText
|
||||
|
||||
Row {
|
||||
ColumnLayout {
|
||||
width: parent.width
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Switch {
|
||||
id: switchOwnProfile
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
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."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue