monero-gui/wizard/SeedListItem.qml
rating89us 198dfb338c
wizard: redesign seed page
- move mnemonic seed
- restore height into a separate page
- pdf template
- seed verification
- responsive UI
- accessibility
2023-02-12 23:25:49 +01:00

153 lines
6.2 KiB
QML

import "../components" as MoneroComponents;
import QtQuick 2.9
import QtQuick.Layouts 1.2
import FontAwesome 1.0
ColumnLayout {
id: seedListItem
property var wordNumber;
property var word;
property var wordSpelled: (word.split("")).join(". ")
property var acessibleText: (wordNumber + 1) + word
property alias wordText: wordText
property alias lineEdit: lineEdit
property alias icon: icon
spacing: 0
Layout.preferredWidth: 136
Layout.maximumWidth: 136
Layout.minimumWidth: 136
Accessible.role: Accessible.StaticText
Accessible.name: lineEdit.inputHasFocus && !lineEdit.readOnly ? qsTr("Please enter the word number") + " " + (wordNumber + 1) + "." +
(icon.visible ? (icon.wordsMatch ? qsTr("Green check mark") + "."
: qsTr("Red exclamation mark") + ".")
: "")
: (wordNumber + 1) + word + ". " +
(lineEdit.inputHasFocus && lineEdit.readOnly ? qsTr("Green check mark")
: qsTr("This word is spelled ") + " " + wordSpelled + ".") +
translationManager.emptyString
KeyNavigation.up: wordNumber == 0 ? (recoveryPhraseLabel.visible ? recoveryPhraseLabel : header) : parent.children[wordNumber - 1]
KeyNavigation.backtab: wordNumber == 0 ? (recoveryPhraseLabel.visible ? recoveryPhraseLabel : header) : parent.children[wordNumber - 1]
Keys.onUpPressed: focusOnPreviousField()
Keys.onBacktabPressed: focusOnPreviousField()
Keys.onDownPressed: focusOnNextField()
Keys.onTabPressed: focusOnNextField()
function focusOnPreviousField() {
if (wizardCreateWallet2.state == "verify") {
if (wordNumber < 5) {
if (recoveryPhraseLabel.visible) {
return recoveryPhraseLabel.forceActiveFocus();
} else {
return header.forceActiveFocus();
}
} else if (wordNumber >= 5 && wordNumber < 25) {
return parent.children[wizardCreateWallet2.hiddenWords[parseInt(wordNumber / 5) - 1]].lineEdit.forceActiveFocus()
}
} else {
if (wordNumber == 0) {
if (recoveryPhraseLabel.visible) {
return recoveryPhraseLabel.forceActiveFocus();
} else {
return header.forceActiveFocus();
}
} else {
return parent.children[wordNumber - 1].forceActiveFocus()
}
}
}
function focusOnNextField() {
if (wizardCreateWallet2.state == "verify") {
if (wordNumber < 20) {
return parent.children[wizardCreateWallet2.hiddenWords[parseInt(wordNumber / 5) + 1]].lineEdit.forceActiveFocus()
} else {
return navigation.btnPrev.forceActiveFocus()
}
} else {
if (wordNumber == 24) {
if (createNewSeedButton.visible) {
return createNewSeedButton.forceActiveFocus()
} else {
return printPDFTemplate.forceActiveFocus()
}
} else {
return parent.children[wordNumber + 1].forceActiveFocus()
}
}
}
RowLayout {
id: wordRow
spacing: 0
MoneroComponents.Label {
color: lineEdit.inputHasFocus ? MoneroComponents.Style.defaultFontColor : MoneroComponents.Style.dimmedFontColor
fontSize: 13
text: (wordNumber + 1)
themeTransition: false
}
MoneroComponents.LineEdit {
id: lineEdit
property bool firstUserInput: true
inputHeight: 29
inputPaddingLeft: 10
inputPaddingBottom: 2
inputPaddingRight: 0
borderDisabled: true
visible: !wordText.visible
fontSize: 16
fontBold: true
text: ""
tabNavigationEnabled: false
onTextChanged: {
if (lineEdit.text.length == wordText.text.length) {
firstUserInput = false;
}
}
onBacktabPressed: focusOnPreviousField()
onTabPressed: focusOnNextField()
}
MoneroComponents.Label {
id: wordText
Layout.leftMargin: 10
color: MoneroComponents.Style.defaultFontColor
fontSize: seedListItem.focus ? 19 : 16
fontBold: true
text: word
themeTransition: false
}
MoneroComponents.TextPlain {
id: icon
Layout.leftMargin: wordsMatch ? 10 : 0
property bool wordsMatch: lineEdit.text === wordText.text
property bool partialWordMatches: lineEdit.text === wordText.text.substring(0, lineEdit.text.length)
visible: lineEdit.text.length > 0 && !lineEdit.firstUserInput || lineEdit.firstUserInput && !partialWordMatches
font.family: FontAwesome.fontFamilySolid
font.styleName: "Solid"
font.pixelSize: 15
text: wordsMatch ? FontAwesome.checkCircle : FontAwesome.exclamationCircle
color: wordsMatch ? (MoneroComponents.Style.blackTheme ? "#00FF00" : "#008000") : "#FF0000"
themeTransition: false
onTextChanged: {
if (wizardCreateWallet2.seedListGrid && wordsMatch) {
if (wordNumber < 20) {
focusOnNextField();
}
lineEdit.readOnly = true;
}
}
}
}
Rectangle {
id: underLine
color: lineEdit.inputHasFocus ? MoneroComponents.Style.defaultFontColor : MoneroComponents.Style.appWindowBorderColor
Layout.fillWidth: true
height: 1
}
}