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

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

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