d3v1l/matrixion
1
0
Fork 0
mirror of https://github.com/Nheko-Reborn/nheko.git synced 2024-11-21 18:50:47 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make emoji picker use the grid view

Browse source
This commit is contained in:
Nicolas Werner 2023-05-25 19:07:13 +02:00
parent 5c64dd682c
commit f01940f57c
No known key found for this signature in database
GPG key ID: C8D75E610773F2D9
6 changed files with 248 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
resources/qml/Avatar.qml
View file

@ -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 "";
}
}

12
resources/qml/MessageInput.qml
View file

@ -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 {

62
resources/qml/emoji/StickerPicker.qml
View file

@ -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 {

187
src/GridImagePackModel.cpp
View file

@ -4,24 +4,113 @@
#include "GridImagePackModel.h"
#include <QCoreApplication>
#include <QTextBoundaryFinder>
#include <algorithm>
#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<SectionDescription>)
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<StickerImage>();
[[maybe_unused]] static auto id2 = qRegisterMetaType<SectionDescription>();
[[maybe_unused]] static auto id3 = qRegisterMetaType<QList<SectionDescription>>();
[[maybe_unused]] static auto id2 = qRegisterMetaType<TextEmoji>();
[[maybe_unused]] static auto id3 = qRegisterMetaType<SectionDescription>();
[[maybe_unused]] static auto id4 = qRegisterMetaType<QList<SectionDescription>>();
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<std::uint32_t, std::uint32_t> key{packIndex, emojiIndex};
QString string1 = emoji.shortcode.toCaseFolded();
QString string2 = emoji.unicodeName.toCaseFolded();
if (!string1.isEmpty()) {
trie_.insert<ElementRank::first>(string1.toUcs4(), key);
insertParts(string1, key);
}
if (!string2.isEmpty()) {
trie_.insert<ElementRank::first>(string2.toUcs4(), key);
insertParts(string2, key);
}
emojiIndex++;
}
std::uint32_t imgIndex = 0;
for (const auto &img : pack.images) {
std::pair<std::uint32_t, std::uint32_t> 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<std::size_t>(index.row()) - pack.firstRow;
QList<StickerImage> 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<StickerImage> 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<TextEmoji> 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<StickerImage> 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<StickerImage> 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<TextEmoji> 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 {};

22
src/GridImagePackModel.h
View file

@ -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(
"<img data-mx-emoticon height=\"32\" src=\"%1\" alt=\"%2\" title=\"%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<std::pair<mtx::events::msc2545::PackImage, QString>> images;
std::vector<TextEmoji> emojis;
std::size_t firstRow;
};

3
src/timeline/TimelineViewManager.cpp
View file

@ -478,6 +478,9 @@ TimelineViewManager::completerFor(const QString &completerName, const QString &r
auto proxy = new CompletionProxyModel(stickerModel, 1, static_cast<size_t>(-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;