feat(Controls): introduce `StatusPasswordInput`
`StatusPasswordInput` is a wrapper around `TextField` with an option to display signing phrase.
This commit is contained in:
parent
21f187ad39
commit
938a544330
|
@ -56,6 +56,15 @@ Column {
|
||||||
input.clearable: true
|
input.clearable: true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
StatusPasswordInput {
|
||||||
|
placeholderText: "Password"
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusPasswordInput {
|
||||||
|
signingPhrase: "orange hello cygnet"
|
||||||
|
placeholderText: "Password"
|
||||||
|
}
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
implicitWidth: 480
|
implicitWidth: 480
|
||||||
implicitHeight: 82
|
implicitHeight: 82
|
||||||
|
|
|
@ -0,0 +1,108 @@
|
||||||
|
import QtQuick 2.14
|
||||||
|
import QtQuick.Layouts 1.12
|
||||||
|
import QtQuick.Controls 2.14
|
||||||
|
|
||||||
|
import StatusQ.Core 0.1
|
||||||
|
import StatusQ.Core.Theme 0.1
|
||||||
|
import StatusQ.Controls 0.1
|
||||||
|
|
||||||
|
/*!
|
||||||
|
\qmltype StatusPasswordInput
|
||||||
|
\inherits Item
|
||||||
|
\inqmlmodule StatusQ.Controls
|
||||||
|
\since StatusQ.Controls 0.1
|
||||||
|
\brief The StatusPasswordInput control provides a generic user password input with an option to display signing phrase
|
||||||
|
|
||||||
|
Example of how to use it:
|
||||||
|
|
||||||
|
\qml
|
||||||
|
StatusPasswordInput {
|
||||||
|
signingPhrase: "orange hello cygnet"
|
||||||
|
placeholderText: qsTr("Password")
|
||||||
|
}
|
||||||
|
\endqml
|
||||||
|
|
||||||
|
For a list of available components see StatusQ.
|
||||||
|
*/
|
||||||
|
|
||||||
|
TextField {
|
||||||
|
id: root
|
||||||
|
|
||||||
|
/*!
|
||||||
|
\qmlproperty string StatusPasswordInput::signingPhrase
|
||||||
|
This property sets the signingPhrase of TextField field and signing seed phrase.
|
||||||
|
*/
|
||||||
|
property string signingPhrase: ""
|
||||||
|
|
||||||
|
QtObject {
|
||||||
|
id: d
|
||||||
|
|
||||||
|
readonly property int inputTextPadding: 16
|
||||||
|
readonly property int pixelSize: 15
|
||||||
|
readonly property int radius: 8
|
||||||
|
readonly property int signingPhrasePadding: 8
|
||||||
|
readonly property int signingPhraseWordPadding: 8
|
||||||
|
readonly property int signingPhraseWordsSpacing: 8
|
||||||
|
readonly property int signingPhraseWordsHeight: 30
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
leftPadding: d.inputTextPadding
|
||||||
|
rightPadding: root.signingPhrase !== ""?
|
||||||
|
phrase.width + phrase.anchors.leftMargin + phrase.anchors.rightMargin :
|
||||||
|
d.inputTextPadding
|
||||||
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
implicitWidth: 480
|
||||||
|
implicitHeight: 44
|
||||||
|
|
||||||
|
|
||||||
|
placeholderTextColor: Theme.palette.baseColor1
|
||||||
|
echoMode: TextInput.Password
|
||||||
|
font.pixelSize: d.pixelSize
|
||||||
|
font.family: Theme.palette.baseFont.name
|
||||||
|
color: Theme.palette.directColor1
|
||||||
|
selectionColor: Theme.palette.primaryColor2
|
||||||
|
selectedTextColor: Theme.palette.directColor1
|
||||||
|
background: Rectangle {
|
||||||
|
id: inputRectangle
|
||||||
|
anchors.fill: parent
|
||||||
|
color: Theme.palette.baseColor5
|
||||||
|
radius: d.radius
|
||||||
|
border.width: root.focus ? 1 : 0
|
||||||
|
border.color: {
|
||||||
|
if (root.focus) {
|
||||||
|
return Theme.palette.primaryColor1
|
||||||
|
}
|
||||||
|
return "transparent"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
id: phrase
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.leftMargin: d.signingPhrasePadding
|
||||||
|
anchors.rightMargin: d.signingPhrasePadding
|
||||||
|
spacing: d.signingPhraseWordsSpacing
|
||||||
|
visible: root.signingPhrase !== ""
|
||||||
|
Repeater {
|
||||||
|
model: root.signingPhrase.split(" ")
|
||||||
|
delegate: Rectangle {
|
||||||
|
width: signingPhraseWord.implicitWidth + 2 * d.signingPhraseWordPadding
|
||||||
|
height: d.signingPhraseWordsHeight
|
||||||
|
color: Theme.palette.indirectColor1
|
||||||
|
radius: d.radius
|
||||||
|
|
||||||
|
StatusBaseText {
|
||||||
|
id: signingPhraseWord
|
||||||
|
anchors.centerIn: parent
|
||||||
|
color: Theme.palette.primaryColor1
|
||||||
|
font.pixelSize: root.font.pixelSize
|
||||||
|
font.family: root.font.family
|
||||||
|
text: modelData
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -51,3 +51,4 @@ StatusComboBox 0.1 StatusComboBox.qml
|
||||||
StatusItemDelegate 0.1 StatusItemDelegate.qml
|
StatusItemDelegate 0.1 StatusItemDelegate.qml
|
||||||
StatusTextArea 0.1 StatusTextArea.qml
|
StatusTextArea 0.1 StatusTextArea.qml
|
||||||
StatusBackButton 0.1 StatusBackButton.qml
|
StatusBackButton 0.1 StatusBackButton.qml
|
||||||
|
StatusPasswordInput 0.1 StatusPasswordInput.qml
|
|
@ -93,6 +93,7 @@
|
||||||
<file>StatusQ/Controls/StatusLabeledSlider.qml</file>
|
<file>StatusQ/Controls/StatusLabeledSlider.qml</file>
|
||||||
<file>StatusQ/Controls/StatusNavBarTabButton.qml</file>
|
<file>StatusQ/Controls/StatusNavBarTabButton.qml</file>
|
||||||
<file>StatusQ/Controls/StatusPasswordStrengthIndicator.qml</file>
|
<file>StatusQ/Controls/StatusPasswordStrengthIndicator.qml</file>
|
||||||
|
<file>StatusQ/Controls/StatusPasswordInput.qml</file>
|
||||||
<file>StatusQ/Controls/StatusPickerButton.qml</file>
|
<file>StatusQ/Controls/StatusPickerButton.qml</file>
|
||||||
<file>StatusQ/Controls/StatusPinInput.qml</file>
|
<file>StatusQ/Controls/StatusPinInput.qml</file>
|
||||||
<file>StatusQ/Controls/StatusProgressBar.qml</file>
|
<file>StatusQ/Controls/StatusProgressBar.qml</file>
|
||||||
|
|
Loading…
Reference in New Issue