feat(Controls): introduce `StatusPasswordInput`

`StatusPasswordInput` is a wrapper around  `TextField` with an option
to display signing phrase.
This commit is contained in:
Sale Djenic 2022-09-08 10:04:21 +02:00 committed by Michał Cieślak
parent 21f187ad39
commit 938a544330
4 changed files with 119 additions and 0 deletions

View File

@ -56,6 +56,15 @@ Column {
input.clearable: true
}
StatusPasswordInput {
placeholderText: "Password"
}
StatusPasswordInput {
signingPhrase: "orange hello cygnet"
placeholderText: "Password"
}
Item {
implicitWidth: 480
implicitHeight: 82

View File

@ -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
}
}
}
}
}

View File

@ -51,3 +51,4 @@ StatusComboBox 0.1 StatusComboBox.qml
StatusItemDelegate 0.1 StatusItemDelegate.qml
StatusTextArea 0.1 StatusTextArea.qml
StatusBackButton 0.1 StatusBackButton.qml
StatusPasswordInput 0.1 StatusPasswordInput.qml

View File

@ -93,6 +93,7 @@
<file>StatusQ/Controls/StatusLabeledSlider.qml</file>
<file>StatusQ/Controls/StatusNavBarTabButton.qml</file>
<file>StatusQ/Controls/StatusPasswordStrengthIndicator.qml</file>
<file>StatusQ/Controls/StatusPasswordInput.qml</file>
<file>StatusQ/Controls/StatusPickerButton.qml</file>
<file>StatusQ/Controls/StatusPinInput.qml</file>
<file>StatusQ/Controls/StatusProgressBar.qml</file>