From 4bb517f620afdf41323fb0885dd7eb2cbff266d4 Mon Sep 17 00:00:00 2001
From: Alexander Ivash <elderorb@gmail.com>
Date: Sat, 28 Apr 2018 00:47:32 +0300
Subject: [PATCH] reimplement 'text input with pencil' based on QQC2 TextField

---
 interface/resources/qml/hifi/AvatarApp.qml | 35 +++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/interface/resources/qml/hifi/AvatarApp.qml b/interface/resources/qml/hifi/AvatarApp.qml
index 23cb965473..90a3b9499c 100644
--- a/interface/resources/qml/hifi/AvatarApp.qml
+++ b/interface/resources/qml/hifi/AvatarApp.qml
@@ -97,15 +97,48 @@ Rectangle {
             text: 'Display Name'
         }
 
-        InputTextStyle4 {
+        TextField {
+            id: displayNameInput
             anchors.left: displayNameLabel.right
             anchors.leftMargin: 30
             anchors.verticalCenter: displayNameLabel.verticalCenter
             anchors.right: parent.right
             anchors.rightMargin: 36
             width: 232
+
+            property bool error: text === '';
             text: 'ThisIsDisplayName'
 
+            states: [
+                State {
+                    name: "hovered"
+                    when: displayNameInput.hovered && !displayNameInput.focus && !displayNameInput.error;
+                    PropertyChanges { target: displayNameInputBackground; color: '#afafaf' }
+                },
+                State {
+                    name: "focused"
+                    when: displayNameInput.focus && !displayNameInput.error
+                    PropertyChanges { target: displayNameInputBackground; color: '#f2f2f2' }
+                    PropertyChanges { target: displayNameInputBackground; border.color: '#00b4ef' }
+                },
+                State {
+                    name: "error"
+                    when: displayNameInput.error
+                    PropertyChanges { target: displayNameInputBackground; color: '#f2f2f2' }
+                    PropertyChanges { target: displayNameInputBackground; border.color: '#e84e62' }
+                }
+            ]
+
+            background: Rectangle {
+                id: displayNameInputBackground
+                implicitWidth: 200
+                implicitHeight: 40
+                color: '#d4d4d4'
+                border.color: '#afafaf'
+                border.width: 1
+                radius: 2
+            }
+
             HiFiGlyphs {
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter