status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(onboarding): fixing onboarding layout ctx positioning issues 

Closes #5832
This commit is contained in:
Alexandra Betouni 2022-05-25 18:24:01 +03:00 committed by Iuri Matias
parent 2d73f5239a
commit e07094137c
3 changed files with 89 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml
View File

@ -54,6 +54,7 @@ Item {
} }
ColumnLayout { ColumnLayout {
height: 461
anchors.centerIn: parent anchors.centerIn: parent
spacing: Style.current.padding spacing: Style.current.padding
@ -83,14 +84,14 @@ Item {
StatusSmartIdenticon { StatusSmartIdenticon {
id: userImage id: userImage
image { image {
width: 80 width: 86
height: 80 height: 86
isIdenticon: false isIdenticon: false
} }
icon { icon {
width: 80 width: 86
height: 80 height: 86
letterSize: 32 letterSize: 32
color: Theme.palette.miscColor5 color: Theme.palette.miscColor5
charactersLen: 2 charactersLen: 2
@ -117,7 +118,7 @@ Item {
StatusInput { StatusInput {
id: nameInput id: nameInput
implicitWidth: 328 implicitWidth: 328
Layout.preferredHeight: 78 Layout.preferredHeight: 44
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
input.placeholderText: qsTr("Display name") input.placeholderText: qsTr("Display name")
input.rightComponent: RoundedIcon { input.rightComponent: RoundedIcon {
@ -149,6 +150,7 @@ Item {
StyledText { StyledText {
id: chatKeyTxt id: chatKeyTxt
Layout.preferredHeight: 44
color: Style.current.secondaryText color: Style.current.secondaryText
text: qsTr("Chatkey:") + " " + Utils.getCompressedPk(root.pubKey) text: qsTr("Chatkey:") + " " + Utils.getCompressedPk(root.pubKey)
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
@ -193,7 +195,6 @@ Item {
StatusButton { StatusButton {
id: nextBtn id: nextBtn
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
Layout.topMargin: 125
enabled: !!nameInput.text && nameInput.valid enabled: !!nameInput.text && nameInput.valid
text: qsTr("Next") text: qsTr("Next")
onClicked: { onClicked: {
@ -245,15 +246,15 @@ Item {
} }
PropertyChanges { PropertyChanges {
target: chainsChatKeyImg target: chainsChatKeyImg
visible: false opacity: 0.0
} }
PropertyChanges { PropertyChanges {
target: userImageCopy target: userImageCopy
visible: false opacity: 0.0
} }
PropertyChanges { PropertyChanges {
target: updatePicButton target: updatePicButton
visible: true opacity: 1.0
} }
PropertyChanges { PropertyChanges {
target: nameInput target: nameInput
@ -276,15 +277,15 @@ Item {
} }
PropertyChanges { PropertyChanges {
target: chainsChatKeyImg target: chainsChatKeyImg
visible: true opacity: 1.0
} }
PropertyChanges { PropertyChanges {
target: userImageCopy target: userImageCopy
visible: true opacity: 1.0
} }
PropertyChanges { PropertyChanges {
target: updatePicButton target: updatePicButton
visible: false opacity: 0.0
} }
PropertyChanges { PropertyChanges {
target: nameInput target: nameInput

128
ui/app/AppLayouts/Onboarding/views/KeysMainView.qml
View File

@ -24,85 +24,85 @@ OnboardingBasePage {
Item { Item {
id: container id: container
width: 425 width: 425
height: { height: 513
let h = 0
const children = this.children
Object.keys(children).forEach(function (key) {
const child = children[key]
h += child.height + Style.current.padding
})
return h
}
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 143
Image { Item {
id: keysImg id: keysImgWrapperItem
width: 160 width: 257
height: 160 height: 257
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top Image {
fillMode: Image.PreserveAspectFit id: keysImg
source: Style.png("onboarding/keys") width: 257
mipmap: true height: 257
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
source: Style.png("onboarding/keys")
mipmap: true
}
} }
StyledText { StyledText {
id: txtTitle id: txtTitle
text: qsTrId("intro-wizard-title1") text: qsTrId("intro-wizard-title1")
anchors.topMargin: Style.current.padding
font.bold: true font.bold: true
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: keysImg.bottom anchors.top: keysImgWrapperItem.bottom
anchors.topMargin: Style.current.padding
font.letterSpacing: -0.2 font.letterSpacing: -0.2
font.pixelSize: 22 font.pixelSize: 22
} }
StyledText { StyledText {
id: txtDesc id: txtDesc
color: Style.current.secondaryText height: 44
text: qsTrId("a-set-of-keys-controls-your-account.-your-keys-live-on-your-device,-so-only-you-can-use-them.")
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
anchors.right: parent.right anchors.right: parent.right
anchors.left: parent.left anchors.left: parent.left
anchors.top: txtTitle.bottom anchors.top: txtTitle.bottom
anchors.topMargin: Style.current.padding anchors.topMargin: Style.current.padding
color: Style.current.secondaryText
text: qsTrId("a-set-of-keys-controls-your-account.-your-keys-live-on-your-device,-so-only-you-can-use-them.")
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
font.pixelSize: 15 font.pixelSize: 15
} }
ColumnLayout { ColumnLayout {
anchors.topMargin: 40
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: txtDesc.bottom anchors.top: txtDesc.bottom
anchors.topMargin: 32
anchors.horizontalCenter: parent.horizontalCenter
spacing: Style.current.bigPadding spacing: Style.current.bigPadding
StatusButton { StatusButton {
id: button id: button
enabled: (opacity > 0.1)
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
onClicked: { onClicked: {
root.buttonClicked(); root.buttonClicked();
} }
} }
// StatusBaseText { StatusBaseText {
// id: keycardLink id: keycardLink
// Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
// color: Theme.palette.primaryColor1 color: Theme.palette.primaryColor1
// MouseArea { MouseArea {
// anchors.fill: parent anchors.fill: parent
// cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
// hoverEnabled: true hoverEnabled: true
// onEntered: { onEntered: {
// parent.font.underline = true parent.font.underline = true
// } }
// onExited: { onExited: {
// parent.font.underline = false parent.font.underline = false
// } }
// onClicked: { onClicked: {
// root.keycardLinkClicked(); root.keycardLinkClicked();
// } }
// } }
// } }
StatusBaseText { StatusBaseText {
id: seedLink id: seedLink
@ -130,49 +130,54 @@ OnboardingBasePage {
states: [ states: [
State { State {
name: "connectkeys" name: "connectkeys"
PropertyChanges {
target: keysImg
width: 160
height: 160
}
PropertyChanges { PropertyChanges {
target: txtTitle target: txtTitle
text: qsTr("Connect your keys") text: qsTr("Connect your keys")
} }
PropertyChanges { PropertyChanges {
target: txtDesc target: txtDesc
text: qsTr("Use your existing Status keys to login to this device.") text: qsTr("Use your existing Status keys to login to this device.")
} }
PropertyChanges { PropertyChanges {
target: button target: button
visible: false // text: qsTr("Scan sync code")
//text: qsTr("Scan sync code") //TODO remove when sync code is implemented
opacity: 0.0
} }
// PropertyChanges { // PropertyChanges {
// target: keycardLink // target: keycardLink
// text: qsTr("Login with Keycard") // text: qsTr("Login with Keycard")
// } // }
PropertyChanges { PropertyChanges {
target: seedLink target: seedLink
text: qsTr("Enter a seed phrase") text: qsTr("Enter a seed phrase")
} }
}, },
State { State {
name: "getkeys" name: "getkeys"
PropertyChanges {
target: keysImg
width: 160
height: 160
}
PropertyChanges { PropertyChanges {
target: txtTitle target: txtTitle
text: qsTr("Get your keys") text: qsTr("Get your keys")
} }
PropertyChanges { PropertyChanges {
target: txtDesc target: txtDesc
text: qsTr("A set of keys controls your account. Your keys live on your\ndevice, so only you can use them.") text: qsTr("A set of keys controls your account. Your keys live on your\ndevice, so only you can use them.")
} }
PropertyChanges { PropertyChanges {
target: button target: button
text: qsTr("Generate new keys") text: qsTr("Generate new keys")
//TODO remove when sync code is implemented
opacity: 1.0
} }
// PropertyChanges { // PropertyChanges {
// target: keycardLink // target: keycardLink
@ -181,11 +186,15 @@ OnboardingBasePage {
PropertyChanges { PropertyChanges {
target: seedLink target: seedLink
text: qsTr("Import a seed phrase") text: qsTr("Import a seed phrase")
} }
}, },
State { State {
name: "importseed" name: "importseed"
PropertyChanges {
target: keysImg
width: 257
height: 257
}
PropertyChanges { PropertyChanges {
target: txtTitle target: txtTitle
text: qsTr("Import a seed phrase") text: qsTr("Import a seed phrase")
@ -198,13 +207,14 @@ OnboardingBasePage {
} }
PropertyChanges { PropertyChanges {
target: txtDesc target: txtDesc
text: qsTr("Seed phrases are used to back up and restore your keys.\n text: qsTr("Seed phrases are used to back up and restore your keys. Only use this option if you already have a seed phrase.")
Only use this option if you already have a seed phrase.")
} }
PropertyChanges { PropertyChanges {
target: button target: button
text: qsTr("Import a seed phrase") text: qsTr("Import a seed phrase")
//TODO remove when sync code is implemented
opacity: 1.0
} }
// PropertyChanges { // PropertyChanges {
// target: keycardLink // target: keycardLink

23
ui/app/AppLayouts/Onboarding/views/WelcomeView.qml
View File

@ -37,27 +37,18 @@ Page {
Item { Item {
id: container id: container
width: 425 width: 425
height: { height: 513
let h = 0
const children = this.children
Object.keys(children).forEach(function (key) {
const child = children[key]
h += child.height + Style.current.padding
})
return h
}
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 143
Image { Image {
id: keysImg id: keysImg
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
fillMode: Image.PreserveAspectFit
source: Style.png("onboarding/welcome")
width: 256 width: 256
height: 256 height: 256
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
source: Style.png("onboarding/welcome")
mipmap: true mipmap: true
} }
@ -76,7 +67,7 @@ Page {
StyledText { StyledText {
id: txtDesc1 id: txtDesc1
color: Style.current.secondaryText color: Style.current.secondaryText
text: qsTr("Your fully decentralized gateway to Ethereum and Web3.\nCrypto wallet, privacy first group chat, and dApp browser.") text: qsTr("Your fully decentralized gateway to Ethereum and Web3. Crypto wallet, privacy first group chat, and dApp browser.")
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
anchors.right: parent.right anchors.right: parent.right