diff --git a/interface/resources/qml/hifi/simplifiedUI/avatarApp/components/DisplayNameHeader.qml b/interface/resources/qml/hifi/simplifiedUI/avatarApp/components/DisplayNameHeader.qml index f3b2e0b510..71d55ea170 100644 --- a/interface/resources/qml/hifi/simplifiedUI/avatarApp/components/DisplayNameHeader.qml +++ b/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; } } diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml index db4e6d0234..2225a2190f 100644 --- a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml +++ b/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 + } } } } diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/TextField.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/TextField.qml new file mode 100644 index 0000000000..20d45b3361 --- /dev/null +++ b/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 + } + } +}