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

refactor: move emoji suggestion to own component and make it reusable

This commit is contained in:
Jonathan Rainville 2020-10-20 11:32:03 -04:00 committed by Iuri Matias
parent d2a4a9cfd5
commit 676549cccd
4 changed files with 134 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -393,4 +393,6 @@ DISTFILES += \
shared/img/loading.svg \
shared/img/status-logo.png \
shared/qmldir \
shared/status/StatusEmojiSuggestionPopup.qml \
shared/status/StatusInputListPopup.qml \
sounds/ErrorSound.qml

96
ui/shared/status/StatusChatInput.qml
View File

@ -98,10 +98,10 @@ Rectangle {
}
if (event.key === Qt.Key_Down) {
return emojiList.incrementCurrentIndex()
return emojiSuggestions.listView.incrementCurrentIndex()
}
if (event.key === Qt.Key_Up) {
return emojiList.decrementCurrentIndex()
return emojiSuggestions.listView.decrementCurrentIndex()
}
isColonPressed = (event.key === Qt.Key_Colon) && (event.modifiers & Qt.ShiftModifier);
@ -338,98 +338,8 @@ Rectangle {
standardButtons: StandardButton.Ok
}
Popup {
property var emojis
property string shortname
function openPopup(emojisParam, shortnameParam) {
emojis = emojisParam
shortname = shortnameParam
emojiSuggestions.open()
}
function addEmoji(index) {
if (index === undefined) {
index = emojiList.currentIndex
}
const message = extrapolateCursorPosition();
const unicode = emojiSuggestions.emojis[index].unicode_alternates || emojiSuggestions.emojis[index].unicode
replaceWithEmoji(message, emojiSuggestions.shortname, unicode)
}
StatusEmojiSuggestionPopup {
id: emojiSuggestions
width: messageInput.width
height: Math.min(400, emojiList.contentHeight + Style.current.smallPadding)
x : messageInput.x
y: -height
background: Rectangle {
id: bgRectangle
visible: !!emojiSuggestions.emojis && emojiSuggestions.emojis.length > 0
color: Style.current.background
border.width: 0
radius: Style.current.radius
layer.enabled: true
layer.effect: DropShadow{
width: bgRectangle.width
height: bgRectangle.height
x: bgRectangle.x
y: bgRectangle.y + 10
visible: bgRectangle.visible
source: bgRectangle
horizontalOffset: 0
verticalOffset: 2
radius: 10
samples: 15
color: "#22000000"
}
}
ListView {
id: emojiList
model: emojiSuggestions.emojis || []
keyNavigationEnabled: true
anchors.fill: parent
clip: true
delegate: Rectangle {
id: rectangle
color: emojiList.currentIndex === index ? Style.current.backgroundHover : Style.current.transparent
border.width: 0
width: parent.width
height: 42
radius: Style.current.radius
SVGImage {
id: emojiImage
source: `../../imports/twemoji/26x26/${modelData.unicode}.png`
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: Style.current.smallPadding
}
StyledText {
text: modelData.shortname
color: Style.current.textColor
anchors.verticalCenter: parent.verticalCenter
anchors.left: emojiImage.right
anchors.leftMargin: Style.current.smallPadding
font.pixelSize: 15
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
hoverEnabled: true
onEntered: {
emojiList.currentIndex = index
}
onClicked: {
emojiSuggestions.addEmoji(index)
}
}
}
}
}
StatusChatCommandsPopup {

37
ui/shared/status/StatusEmojiSuggestionPopup.qml Normal file
View File

@ -0,0 +1,37 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.12
import QtQuick.Dialogs 1.3
import "../../imports"
import "../../shared"
StatusInputListPopup {
property string shortname
id: emojiSuggestions
getImageSource: function (modelData) {
return `../../imports/twemoji/26x26/${modelData.unicode}.png`
}
getText: function (modelData) {
return modelData.shortname
}
onClicked: function (index) {
emojiSuggestions.addEmoji(index)
}
function openPopup(emojisParam, shortnameParam) {
modelList = emojisParam
shortname = shortnameParam
emojiSuggestions.open()
}
function addEmoji(index) {
if (index === undefined) {
index = listView.currentIndex
}
const message = extrapolateCursorPosition();
const unicode = emojiSuggestions.modelList[index].unicode_alternates || emojiSuggestions.modelList[index].unicode
replaceWithEmoji(message, emojiSuggestions.shortname, unicode)
}
}

92
ui/shared/status/StatusInputListPopup.qml Normal file
View File

@ -0,0 +1,92 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.12
import QtQuick.Dialogs 1.3
import "../../imports"
import "../../shared"
Popup {
property var modelList
property alias listView: listView
property var getImageSource: function () {}
property var getText: function () {}
property var onClicked: function () {}
function openPopup(listParam) {
modelList = listParam
popup.open()
}
id: popup
width: messageInput.width
height: Math.min(400, listView.contentHeight + Style.current.smallPadding)
x : messageInput.x
y: -height
background: Rectangle {
id: bgRectangle
visible: !!popup.modelList && popup.modelList.length > 0
color: Style.current.background
border.width: 0
radius: Style.current.radius
layer.enabled: true
layer.effect: DropShadow{
width: bgRectangle.width
height: bgRectangle.height
x: bgRectangle.x
y: bgRectangle.y + 10
visible: bgRectangle.visible
source: bgRectangle
horizontalOffset: 0
verticalOffset: 2
radius: 10
samples: 15
color: "#22000000"
}
}
ListView {
id: listView
model: popup.modelList || []
keyNavigationEnabled: true
anchors.fill: parent
clip: true
delegate: Rectangle {
id: rectangle
color: listView.currentIndex === index ? Style.current.backgroundHover : Style.current.transparent
border.width: 0
width: parent.width
height: 42
radius: Style.current.radius
SVGImage {
id: image
source: popup.getImageSource(modelData)
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: Style.current.smallPadding
}
StyledText {
text: popup.getText(modelData)
color: Style.current.textColor
anchors.verticalCenter: parent.verticalCenter
anchors.left: image.right
anchors.leftMargin: Style.current.smallPadding
font.pixelSize: 15
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
hoverEnabled: true
onEntered: {
listView.currentIndex = index
}
onClicked: {
popup.onClicked(index)
}
}
}
}
}