QmlDesigner: Add placeholder functionality

Add placeholder functionality to StudioControls TextField

Change-Id: I2a6659a40effbc04c42d80a218c0bd70e0b3343f
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Henning Gruendl
2022-03-22 17:40:03 +01:00
committed by Henning Gründl
parent 0c7ec14c62
commit f14c9d88e1

View File

@@ -54,6 +54,7 @@ T.TextField {
color: StudioTheme.Values.themeTextColor
selectionColor: StudioTheme.Values.themeTextSelectionColor
selectedTextColor: StudioTheme.Values.themeTextSelectedTextColor
placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor
readOnly: false
selectByMouse: true
@@ -107,6 +108,23 @@ T.TextField {
height: actionIndicator.visible ? myTextField.__actionIndicatorHeight : 0
}
Text {
id: placeholder
x: myTextField.leftPadding
y: myTextField.topPadding
width: myTextField.width - (myTextField.leftPadding + myTextField.rightPadding)
height: myTextField.height - (myTextField.topPadding + myTextField.bottomPadding)
text: myTextField.placeholderText
font: myTextField.font
color: myTextField.placeholderTextColor
verticalAlignment: myTextField.verticalAlignment
visible: !myTextField.length && !myTextField.preeditText
&& (!myTextField.activeFocus || myTextField.horizontalAlignment !== Qt.AlignHCenter)
elide: Text.ElideRight
renderType: myTextField.renderType
}
background: Rectangle {
id: textFieldBackground
color: StudioTheme.Values.themeControlBackground
@@ -138,6 +156,7 @@ T.TextField {
PropertyChanges {
target: myTextField
color: StudioTheme.Values.themeTextColor
placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor
}
PropertyChanges {
target: mouseArea
@@ -156,6 +175,7 @@ T.TextField {
PropertyChanges {
target: myTextField
color: StudioTheme.Values.themeTextColor
placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor
}
},
State {
@@ -170,6 +190,7 @@ T.TextField {
PropertyChanges {
target: myTextField
color: StudioTheme.Values.themeTextColor
placeholderTextColor: StudioTheme.Values.themePlaceholderTextColor
}
},
State {
@@ -183,6 +204,7 @@ T.TextField {
PropertyChanges {
target: myTextField
color: StudioTheme.Values.themeTextColor
placeholderTextColor: StudioTheme.Values.themePlaceholderTextColorInteraction
}
PropertyChanges {
target: mouseArea
@@ -200,6 +222,7 @@ T.TextField {
PropertyChanges {
target: myTextField
color: StudioTheme.Values.themeTextColorDisabled
placeholderTextColor: StudioTheme.Values.themeTextColorDisabled
}
}
]