From f01940f57cd3365b42065dc8128dcbbdafca99f8 Mon Sep 17 00:00:00 2001 From: Nicolas Werner Date: Thu, 25 May 2023 19:07:13 +0200 Subject: [PATCH] Make emoji picker use the grid view --- resources/qml/Avatar.qml | 8 +- resources/qml/MessageInput.qml | 12 +- resources/qml/emoji/StickerPicker.qml | 62 +++++++-- src/GridImagePackModel.cpp | 187 +++++++++++++++++++++----- src/GridImagePackModel.h | 22 +++ src/timeline/TimelineViewManager.cpp | 3 + 6 files changed, 248 insertions(+), 46 deletions(-) diff --git a/resources/qml/Avatar.qml b/resources/qml/Avatar.qml index f761b1f5..4951a9fb 100644 --- a/resources/qml/Avatar.qml +++ b/resources/qml/Avatar.qml @@ -60,7 +60,13 @@ AbstractButton { smooth: true sourceSize.width: avatar.width * Screen.devicePixelRatio sourceSize.height: avatar.height * Screen.devicePixelRatio - source: avatar.url ? (avatar.url + "?radius=" + (Settings.avatarCircles ? 100 : 25) + ((avatar.crop) ? "" : "&scale")) : "" + source: if (avatar.url.startsWith('image://')) { + return avatar.url + "?radius=" + (Settings.avatarCircles ? 100 : 25) + ((avatar.crop) ? "" : "&scale"); + } else if (avatar.url.startsWith(':/')) { + return "image://colorimage/" + avatar.url + "?" + textColor; + } else { + return ""; + } } diff --git a/resources/qml/MessageInput.qml b/resources/qml/MessageInput.qml index 14f27fff..9bdf1f60 100644 --- a/resources/qml/MessageInput.qml +++ b/resources/qml/MessageInput.qml @@ -441,6 +441,7 @@ Rectangle { id: stickerPopup colors: Nheko.colors + emoji: false } } @@ -456,10 +457,17 @@ Rectangle { image: ":/icons/icons/ui/smile.svg" ToolTip.visible: hovered ToolTip.text: qsTr("Emoji") - onClicked: emojiPopup.visible ? emojiPopup.close() : emojiPopup.show(emojiButton, function(emoji) { - messageInput.insert(messageInput.cursorPosition, emoji); + onClicked: emojiPopup2.visible ? emojiPopup2.close() : emojiPopup2.show(emojiButton, room.roomId, function(plaintext, markdown) { + messageInput.insert(messageInput.cursorPosition, markdown); TimelineManager.focusMessageInput(); }) + + StickerPicker { + id: emojiPopup2 + + colors: Nheko.colors + emoji: true + } } ImageButton { diff --git a/resources/qml/emoji/StickerPicker.qml b/resources/qml/emoji/StickerPicker.qml index 69f065ed..2f9283f4 100644 --- a/resources/qml/emoji/StickerPicker.qml +++ b/resources/qml/emoji/StickerPicker.qml @@ -17,13 +17,14 @@ Menu { property var colors property string roomid property alias model: gridView.model + required property bool emoji property var textArea property real highlightHue: Nheko.colors.highlight.hslHue property real highlightSat: Nheko.colors.highlight.hslSaturation property real highlightLight: Nheko.colors.highlight.hslLightness - readonly property int stickerDim: 128 - readonly property int stickerDimPad: 128 + Nheko.paddingSmall - readonly property int stickersPerRow: 3 + readonly property int stickerDim: emoji ? 48 : 128 + readonly property int stickerDimPad: stickerDim + Nheko.paddingSmall + readonly property int stickersPerRow: emoji ? 7 : 3 readonly property int sidebarAvatarSize: 24 function show(showAt, roomid_, callback) { @@ -110,10 +111,10 @@ Menu { ListView { id: gridView - model: roomid ? TimelineManager.completerFor("stickergrid", roomid) : null + model: roomid ? TimelineManager.completerFor(stickerPopup.emoji ? "emojigrid" : "stickergrid", roomid) : null Layout.row: 1 Layout.column: 1 - Layout.preferredHeight: cellHeight * 3.5 + Layout.preferredHeight: cellHeight * (stickersPerRow + 0.5) Layout.preferredWidth: stickersPerRow * stickerDimPad + 20 - Nheko.paddingSmall property int cellHeight: stickerDimPad boundsBehavior: Flickable.StopAtBounds @@ -157,23 +158,58 @@ Menu { model: row delegate: AbstractButton { + id: del + + required property var modelData + width: stickerDim height: stickerDim hoverEnabled: true - ToolTip.text: ":" + modelData.shortcode + ": - " + modelData.body + ToolTip.text: ":" + modelData.shortcode + ": - " + (modelData.unicode ? model.unicodeName : modelData.body) ToolTip.visible: hovered // TODO: maybe add favorites at some point? onClicked: { - console.debug("Picked " + modelData.descriptor); + console.debug("Picked " + modelData); stickerPopup.close(); - callback(modelData.descriptor); + if (!stickerPopup.emoji) { + // return descriptor to calculate sticker to send + callback(modelData.descriptor); + } else if (modelData.unicode) { + // return the emoji unicode as both plain text and markdown + callback(modelData.unicode, modelData.unicode); + } else { + // return the emoji url as plain text and a markdown link as markdown + callback(modelData.url, modelData.markdown); + } } - contentItem: Image { - height: stickerDim - width: stickerDim - source: modelData.url.replace("mxc://", "image://MxcImage/") + "?scale" - fillMode: Image.PreserveAspectFit + contentItem: DelegateChooser { + roleValue: del.modelData.unicode != undefined + + DelegateChoice { + roleValue: true + + Text { + width: stickerDim + height: stickerDim + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.family: Settings.emojiFont + font.pixelSize: 36 + text: del.modelData.unicode.replace('\ufe0f', '') + color: Nheko.colors.text + } + } + + DelegateChoice { + roleValue: false + Image { + height: stickerDim + width: stickerDim + source: del.modelData.url.replace("mxc://", "image://MxcImage/") + "?scale" + fillMode: Image.PreserveAspectFit + } + } } background: Rectangle { diff --git a/src/GridImagePackModel.cpp b/src/GridImagePackModel.cpp index 5db8c0cc..469858a1 100644 --- a/src/GridImagePackModel.cpp +++ b/src/GridImagePackModel.cpp @@ -4,24 +4,113 @@ #include "GridImagePackModel.h" +#include #include #include #include "Cache.h" #include "Cache_p.h" +#include "emoji/Provider.h" Q_DECLARE_METATYPE(StickerImage) +Q_DECLARE_METATYPE(TextEmoji) Q_DECLARE_METATYPE(SectionDescription) Q_DECLARE_METATYPE(QList) +static QString +categoryToName(emoji::Emoji::Category cat) +{ + switch (cat) { + case emoji::Emoji::Category::People: + return QCoreApplication::translate("emoji-catagory", "People"); + case emoji::Emoji::Category::Nature: + return QCoreApplication::translate("emoji-catagory", "Nature"); + case emoji::Emoji::Category::Food: + return QCoreApplication::translate("emoji-catagory", "Food"); + case emoji::Emoji::Category::Activity: + return QCoreApplication::translate("emoji-catagory", "Activity"); + case emoji::Emoji::Category::Travel: + return QCoreApplication::translate("emoji-catagory", "Travel"); + case emoji::Emoji::Category::Objects: + return QCoreApplication::translate("emoji-catagory", "Objects"); + case emoji::Emoji::Category::Symbols: + return QCoreApplication::translate("emoji-catagory", "Symbols"); + case emoji::Emoji::Category::Flags: + return QCoreApplication::translate("emoji-catagory", "Flags"); + default: + return ""; + } +} + +static QString +categoryToIcon(emoji::Emoji::Category cat) +{ + switch (cat) { + case emoji::Emoji::Category::People: + return QStringLiteral(":/icons/icons/emoji-categories/people.svg"); + case emoji::Emoji::Category::Nature: + return QStringLiteral(":/icons/icons/emoji-categories/nature.svg"); + case emoji::Emoji::Category::Food: + return QStringLiteral(":/icons/icons/emoji-categories/foods.svg"); + case emoji::Emoji::Category::Activity: + return QStringLiteral(":/icons/icons/emoji-categories/activity.svg"); + case emoji::Emoji::Category::Travel: + return QStringLiteral(":/icons/icons/emoji-categories/travel.svg"); + case emoji::Emoji::Category::Objects: + return QStringLiteral(":/icons/icons/emoji-categories/objects.svg"); + case emoji::Emoji::Category::Symbols: + return QStringLiteral(":/icons/icons/emoji-categories/symbols.svg"); + case emoji::Emoji::Category::Flags: + return QStringLiteral(":/icons/icons/emoji-categories/flags.svg"); + default: + return ""; + } +} + GridImagePackModel::GridImagePackModel(const std::string &roomId, bool stickers, QObject *parent) : QAbstractListModel(parent) , room_id(roomId) + , columns(stickers ? 3 : 7) { [[maybe_unused]] static auto id = qRegisterMetaType(); - [[maybe_unused]] static auto id2 = qRegisterMetaType(); - [[maybe_unused]] static auto id3 = qRegisterMetaType>(); + [[maybe_unused]] static auto id2 = qRegisterMetaType(); + [[maybe_unused]] static auto id3 = qRegisterMetaType(); + [[maybe_unused]] static auto id4 = qRegisterMetaType>(); + + if (!stickers) { + for (const auto &category : { + emoji::Emoji::Category::People, + emoji::Emoji::Category::Nature, + emoji::Emoji::Category::Food, + emoji::Emoji::Category::Activity, + emoji::Emoji::Category::Travel, + emoji::Emoji::Category::Objects, + emoji::Emoji::Category::Symbols, + emoji::Emoji::Category::Flags, + }) { + PackDesc newPack{}; + newPack.packname = categoryToName(category); + newPack.packavatar = categoryToIcon(category); + + auto emojisInCategory = std::ranges::equal_range( + emoji::Provider::emoji, category, {}, &emoji::Emoji::category); + newPack.emojis.reserve(emojisInCategory.size()); + + for (const auto &e : emojisInCategory) { + newPack.emojis.push_back(TextEmoji{.unicode = e.unicode(), + .unicodeName = e.unicodeName(), + .shortcode = e.shortName()}); + } + + size_t packRowCount = + (newPack.emojis.size() / columns) + (newPack.emojis.size() % columns ? 1 : 0); + newPack.firstRow = rowToPack.size(); + for (size_t i = 0; i < packRowCount; i++) + rowToPack.push_back(packs.size()); + packs.push_back(std::move(newPack)); + } + } auto originalPacks = cache::client()->getImagePacks(room_id, stickers); @@ -63,6 +152,25 @@ GridImagePackModel::GridImagePackModel(const std::string &roomId, bool stickers, std::uint32_t packIndex = 0; for (const auto &pack : packs) { + std::uint32_t emojiIndex = 0; + for (const auto &emoji : pack.emojis) { + std::pair key{packIndex, emojiIndex}; + + QString string1 = emoji.shortcode.toCaseFolded(); + QString string2 = emoji.unicodeName.toCaseFolded(); + + if (!string1.isEmpty()) { + trie_.insert(string1.toUcs4(), key); + insertParts(string1, key); + } + if (!string2.isEmpty()) { + trie_.insert(string2.toUcs4(), key); + insertParts(string2, key); + } + + emojiIndex++; + } + std::uint32_t imgIndex = 0; for (const auto &img : pack.images) { std::pair key{packIndex, imgIndex}; @@ -112,20 +220,28 @@ GridImagePackModel::data(const QModelIndex &index, int role) const return nameFromPack(pack); case Roles::Row: { std::size_t offset = static_cast(index.row()) - pack.firstRow; - QList imgs; - auto endOffset = std::min((offset + 1) * columns, pack.images.size()); - for (std::size_t img = offset * columns; img < endOffset; img++) { - const auto &data = pack.images.at(img); - imgs.push_back({.url = QString::fromStdString(data.first.url), - .shortcode = data.second, - .body = QString::fromStdString(data.first.body), - .descriptor_ = std::vector{ - pack.room_id, - pack.state_key, - data.second.toStdString(), - }}); + if (pack.emojis.empty()) { + QList imgs; + auto endOffset = std::min((offset + 1) * columns, pack.images.size()); + for (std::size_t img = offset * columns; img < endOffset; img++) { + const auto &data = pack.images.at(img); + imgs.push_back({.url = QString::fromStdString(data.first.url), + .shortcode = data.second, + .body = QString::fromStdString(data.first.body), + .descriptor_ = std::vector{ + pack.room_id, + pack.state_key, + data.second.toStdString(), + }}); + } + return QVariant::fromValue(imgs); + } else { + auto endOffset = std::min((offset + 1) * columns, pack.emojis.size()); + QList imgs(pack.emojis.begin() + offset * columns, + pack.emojis.begin() + endOffset); + + return QVariant::fromValue(imgs); } - return QVariant::fromValue(imgs); } default: return {}; @@ -142,22 +258,33 @@ GridImagePackModel::data(const QModelIndex &index, int role) const case Roles::PackName: return nameFromPack(pack); case Roles::Row: { - QList imgs; - for (auto img = firstIndex; - imgs.size() < columns && img < currentSearchResult.size() && - currentSearchResult[img].first == firstEntry.first; - img++) { - const auto &data = pack.images.at(currentSearchResult[img].second); - imgs.push_back({.url = QString::fromStdString(data.first.url), - .shortcode = data.second, - .body = QString::fromStdString(data.first.body), - .descriptor_ = std::vector{ - pack.room_id, - pack.state_key, - data.second.toStdString(), - }}); + if (pack.emojis.empty()) { + QList imgs; + for (auto img = firstIndex; + imgs.size() < columns && img < currentSearchResult.size() && + currentSearchResult[img].first == firstEntry.first; + img++) { + const auto &data = pack.images.at(currentSearchResult[img].second); + imgs.push_back({.url = QString::fromStdString(data.first.url), + .shortcode = data.second, + .body = QString::fromStdString(data.first.body), + .descriptor_ = std::vector{ + pack.room_id, + pack.state_key, + data.second.toStdString(), + }}); + } + return QVariant::fromValue(imgs); + } else { + QList emojis; + for (auto emoji = firstIndex; + emojis.size() < columns && emoji < currentSearchResult.size() && + currentSearchResult[emoji].first == firstEntry.first; + emoji++) { + emojis.push_back(pack.emojis.at(currentSearchResult[emoji].second)); + } + return QVariant::fromValue(emojis); } - return QVariant::fromValue(imgs); } default: return {}; diff --git a/src/GridImagePackModel.h b/src/GridImagePackModel.h index c6be3346..7e64f6c4 100644 --- a/src/GridImagePackModel.h +++ b/src/GridImagePackModel.h @@ -20,6 +20,7 @@ struct StickerImage Q_PROPERTY(QString shortcode MEMBER shortcode CONSTANT) Q_PROPERTY(QString body MEMBER body CONSTANT) Q_PROPERTY(QStringList descriptor READ descriptor CONSTANT) + Q_PROPERTY(QString markdown READ markdown CONSTANT) public: QStringList descriptor() const @@ -34,6 +35,13 @@ public: return {}; } + QString markdown() const + { + return QStringLiteral( + "\"%2\"") + .arg(url.toHtmlEscaped(), !body.isEmpty() ? body : shortcode); + } + QString url; QString shortcode; QString body; @@ -54,6 +62,19 @@ public: int firstRowWith = 0; }; +struct TextEmoji +{ + Q_GADGET + Q_PROPERTY(QString unicode MEMBER unicode CONSTANT) + Q_PROPERTY(QString unicodeName MEMBER unicodeName CONSTANT) + Q_PROPERTY(QString shortcode MEMBER shortcode CONSTANT) + +public: + QString unicode; + QString unicodeName; + QString shortcode; +}; + class GridImagePackModel final : public QAbstractListModel { Q_OBJECT @@ -90,6 +111,7 @@ private: std::string room_id, state_key; std::vector> images; + std::vector emojis; std::size_t firstRow; }; diff --git a/src/timeline/TimelineViewManager.cpp b/src/timeline/TimelineViewManager.cpp index 4b171dc4..4b6a791f 100644 --- a/src/timeline/TimelineViewManager.cpp +++ b/src/timeline/TimelineViewManager.cpp @@ -478,6 +478,9 @@ TimelineViewManager::completerFor(const QString &completerName, const QString &r auto proxy = new CompletionProxyModel(stickerModel, 1, static_cast(-1) / 4); stickerModel->setParent(proxy); return proxy; + } else if (completerName == QLatin1String("emojigrid")) { + auto stickerModel = new GridImagePackModel(roomId.toStdString(), false); + return stickerModel; } else if (completerName == QLatin1String("stickergrid")) { auto stickerModel = new GridImagePackModel(roomId.toStdString(), true); return stickerModel;