status-desktop/ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml

328 lines
11 KiB
QML

import QtQuick 2.13
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.14
import QtQuick.Dialogs 1.3
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Popups 0.1
import shared.panels 1.0
import shared 1.0
import shared.popups 1.0
import shared.controls 1.0
import utils 1.0
import "../popups"
import "../stores"
import "../shared"
Item {
id: root
property StartupStore startupStore
property string pubKey
property string address
property string displayName
signal createPassword()
Component.onCompleted: {
if (!!root.startupStore.startupModuleInst.importedAccountPubKey) {
root.address = root.startupStore.startupModuleInst.importedAccountAddress ;
root.pubKey = root.startupStore.startupModuleInst.importedAccountPubKey;
}
nameInput.text = root.startupStore.getDisplayName();
nameInput.input.edit.forceActiveFocus();
userImage.asset.name = root.startupStore.getCroppedProfileImage();
}
Loader {
active: !root.startupStore.startupModuleInst.importedAccountPubKey
sourceComponent: StatusListView {
model: root.startupStore.startupModuleInst.generatedAccountsModel
delegate: Item {
Component.onCompleted: {
if (index === 0) {
root.address = model.address;
root.pubKey = model.pubKey;
}
}
}
}
}
ColumnLayout {
height: 461
anchors.centerIn: parent
StyledText {
id: usernameText
text: qsTr("Your profile")
font.weight: Font.Bold
font.pixelSize: 22
Layout.alignment: Qt.AlignHCenter
}
StyledText {
id: txtDesc
Layout.preferredWidth: root.state === Constants.startupState.userProfileCreate? 338 : 643
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
Layout.topMargin: Style.current.smallPadding
color: Style.current.secondaryText
text: qsTr("Longer and unusual names are better as they are less likely to be used by someone else.")
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
font.pixelSize: 15
lineHeight: 1.2
font.letterSpacing: -0.2
}
Item {
Layout.preferredWidth: 86
Layout.preferredHeight: 86
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
Layout.topMargin: Style.current.bigPadding
StatusSmartIdenticon {
anchors.left: parent.left
id: userImage
objectName: "welcomeScreenUserProfileImage"
asset.width: 86
asset.height: 86
asset.letterSize: 32
asset.color: Utils.colorForPubkey(root.pubKey)
asset.charactersLen: 2
asset.isImage: !!asset.name
asset.imgIsIdenticon: false
ringSettings {
ringSpecModel: Utils.getColorHashAsJson(root.pubKey, true)
}
}
StatusRoundButton {
id: updatePicButton
width: 40
height: 40
anchors.top: parent.top
anchors.right: parent.right
anchors.rightMargin: -20
type: StatusFlatRoundButton.Type.Secondary
icon.name: "add"
onClicked: {
cropperModal.chooseImageToCrop();
}
}
}
Item {
id: nameInputItem
Layout.preferredWidth: 328
Layout.preferredHeight: 66
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
Layout.topMargin: 37
StatusInput {
id: nameInput
input.edit.objectName: "onboardingDisplayNameInput"
width: parent.width
placeholderText: qsTr("Display name")
input.rightComponent: RoundedIcon {
width: 14
height: 14
iconWidth: 14
iconHeight: 14
visible: (nameInput.input.text.length > 0)
color: "transparent"
source: Style.svg("close-filled")
onClicked: {
nameInput.input.edit.clear();
}
}
errorMessageCmp.wrapMode: Text.NoWrap
errorMessageCmp.horizontalAlignment: Text.AlignHCenter
validators: Constants.validators.displayName
onTextChanged: {
userImage.name = text;
}
input.acceptReturn: true
onKeyPressed: {
if (input.edit.keyEvent === Qt.Key_Return || input.edit.keyEvent === Qt.Key_Enter) {
event.accepted = true
if(nextBtn.enabled) {
nextBtn.clicked(null)
}
}
}
}
}
StyledText {
id: chatKeyTxt
objectName: "insertDetailsViewChatKeyTxt"
Layout.preferredHeight: 22
color: Style.current.secondaryText
text: qsTr("Chatkey:") + " " + Utils.getCompressedPk(root.pubKey)
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
Layout.topMargin: 13
font.pixelSize: 15
}
Item {
id: chainsChatKeyImg
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
Layout.topMargin: Style.current.padding
Layout.preferredWidth: 215
Layout.preferredHeight: 77
Image {
id: imgChains
anchors.horizontalCenter: parent.horizontalCenter
source: Style.svg("onboarding/chains")
}
EmojiHash {
anchors {
bottom: parent.bottom
left: parent.left
}
publicKey: root.pubKey
}
StatusSmartIdenticon {
id: userImageCopy
anchors {
bottom: parent.bottom
right: parent.right
rightMargin: 25
}
asset.width: 44
asset.height: 44
asset.color: "transparent"
ringSettings { ringSpecModel: Utils.getColorHashAsJson(root.pubKey, true) }
}
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
}
StatusButton {
id: nextBtn
objectName: "onboardingDetailsViewNextButton"
Layout.alignment: Qt.AlignHCenter
enabled: !!nameInput.text && nameInput.valid
font.weight: Font.Medium
text: qsTr("Next")
onClicked: {
if (root.state === Constants.startupState.userProfileCreate) {
root.startupStore.setDisplayName(nameInput.text)
root.displayName = nameInput.text;
}
root.startupStore.doPrimaryAction()
}
}
ImageCropWorkflow {
id: cropperModal
imageFileDialogTitle: qsTr("Choose an image for profile picture")
title: qsTr("Profile picture")
acceptButtonText: qsTr("Make this my profile picture")
onImageCropped: {
const croppedImg = root.startupStore.generateImage(image,
cropRect.x.toFixed(),
cropRect.y.toFixed(),
(cropRect.x + cropRect.width).toFixed(),
(cropRect.y + cropRect.height).toFixed());
userImage.asset.name = croppedImg;
}
}
}
states: [
State {
name: Constants.startupState.userProfileCreate
when: root.startupStore.currentStartupState.stateType === Constants.startupState.userProfileCreate
PropertyChanges {
target: usernameText
text: qsTr("Your profile")
}
PropertyChanges {
target: txtDesc
text: qsTr("Longer and unusual names are better as they are less likely to be used by someone else.")
}
PropertyChanges {
target: chatKeyTxt
visible: false
}
PropertyChanges {
target: chainsChatKeyImg
opacity: 0.0
}
PropertyChanges {
target: userImageCopy
opacity: 0.0
}
PropertyChanges {
target: updatePicButton
opacity: 1.0
}
PropertyChanges {
target: nameInputItem
visible: true
}
},
State {
name: Constants.startupState.userProfileChatKey
when: root.startupStore.currentStartupState.stateType === Constants.startupState.userProfileChatKey
PropertyChanges {
target: usernameText
text: qsTr("Your emojihash and identicon ring")
}
PropertyChanges {
target: txtDesc
text: qsTr("This set of emojis and coloured ring around your avatar are unique and represent your chat key, so your friends can easily distinguish you from potential impersonators.")
}
PropertyChanges {
target: chatKeyTxt
visible: true
}
PropertyChanges {
target: chainsChatKeyImg
opacity: 1.0
}
PropertyChanges {
target: userImageCopy
opacity: 1.0
}
PropertyChanges {
target: updatePicButton
opacity: 0.0
}
PropertyChanges {
target: nameInputItem
visible: false
}
}
]
transitions: [
Transition {
from: "*"
to: "*"
SequentialAnimation {
PropertyAction {
target: root
property: "opacity"
value: 0.0
}
PropertyAction {
target: root
property: "opacity"
value: 1.0
}
}
}
]
}