Simplify TextField & TextArea placeholder

Better not expose the extra Text item in the API. Ideally it should
be implemented as a scenegraph node. We might even want to promote
the placeholderText property (and add placeholderColor) to TextInput
and TextEdit in Qt Quick core.

Change-Id: I4f443c77d1c696b87a50ee184f868713dd50316f
Reviewed-by: Liang Qi <liang.qi@theqtcompany.com>

5 files changed, 13 insertions, 20 deletions

diff --git a/src/imports/controls/TextArea.qml b/src/imports/controls/TextArea.qml
index c4c7833d..564bd108 100644
--- a/src/imports/controls/TextArea.qml
+++ b/src/imports/controls/TextArea.qml
@@ -43,10 +43,10 @@ T.TextArea {
 
     implicitWidth: Math.max(contentWidth + leftPadding + rightPadding,
                             background ? background.implicitWidth : 0,
-                            placeholder ? placeholder.implicitWidth + leftPadding + rightPadding : 0)
+                            placeholder.implicitWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(contentHeight + topPadding + bottomPadding,
                              background ? background.implicitHeight : 0,
-                             placeholder ? placeholder.implicitHeight + topPadding + bottomPadding : 0)
+                             placeholder.implicitHeight + topPadding + bottomPadding)
 
     padding: 6
 
@@ -54,13 +54,14 @@ T.TextArea {
     selectionColor: Theme.selectionColor
     selectedTextColor: Theme.selectedTextColor
 
-    //! [placeholder]
-    placeholder: Text {
+    Text {
+        id: placeholder
         x: control.leftPadding
         y: control.topPadding
         width: control.width - (control.leftPadding + control.rightPadding)
         height: control.height - (control.topPadding + control.bottomPadding)
 
+        text: control.placeholderText
         font: control.font
         color: control.Theme.disabledColor
         horizontalAlignment: control.horizontalAlignment
@@ -68,5 +69,4 @@ T.TextArea {
         visible: !control.length
         elide: Text.ElideRight
     }
-    //! [placeholder]
 }
diff --git a/src/imports/controls/TextField.qml b/src/imports/controls/TextField.qml
index e65fbf40..4e3c15c6 100644
--- a/src/imports/controls/TextField.qml
+++ b/src/imports/controls/TextField.qml
@@ -42,9 +42,9 @@ T.TextField {
     id: control
 
     implicitWidth: Math.max(background ? background.implicitWidth : 0,
-                            placeholder ? placeholder.implicitWidth + leftPadding + rightPadding : 0)
+                            placeholder.implicitWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(background ? background.implicitHeight : 0,
-                             placeholder ? placeholder.implicitHeight + topPadding + bottomPadding : 0)
+                             placeholder.implicitHeight + topPadding + bottomPadding)
 
     padding: 6
 
@@ -53,13 +53,14 @@ T.TextField {
     selectedTextColor: Theme.selectedTextColor
     verticalAlignment: TextInput.AlignVCenter
 
-    //! [placeholder]
-    placeholder: Text {
+    Text {
+        id: placeholder
         x: control.leftPadding
         y: control.topPadding
         width: control.width - (control.leftPadding + control.rightPadding)
         height: control.height - (control.topPadding + control.bottomPadding)
 
+        text: control.placeholderText
         font: control.font
         color: control.Theme.disabledColor
         horizontalAlignment: control.horizontalAlignment
@@ -67,7 +68,6 @@ T.TextField {
         visible: !control.displayText
         elide: Text.ElideRight
     }
-    //! [placeholder]
 
     //! [background]
     background: Rectangle {
diff --git a/src/imports/controls/doc/images/qtlabscontrols-textfield-placeholder.png b/src/imports/controls/doc/images/qtlabscontrols-textfield-placeholder.png
deleted file mode 100644
index b040315f..00000000
--- a/src/imports/controls/doc/images/qtlabscontrols-textfield-placeholder.png
+++ /dev/null
diff --git a/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc b/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc
index 05100f16..c88d0200 100644
--- a/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc
+++ b/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc
@@ -422,8 +422,7 @@
 
     \section1 Customizing TextField
 
-        TextField consists of two visual items: \l {TextField::background}{background}
-        and \l {TextField::placeholder}{placeholder}.
+        TextField offers a customizable \l {TextField::background}{background} item.
 
         \section3 Background
 
@@ -431,12 +430,6 @@
 
             \snippet TextField.qml background
 
-        \section3 Placeholder
-
-            \image qtlabscontrols-textfield-placeholder.png
-
-            \snippet TextField.qml placeholder
-
 
     \section1 Customizing ToolBar
 
diff --git a/src/imports/templates/plugins.qmltypes b/src/imports/templates/plugins.qmltypes
index 571ed723..1aa4a52b 100644
--- a/src/imports/templates/plugins.qmltypes
+++ b/src/imports/templates/plugins.qmltypes
@@ -853,7 +853,7 @@ Module {
         Property { name: "implicitWidth"; type: "double" }
         Property { name: "implicitHeight"; type: "double" }
         Property { name: "background"; type: "QQuickItem"; isPointer: true }
-        Property { name: "placeholder"; type: "QQuickText"; isPointer: true }
+        Property { name: "placeholderText"; type: "string" }
         Signal {
             name: "pressAndHold"
             Parameter { name: "event"; type: "QQuickMouseEvent"; isPointer: true }
@@ -1130,7 +1130,7 @@ Module {
         Property { name: "implicitWidth"; type: "double" }
         Property { name: "implicitHeight"; type: "double" }
         Property { name: "background"; type: "QQuickItem"; isPointer: true }
-        Property { name: "placeholder"; type: "QQuickText"; isPointer: true }
+        Property { name: "placeholderText"; type: "string" }
         Signal {
             name: "pressAndHold"
             Parameter { name: "mouse"; type: "QQuickMouseEvent"; isPointer: true }