Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-20 18:23:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add Search to Emoji window and clean up some code

Browse source
This commit is contained in:
Zach Fox 2019-08-15 12:21:29 -07:00
parent 078ff223a4
commit 0338b0258c
4 changed files with 115 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
interface/resources/qml/hifi/simplifiedUI/avatarApp/components/DisplayNameHeader.qml
View file

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

2
interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml
View file

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

9
interface/resources/qml/hifi/simplifiedUI/simplifiedControls/TextField.qml
View file

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

143
scripts/simplifiedUI/simplifiedEmote/emojiApp/ui/qml/SimplifiedEmoji.qml
View file

@ -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) {