1217771fd0
It creates `StatusPinInput` control that allows customzing its circle diameter, circle spacing and pin length. It contains a `TextInput` object that will provide the component, input text management like validation rules. It incorporates a blinking animation when the control is focused and feedback (mouse shape changed) when hovering it. It adds new page in sandbox to play with `StatusPinInput` control. It adds component documentation. Also it creates 2 new `StatusValidator` controls with their corresponding documentation: - `StatusRegularExpressionValidator` which wraps a QML type `RegularExpressionValidator`. - `StatusIntValidator` which wraps a QML type `IntValidator`. Closes #524
76 lines
2.1 KiB
QML
76 lines
2.1 KiB
QML
import QtQuick 2.14
|
|
import QtQuick.Layouts 1.14
|
|
|
|
import StatusQ.Core.Theme 0.1
|
|
import StatusQ.Core 0.1
|
|
import StatusQ.Controls 0.1
|
|
import StatusQ.Controls.Validators 0.1
|
|
|
|
Column {
|
|
id: root
|
|
spacing: 25
|
|
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
|
|
|
// PIN input that accepts only numbers
|
|
StatusBaseText {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
color: Theme.palette.directColor1
|
|
text: "Enter Keycard PIN"
|
|
font.pixelSize: 30
|
|
font.bold: true
|
|
}
|
|
|
|
StatusPinInput {
|
|
id: numbersPinInput
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
validator: StatusIntValidator{bottom: 0; top: 999999;}
|
|
}
|
|
|
|
StatusBaseText {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
color: Theme.palette.dangerColor1
|
|
text: "Only numbers allowed"
|
|
font.pixelSize: 16
|
|
}
|
|
|
|
StatusBaseText {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
color: Theme.palette.directColor1
|
|
text: "Introduced PIN: " + numbersPinInput.pinInput
|
|
font.pixelSize: 12
|
|
}
|
|
|
|
// PIN input that accepts input depending on the regular expression definition
|
|
StatusBaseText {
|
|
topPadding: 100
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
color: Theme.palette.directColor1
|
|
text: "Enter another Keycard PIN"
|
|
font.pixelSize: 30
|
|
font.bold: true
|
|
}
|
|
|
|
StatusPinInput {
|
|
id: regexPinInput
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
validator: StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ }
|
|
circleDiameter: 22
|
|
circleSpacing: 22
|
|
pinLen: 7
|
|
}
|
|
|
|
StatusBaseText {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
color: Theme.palette.dangerColor1
|
|
text: "Only alphanumeric characters and '@' allowed"
|
|
font.pixelSize: 16
|
|
}
|
|
|
|
StatusBaseText {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
color: Theme.palette.directColor1
|
|
text: "Introduced PIN: " + regexPinInput.pinInput
|
|
font.pixelSize: 12
|
|
}
|
|
}
|