From 0338b0258c4e7ce7d0e57a3381e5858fbfae977f Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Thu, 15 Aug 2019 12:21:29 -0700 Subject: [PATCH] Add Search to Emoji window and clean up some code --- .../components/DisplayNameHeader.qml | 1 + .../SimplifiedConstants.qml | 2 +- .../simplifiedControls/TextField.qml | 9 +- .../emojiApp/ui/qml/SimplifiedEmoji.qml | 143 +++++++++++++----- 4 files changed, 115 insertions(+), 40 deletions(-) diff --git a/interface/resources/qml/hifi/simplifiedUI/avatarApp/components/DisplayNameHeader.qml b/interface/resources/qml/hifi/simplifiedUI/avatarApp/components/DisplayNameHeader.qml index 8938fb9b0b..0928fe0c7b 100644 --- a/interface/resources/qml/hifi/simplifiedUI/avatarApp/components/DisplayNameHeader.qml +++ b/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 diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml index bc27dbad5f..597a50d208 100644 --- a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml +++ b/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 diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/TextField.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/TextField.qml index 20d45b3361..bd2b6cf538 100644 --- a/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/TextField.qml +++ b/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 - text: simplifiedUI.glyphs.pencil + id: rightGlyphItem + text: root.rightGlyph + visible: rightGlyphItem.text !== "" // Text Size size: root.font.pixelSize * 1.5 // Anchors diff --git a/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml b/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml index abead69ae6..83ab43aaae 100644 --- a/scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml +++ b/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 - delegate: emojiDelegate + model: filteredModel + 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) {