mirror of
https://github.com/RetroShare/RetroShare.git
synced 2024-10-01 02:35:48 -04:00
Create component emoji picker
This commit is contained in:
parent
666ae5ecf3
commit
48a77c5e1a
54
retroshare-qml-app/src/components/emoji/EmojiButton.qml
Normal file
54
retroshare-qml-app/src/components/emoji/EmojiButton.qml
Normal 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)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
@ -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()
|
||||
}
|
124
retroshare-qml-app/src/components/emoji/EmojiPicker.qml
Normal file
124
retroshare-qml-app/src/components/emoji/EmojiPicker.qml
Normal 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 = " "
|
||||
}
|
||||
}
|
||||
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()
|
||||
}
|
||||
|
1068
retroshare-qml-app/src/components/emoji/emoji.js
Normal file
1068
retroshare-qml-app/src/components/emoji/emoji.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user