linphone-desktop/Linphone/view/Item/TextInput.qml

122 lines
3.3 KiB
QML

import QtQuick
import QtQuick.Controls as Control
import QtQuick.Layouts 1.0
import Linphone
ColumnLayout {
id: mainItem
property string label: ""
property string errorMessage: ""
property string placeholderText: ""
property bool mandatory: false
property bool hidden: false
property int textInputWidth: 346 * DefaultStyle.dp
property var validator: RegularExpressionValidator{}
property bool fillWidth: false
property bool enableBackgroundColors: true
property string initialText
property bool enableErrorText: false
property alias textField: textField
property alias background: input
readonly property string text: textField.text
readonly property bool hasActiveFocus: textField.activeFocus
Component.onCompleted: setText(initialText)
function setText(text) {
textField.text = text
}
function resetText() {
setText(initialText)
}
Text {
visible: mainItem.label.length > 0
verticalAlignment: Text.AlignVCenter
text: mainItem.label + (mainItem.mandatory ? "*" : "")
color: textField.activeFocus ? DefaultStyle.main1_500_main : DefaultStyle.main2_600
elide: Text.ElideRight
wrapMode: Text.Wrap
maximumLineCount: 1
font {
pixelSize: 13 * DefaultStyle.dp
family: DefaultStyle.defaultFont
weight: 700 * DefaultStyle.dp
}
Layout.preferredWidth: mainItem.textInputWidth
}
Rectangle {
id: input
Component.onCompleted: {
if (mainItem.fillWidth)
Layout.fillWidth = true
}
Layout.preferredWidth: mainItem.textInputWidth
Layout.preferredHeight: 49 * DefaultStyle.dp
radius: 79 * DefaultStyle.dp
color: mainItem.enableBackgroundColors ? DefaultStyle.grey_100 : "transparent"
border.color: mainItem.enableBackgroundColors
? errorText.opacity === 0
? textField.activeFocus
? DefaultStyle.main1_500_main
: DefaultStyle.grey_200
: DefaultStyle.danger_500main
: "transparent"
Control.TextField {
id: textField
anchors.left: parent.left
anchors.leftMargin: 10 * DefaultStyle.dp
anchors.right: eyeButton.visible ? eyeButton.left : parent.right
anchors.rightMargin: eyeButton.visible ? 0 : 10 * DefaultStyle.dp
anchors.verticalCenter: parent.verticalCenter
placeholderText: mainItem.placeholderText
echoMode: (mainItem.hidden && !eyeButton.checked) ? TextInput.Password : TextInput.Normal
font.family: DefaultStyle.defaultFont
font {
pixelSize: 14 * DefaultStyle.dp
weight: 400 * DefaultStyle.dp
}
color: errorText.opacity === 0 ? DefaultStyle.main2_600 : DefaultStyle.danger_500main
selectByMouse: true
validator: mainItem.validator
background: Item {
opacity: 0.
}
cursorDelegate: Rectangle {
visible: textField.activeFocus
color: DefaultStyle.main1_500_main
width: 2 * DefaultStyle.dp
}
}
Control.Button {
id: eyeButton
visible: mainItem.hidden
checkable: true
background: Rectangle {
color: "transparent"
}
contentItem: Image {
fillMode: Image.PreserveAspectFit
source: eyeButton.checked ? AppIcons.eyeShow : AppIcons.eyeHide
width: 20 * DefaultStyle.dp
height: 20 * DefaultStyle.dp
}
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
anchors.rightMargin: 5 * DefaultStyle.dp
}
}
ErrorText {
id: errorText
visible: mainItem.enableErrorText
text: mainItem.errorMessage
Layout.preferredWidth: mainItem.textInputWidth
}
}