bound 'displayName' to backend, adjust font

interface/resources/qml/hifi/AvatarApp.qml

@@ -118,6 +118,7 @@ Rectangle {
             var getAvatarsReply = message.reply;
             allAvatars.populate(getAvatarsReply.bookmarks);
             setCurrentAvatar(getAvatarsReply.currentAvatar, '');
+            displayNameInput.text = getAvatarsReply.displayName;
 
             console.debug('currentAvatar: ', JSON.stringify(currentAvatar, null, '\t'));
             updateCurrentAvatarInBookmarks(currentAvatar);
@@ -246,8 +247,10 @@ Rectangle {
             text: 'Display Name'
         }
 
-        TextField {
+        InputField {
             id: displayNameInput
+
+            font.pixelSize: 18
             anchors.left: displayNameLabel.right
             anchors.leftMargin: 30
             anchors.verticalCenter: displayNameLabel.verticalCenter
@@ -255,44 +258,11 @@ Rectangle {
             anchors.rightMargin: 30
             width: 232
 
-            property bool error: text === '';
             text: 'ThisIsDisplayName'
 
-            states: [
+            onEditingFinished: {
-                State {
+                emitSendToScript({'method' : 'changeDisplayName', 'displayName' : text})
-                    name: "hovered"
+                focus = false;
-                    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
-                size: 36
-                text: "\ue00d"
             }
         }
 

interface/resources/qml/hifi/avatarapp/InputField.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.5
+import QtQuick.Controls 2.2
+import "../../styles-uit"
+import "../../controls-uit" as HifiControlsUit
+
+TextField {
+    id: textField
+
+    property bool error: text === '';
+    text: 'ThisIsDisplayName'
+
+    states: [
+        State {
+            name: "hovered"
+            when: textField.hovered && !textField.focus && !textField.error;
+            PropertyChanges { target: background; color: '#afafaf' }
+        },
+        State {
+            name: "focused"
+            when: textField.focus && !textField.error
+            PropertyChanges { target: background; color: '#f2f2f2' }
+            PropertyChanges { target: background; border.color: '#00b4ef' }
+        },
+        State {
+            name: "error"
+            when: textField.error
+            PropertyChanges { target: background; color: '#f2f2f2' }
+            PropertyChanges { target: background; border.color: '#e84e62' }
+        }
+    ]
+
+    background: Rectangle {
+        id: background
+        implicitWidth: 200
+        implicitHeight: 40
+        color: '#d4d4d4'
+        border.color: '#afafaf'
+        border.width: 1
+        radius: 2
+    }
+
+    HiFiGlyphs {
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        size: 36
+        text: "\ue00d"
+    }
+}

scripts/system/avatarapp.js

@@ -110,7 +110,7 @@ var adjustWearables = {
 }
 
 var currentAvatarWearablesBackup = null;
-var currentAvatar = getMyAvatar();
+var currentAvatar = null;
 var selectedAvatarEntityGrabbable = false;
 var selectedAvatarEntity = null;
 
@@ -119,12 +119,12 @@ function fromQml(message) { // messages are {method, params}, like json-rpc. See
 
     switch (message.method) {
     case 'getAvatars':
-
+        currentAvatar = getMyAvatar();
         message.reply = {
             'bookmarks' : AvatarBookmarks.getBookmarks(),
-            'currentAvatar' : currentAvatar
+            'currentAvatar' : currentAvatar,
+            'displayName' : MyAvatar.displayName
         };
-
         console.debug('avatarapp.js: currentAvatar: ', JSON.stringify(message.reply.currentAvatar, null, '\t'))
         sendToQml(message)
         break;
@@ -183,6 +183,13 @@ function fromQml(message) { // messages are {method, params}, like json-rpc. See
         Entities.deleteEntity(message.entityID);
         updateAvatarWearables(currentAvatar, message.avatarName);
         break;
+    case 'changeDisplayName':
+        console.debug('avatarapp.js: changeDisplayName: ', message.displayName);
+        if (MyAvatar.displayName !== message.displayName) {
+            MyAvatar.displayName = message.displayName;
+            UserActivityLogger.palAction("display_name_change", message.displayName);
+        }
+        break;
     default:
         print('Unrecognized message from AvatarApp.qml:', JSON.stringify(message));
     }