328 lines
11 KiB
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
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|