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

feat(StatusSeedPhraseView): Update layout 

Closes #5669
This commit is contained in:
Alexandra Betouni 2022-05-10 19:04:25 +03:00 committed by Alexandra Betouni
parent 6a8fa13b62
commit ad584f3dc3
1 changed files with 42 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
ui/app/AppLayouts/Onboarding/views/SeedPhraseInputView.qml
View File

@ -94,15 +94,17 @@ OnboardingBasePage {
}
Item {
implicitWidth: 731
implicitHeight: 472
anchors.centerIn: parent
implicitWidth: 565
implicitHeight: parent.height
anchors.horizontalCenter: parent.horizontalCenter
StatusBaseText {
id: headlineText
font.pixelSize: 22
font.weight: Font.Bold
color: Theme.palette.directColor1
anchors.top: parent.top
anchors.topMargin: (root.height - parent.childrenRect.height)/2
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("Enter seed phrase")
}
@ -115,7 +117,7 @@ OnboardingBasePage {
Repeater {
model: root.tabs
StatusSwitchTabButton {
text: qsTr("%1 words").arg(modelData )
text: qsTr("%1 words").arg(modelData)
}
}
onCurrentIndexChanged: {
@ -129,23 +131,25 @@ OnboardingBasePage {
GridView {
id: grid
width: parent.width
property var wordIndex: ["1", "5", "9", "2", "6", "10", "3", "7", "11", "4", "8", "12",
"13", "17", "21", "14", "18", "22", "15", "19", "23", "16", "20", "24"]
property var wordIndex18: ["1", "5", "9", "2", "6", "10", "3", "7", "11", "4", "8", "12",
"13", "", "14", "17", "15", "18", "16", ""]
height: (grid.count === 20 && !grid.atXBeginning) ? 144 : 244
property var wordIndex: [
["1", "3", "5", "7", "9", "11", "2", "4", "6", "8", "10", "12"]
,["1", "4", "7", "10", "13", "16", "2", "5", "8",
"11", "14", "17", "3", "6", "9", "12", "15", "18"]
,["1", "5", "9", "13", "17", "21", "2", "6", "10", "14", "18", "22",
"3", "7", "11", "15", "19", "23", "4", "8", "12", "16", "20", "24"]
]
height: 312
anchors.left: parent.left
anchors.leftMargin: 12
anchors.top: switchTabBar.bottom
anchors.topMargin: ((grid.count === 20) && !grid.atXBeginning) ? 74 : 24
anchors.topMargin: 24
flow: GridView.FlowTopToBottom
cellWidth: (parent.width/4)
cellHeight: 72
cellWidth: (parent.width/(count/6)) - 8
cellHeight: 52
interactive: false
z: 100000
cacheBuffer: 9999
model: switchTabBar.currentItem.text.substring(0,2) === "12" ? 12 :
switchTabBar.currentItem.text.substring(0,2) === "18" ? 20 : 24
model: switchTabBar.currentItem.text.substring(0,2)
function addWord(pos, word, ignoreGoingNext) {
root.mnemonicInput.push({pos: parseInt(pos), seed: word.replace(/\s/g, '')});
@ -188,10 +192,9 @@ OnboardingBasePage {
delegate: StatusSeedPhraseInput {
id: seedWordInput
width: (grid.cellWidth - 24)
height: (grid.cellHeight - 28)
textEdit.input.anchors.leftMargin: 16
textEdit.input.anchors.rightMargin: 16
width: (grid.cellWidth - 8)
height: (grid.cellHeight - 8)
Behavior on width { NumberAnimation { duration: 180 } }
textEdit.text: {
let pos = parseInt(seedWordInput.leftComponentText)
for (var i in root.mnemonicInput) {
@ -202,9 +205,7 @@ OnboardingBasePage {
}
return ""
}
visible: grid.count !== 20 || (index !== 13 && index !== 19)
leftComponentText: (grid.count === 20) ? grid.wordIndex18[index] : grid.wordIndex[index]
leftComponentText: grid.wordIndex[(grid.count/6)-2][index]
inputList: BIP39_en { }
property int itemIndex: index
z: (grid.currentIndex === index) ? 150000000 : 0
@ -220,7 +221,7 @@ OnboardingBasePage {
}
onKeyPressed: {
if (event.key === Qt.Key_Backtab) {
for (var i = !grid.atXBeginning ? 12 : 0; i < grid.count; i++) {
for (var i = 0; i < grid.count; i++) {
if (parseInt(grid.itemAtIndex(i).leftComponentText) === ((parseInt(leftComponentText)-1) >= 0 ? (parseInt(leftComponentText)-1) : 0)) {
grid.itemAtIndex(i).textEdit.input.edit.forceActiveFocus(Qt.TabFocusReason);
textEdit.input.tabNavItem = grid.itemAtIndex(i).textEdit.input.edit;
@ -229,7 +230,7 @@ OnboardingBasePage {
}
}
} else if (event.key === Qt.Key_Tab) {
for (var i = !grid.atXBeginning ? 12 : 0; i < grid.count; i++) {
for (var i = 0; i < grid.count; i++) {
if (parseInt(grid.itemAtIndex(i).leftComponentText) === ((parseInt(leftComponentText)+1) <= grid.count ? (parseInt(leftComponentText)+1) : grid.count)) {
grid.itemAtIndex(i).textEdit.input.edit.forceActiveFocus(Qt.TabFocusReason);
textEdit.input.tabNavItem = grid.itemAtIndex(i).textEdit.input.edit;
@ -278,7 +279,7 @@ OnboardingBasePage {
id: invalidSeedTxt
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: grid.bottom
anchors.topMargin: (grid.count === 20 && !grid.atXBeginning) ? 74 : 24
anchors.topMargin: 24
color: Theme.palette.dangerColor1
visible: false
text: qsTr("Invalid seed")
@ -290,36 +291,25 @@ OnboardingBasePage {
anchors.top: invalidSeedTxt.bottom
anchors.topMargin: 24
enabled: false
property int gridCount: (grid.count === 20) ? 18 : grid.count
function checkMnemonicLength() {
submitButton.enabled = (root.mnemonicInput.length >= (grid.atXBeginning ? root.tabs[0] : submitButton.gridCount));
submitButton.enabled = (root.mnemonicInput.length >= grid.count);
}
text: root.existingUser ? qsTr("Restore Status Profile") :
((grid.count > 12) && grid.atXBeginning) ? qsTr("Next") : qsTr("Import")
text: root.existingUser ? qsTr("Restore Status Profile") : qsTr("Import")
onClicked: {
if ((grid.count > 12) && grid.atXBeginning && root.mnemonicInput.length < gridCount) {
grid.positionViewAtEnd();
if (grid.count === 20) {
grid.contentX = 1500;
}
} else {
root.mnemonicString = "";
var sortTable = mnemonicInput.sort(function (a, b) {
return a.pos - b.pos;
});
for (var i = 0; i < mnemonicInput.length; i++) {
root.mnemonicString += sortTable[i].seed + ((i === (grid.count-1)) ? "" : " ");
}
if (Utils.isMnemonic(root.mnemonicString) && !OnboardingStore.validateMnemonic(root.mnemonicString)) {
OnboardingStore.importMnemonic(root.mnemonicString)
root.mnemonicString = "";
var sortTable = mnemonicInput.sort(function (a, b) {
return a.pos - b.pos;
});
for (var i = 0; i < mnemonicInput.length; i++) {
root.mnemonicString += sortTable[i].seed + ((i === (gridCount-1)) ? "" : " ");
}
if (Utils.isMnemonic(root.mnemonicString) && !OnboardingStore.validateMnemonic(root.mnemonicString)) {
OnboardingStore.importMnemonic(root.mnemonicString)
root.mnemonicString = "";
root.mnemonicInput = [];
} else {
invalidSeedTxt.visible = true;
enabled = false;
}
root.mnemonicInput = [];
} else {
invalidSeedTxt.visible = true;
enabled = false;
}
}
}
@ -327,11 +317,7 @@ OnboardingBasePage {
onBackClicked: {
root.mnemonicString = "";
if (!grid.atXBeginning) {
grid.positionViewAtBeginning();
} else {
root.mnemonicInput = [];
root.exit();
}
root.mnemonicInput = [];
root.exit();
}
}