diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 9b41621169..2ec23c7fca 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -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 diff --git a/ui/shared/status/StatusChatInput.qml b/ui/shared/status/StatusChatInput.qml index b111327b55..ab5ff0acba 100644 --- a/ui/shared/status/StatusChatInput.qml +++ b/ui/shared/status/StatusChatInput.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 { diff --git a/ui/shared/status/StatusEmojiSuggestionPopup.qml b/ui/shared/status/StatusEmojiSuggestionPopup.qml new file mode 100644 index 0000000000..c219a4fd2c --- /dev/null +++ b/ui/shared/status/StatusEmojiSuggestionPopup.qml @@ -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) + } +} diff --git a/ui/shared/status/StatusInputListPopup.qml b/ui/shared/status/StatusInputListPopup.qml new file mode 100644 index 0000000000..a5a3ce6a54 --- /dev/null +++ b/ui/shared/status/StatusInputListPopup.qml @@ -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) + } + } + } + } +}