status-desktop/storybook/pages/ProfileDialogViewPage.qml

480 lines
18 KiB
QML

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import utils 1.0
import shared.views 1.0
import shared.stores 1.0 as SharedStores
import mainui 1.0
import StatusQ 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1 as StatusQUtils
import AppLayouts.stores 1.0 as AppLayoutStores
import AppLayouts.Profile.stores 1.0 as ProfileStores
import AppLayouts.Profile.helpers 1.0
import AppLayouts.Wallet.stores 1.0
import Storybook 1.0
import Models 1.0
SplitView {
id: root
property bool globalUtilsReady: false
// globalUtilsInst mock
QtObject {
function addTimestampToURL(url) {
return url
}
function isCompressedPubKey() {
return false
}
Component.onCompleted: {
Utils.globalUtilsInst = this
root.globalUtilsReady = true
}
Component.onDestruction: {
root.globalUtilsReady = false
Utils.globalUtilsInst = {}
}
}
ListModel {
id: linksModel
ListElement {
text: "__github"
url: "https://github.com/caybro"
showcaseVisibility: Constants.ShowcaseVisibility.Everyone
}
ListElement {
text: "__twitter"
url: "https://twitter.com/caybro"
showcaseVisibility: Constants.ShowcaseVisibility.Everyone
}
ListElement {
text: "__personal_site"
url: "https://status.im"
showcaseVisibility: Constants.ShowcaseVisibility.Everyone
}
ListElement {
text: "__youtube"
url: "https://www.youtube.com/@LukasTinkl"
showcaseVisibility: Constants.ShowcaseVisibility.Everyone
}
ListElement {
text: "__telegram"
url: "https://t.me/ltinkl"
showcaseVisibility: Constants.ShowcaseVisibility.Everyone
}
}
ManageCollectiblesModel {
id: manageCollectiblesModel
Component.onCompleted: {
for (let i = 0; i < this.count; i++) {
setProperty(i, "showcaseVisibility", Constants.ShowcaseVisibility.Everyone)
}
}
}
WalletAccountsModel {
id: walletAccountsModel
Component.onCompleted: {
for (let i = 0; i < this.count; i++) {
setProperty(i, "showcaseVisibility", Constants.ShowcaseVisibility.Everyone)
}
}
}
CommunitiesModel {
id: communitiesModel
Component.onCompleted: {
for (let i = 0; i < this.count; i++) {
setProperty(i, "showcaseVisibility", Constants.ShowcaseVisibility.Everyone)
}
}
}
Logs { id: logs }
SplitView {
orientation: Qt.Vertical
SplitView.fillWidth: true
Item {
SplitView.fillWidth: true
SplitView.fillHeight: true
ScrollView {
width: parent.width
height: parent.height
clip: true
Loader {
active: root.globalUtilsReady
width: parent.availableWidth
height: parent.availableHeight
sourceComponent: ProfileDialogView {
implicitWidth: 640
contactDetails: ContactDetails {
publicKey: "0x0000x"
displayName: displayNameTextField.text
localNickname: localNicknameTextField.text
ensVerified: ensVerifiedCheckBox.checked
ensName: ensNameTextField.text
name: ensNameTextField.text
isCurrentUser: ownProfileSwitch.checked
largeImage: userImageCheckBox.checked ? Theme.png("status-logo") : ""
onlineStatus: onlineStatusComboBox.currentValue
isBlocked: isBlockedCheckBox.checked
colorHash: [{colorId: 0, segmentLength: 1},
{colorId: 4, segmentLength: 2}]
colorId: colorIdSpinBox.value
}
readOnly: ctrlReadOnly.checked
onCloseRequested: logs.logEvent("closeRequested()")
sendToAccountEnabled: true
showcaseCommunitiesModel: communitiesModel
showcaseAccountsModel: walletAccountsModel
showcaseCollectiblesModel: manageCollectiblesModel
showcaseSocialLinksModel: linksModel
// TODO: showcaseAssetsModel
assetsModel: AssetsModel {}
collectiblesModel: CollectiblesModel {}
profileStore: ProfileStores.ProfileStore {
function getQrCodeSource() {
return "https://upload.wikimedia.org/wikipedia/commons/4/41/QR_Code_Example.svg"
}
}
contactsStore: ProfileStores.ContactsStore {
function joinPrivateChat(publicKey) {
logs.logEvent("contactsStore::joinPrivateChat", ["publicKey"], arguments)
}
function markUntrustworthy(publicKey) {
logs.logEvent("contactsStore::markUntrustworthy", ["publicKey"], arguments)
}
function removeContact(publicKey) {
logs.logEvent("contactsStore::removeContact", ["publicKey"], arguments)
}
function acceptContactRequest(publicKey, contactRequestId) {
logs.logEvent("contactsStore::acceptContactRequest", ["publicKey, contactRequestId"], arguments)
}
function dismissContactRequest(publicKey, contactRequestId) {
logs.logEvent("contactsStore::dismissContactRequest", ["publicKey, contactRequestId"], arguments)
}
function removeTrustStatus(publicKey) {
logs.logEvent("contactsStore::removeTrustStatus", ["publicKey"], arguments)
}
function removeTrustVerificationStatus(publicKey) {
logs.logEvent("contactsStore::removeTrustVerificationStatus", ["publicKey"], arguments)
}
function verifiedUntrustworthy(publicKey) {
logs.logEvent("contactsStore::verifiedUntrustworthy", ["publicKey"], arguments)
}
function verifiedTrusted(publicKey) {
logs.logEvent("contactsStore::verifiedTrusted", ["publicKey"], arguments)
ctrlTrustStatus.currentIndex = ctrlTrustStatus.indexOfValue(Constants.trustStatus.trusted)
}
function cancelVerificationRequest(pubKey) {
logs.logEvent("contactsStore::cancelVerificationRequest", ["pubKey"], arguments)
}
function getLinkToProfile(publicKey) {
return Constants.userLinkPrefix + publicKey
}
function changeContactNickname(publicKey, newNickname, displayName, isEdit) {
logs.logEvent("contactsStore::changeContactNickname", ["publicKey", "newNickname", "displayName", "isEdit"], arguments)
}
function requestProfileShowcase(publicKey) {
logs.logEvent("contactsStore::requestProfileShowcase", ["publicKey"], arguments)
}
}
utilsStore: SharedStores.UtilsStore {
function getEmojiHash(publicKey) {
return ["👨🏻‍🍼", "🏃🏿‍♂️", "🌇", "🤶🏿", "🏮","🤷🏻‍♂️", "🤦🏻",
"📣", "🤎", "👷🏽", "😺", "🥞", "🔃", "🧝🏽‍♂️"]
}
function getCompressedPk(publicKey) { return "zx3sh" + publicKey }
function isCompressedPubKey(publicKey) { return true }
function isAlias(name) {
return false
}
}
}
}
}
}
LogsAndControlsPanel {
SplitView.minimumHeight: 100
SplitView.preferredHeight: 350
logsView.logText: logs.logText
ColumnLayout {
width: parent.width
RowLayout {
Layout.fillWidth: true
Switch {
id: ownProfileSwitch
text: "Own profile"
checked: false
}
Switch {
id: ctrlReadOnly
text: "Readonly (preview)"
visible: ownProfileSwitch.checked
checked: false
}
}
RowLayout {
Layout.fillWidth: true
Label { text: "localNickname:" }
TextField {
id: localNicknameTextField
text: "Alex"
placeholderText: "Local Nickname"
}
Label {
text: "displayName:"
}
TextField {
id: displayNameTextField
text: "Alex Pella"
placeholderText: "Display Name"
}
CheckBox {
id: ensVerifiedCheckBox
checked: true
text: "ensVerified"
}
Label {
text: "name:"
}
TextField {
id: ensNameTextField
enabled: ensVerifiedCheckBox.checked
text: ensVerifiedCheckBox.checked ? "8⃣6⃣.eth" : ""
placeholderText: "ENS name"
}
}
RowLayout {
CheckBox {
id: userImageCheckBox
text: "User image"
checked: true
}
Label {
font.italic: true
text: "or"
}
Label {
enabled: !userImageCheckBox.checked
text: "colorId"
}
SpinBox {
id: colorIdSpinBox
enabled: !userImageCheckBox.checked
from: 0
to: 11 // Theme.palette.userCustomizationColors.length
}
Label {
text: "onlineStatus"
}
ComboBox {
id: onlineStatusComboBox
textRole: "text"
valueRole: "value"
model: [
{ value: Constants.onlineStatus.unknown, text: "unknown" },
{ value: Constants.onlineStatus.inactive, text: "inactive" },
{ value: Constants.onlineStatus.online, text: "online" }
]
}
}
RowLayout {
Layout.fillWidth: true
enabled: !ownProfileSwitch.checked
CheckBox {
id: ctrlIsContact
enabled: true
checked: ctrlContactRequestState.currentValue === Constants.ContactRequestState.Mutual
text: "isContact"
}
ComboBox {
id: ctrlContactRequestState
textRole: "text"
valueRole: "value"
model: [
{ value: Constants.ContactRequestState.None, text: "None" },
{ value: Constants.ContactRequestState.Mutual, text: "Mutual" },
{ value: Constants.ContactRequestState.Sent, text: "Sent" },
{ value: Constants.ContactRequestState.Received, text: "Received" },
{ value: Constants.ContactRequestState.Dismissed, text: "Dismissed" }
]
}
Label {
text: "trustStatus:"
}
ComboBox {
id: ctrlTrustStatus
textRole: "text"
valueRole: "value"
model: [
{ value: Constants.trustStatus.unknown, text: "unknown" },
{ value: Constants.trustStatus.trusted, text: "trusted" },
{ value: Constants.trustStatus.untrustworthy, text: "untrustworthy" }
]
}
CheckBox {
id: isBlockedCheckBox
text: "isBlocked"
}
}
RowLayout {
Layout.fillWidth: true
Button {
text: "Send ID request"
onClicked: {
ctrlIsContact.checked = true
ctrlIncomingVerificationStatus.currentIndex = ctrlIncomingVerificationStatus.indexOfValue(Constants.verificationStatus.unverified)
ctrlVerificationStatus.currentIndex = ctrlVerificationStatus.indexOfValue(Constants.verificationStatus.unverified)
}
}
Button {
text: "Reply to ID request"
onClicked: {
ctrlIsContact.checked = true
ctrlIncomingVerificationStatus.currentIndex = ctrlIncomingVerificationStatus.indexOfValue(Constants.verificationStatus.verifying)
ctrlVerificationStatus.currentIndex = ctrlVerificationStatus.indexOfValue(Constants.verificationStatus.unverified)
}
}
Button {
text: "Pending ID request"
onClicked: {
ctrlIsContact.checked = true
ctrlIncomingVerificationStatus.currentIndex = ctrlIncomingVerificationStatus.indexOfValue(Constants.verificationStatus.verifying)
ctrlVerificationStatus.currentIndex = ctrlVerificationStatus.indexOfValue(Constants.verificationStatus.verifying)
}
}
Button {
text: "Review ID reply"
onClicked: {
ctrlIsContact.checked = true
ctrlIncomingVerificationStatus.currentIndex = ctrlIncomingVerificationStatus.indexOfValue(Constants.verificationStatus.verified)
ctrlVerificationStatus.currentIndex = ctrlVerificationStatus.indexOfValue(Constants.verificationStatus.verifying)
}
}
}
RowLayout {
Layout.fillWidth: true
Label { text: "Bio:" }
TextField {
Layout.fillWidth: true
id: bio
selectByMouse: true
text: "
Hi, I am Alex. I'm an indie developer who mainly works on web products.
I worked for several different companies and created a couple of my own products from scratch. Currently building Telescope and Prepacked.
Say hi, or find me on Twitter, GitHub, or Mastodon.
"
}
}
}
}
}
}
// category: Views
// https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?node-id=733%3A12552
// https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?node-id=682%3A15078
// https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?node-id=682%3A17655
// https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?node-id=682%3A17087
// https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?node-id=4%3A23525
// https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?node-id=4%3A23932
// https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?node-id=4%3A23932&t=h8DUW6Eysawqe5u0-0
// https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?node-id=724%3A15511&t=h8DUW6Eysawqe5u0-0
// https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?node-id=6%3A16845&t=h8DUW6Eysawqe5u0-0
// https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/%F0%9F%91%A4-Profile-%7C-Desktop?node-id=4%3A25437&t=h8DUW6Eysawqe5u0-0
// status: decent