Create component emoji picker

This commit is contained in:
Angela Mazzurco 2017-07-01 15:36:09 +02:00
parent 666ae5ecf3
commit 48a77c5e1a
5 changed files with 1329 additions and 0 deletions

View File

@ -0,0 +1,54 @@
import QtQuick 2.7
import QtQuick.Controls.Styles 1.2
Rectangle {
id: emojiButton
Text {
id: emojiText
color: "gray"
text: qsTr(eCatText)
font.pixelSize: emojiButton.width - 8
anchors.centerIn: parent
}
state: "RELEASED"
states: [
State {
name: "PRESSED"
PropertyChanges {
target: emojiText
font.pixelSize: emojiButton.width - 10
}
},
State {
name: "RELEASED"
PropertyChanges {
target: emojiText
font.pixelSize: emojiButton.width - 8
}
}
]
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
emojiText.color = "black"
}
onExited: {
emojiText.color = "gray"
}
onPressedChanged: {
emojiButton.state = emojiButton.state == "PRESSED" ? "RELEASED" : "PRESSED"
}
onClicked: {
Qt.emojiClickedHandler(emojiText.text)
}
}
}

View File

@ -0,0 +1,79 @@
import QtQuick 2.7
import QtQuick.Controls.Styles 1.2
Rectangle {
id: emojiCategoryButton
property string categoryName
function completedHandler() {
categoryName = eCatName
//initialize
if (parent.currSelEmojiButton === undefined) {
clickedHandler()
}
}
function pressedHandler() {
if (state != "SELECTED") {
state = state == "PRESSED" ? "RELEASED" : "PRESSED"
}
}
function clickedHandler() {
if (parent.currSelEmojiButton !== undefined) {
parent.currSelEmojiButton.state = "RELEASED"
}
parent.currSelEmojiButton = emojiCategoryButton
state = "SELECTED"
Qt.emojiCategoryChangedHandler(emojiCategoryButton.categoryName)
}
Text {
id: emojiText
color: "gray"
text: qsTr(eCatText)
font.pixelSize: emojiCategoryButton.width - 8
anchors.centerIn: parent
}
state: "RELEASED"
states: [
State {
name: "PRESSED"
PropertyChanges {
target: emojiText
font.pixelSize: emojiCategoryButton.width - 10
}
},
State {
name: "RELEASED"
PropertyChanges {
target: emojiText
font.pixelSize: emojiCategoryButton.width - 8
}
},
State {
name: "SELECTED"
PropertyChanges {
target: emojiCategoryButton
color: "#ADD6FF"
}
}
]
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: emojiText.color = "black"
onExited: emojiText.color = "gray"
onPressedChanged: pressedHandler()
onClicked: clickedHandler()
}
Component.onCompleted: completedHandler()
}

View File

@ -0,0 +1,124 @@
import QtQuick 2.7
import QtQuick.Controls 2.0
import "emoji.js" as EmojiJSON
Rectangle {
id: emojiPicker
property EmojiCategoryButton currSelEmojiButton
property variant emojiParsedJson
property int buttonWidth: 40
property TextArea textArea
//displays all Emoji of one categroy by modifying the ListModel of emojiGrid
function categoryChangedHandler (newCategoryName){
emojiByCategory.clear()
for (var i = 0; i < emojiParsedJson.emoji_by_category[newCategoryName].length; i++) {
var elem = emojiParsedJson.emoji_by_category[newCategoryName][i]
emojiByCategory.append({eCatName: newCategoryName, eCatText: elem})
}
}
//adds the clicked Emoji (and one ' ' if the previous character isn't an Emoji) to textArea
function emojiClickedHandler(selectedEmoji) {
var strAppnd = ""
var plainText = textArea.getText(0, textArea.length)
if (plainText.length > 0) {
var lastChar = plainText[plainText.length-1]
if ((lastChar !== ' ') && (lastChar.charCodeAt(0) < 255)) {
strAppnd = "&nbsp;"
}
}
strAppnd += '<span style="font-size: 22px">' + selectedEmoji + '</span>'
textArea.insert(textArea.cursorPosition, strAppnd)
}
//parses JSON, publishes button handlers and inits textArea
function completedHandler() {
// emojiParsedJson = JSON.parse(EmojiJSON.emoji_json)
emojiParsedJson = EmojiJSON.emoji_json
for (var i = 0; i < emojiParsedJson.emoji_categories.length; i++) {
var elem = emojiParsedJson.emoji_categories[i]
emojiCategoryButtons.append({eCatName: elem.name, eCatText: elem.emoji_unified})
}
Qt.emojiCategoryChangedHandler = categoryChangedHandler
Qt.emojiClickedHandler = emojiClickedHandler
textArea.cursorPosition = textArea.length
textArea.Keys.pressed.connect(keyPressedHandler)
}
//checks if the previous character is an Emoji and adds a ' ' if that's the case
//this is necessary, because Emoji use a bigger font-size, and that font-size is kept using without a ' '
function keyPressedHandler(event) {
var testStr = txtIn.getText(txtIn.length-2, txtIn.length)
var ptrn = new RegExp("[\uD800-\uDBFF][\uDC00-\uDFFF]")
if ((event.key !== Qt.Key_Backspace) && (ptrn.test(testStr))) {
txtIn.text += " "
txtIn.cursorPosition = txtIn.length
}
}
//all emoji of one category
ListModel {
id: emojiByCategory
}
GridView {
id: emojiGrid
width: parent.width
anchors.fill: parent
anchors.bottomMargin: buttonWidth
cellWidth: buttonWidth; cellHeight: buttonWidth
model: emojiByCategory
delegate: EmojiButton {
width: buttonWidth
height: buttonWidth
color: emojiPicker.color
}
}
//seperator
Rectangle {
color: emojiPicker.color
anchors.bottom: parent.bottom
width: parent.width
height: buttonWidth
}
Rectangle {
color: "black"
anchors.bottom: parent.bottom
anchors.bottomMargin: buttonWidth
width: parent.width
height: 1
}
//emoji category selector
ListView {
width: parent.width
anchors.bottom: parent.bottom
anchors.bottomMargin: buttonWidth
orientation: ListView.Horizontal
model: emojiCategoryButtons
delegate: EmojiCategoryButton {
width: buttonWidth
height: buttonWidth
color: emojiPicker.color
}
}
ListModel {
id: emojiCategoryButtons
}
Component.onCompleted: completedHandler()
}

File diff suppressed because it is too large Load Diff

View File

@ -47,5 +47,9 @@
<file>icons/add.svg</file>
<file>icons/keyring.svg</file>
<file>components/TextAndIcon.qml</file>
<file>components/emoji/EmojiPicker.qml</file>
<file>components/emoji/EmojiCategoryButton.qml</file>
<file>components/emoji/EmojiButton.qml</file>
<file>components/emoji/emoji.js</file>
</qresource>
</RCC>