UIT TextField

This commit is contained in:
Zach Fox 2019-05-14 12:27:33 -07:00
parent 2080aa6676
commit 8724cf4edf
3 changed files with 87 additions and 27 deletions

View file

@ -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;
}
}

View file

@ -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
}
}
}
}

View file

@ -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
}
}
}