UIT TextField

interface/resources/qml/hifi/simplifiedUI/avatarApp/components/DisplayNameHeader.qml

@@ -10,6 +10,7 @@
 
 import QtQuick 2.10
 import "../../simplifiedConstants" as SimplifiedConstants
+import "../../simplifiedControls" as SimplifiedControls
 import stylesUit 1.0 as HifiStylesUit
 import controlsUit 1.0 as HifiControlsUit
 import QtGraphicalEffects 1.0
@@ -82,39 +83,17 @@ Item {
             id: myDisplayNameContainer
             // Size
             width: parent.width
-            height: 40
+            height: 42
             anchors.top: parent.verticalCenter
             anchors.right: parent.right
-            anchors.bottom: parent.bottom
             anchors.left: parent.left
-            
-            MouseArea {
-                anchors.fill: parent
-                hoverEnabled: true
-                onClicked: {
-                    myDisplayNameText.focus = true;
-                    myDisplayNameText.cursorPosition = myDisplayNameText.positionAt(mouseX - myDisplayNameText.anchors.leftMargin, mouseY, TextInput.CursorOnCharacter);
-                }
-                onDoubleClicked: {
-                    myDisplayNameText.selectAll();
-                    myDisplayNameText.focus = true;
-                }
-            }
 
-            TextInput {
+            SimplifiedControls.TextField {
                 id: myDisplayNameText
                 text: MyAvatar.sessionDisplayName === "" ? MyAvatar.displayName : MyAvatar.sessionDisplayName
                 maximumLength: 256
                 clip: true
                 anchors.fill: parent
-                color: simplifiedUI.colors.text.white
-                font.family: "Graphik Medium"
-                font.pixelSize: 22
-                selectionColor: simplifiedUI.colors.text.white
-                selectedTextColor: simplifiedUI.colors.text.darkGrey
-                verticalAlignment: TextInput.AlignVCenter
-                horizontalAlignment: TextInput.AlignLeft
-                autoScroll: false
                 onEditingFinished: {
                     if (MyAvatar.displayName !== text) {
                         MyAvatar.displayName = text;
@@ -122,9 +101,6 @@ Item {
                     myDisplayNameText.focus = false;
                 }
                 onFocusChanged: {
-                    if (!focus) {
-                        cursorPosition = 0;
-                    }
                     myDisplayNameText.autoScroll = focus;
                 }
             }

interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml

@@ -139,6 +139,11 @@ QtObject {
                     readonly property color background: "#00B4EF"
                 }
             }
+            readonly property QtObject textField: QtObject {
+                readonly property color normal: Qt.rgba(1, 1, 1, 0.3)
+                readonly property color hover: "#FFFFFF"
+                readonly property color focus: "#FFFFFF"
+            }
         }
 
         readonly property color darkSeparator: "#595959"
@@ -165,6 +170,7 @@ QtObject {
         readonly property string vol_x_2: "\ue015"
         readonly property string vol_x_3: "\ue016"
         readonly property string vol_x_4: "\ue017"
+        readonly property string pencil: "\ue00d"
     }
 
     readonly property QtObject margins: QtObject {
@@ -208,6 +214,9 @@ QtObject {
                 readonly property int height: 32
                 readonly property int textSize: 14
             }
+            readonly property QtObject textField: QtObject {
+                readonly property int editPencilPadding: 6
+            }
         }
     }
 }

interface/resources/qml/hifi/simplifiedUI/simplifiedControls/TextField.qml

@@ -0,0 +1,75 @@
+//
+//  TextField.qml
+//
+//  Created by Zach Fox on 2019-05-06
+//  Copyright 2019 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import TabletScriptingInterface 1.0
+import "../simplifiedConstants" as SimplifiedConstants
+import stylesUit 1.0 as HifiStylesUit
+
+TextField {
+    id: root
+
+    SimplifiedConstants.SimplifiedConstants {
+        id: simplifiedUI
+    }
+
+    color: simplifiedUI.colors.text.white
+    font.family: "Graphik Medium"
+    font.pixelSize: 22
+    selectionColor: simplifiedUI.colors.text.white
+    selectedTextColor: simplifiedUI.colors.text.darkGrey
+    verticalAlignment: TextInput.AlignVCenter
+    horizontalAlignment: TextInput.AlignLeft
+    autoScroll: false
+    hoverEnabled: true
+    leftPadding: 0
+    rightPadding: editPencil.implicitWidth + simplifiedUI.sizes.controls.textField.editPencilPadding
+
+    onFocusChanged: {
+        if (focus) {
+            Tablet.playSound(TabletEnums.ButtonClick);
+        }
+    }
+
+    onHoveredChanged: {
+        if (hovered) {
+            Tablet.playSound(TabletEnums.ButtonHover);
+        }
+    }
+
+    background: Item {
+        anchors.fill: parent
+
+        Rectangle {
+            id: bottomRectangle
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: 1
+            color: root.focus ? simplifiedUI.colors.controls.textField.focus :
+                (root.hovered ? simplifiedUI.colors.controls.textField.hover : simplifiedUI.colors.controls.textField.normal)
+        }
+
+        HifiStylesUit.HiFiGlyphs {
+            id: editPencil
+            text: simplifiedUI.glyphs.pencil
+            // Text Size
+            size: root.font.pixelSize * 1.5
+            // Anchors
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            // Style
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: bottomRectangle.color
+        }
+    }
+}