refactor: move emoji suggestion to own component and make it reusable
This commit is contained in:
Jonathan Rainville
Iuri Matias
parent
d2a4a9cfd5
commit
676549cccd
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue