mirror
/
nheko
mirror of https://github.com/Nheko-Reborn/nheko
2
0
Fork 1
Code Issues Releases Wiki Activity

Make emoji picker use the grid view

Browse Source
emojigrid
Nicolas Werner 2 years ago
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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      resources/qml/Avatar.qml
  2. 12
      resources/qml/MessageInput.qml
  3. 62
      resources/qml/emoji/StickerPicker.qml
  4. 187
      src/GridImagePackModel.cpp
  5. 22
      src/GridImagePackModel.h
  6. 3
      src/timeline/TimelineViewManager.cpp

8
resources/qml/Avatar.qml
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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;

Write Preview
Loading…
Cancel
Save