Add Search to Emoji window and clean up some code

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

@@ -91,6 +91,7 @@ Item {
 
             SimplifiedControls.TextField {
                 id: myDisplayNameText
+                rightGlyph: simplifiedUI.glyphs.pencil
                 text: MyAvatar.displayName
                 maximumLength: 256
                 clip: true

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

@@ -226,7 +226,7 @@ QtObject {
                 readonly property int textSize: 14
             }
             readonly property QtObject textField: QtObject {
-                readonly property int editPencilPadding: 6
+                readonly property int rightGlyphPadding: 6
             }
             readonly property QtObject scrollBar: QtObject {
                 readonly property int backgroundWidth: 9

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

@@ -21,6 +21,8 @@ TextField {
         id: simplifiedUI
     }
 
+    property string rightGlyph: ""
+
     color: simplifiedUI.colors.text.white
     font.family: "Graphik Medium"
     font.pixelSize: 22
@@ -31,7 +33,7 @@ TextField {
     autoScroll: false
     hoverEnabled: true
     leftPadding: 0
-    rightPadding: editPencil.implicitWidth + simplifiedUI.sizes.controls.textField.editPencilPadding
+    rightPadding: root.rightGlyph === "" ? 0 : rightGlyphItem.implicitWidth + simplifiedUI.sizes.controls.textField.rightGlyphPadding
 
     onFocusChanged: {
         if (focus) {
@@ -59,8 +61,9 @@ TextField {
         }
 
         HifiStylesUit.HiFiGlyphs {
-            id: editPencil
+            id: rightGlyphItem
-            text: simplifiedUI.glyphs.pencil
+            text: root.rightGlyph
+            visible: rightGlyphItem.text !== ""
             // Text Size
             size: root.font.pixelSize * 1.5
             // Anchors

scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml

@@ -46,6 +46,10 @@ Rectangle {
         id: mainModel
     }
 
+    ListModel {
+        id: filteredModel
+    }
+
     Component.onCompleted: {
         root.forceActiveFocus();
         /*
@@ -74,10 +78,11 @@ Rectangle {
                 item.code = { utf: item.code[0] }
                 item.keywords = { keywords: item.keywords }
                 mainModel.append(item);
+                filteredModel.append(item);
             });
             // Deleting this might remove any emoji that is shown when you open the app
             // Keeping in case the spec design might prefer this instead
-            root.currentCode = mainModel.get(0).code.utf;
+            root.currentCode = filteredModel.get(0).code.utf;
     }
 
     Rectangle {
@@ -148,42 +153,10 @@ Rectangle {
         anchors.top: emojiIndicatorContainer.bottom
         anchors.left: parent.left
         anchors.right: parent.right
-        anchors.bottom: parent.bottom
+        anchors.bottom: emojiSearchContainer.top
         clip: true
         color: simplifiedUI.colors.darkBackground
 
-        Component {
-            id: emojiDelegate
-            Image {
-                width: 36
-                height: 36
-                source: emoji36BaseURL + mainModel.get(index).code.utf + ".png"
-                fillMode: Image.Pad
-                MouseArea {
-                    hoverEnabled: enabled
-                    anchors.fill: parent
-                    onEntered: {
-                        grid.currentIndex = index
-                        // don't allow a hover image change of the main emoji image 
-                        if (root.isSelected) {
-                            return;
-                        }
-                        // Updates the selected image
-                        root.currentCode = mainModel.get(index).code.utf;
-                    }
-                    onClicked: {
-                        sendToScript({
-                            "source": "SimplifiedEmoji.qml",
-                            "method": "selectedEmoji",
-                            "code": code.utf
-                        });
-                        root.isSelected = true;
-                        root.currentCode = mainModel.get(index).code.utf;
-                    }
-                }
-            }
-        }
-
         GridView {
             id: grid
             anchors.fill: parent
@@ -191,8 +164,35 @@ Rectangle {
             anchors.rightMargin: 14
             cellWidth: 40
             cellHeight: 40
-            model: mainModel
+            model: filteredModel
-            delegate: emojiDelegate
+            delegate: Image {
+                    width: 36
+                    height: 36
+                    source: emoji36BaseURL + model.code.utf + ".png"
+                    fillMode: Image.Pad
+                    MouseArea {
+                        hoverEnabled: enabled
+                        anchors.fill: parent
+                        onEntered: {
+                            grid.currentIndex = index
+                            // don't allow a hover image change of the main emoji image 
+                            if (root.isSelected) {
+                                return;
+                            }
+                            // Updates the selected image
+                            root.currentCode = model.code.utf;
+                        }
+                        onClicked: {
+                            sendToScript({
+                                "source": "SimplifiedEmoji.qml",
+                                "method": "selectedEmoji",
+                                "code": code.utf
+                            });
+                            root.isSelected = true;
+                            root.currentCode = model.code.utf;
+                        }
+                    }
+                }
             cacheBuffer: 400
             focus: true
             highlight: Rectangle { color: Qt.rgba(1, 1, 1, 0.4); radius: 0 }
@@ -203,6 +203,77 @@ Rectangle {
             anchors.rightMargin: -grid.anchors.rightMargin + 2
         }
     }
+
+
+    Item {
+        id: emojiSearchContainer
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        height: 40
+
+        SimplifiedControls.TextField {
+            id: emojiSearchTextField
+            placeholderText: "Search"
+            maximumLength: 100
+            clip: true
+            selectByMouse: true
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            anchors.right: parent.right
+            anchors.rightMargin: 16
+            anchors.verticalCenter: parent.verticalCenter
+            onTextChanged: {
+                if (text.length === 0) {
+                    root.filterEmoji(emojiSearchTextField.text);
+                } else {
+                    waitForMoreInputTimer.restart();
+                }
+            }
+            onAccepted: {
+                root.filterEmoji(emojiSearchTextField.text);
+            }
+            onFocusChanged: {
+                emojiSearchTextField.autoScroll = focus;
+            }
+        }
+
+        Timer {
+            id: waitForMoreInputTimer
+            repeat: false
+            running: false
+            triggeredOnStart: false
+            interval: 300
+
+            onTriggered: {
+                root.filterEmoji(emojiSearchTextField.text);
+            }
+        }
+    }
+
+    function filterEmoji(filterText) {
+        filteredModel.clear();
+
+        if (filterText.length === 0) {
+            for (var i = 0; i < mainModel.count; i++) {
+                filteredModel.append(mainModel.get(i));
+            }
+            return;
+        }
+
+        for (var i = 0; i < mainModel.count; i++) {
+            var currentObject = mainModel.get(i);
+            var currentKeywords = currentObject.keywords.keywords;
+            for (var j = 0; j < currentKeywords.length; j++) {
+                if ((currentKeywords[j].toLowerCase()).indexOf(filterText.toLowerCase()) > -1) {
+                    filteredModel.append(mainModel.get(i));
+                    break;
+                }
+            }
+        }
+    }
+
+
     signal sendToScript(var message);
 
     function fromScript(message) {