status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: categorize emojis in the menu and add category buttons 

Signed-off-by: Jonathan Rainville <rainville.jonathan@gmail.com>
This commit is contained in:
Jonathan Rainville 2020-07-28 16:10:38 -04:00
parent 3d04076910
commit 549f1ff7f2
No known key found for this signature in database
GPG Key ID: 5F4630B759727D9C
14 changed files with 344 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
ui/app/AppLayouts/Chat/components/EmojiCategoryButton.qml Normal file
View File

@ -0,0 +1,55 @@
import QtQuick 2.13
import QtGraphicalEffects 1.0
import "../../../../imports"
import "../../../../shared"
Rectangle {
property bool active: false
property var changeCategory: function () {}
property url source: "../../../img/emojiCategories/recent.svg"
id: categoryButton
width: 40
height: 40
SVGImage {
width: 20
height: 20
fillMode: Image.PreserveAspectFit
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
source: categoryButton.source
ColorOverlay {
anchors.fill: parent
source: parent
color: categoryButton.active ? Style.current.blue : Style.current.transparent
}
Rectangle {
visible: categoryButton.active
width: parent.width
height: 2
radius: 1
color: Style.current.blue
anchors.bottom: parent.bottom
anchors.bottomMargin: -Style.current.smallPadding
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: function () {
categoryButton.changeCategory()
}
}
}
/*##^##
Designer {
D{i:0;formeditorColor:"#ffffff";height:440;width:360}
}
##^##*/

177
ui/app/AppLayouts/Chat/components/EmojiPopup.qml
View File

@ -10,10 +10,11 @@ import "./emojiList.js" as EmojiJSON
Popup {
property var addToChat: function () {}
property var categories: []
id: popup
modal: false
property int selectedPackId
width: 360
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
background: Rectangle {
radius: Style.current.radius
@ -30,14 +31,26 @@ Popup {
}
}
ListModel {
id: emojiModel
}
Component.onCompleted: {
var categoryNames = {"recent": 0}
var newCategories = [[]]
EmojiJSON.emoji_json.forEach(function (emoji) {
emojiModel.append({filename: emoji.unicode + '.png'})
if (!categoryNames[emoji.category] && categoryNames[emoji.category] !== 0) {
categoryNames[emoji.category] = newCategories.length
newCategories.push([])
}
newCategories[categoryNames[emoji.category]].push(emoji)
})
if (newCategories[categoryNames.recent].length === 0) {
newCategories[categoryNames.recent].push({
category: "recent",
empty: true
})
}
categories = newCategories
}
contentItem: ColumnLayout {
@ -45,60 +58,114 @@ Popup {
spacing: 0
Item {
property int headerMargin: 8
id: emojiHeader
Layout.fillWidth: true
Layout.leftMargin: 4
Layout.rightMargin: 4
Layout.topMargin: 4
Layout.bottomMargin: 0
height: searchBox.height + emojiHeader.headerMargin
SearchBox {
id: searchBox
anchors.right: skinToneEmoji.left
anchors.rightMargin: emojiHeader.headerMargin
anchors.top: parent.top
anchors.topMargin: emojiHeader.headerMargin
anchors.left: parent.left
anchors.leftMargin: emojiHeader.headerMargin
}
SVGImage {
id: skinToneEmoji
width: 22
height: 22
anchors.verticalCenter: searchBox.verticalCenter
anchors.right: parent.right
anchors.rightMargin: emojiHeader.headerMargin
source: "../../../../imports/twemoji/26x26/1f590.png"
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: function () {
console.log('Change skin tone')
}
}
}
}
ScrollView {
property ScrollBar vScrollBar: ScrollBar.vertical
property var categrorySectionHeightRatios: []
property int activeCategory: 0
id: scrollView
topPadding: Style.current.smallPadding
leftPadding: Style.current.smallPadding
rightPadding: Style.current.smallPadding / 2
Layout.fillWidth: true
Layout.rightMargin: Style.current.smallPadding / 2
Layout.topMargin: Style.current.smallPadding
Layout.alignment: Qt.AlignTop | Qt.AlignLeft
Layout.preferredHeight: 400 - 4
Layout.preferredHeight: 400 - Style.current.smallPadding - emojiHeader.height
clip: true
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
GridView {
property int imageWidth: 26
property int imageMargin: 4
ScrollBar.vertical.onPositionChanged: function () {
if (vScrollBar.position < categrorySectionHeightRatios[scrollView.activeCategory - 1]) {
scrollView.activeCategory--
} else if (vScrollBar.position > categrorySectionHeightRatios[scrollView.activeCategory]) {
scrollView.activeCategory++
}
}
id: emojiGrid
visible: count > 0
anchors.fill: parent
cellWidth: imageWidth + emojiGrid.imageMargin * 2
cellHeight: imageWidth + emojiGrid.imageMargin * 2
model: emojiModel
focus: true
clip: true
delegate: Item {
width: emojiGrid.cellWidth
height: emojiGrid.cellHeight
Column {
anchors.fill: parent
anchors.topMargin: emojiGrid.imageMargin
anchors.leftMargin: emojiGrid.imageMargin
SVGImage {
width: emojiGrid.imageWidth
height: emojiGrid.imageWidth
source: "../../../../imports/twemoji/26x26/" + filename
// fillMode: Image.PreserveAspectFit
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: {
const extenstionIndex = filename.lastIndexOf('.');
let iconCodePoint = filename
if (extenstionIndex > -1) {
iconCodePoint = iconCodePoint.substring(0, extenstionIndex)
}
function scrollToCategory(category) {
if (category === 0) {
return vScrollBar.setPosition(0)
}
vScrollBar.setPosition(categrorySectionHeightRatios[category - 1])
}
// Split the filename to get all the parts and then encode them from hex to utf8
const splitCodePoint = iconCodePoint.split('-')
let codePointParts = []
splitCodePoint.forEach(function (codePoint) {
codePointParts.push(`0x${codePoint}`)
})
const encodedIcon = String.fromCodePoint(...codePointParts);
popup.addToChat(encodedIcon + ' ') // Adding a space because otherwise, some emojis would fuse since it's just an emoji is just a string
popup.close()
}
}
}
contentHeight: {
var totalHeight = 0
var categoryHeights = []
for (let i = 0; i < emojiSectionsRepeater.count; i++) {
totalHeight += emojiSectionsRepeater.itemAt(i).height + Style.current.padding
categoryHeights.push(totalHeight)
}
var ratios = []
categoryHeights.forEach(function (catHeight) {
ratios.push(catHeight / totalHeight)
})
categrorySectionHeightRatios = ratios
return totalHeight + Style.current.padding
}
Repeater {
id: emojiSectionsRepeater
model: popup.categories
EmojiSection {}
}
}
Row {
Layout.fillWidth: true
height: 40
leftPadding: Style.current.smallPadding / 2
rightPadding: Style.current.smallPadding / 2
spacing: 0
Repeater {
model: EmojiJSON.emojiCategories
EmojiCategoryButton {
source: `../../../img/emojiCategories/${modelData}.svg`
active: index === scrollView.activeCategory
changeCategory: function () {
scrollView.activeCategory = index
scrollView.scrollToCategory(index)
}
}
}

106
ui/app/AppLayouts/Chat/components/EmojiSection.qml Normal file
View File

@ -0,0 +1,106 @@
import QtQuick 2.13
import QtQuick.Layouts 1.3
import "../../../../imports"
import "../../../../shared"
Item {
property int imageWidth: 26
property int imageMargin: 4
id: emojiSection
anchors.top: index === 0 ? parent.top : parent.children[index - 1].bottom
anchors.topMargin: index === 0 ? 0 : Style.current.padding
width: parent.width
height: childrenRect.height + Style.current.padding
StyledText {
id: categoryText
text: modelData && modelData.length ? modelData[0].category.toUpperCase() : ""
color: Style.current.darkGrey
font.pixelSize: 13
}
StyledText {
visible: !!(modelData && modelData.length && modelData[0].empty)
text: qsTr("No recent emojis")
color: Style.current.darkGrey
font.pixelSize: 10
anchors.top: categoryText.bottom
anchors.topMargin: Style.current.smallPadding
}
Component.onCompleted: {
modelData.forEach(function (emoji) {
if (emoji.empty) {
return
}
emojiModel.append({filename: emoji.unicode + '.png'})
})
}
ListModel {
id: emojiModel
}
GridView {
id: emojiGrid
anchors.top: categoryText.bottom
anchors.topMargin: Style.current.smallPadding
width: parent.width
height: childrenRect.height
visible: count > 0
cellWidth: emojiSection.imageWidth + emojiSection.imageMargin * 2
cellHeight: emojiSection.imageWidth + emojiSection.imageMargin * 2
model: emojiModel
focus: true
clip: true
interactive: false
delegate: Item {
width: emojiGrid.cellWidth
height: emojiGrid.cellHeight
Column {
anchors.fill: parent
anchors.topMargin: emojiSection.imageMargin
anchors.leftMargin: emojiSection.imageMargin
SVGImage {
width: emojiSection.imageWidth
height: emojiSection.imageWidth
source: "../../../../imports/twemoji/26x26/" + filename
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: {
const extenstionIndex = filename.lastIndexOf('.');
let iconCodePoint = filename
if (extenstionIndex > -1) {
iconCodePoint = iconCodePoint.substring(0, extenstionIndex)
}
// Split the filename to get all the parts and then encode them from hex to utf8
const splitCodePoint = iconCodePoint.split('-')
let codePointParts = []
splitCodePoint.forEach(function (codePoint) {
codePointParts.push(`0x${codePoint}`)
})
const encodedIcon = String.fromCodePoint(...codePointParts);
popup.addToChat(encodedIcon + ' ') // Adding a space because otherwise, some emojis would fuse since it's just an emoji is just a string
popup.close()
}
}
}
}
}
}
}
/*##^##
Designer {
D{i:0;formeditorColor:"#ffffff";height:440;width:360}
}
##^##*/

202
ui/app/AppLayouts/Chat/components/emojiList.js
View File

@ -1,24 +1,16 @@
var emojiCategories = [
"recent",
"smileys",
"nature",
"food",
"activity",
"travel",
"objects",
"symbols",
"flags",
]
var emoji_json = [
{
"unicode": "1f4af",
"unicode_alternates": "",
"name": "hundred points symbol",
"shortname": ":100:",
"category": "symbols",
"emoji_order": "856",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "1f522",
"unicode_alternates": "",
"name": "input symbol for numbers",
"shortname": ":1234:",
"category": "symbols",
"emoji_order": "913",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "1f600",
"unicode_alternates": "",
@ -8749,6 +8741,16 @@ var emoji_json = [
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "1f4af",
"unicode_alternates": "",
"name": "hundred points symbol",
"shortname": ":100:",
"category": "symbols",
"emoji_order": "856",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "1f505",
"unicode_alternates": "",
@ -9200,112 +9202,12 @@ var emoji_json = [
"aliases_ascii": []
},
{
"unicode": "0030-20e3",
"unicode_alternates": "0030-fe0f-20e3",
"name": "keycap digit zero",
"shortname": ":zero:",
"category": "symbols",
"emoji_order": "902",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "0031-20e3",
"unicode_alternates": "0031-fe0f-20e3",
"name": "keycap digit one",
"shortname": ":one:",
"category": "symbols",
"emoji_order": "903",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "0032-20e3",
"unicode_alternates": "0032-fe0f-20e3",
"name": "keycap digit two",
"shortname": ":two:",
"category": "symbols",
"emoji_order": "904",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "0033-20e3",
"unicode_alternates": "0033-fe0f-20e3",
"name": "keycap digit three",
"shortname": ":three:",
"category": "symbols",
"emoji_order": "905",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "0034-20e3",
"unicode_alternates": "0034-fe0f-20e3",
"name": "keycap digit four",
"shortname": ":four:",
"category": "symbols",
"emoji_order": "906",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "0035-20e3",
"unicode_alternates": "0035-fe0f-20e3",
"name": "keycap digit five",
"shortname": ":five:",
"category": "symbols",
"emoji_order": "907",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "0036-20e3",
"unicode_alternates": "0036-fe0f-20e3",
"name": "keycap digit six",
"shortname": ":six:",
"category": "symbols",
"emoji_order": "908",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "0037-20e3",
"unicode_alternates": "0037-fe0f-20e3",
"name": "keycap digit seven",
"shortname": ":seven:",
"category": "symbols",
"emoji_order": "909",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "0038-20e3",
"unicode_alternates": "0038-fe0f-20e3",
"name": "keycap digit eight",
"shortname": ":eight:",
"category": "symbols",
"emoji_order": "910",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "0039-20e3",
"unicode_alternates": "0039-fe0f-20e3",
"name": "keycap digit nine",
"shortname": ":nine:",
"category": "symbols",
"emoji_order": "911",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "1f51f",
"unicode": "1f522",
"unicode_alternates": "",
"name": "keycap ten",
"shortname": ":ten:",
"name": "input symbol for numbers",
"shortname": ":1234:",
"category": "symbols",
"emoji_order": "912",
"emoji_order": "913",
"aliases": [],
"aliases_ascii": []
},
@ -9635,28 +9537,6 @@ var emoji_json = [
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "0023-20e3",
"unicode_alternates": "0023-fe0f-20e3",
"name": "keycap number sign",
"shortname": ":hash:",
"category": "symbols",
"emoji_order": "946",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "002a-20e3",
"unicode_alternates": "002a-fe0f-20e3",
"name": "keycap asterisk",
"shortname": ":asterisk:",
"category": "symbols",
"emoji_order": "947",
"aliases": [
":keycap_asterisk:"
],
"aliases_ascii": []
},
{
"unicode": "2139",
"unicode_alternates": "2139-fe0f",
@ -9827,26 +9707,6 @@ var emoji_json = [
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "00a9",
"unicode_alternates": "00a9-fe0f",
"name": "copyright sign",
"shortname": ":copyright:",
"category": "symbols",
"emoji_order": "965",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "00ae",
"unicode_alternates": "00ae-fe0f",
"name": "registered sign",
"shortname": ":registered:",
"category": "symbols",
"emoji_order": "966",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "2122",
"unicode_alternates": "2122-fe0f",
@ -10549,16 +10409,6 @@ var emoji_json = [
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "1f441-1f5e8",
"unicode_alternates": "1f441-200d-1f5e8",
"name": "eye in speech bubble",
"shortname": ":eye_in_speech_bubble:",
"category": "symbols",
"emoji_order": "1037",
"aliases": [],
"aliases_ascii": []
},
{
"unicode": "1f1e6-1f1e8",
"unicode_alternates": "",

3
ui/app/img/emojiCategories/activity.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7501 18.2272C19.2939 15.6039 20.8507 9.79378 18.2274 5.25C15.604 0.706219 9.7939 -0.850595 5.25012 1.77276C0.706341 4.39611 -0.850472 10.2062 1.77288 14.75C4.39623 19.2938 10.2063 20.8506 14.7501 18.2272ZM17.3372 10.9504C17.6257 11.0898 17.9564 10.8989 17.9799 10.5793C18.0934 9.03524 17.7608 7.4419 16.9283 6C16.0958 4.55809 14.8823 3.47338 13.4883 2.79963C13.1998 2.66021 12.8691 2.85115 12.8456 3.17068C12.7321 4.71478 13.0647 6.30811 13.8972 7.75001C14.7297 9.19192 15.9433 10.2766 17.3372 10.9504ZM17.0846 12.4831C17.3362 12.5907 17.4716 12.8734 17.3649 13.1254C16.7103 14.671 15.5658 16.0243 14.0001 16.9282C12.4345 17.8321 10.6902 18.1467 9.02439 17.9407C8.75286 17.9072 8.57566 17.6486 8.60832 17.3769C8.84503 15.4083 8.46977 13.3493 7.40208 11.5C6.33439 9.65069 4.73883 8.29617 2.91562 7.51687C2.66404 7.40933 2.52869 7.12658 2.63538 6.87464C3.28993 5.32898 4.43445 3.97573 6.00012 3.0718C7.56579 2.16786 9.31 1.85329 10.9758 2.05927C11.2474 2.09284 11.4246 2.35143 11.3919 2.62307C11.1552 4.59167 11.5305 6.65072 12.5982 8.50002C13.6659 10.3493 15.2614 11.7038 17.0846 12.4831ZM3.07192 14C2.23943 12.5581 1.90683 10.9648 2.02034 9.42066C2.04382 9.10114 2.37455 8.91019 2.66301 9.04961C4.05699 9.72336 5.27055 10.8081 6.10304 12.25C6.93552 13.6919 7.26812 15.2852 7.15462 16.8293C7.13113 17.1488 6.80041 17.3398 6.51195 17.2004C5.11797 16.5266 3.9044 15.4419 3.07192 14Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

3
ui/app/img/emojiCategories/flags.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.80244 2.38248C1.76996 2.39957 1.75 2.43345 1.75 2.47014V9.15328C1.75 9.51331 2.14262 9.74401 2.47817 9.61351C3.81759 9.09263 5.69131 8.98516 7.8975 10.364C9.69737 11.489 11.3614 11.484 12.5838 11.2062C13.2007 11.066 13.7061 10.8553 14.0552 10.6808C14.1765 10.6202 14.25 10.4945 14.25 10.3589V3.83243C14.25 3.48949 13.9121 3.24778 13.5803 3.33423C13.3642 3.39051 13.1316 3.44297 12.8842 3.48796C11.39 3.75962 9.3427 3.75993 7.16459 2.67087C5.32372 1.75043 3.87516 1.7683 2.91269 1.98218C2.42478 2.09061 2.04983 2.25228 1.80244 2.38248ZM14.6284 1.34856L14.6274 1.34913L14.6074 1.35992C14.5877 1.37039 14.5555 1.38714 14.5115 1.40874C14.4233 1.45198 14.2883 1.51447 14.1121 1.58494C13.759 1.72619 13.2451 1.89773 12.6158 2.01215C11.36 2.24049 9.65732 2.24018 7.83541 1.32923C5.67627 0.249653 3.87483 0.231782 2.5873 0.517903C1.95021 0.65948 1.45017 0.872816 1.10381 1.05511C0.930501 1.14633 0.794986 1.23013 0.699205 1.29398C0.651283 1.32593 0.6132 1.35296 0.585195 1.37352C0.571188 1.3838 0.559691 1.39248 0.550731 1.39935L0.539194 1.40829L0.534856 1.41171L0.533046 1.41315L0.532231 1.4138C0.532231 1.4138 0.541771 1.40623 0.550731 1.39935L0.532231 1.4138L0.437651 1.48946C0.319044 1.58435 0.25 1.728 0.25 1.87989V17.5C0.25 17.7762 0.473858 18 0.75 18H1.25C1.52614 18 1.75 17.7761 1.75 17.5V12.0238C1.75 11.8845 1.80713 11.7502 1.91474 11.6617C1.91887 11.6583 1.92302 11.6549 1.92722 11.6515C2.17885 11.4462 2.54916 11.1953 3.02183 11.0115C3.93241 10.6574 5.30869 10.5149 7.1025 11.636C9.30263 13.0111 11.3886 13.0161 12.9162 12.6689C13.6743 12.4966 14.2939 12.2385 14.726 12.0224C14.9427 11.9141 15.1139 11.8155 15.2339 11.742C15.2939 11.7052 15.3412 11.6745 15.3751 11.652C15.3888 11.6429 15.4003 11.6351 15.4096 11.6287C15.4137 11.6259 15.4178 11.6229 15.4219 11.6201C15.4241 11.6185 15.4265 11.6169 15.4285 11.6156C15.4405 11.608 15.4644 11.5911 15.4781 11.5814C15.4849 11.5766 15.4918 11.5719 15.4988 11.5674L15.543 11.539L15.6012 11.4944C15.6292 11.473 15.6551 11.449 15.6756 11.4203C15.707 11.3766 15.75 11.3071 15.75 11.2549V1.56926C15.75 1.18534 15.3353 0.944659 15.0019 1.13514L14.6301 1.34761L14.6284 1.34856Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

3
ui/app/img/emojiCategories/food.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7177 4.3283C10.8062 4.40695 10.9467 4.35594 10.9647 4.23893C11.0668 3.5718 11.1919 2.84229 11.3321 2.20598C11.4496 1.67229 11.5893 1.14803 11.7547 0.779609C11.8264 0.620009 11.9567 0.360819 12.1859 0.187028C12.3199 0.0854382 12.5319 -0.0193658 12.8001 0.00200567C13.0649 0.0231038 13.2564 0.157121 13.3728 0.273597C13.8487 0.749447 14.215 1.5614 14.4431 2.13848C14.5083 2.30327 14.6962 2.38332 14.8612 2.31861C14.9331 2.29037 15.007 2.26258 15.0821 2.23576C15.4357 2.10957 15.8577 1.99012 16.2674 1.96235C16.6553 1.93605 17.2023 1.98175 17.6083 2.38775C18.0143 2.79375 18.06 3.34071 18.0337 3.72868C18.0059 4.13834 17.8865 4.56037 17.7603 4.91392C17.7335 4.98907 17.7057 5.06292 17.6775 5.1349C17.6127 5.29985 17.6928 5.48779 17.8576 5.55292C18.4347 5.78103 19.2466 6.14738 19.7225 6.62323C19.8361 6.73689 19.9669 6.92215 19.9925 7.17877C20.0187 7.44104 19.9227 7.65309 19.823 7.79129C19.6537 8.02591 19.3971 8.15805 19.2434 8.22902C18.8871 8.39357 18.3804 8.53148 17.8652 8.64724C17.3024 8.7737 16.6605 8.88832 16.0508 8.98543C16.019 8.9905 16.0074 9.03027 16.0315 9.05167C17.0201 9.93046 16.9023 11.5023 15.7796 12.2017C11.2579 15.019 1.30454 21.0046 0.149846 19.8501C-1.02164 18.6787 5.03373 8.93762 7.74241 4.72685C8.39981 3.70491 9.80955 3.52101 10.7177 4.3283ZM13.4868 4.00804C13.5763 4.31912 13.9334 4.46441 14.2147 4.30424L14.4905 4.14717L14.4933 4.1456L14.5082 4.13734C14.522 4.1297 14.5434 4.11794 14.5717 4.10285C14.6282 4.07261 14.7112 4.02927 14.8135 3.97897C15.0201 3.87744 15.2962 3.75203 15.5864 3.64848C15.8842 3.54217 16.1577 3.47323 16.3688 3.45891C16.467 3.45226 16.5438 3.52902 16.5371 3.62723C16.5228 3.83841 16.4539 4.11186 16.3476 4.4097C16.244 4.69982 16.1186 4.97598 16.0171 5.18253C15.9668 5.28485 15.9234 5.36789 15.8932 5.4244C15.8781 5.45261 15.8664 5.47408 15.8587 5.48789L15.8505 5.50272L15.8487 5.50584L15.6918 5.78137C15.5317 6.06267 15.6769 6.41972 15.988 6.50926L16.2934 6.59717L16.2963 6.59802L16.3102 6.60212C16.323 6.6059 16.3427 6.61177 16.3684 6.61962C16.4198 6.63533 16.4953 6.6589 16.5885 6.68946C16.7757 6.7508 17.0313 6.83926 17.3062 6.9479C17.3885 6.98043 17.4697 7.0137 17.549 7.04749C17.6143 7.07527 17.6055 7.16818 17.5363 7.18373C16.6689 7.37863 15.5761 7.54789 14.7329 7.66452C14.5887 7.68448 14.4432 7.63985 14.3343 7.54308L12.4693 5.88527C12.3455 5.7752 12.2841 5.61105 12.3063 5.44686C12.4199 4.60663 12.5938 3.45106 12.797 2.52855C12.8172 2.43669 12.9397 2.42518 12.9759 2.51199C13.0004 2.57052 13.0245 2.6299 13.0482 2.68988C13.1568 2.96473 13.2453 3.22032 13.3066 3.40751C13.3372 3.50078 13.3607 3.57627 13.3764 3.6277C13.3843 3.65339 13.3902 3.67303 13.3939 3.68581L13.398 3.69973L13.399 3.70306L13.4868 4.00804ZM15.035 10.1728L9.72122 5.44943C9.49152 5.24525 9.15623 5.30167 9.00397 5.53838C8.52756 6.27897 7.94922 7.18826 7.32638 8.18948C7.21938 8.36147 7.2743 8.58731 7.44571 8.69522C7.75815 8.89191 8.1684 9.16374 8.4805 9.42416C8.82809 9.71419 9.22709 10.1146 9.52682 10.4275C9.67953 10.5869 9.81188 10.7292 9.90617 10.8319C9.95337 10.8833 9.99118 10.9248 10.0174 10.9538L10.0478 10.9875L10.056 10.9966L10.0592 11.0003C10.3352 11.3091 10.3086 11.7833 9.99974 12.0593C9.6909 12.3352 9.2168 12.3086 8.94079 11.9998L8.93896 11.9978L8.93229 11.9903L8.90515 11.9603C8.88119 11.9338 8.84593 11.895 8.80151 11.8466C8.71257 11.7498 8.58755 11.6153 8.44369 11.4652C8.15026 11.1589 7.79926 10.8093 7.51948 10.5759C7.28799 10.3827 6.94824 10.1545 6.64657 9.96462C6.4823 9.8612 6.26612 9.91478 6.16567 10.0809C5.99097 10.3698 5.81557 10.6619 5.64055 10.9558C5.61088 11.0056 5.61613 11.0681 5.64569 11.118C5.65223 11.129 5.6598 11.1392 5.66895 11.1482C5.71875 11.1972 5.81316 11.2845 5.98057 11.4242C6.32816 11.7142 6.72716 12.1146 7.02689 12.4275C7.1796 12.5869 7.31195 12.7292 7.40624 12.8319C7.45344 12.8833 7.49125 12.9248 7.51747 12.9538L7.54787 12.9875L7.55606 12.9966L7.55918 13.0001C7.83518 13.309 7.80867 13.7833 7.49981 14.0593C7.19097 14.3352 6.71688 14.3086 6.44087 13.9998L6.43903 13.9978L6.43236 13.9903L6.40522 13.9603C6.38127 13.9338 6.346 13.895 6.30159 13.8466C6.21265 13.7498 6.08763 13.6153 5.94376 13.4652C5.65033 13.1589 5.29933 12.8093 5.01956 12.5759C4.90494 12.4802 4.73024 12.5087 4.65592 12.6381C4.36351 13.1474 4.07835 13.6539 3.80602 14.15L2.47393 16.8766C2.26632 17.3016 2.71015 17.7506 3.13748 17.5479L5.99665 16.1916C9.14847 14.5119 12.7325 12.3329 14.9864 10.9286C15.24 10.7706 15.2912 10.4005 15.035 10.1728Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

3
ui/app/img/emojiCategories/nature.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.67442 16.3332C1.70882 16.1757 1.66832 16.0118 1.56828 15.8855C0.0992235 14.0303 -1.00899 10.402 1.44145 7.04837C5.44474 1.56948 15.753 -1.16994 17.4044 0.47374C19.0557 2.11742 17.4044 12.1785 10.799 16.3624C7.77553 18.2775 5.40153 18.2887 3.69218 17.5332C3.36814 17.39 2.97367 17.57 2.93619 17.9223C2.89048 18.352 2.86682 18.7944 2.86682 19.2501C2.86682 19.6643 2.53103 20.0001 2.11682 20.0001C1.7026 20.0001 1.36682 19.6643 1.36682 19.2501C1.36682 18.217 1.4749 17.2465 1.67442 16.3332ZM2.65259 7.93332C4.40146 5.53983 7.6577 3.62009 10.8061 2.50387C12.3598 1.95304 13.8022 1.62893 14.9083 1.53132C15.4643 1.48226 15.8858 1.49501 16.1714 1.54074C16.2794 1.55803 16.3657 1.63708 16.392 1.74327C16.3956 1.75769 16.3992 1.77284 16.4028 1.78873C16.468 2.07609 16.5094 2.49165 16.4982 3.03021C16.4758 4.10357 16.2484 5.50264 15.7686 7.0107C14.8012 10.051 12.9016 13.255 9.99639 15.0952C8.1008 16.2959 6.63549 16.5763 5.56703 16.4835C4.83611 16.4201 4.21423 16.1756 3.69661 15.8301C3.52368 15.7147 3.45858 15.495 3.52792 15.299C5.02732 11.0608 8.85961 8.232 12.7575 5.89323C13.1127 5.68012 13.2279 5.21943 13.0148 4.86424C12.8017 4.50906 12.341 4.39388 11.9858 4.60699C8.48841 6.70543 4.68886 9.38789 2.72054 13.3591C2.53508 13.7333 2.00874 13.7586 1.86592 13.3662C1.31118 11.8419 1.26643 9.83042 2.65259 7.93332Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

4
ui/app/img/emojiCategories/objects.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.35614 14.8391C7.35614 16.0317 6.3846 16.9985 5.18614 16.9985C3.98768 16.9985 3.01614 16.0317 3.01614 14.8391C3.01614 13.6465 3.98768 12.6797 5.18614 12.6797C6.3846 12.6797 7.35614 13.6465 7.35614 14.8391ZM5.84807 14.8391C5.84807 15.2029 5.55172 15.4978 5.18614 15.4978C4.82057 15.4978 4.52421 15.2029 4.52421 14.8391C4.52421 14.4753 4.82057 14.1804 5.18614 14.1804C5.55172 14.1804 5.84807 14.4753 5.84807 14.8391Z" fill="#939BA1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.1478 9.0812C15.1005 9.27303 14.9442 9.41919 14.7489 9.45426L13.7802 9.62817C13.5611 9.66751 13.3941 9.84556 13.3698 10.0658L13.2137 11.4777C13.2007 11.5955 13.1461 11.7049 13.0596 11.7863L12.152 12.6412C12.0267 12.7592 11.9725 12.9326 11.998 13.1023C12.0419 13.3942 12.0646 13.693 12.0646 13.9971C12.0646 17.3124 9.36382 20 6.03229 20C2.70075 20 0 17.3124 0 13.9971C0 10.6817 2.70075 7.99414 6.03229 7.99414C6.72826 7.99414 7.39671 8.11143 8.01876 8.32723C8.20897 8.39322 8.42242 8.35344 8.56606 8.21291L16.8142 0.143518C16.9083 0.0515412 17.0348 0 17.1667 0H19.4971C19.8164 0 20.0547 0.292289 19.9891 0.603182L19.1655 4.50062C19.1295 4.67113 19.0069 4.8107 18.8419 4.86904L17.9524 5.18361C17.8038 5.23618 17.6886 5.35511 17.6413 5.50485L17.2408 6.77166C17.1902 6.93162 17.0624 7.05573 16.9005 7.10219L15.8191 7.41248C15.6462 7.46211 15.5131 7.59996 15.4702 7.77391L15.1478 9.0812ZM10.5565 13.9971C10.5565 13.6498 10.517 13.3117 10.4422 12.9871L10.4329 12.9595C10.3759 12.7914 10.3116 12.6264 10.2404 12.4649C10.2279 12.4366 10.2343 12.4035 10.2567 12.382L11.7095 10.9916C11.7389 10.9639 11.7574 10.9268 11.7618 10.8868L11.9939 8.78784C12.0182 8.56762 12.1852 8.38957 12.4043 8.35024L13.5176 8.15036C13.7129 8.11529 13.8693 7.96912 13.9166 7.77729L14.2137 6.5726C14.2566 6.39864 14.3896 6.26079 14.5626 6.21116L15.7049 5.88339C15.8668 5.83693 15.9946 5.71282 16.0451 5.55285L16.4282 4.34117C16.4755 4.19143 16.5908 4.07249 16.7394 4.01993L17.5401 3.73675C17.7051 3.6784 17.8277 3.53883 17.8637 3.36832L18.1533 1.99802C18.2074 1.74171 18.0109 1.50073 17.7477 1.50073C17.639 1.50073 17.5347 1.54323 17.4572 1.61905L9.68733 9.22115L8.59873 10.2834C8.59681 10.2852 8.59382 10.2855 8.59161 10.284C7.86375 9.7862 6.9822 9.49487 6.03229 9.49487C3.53363 9.49487 1.50807 11.5106 1.50807 13.9971C1.50807 16.4836 3.53363 18.4993 6.03229 18.4993C8.53094 18.4993 10.5565 16.4836 10.5565 13.9971Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

4
ui/app/img/emojiCategories/recent.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.75 5C10.75 4.58579 10.4142 4.25 10 4.25C9.58579 4.25 9.25 4.58579 9.25 5V9.17157C9.25 9.90092 9.53973 10.6004 10.0555 11.1161L12.4697 13.5303C12.7626 13.8232 13.2374 13.8232 13.5303 13.5303C13.8232 13.2374 13.8232 12.7626 13.5303 12.4697L11.1161 10.0555C10.8817 9.82104 10.75 9.50309 10.75 9.17157V5Z" fill="#939BA1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM18.5 10C18.5 14.6944 14.6944 18.5 10 18.5C5.30558 18.5 1.5 14.6944 1.5 10C1.5 5.30558 5.30558 1.5 10 1.5C14.6944 1.5 18.5 5.30558 18.5 10Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 755 B

6
ui/app/img/emojiCategories/smileys.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18.5C14.6944 18.5 18.5 14.6944 18.5 10C18.5 5.30558 14.6944 1.5 10 1.5C5.30558 1.5 1.5 5.30558 1.5 10C1.5 14.6944 5.30558 18.5 10 18.5ZM10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z" fill="#939BA1"/>
<path d="M8 7.5C8 8.60457 7.32843 9.5 6.5 9.5C5.67157 9.5 5 8.60457 5 7.5C5 6.39543 5.67157 5.5 6.5 5.5C7.32843 5.5 8 6.39543 8 7.5Z" fill="#939BA1"/>
<path d="M15 7.5C15 8.60457 14.3284 9.5 13.5 9.5C12.6716 9.5 12 8.60457 12 7.5C12 6.39543 12.6716 5.5 13.5 5.5C14.3284 5.5 15 6.39543 15 7.5Z" fill="#939BA1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.21503 12.583C5.8054 12.5438 5.52184 12.9767 5.77891 13.298C6.56848 14.2849 7.87982 15.25 10 15.25C12.1202 15.25 13.4315 14.2849 14.2211 13.298C14.4782 12.9767 14.1946 12.5438 13.785 12.583C12.8165 12.6756 11.5548 12.75 10 12.75C8.44522 12.75 7.18353 12.6756 6.21503 12.583ZM3.79304 11.3251C4.0663 11.0114 4.49491 10.8441 4.9398 10.9141C5.83452 11.0549 7.52114 11.25 10 11.25C12.4789 11.25 14.1655 11.0549 15.0602 10.9141C15.5051 10.8441 15.9337 11.0114 16.207 11.3251C16.4897 11.6497 16.6 12.1312 16.3925 12.5916C15.7587 13.998 13.9925 16.75 10 16.75C6.00747 16.75 4.24127 13.998 3.60749 12.5916C3.4 12.1312 3.51032 11.6497 3.79304 11.3251Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

3
ui/app/img/emojiCategories/symbols.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3664 4.56842C10.1666 4.80609 9.80081 4.80609 9.601 4.56842L8.1734 2.87029C6.3915 0.750711 3.0539 1.23373 1.92088 3.77515C1.17513 5.44792 1.45061 7.38885 2.62657 8.72377C3.31889 9.50967 4.0066 10.2696 4.52052 10.7936C5.21037 11.497 6.74607 12.7084 8.20221 13.8037C8.7455 14.2123 9.26091 14.5924 9.69022 14.9059C9.86512 15.0336 10.1023 15.0336 10.2772 14.9059C10.7065 14.5924 11.222 14.2123 11.7652 13.8037C13.2214 12.7084 14.7571 11.497 15.4469 10.7936C16.133 10.0942 16.8065 9.36247 17.415 8.67854C18.5584 7.39331 18.816 5.50105 18.0771 3.84364C16.9299 1.27029 13.5503 0.781206 11.746 2.92742L10.3664 4.56842ZM8.97671 1.50089C6.41431 -1.03677 2.06856 -0.268184 0.549337 3.13952C-0.435296 5.34811 -0.084269 7.94527 1.50572 9.75019C2.20127 10.5398 2.91128 11.3252 3.4552 11.8798C4.79717 13.248 8.61968 16.0216 9.6976 16.7954C9.87028 16.9194 10.0972 16.9194 10.2699 16.7954C11.3478 16.0216 15.1703 13.248 16.5123 11.8798C17.22 11.1582 17.9108 10.4075 18.5309 9.71056C20.106 7.94006 20.4188 5.38413 19.4487 3.20801C17.9256 -0.208368 13.5867 -0.99573 10.9953 1.50629C10.8592 1.63768 10.7279 1.77813 10.6021 1.92775L10.3664 2.20811C10.1666 2.44578 9.80081 2.44578 9.601 2.20811L9.31728 1.87063C9.2078 1.7404 9.09413 1.61717 8.97671 1.50089Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

4
ui/app/img/emojiCategories/travel.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

2
ui/nim-status-client.pro
View File

@ -134,8 +134,10 @@ DISTFILES += \
app/AppLayouts/Chat/ChatColumn/MessageComponents/UsernameLabel.qml \
app/AppLayouts/Chat/ChatColumn/MessageComponents/qmldir \
app/AppLayouts/Chat/ContactsColumn/ClosedEmptyView.qml \
app/AppLayouts/Chat/components/EmojiCategoryButton.qml \
app/AppLayouts/Chat/components/EmojiPopup.qml \
app/AppLayouts/Chat/components/EmojiReaction.qml \
app/AppLayouts/Chat/components/EmojiSection.qml \
app/AppLayouts/Chat/components/InviteFriendsPopup.qml \
app/AppLayouts/Profile/LeftTab/Constants.js \
app/AppLayouts/Profile/LeftTab/components/MenuButton.qml \