diff --git a/retroshare-qml-app/src/components/emoji/EmojiButton.qml b/retroshare-qml-app/src/components/emoji/EmojiButton.qml index 3720d9f5c..34408b2e2 100644 --- a/retroshare-qml-app/src/components/emoji/EmojiButton.qml +++ b/retroshare-qml-app/src/components/emoji/EmojiButton.qml @@ -1,12 +1,14 @@ import QtQuick 2.7 import QtQuick.Controls.Styles 1.2 -Rectangle { +Rectangle +{ id: emojiButton property var fontName - Text { + Text + { id: emojiText color: "gray" text: qsTr(eCatText) @@ -17,17 +19,22 @@ Rectangle { state: "RELEASED" - states: [ - State { + states: + [ + State + { name: "PRESSED" - PropertyChanges { + PropertyChanges + { target: emojiText font.pixelSize: emojiButton.width - 10 } }, - State { + State + { name: "RELEASED" - PropertyChanges { + PropertyChanges + { target: emojiText font.pixelSize: emojiButton.width - 8 } @@ -35,20 +42,25 @@ Rectangle { ] - MouseArea { + MouseArea + { anchors.fill: parent hoverEnabled: true - onEntered: { + onEntered: + { emojiText.color = "black" } - onExited: { + onExited: + { emojiText.color = "gray" } - onPressedChanged: { + onPressedChanged: + { emojiButton.state = emojiButton.state == "PRESSED" ? "RELEASED" : "PRESSED" } - onClicked: { + onClicked: + { Qt.emojiClickedHandler(emojiText.text) } } diff --git a/retroshare-qml-app/src/components/emoji/EmojiCategoryButton.qml b/retroshare-qml-app/src/components/emoji/EmojiCategoryButton.qml index 12983cf5b..251d8f70e 100644 --- a/retroshare-qml-app/src/components/emoji/EmojiCategoryButton.qml +++ b/retroshare-qml-app/src/components/emoji/EmojiCategoryButton.qml @@ -1,30 +1,37 @@ import QtQuick 2.7 import QtQuick.Controls.Styles 1.2 -Rectangle { +Rectangle +{ id: emojiCategoryButton property string categoryName property var fontName - function completedHandler() { + function completedHandler() + { categoryName = eCatName //initialize - if (parent.currSelEmojiButton === undefined) { + if (parent.currSelEmojiButton === undefined) + { clickedHandler() } } - function pressedHandler() { - if (state != "SELECTED") { + function pressedHandler() + { + if (state != "SELECTED") + { state = state == "PRESSED" ? "RELEASED" : "PRESSED" } } - function clickedHandler() { - if (parent.currSelEmojiButton !== undefined) { + function clickedHandler() + { + if (parent.currSelEmojiButton !== undefined) + { parent.currSelEmojiButton.state = "RELEASED" } @@ -34,7 +41,8 @@ Rectangle { } - Text { + Text + { id: emojiText color: "gray" text: qsTr(eCatText) @@ -45,31 +53,39 @@ Rectangle { state: "RELEASED" - states: [ - State { + states: + [ + State + { name: "PRESSED" - PropertyChanges { + PropertyChanges + { target: emojiText font.pixelSize: emojiCategoryButton.width - 10 } }, - State { + State + { name: "RELEASED" - PropertyChanges { + PropertyChanges + { target: emojiText font.pixelSize: emojiCategoryButton.width - 8 } }, - State { + State + { name: "SELECTED" - PropertyChanges { + PropertyChanges + { target: emojiCategoryButton color: "#ADD6FF" } } ] - MouseArea { + MouseArea + { anchors.fill: parent hoverEnabled: true onEntered: emojiText.color = "black" diff --git a/retroshare-qml-app/src/components/emoji/EmojiPicker.qml b/retroshare-qml-app/src/components/emoji/EmojiPicker.qml index f99d8f444..20c1072d1 100644 --- a/retroshare-qml-app/src/components/emoji/EmojiPicker.qml +++ b/retroshare-qml-app/src/components/emoji/EmojiPicker.qml @@ -2,7 +2,8 @@ import QtQuick 2.7 import QtQuick.Controls 2.0 import "emoji.js" as EmojiJSON -Rectangle { +Rectangle +{ id: emojiPicker property EmojiCategoryButton currSelEmojiButton property variant emojiParsedJson @@ -12,23 +13,27 @@ Rectangle { property var rootFontName: theme.emojiFontName //displays all Emoji of one categroy by modifying the ListModel of emojiGrid - function categoryChangedHandler (newCategoryName){ + function categoryChangedHandler (newCategoryName) + { emojiByCategory.clear() - for (var i = 0; i < emojiParsedJson.emoji_by_category[newCategoryName].length; i++) { + 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) { + 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)) { + if ((lastChar !== ' ') && (lastChar.charCodeAt(0) < 255)) + { strAppnd = " " } } @@ -38,10 +43,12 @@ Rectangle { } //parses JSON, publishes button handlers and inits textArea - function completedHandler() { + function completedHandler() + { // emojiParsedJson = JSON.parse(EmojiJSON.emoji_json) emojiParsedJson = EmojiJSON.emoji_json - for (var i = 0; i < emojiParsedJson.emoji_categories.length; i++) { + 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}) } @@ -56,21 +63,25 @@ Rectangle { //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) { + function keyPressedHandler(event) + { var testStr = textArea.getText(textArea.length-2, textArea.length) var ptrn = new RegExp("[\uD800-\uDBFF][\uDC00-\uDFFF]") - if ((event.key !== Qt.Key_Backspace) && (ptrn.test(testStr))) { + if ((event.key !== Qt.Key_Backspace) && (ptrn.test(testStr))) + { textArea.text += " " textArea.cursorPosition = textArea.length } } //all emoji of one category - ListModel { + ListModel + { id: emojiByCategory } - GridView { + GridView + { id: emojiGrid width: parent.width anchors.fill: parent @@ -78,7 +89,8 @@ Rectangle { cellWidth: buttonWidth; cellHeight: buttonWidth model: emojiByCategory - delegate: EmojiButton { + delegate: EmojiButton + { width: buttonWidth height: buttonWidth color: emojiPicker.color @@ -88,13 +100,15 @@ Rectangle { //seperator - Rectangle { + Rectangle + { color: emojiPicker.color anchors.bottom: parent.bottom width: parent.width height: buttonWidth } - Rectangle { + Rectangle + { color: "black" anchors.bottom: parent.bottom anchors.bottomMargin: buttonWidth @@ -103,14 +117,16 @@ Rectangle { } //emoji category selector - ListView { + ListView + { width: parent.width anchors.bottom: parent.bottom anchors.bottomMargin: buttonWidth orientation: ListView.Horizontal model: emojiCategoryButtons - delegate: EmojiCategoryButton { + delegate: EmojiCategoryButton + { width: buttonWidth height: buttonWidth color: emojiPicker.color @@ -118,7 +134,8 @@ Rectangle { } } - ListModel { + ListModel + { id: emojiCategoryButtons }