mirror of https://github.com/Nheko-Reborn/nheko
Joseph Donofry
5 years ago
commit
7afb164244
|
After Width: | Height: | Size: 573 B |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,18 @@ |
|||||||
|
import QtQuick 2.10 |
||||||
|
import QtQuick.Controls 2.1 |
||||||
|
import im.nheko 1.0 |
||||||
|
import im.nheko.EmojiModel 1.0 |
||||||
|
|
||||||
|
import "../" |
||||||
|
|
||||||
|
ImageButton { |
||||||
|
property var colors: currentActivePalette |
||||||
|
property var emojiPicker |
||||||
|
property string room_id |
||||||
|
property string event_id |
||||||
|
|
||||||
|
image: ":/icons/icons/ui/smile.png" |
||||||
|
id: emojiButton |
||||||
|
onClicked: emojiPicker.visible ? emojiPicker.close() : emojiPicker.show(emojiButton, room_id, event_id) |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,290 @@ |
|||||||
|
import QtQuick 2.9 |
||||||
|
import QtQuick.Controls 2.9 |
||||||
|
import QtQuick.Layouts 1.3 |
||||||
|
import QtGraphicalEffects 1.9 |
||||||
|
|
||||||
|
import im.nheko 1.0 |
||||||
|
import im.nheko.EmojiModel 1.0 |
||||||
|
|
||||||
|
import "../" |
||||||
|
|
||||||
|
Popup { |
||||||
|
|
||||||
|
function show(showAt, room_id, event_id) { |
||||||
|
console.debug("Showing emojiPicker for " + event_id + "in room " + room_id) |
||||||
|
parent = showAt |
||||||
|
x = Math.round((showAt.width - width) / 2) |
||||||
|
y = showAt.height |
||||||
|
emojiPopup.room_id = room_id |
||||||
|
emojiPopup.event_id = event_id |
||||||
|
open() |
||||||
|
} |
||||||
|
|
||||||
|
property string room_id |
||||||
|
property string event_id |
||||||
|
property var colors |
||||||
|
property alias model: gridView.model |
||||||
|
property var textArea |
||||||
|
property string emojiCategory: "people" |
||||||
|
property real highlightHue: colors.highlight.hslHue |
||||||
|
property real highlightSat: colors.highlight.hslSaturation |
||||||
|
property real highlightLight: colors.highlight.hslLightness |
||||||
|
|
||||||
|
id: emojiPopup |
||||||
|
|
||||||
|
margins: 0 |
||||||
|
bottomPadding: 1 |
||||||
|
leftPadding: 1 |
||||||
|
rightPadding: 1 |
||||||
|
|
||||||
|
modal: true |
||||||
|
focus: true |
||||||
|
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside |
||||||
|
|
||||||
|
ColumnLayout { |
||||||
|
id: columnView |
||||||
|
anchors.fill: parent |
||||||
|
spacing: 0 |
||||||
|
Layout.bottomMargin: 0 |
||||||
|
Layout.leftMargin: 3 |
||||||
|
Layout.rightMargin: 3 |
||||||
|
Layout.topMargin: 2 |
||||||
|
|
||||||
|
// emoji grid |
||||||
|
GridView { |
||||||
|
id: gridView |
||||||
|
|
||||||
|
Layout.preferredHeight: emojiPopup.height |
||||||
|
Layout.fillWidth: true |
||||||
|
Layout.fillHeight: true |
||||||
|
Layout.leftMargin: 4 |
||||||
|
|
||||||
|
cellWidth: 52 |
||||||
|
cellHeight: 52 |
||||||
|
|
||||||
|
boundsBehavior: Flickable.StopAtBounds |
||||||
|
|
||||||
|
clip: true |
||||||
|
|
||||||
|
// Individual emoji |
||||||
|
delegate: AbstractButton { |
||||||
|
width: 48 |
||||||
|
height: 48 |
||||||
|
contentItem: Text { |
||||||
|
horizontalAlignment: Text.AlignHCenter |
||||||
|
verticalAlignment: Text.AlignVCenter |
||||||
|
font.family: settings.emojiFont |
||||||
|
|
||||||
|
font.pixelSize: 36 |
||||||
|
text: model.unicode |
||||||
|
} |
||||||
|
|
||||||
|
background: Rectangle { |
||||||
|
anchors.fill: parent |
||||||
|
color: hovered ? colors.highlight : 'transparent' |
||||||
|
radius: 5 |
||||||
|
} |
||||||
|
|
||||||
|
hoverEnabled: true |
||||||
|
ToolTip.text: model.shortName |
||||||
|
ToolTip.visible: hovered |
||||||
|
|
||||||
|
// give the emoji a little oomf |
||||||
|
DropShadow { |
||||||
|
width: parent.width; |
||||||
|
height: parent.height; |
||||||
|
horizontalOffset: 3 |
||||||
|
verticalOffset: 3 |
||||||
|
radius: 8.0 |
||||||
|
samples: 17 |
||||||
|
color: "#80000000" |
||||||
|
source: parent.contentItem |
||||||
|
} |
||||||
|
// TODO: maybe add favorites at some point? |
||||||
|
onClicked: { |
||||||
|
console.debug("Picked " + model.unicode + "in response to " + emojiPopup.event_id + " in room " + emojiPopup.room_id) |
||||||
|
emojiPopup.close() |
||||||
|
timelineManager.queueReactionMessage(emojiPopup.room_id, emojiPopup.event_id, model.unicode) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Search field |
||||||
|
header: TextField { |
||||||
|
id: emojiSearch |
||||||
|
anchors.left: parent.left |
||||||
|
anchors.right: parent.right |
||||||
|
anchors.rightMargin: emojiScroll.width + 4 |
||||||
|
placeholderText: qsTr("Search") |
||||||
|
selectByMouse: true |
||||||
|
rightPadding: clearSearch.width |
||||||
|
|
||||||
|
Timer { |
||||||
|
id: searchTimer |
||||||
|
interval: 350 // tweak as needed? |
||||||
|
onTriggered: { |
||||||
|
emojiPopup.model.filter = emojiSearch.text |
||||||
|
emojiPopup.model.category = EmojiCategory.Search |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
ToolButton { |
||||||
|
id: clearSearch |
||||||
|
anchors { |
||||||
|
verticalCenter: parent.verticalCenter |
||||||
|
right: parent.right |
||||||
|
} |
||||||
|
// clear the default hover effects. |
||||||
|
background: Item {} |
||||||
|
visible: emojiSearch.text !== '' |
||||||
|
icon.source: "image://colorimage/:/icons/icons/ui/round-remove-button.png?" + (clearSearch.hovered ? colors.highlight : colors.buttonText) |
||||||
|
focusPolicy: Qt.NoFocus |
||||||
|
onClicked: emojiSearch.clear() |
||||||
|
} |
||||||
|
|
||||||
|
onTextChanged: searchTimer.restart() |
||||||
|
onVisibleChanged: if (visible) forceActiveFocus() |
||||||
|
} |
||||||
|
|
||||||
|
ScrollBar.vertical: ScrollBar { |
||||||
|
id: emojiScroll |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Separator |
||||||
|
Rectangle { |
||||||
|
Layout.fillWidth: true |
||||||
|
Layout.preferredHeight: 1 |
||||||
|
|
||||||
|
color: emojiPopup.colors.dark |
||||||
|
} |
||||||
|
|
||||||
|
// Category picker row |
||||||
|
RowLayout { |
||||||
|
Layout.bottomMargin: 0 |
||||||
|
Layout.preferredHeight: 42 |
||||||
|
implicitHeight: 42 |
||||||
|
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom |
||||||
|
// Display the normal categories |
||||||
|
Repeater { |
||||||
|
model: ListModel { |
||||||
|
// TODO: Would like to get 'simple' icons for the categories |
||||||
|
ListElement { image: ":/icons/icons/emoji-categories/people.png"; category: EmojiCategory.People } |
||||||
|
ListElement { image: ":/icons/icons/emoji-categories/nature.png"; category: EmojiCategory.Nature } |
||||||
|
ListElement { image: ":/icons/icons/emoji-categories/foods.png"; category: EmojiCategory.Food } |
||||||
|
ListElement { image: ":/icons/icons/emoji-categories/activity.png"; category: EmojiCategory.Activity } |
||||||
|
ListElement { image: ":/icons/icons/emoji-categories/travel.png"; category: EmojiCategory.Travel } |
||||||
|
ListElement { image: ":/icons/icons/emoji-categories/objects.png"; category: EmojiCategory.Objects } |
||||||
|
ListElement { image: ":/icons/icons/emoji-categories/symbols.png"; category: EmojiCategory.Symbols } |
||||||
|
ListElement { image: ":/icons/icons/emoji-categories/flags.png"; category: EmojiCategory.Flags } |
||||||
|
} |
||||||
|
|
||||||
|
delegate: AbstractButton { |
||||||
|
Layout.preferredWidth: 36 |
||||||
|
Layout.preferredHeight: 36 |
||||||
|
|
||||||
|
contentItem: Image { |
||||||
|
horizontalAlignment: Image.AlignHCenter |
||||||
|
verticalAlignment: Image.AlignVCenter |
||||||
|
fillMode: Image.Pad |
||||||
|
sourceSize.width: 32 |
||||||
|
sourceSize.height: 32 |
||||||
|
source: "image://colorimage/" + model.image + "?" + (hovered ? colors.highlight : colors.buttonText) |
||||||
|
} |
||||||
|
|
||||||
|
MouseArea |
||||||
|
{ |
||||||
|
id: mouseArea |
||||||
|
anchors.fill: parent |
||||||
|
onPressed: mouse.accepted = false |
||||||
|
cursorShape: Qt.PointingHandCursor |
||||||
|
} |
||||||
|
|
||||||
|
background: Rectangle { |
||||||
|
anchors.fill: parent |
||||||
|
|
||||||
|
color: emojiPopup.model.category === model.category ? Qt.hsla(highlightHue, highlightSat, highlightLight, 0.20) : 'transparent' |
||||||
|
radius: 5 |
||||||
|
border.color: emojiPopup.model.category === model.category ? colors.highlight : 'transparent' |
||||||
|
} |
||||||
|
|
||||||
|
hoverEnabled: true |
||||||
|
ToolTip.text: { |
||||||
|
switch (model.category) { |
||||||
|
case EmojiCategory.People: |
||||||
|
return qsTr('People'); |
||||||
|
case EmojiCategory.Nature: |
||||||
|
return qsTr('Nature'); |
||||||
|
case EmojiCategory.Food: |
||||||
|
return qsTr('Food'); |
||||||
|
case EmojiCategory.Activity: |
||||||
|
return qsTr('Activity'); |
||||||
|
case EmojiCategory.Travel: |
||||||
|
return qsTr('Travel'); |
||||||
|
case EmojiCategory.Objects: |
||||||
|
return qsTr('Objects'); |
||||||
|
case EmojiCategory.Symbols: |
||||||
|
return qsTr('Symbols'); |
||||||
|
case EmojiCategory.Flags: |
||||||
|
return qsTr('Flags'); |
||||||
|
} |
||||||
|
} |
||||||
|
ToolTip.visible: hovered |
||||||
|
|
||||||
|
onClicked: { |
||||||
|
emojiPopup.model.category = model.category |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Separator |
||||||
|
Rectangle { |
||||||
|
Layout.fillHeight: true |
||||||
|
Layout.preferredWidth: 1 |
||||||
|
implicitWidth: 1 |
||||||
|
height: parent.height |
||||||
|
|
||||||
|
color: emojiPopup.colors.dark |
||||||
|
} |
||||||
|
|
||||||
|
// Search Button is special |
||||||
|
AbstractButton { |
||||||
|
id: searchBtn |
||||||
|
hoverEnabled: true |
||||||
|
Layout.alignment: Qt.AlignRight |
||||||
|
Layout.bottomMargin: 0 |
||||||
|
|
||||||
|
ToolTip.text: qsTr("Search") |
||||||
|
ToolTip.visible: hovered |
||||||
|
onClicked: { |
||||||
|
// clear any filters |
||||||
|
emojiPopup.model.category = EmojiCategory.Search |
||||||
|
gridView.positionViewAtBeginning() |
||||||
|
emojiSearch.forceActiveFocus() |
||||||
|
} |
||||||
|
Layout.preferredWidth: 36 |
||||||
|
Layout.preferredHeight: 36 |
||||||
|
implicitWidth: 36 |
||||||
|
implicitHeight: 36 |
||||||
|
|
||||||
|
contentItem: Image { |
||||||
|
anchors.right: parent.right |
||||||
|
horizontalAlignment: Image.AlignHCenter |
||||||
|
verticalAlignment: Image.AlignVCenter |
||||||
|
sourceSize.width: 32 |
||||||
|
sourceSize.height: 32 |
||||||
|
fillMode: Image.Pad |
||||||
|
smooth: true |
||||||
|
source: "image://colorimage/:/icons/icons/ui/search.png?" + (parent.hovered ? colors.highlight : colors.buttonText) |
||||||
|
} |
||||||
|
|
||||||
|
MouseArea |
||||||
|
{ |
||||||
|
id: mouseArea |
||||||
|
anchors.fill: parent |
||||||
|
onPressed: mouse.accepted = false |
||||||
|
cursorShape: Qt.PointingHandCursor |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,110 @@ |
|||||||
|
#include "EmojiModel.h" |
||||||
|
|
||||||
|
#include <Cache.h> |
||||||
|
#include <MatrixClient.h> |
||||||
|
|
||||||
|
using namespace emoji; |
||||||
|
|
||||||
|
QHash<int, QByteArray> |
||||||
|
EmojiModel::roleNames() const |
||||||
|
{ |
||||||
|
static QHash<int, QByteArray> roles; |
||||||
|
|
||||||
|
if (roles.isEmpty()) { |
||||||
|
roles = QAbstractListModel::roleNames(); |
||||||
|
roles[static_cast<int>(EmojiModel::Roles::Unicode)] = QByteArrayLiteral("unicode"); |
||||||
|
roles[static_cast<int>(EmojiModel::Roles::ShortName)] = |
||||||
|
QByteArrayLiteral("shortName"); |
||||||
|
roles[static_cast<int>(EmojiModel::Roles::Category)] = |
||||||
|
QByteArrayLiteral("category"); |
||||||
|
roles[static_cast<int>(EmojiModel::Roles::Emoji)] = QByteArrayLiteral("emoji"); |
||||||
|
} |
||||||
|
|
||||||
|
return roles; |
||||||
|
} |
||||||
|
|
||||||
|
int |
||||||
|
EmojiModel::rowCount(const QModelIndex &parent) const |
||||||
|
{ |
||||||
|
return parent == QModelIndex() ? Provider::emoji.count() : 0; |
||||||
|
} |
||||||
|
|
||||||
|
QVariant |
||||||
|
EmojiModel::data(const QModelIndex &index, int role) const |
||||||
|
{ |
||||||
|
if (hasIndex(index.row(), index.column(), index.parent())) { |
||||||
|
switch (role) { |
||||||
|
case Qt::DisplayRole: |
||||||
|
case static_cast<int>(EmojiModel::Roles::Unicode): |
||||||
|
return Provider::emoji[index.row()].unicode; |
||||||
|
|
||||||
|
case Qt::ToolTipRole: |
||||||
|
case static_cast<int>(EmojiModel::Roles::ShortName): |
||||||
|
return Provider::emoji[index.row()].shortName; |
||||||
|
|
||||||
|
case static_cast<int>(EmojiModel::Roles::Category): |
||||||
|
return QVariant::fromValue(Provider::emoji[index.row()].category); |
||||||
|
|
||||||
|
case static_cast<int>(EmojiModel::Roles::Emoji): |
||||||
|
return QVariant::fromValue(Provider::emoji[index.row()]); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return {}; |
||||||
|
} |
||||||
|
|
||||||
|
EmojiProxyModel::EmojiProxyModel(QObject *parent) |
||||||
|
: QSortFilterProxyModel(parent) |
||||||
|
{} |
||||||
|
|
||||||
|
EmojiProxyModel::~EmojiProxyModel() {} |
||||||
|
|
||||||
|
EmojiCategory |
||||||
|
EmojiProxyModel::category() const |
||||||
|
{ |
||||||
|
return category_; |
||||||
|
} |
||||||
|
|
||||||
|
void |
||||||
|
EmojiProxyModel::setCategory(EmojiCategory cat) |
||||||
|
{ |
||||||
|
if (category_ == cat) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
category_ = cat; |
||||||
|
emit categoryChanged(); |
||||||
|
|
||||||
|
invalidateFilter(); |
||||||
|
} |
||||||
|
|
||||||
|
QString |
||||||
|
EmojiProxyModel::filter() const |
||||||
|
{ |
||||||
|
return filterRegExp().pattern(); |
||||||
|
} |
||||||
|
|
||||||
|
void |
||||||
|
EmojiProxyModel::setFilter(const QString &filter) |
||||||
|
{ |
||||||
|
if (filterRegExp().pattern() == filter) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setFilterWildcard(filter); |
||||||
|
emit filterChanged(); |
||||||
|
} |
||||||
|
|
||||||
|
bool |
||||||
|
EmojiProxyModel::filterAcceptsRow(int sourceRow, const QModelIndex &sourceParent) const |
||||||
|
{ |
||||||
|
const QModelIndex index = sourceModel()->index(sourceRow, 0, sourceParent); |
||||||
|
const Emoji emoji = index.data(static_cast<int>(EmojiModel::Roles::Emoji)).value<Emoji>(); |
||||||
|
|
||||||
|
// TODO: Add favorites / recently used
|
||||||
|
if (category_ != EmojiCategory::Search) { |
||||||
|
return emoji.category == category_; |
||||||
|
} |
||||||
|
|
||||||
|
return filterRegExp().isEmpty() ? true : filterRegExp().indexIn(emoji.shortName) != -1; |
||||||
|
} |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
#pragma once |
||||||
|
|
||||||
|
#include <QAbstractListModel> |
||||||
|
#include <QSet> |
||||||
|
#include <QSortFilterProxyModel> |
||||||
|
#include <QVector> |
||||||
|
|
||||||
|
#include "Provider.h" |
||||||
|
|
||||||
|
namespace emoji { |
||||||
|
|
||||||
|
/*
|
||||||
|
* Provides access to the emojis in Provider.h to QML |
||||||
|
*/ |
||||||
|
class EmojiModel : public QAbstractListModel |
||||||
|
{ |
||||||
|
Q_OBJECT |
||||||
|
public: |
||||||
|
enum Roles |
||||||
|
{ |
||||||
|
Unicode = Qt::UserRole, // unicode of emoji
|
||||||
|
Category, // category of emoji
|
||||||
|
ShortName, // shortext of the emoji
|
||||||
|
Emoji, // Contains everything from the Emoji
|
||||||
|
}; |
||||||
|
|
||||||
|
using QAbstractListModel::QAbstractListModel; |
||||||
|
|
||||||
|
QHash<int, QByteArray> roleNames() const override; |
||||||
|
int rowCount(const QModelIndex &parent = QModelIndex()) const override; |
||||||
|
QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override; |
||||||
|
}; |
||||||
|
|
||||||
|
class EmojiProxyModel : public QSortFilterProxyModel |
||||||
|
{ |
||||||
|
Q_OBJECT |
||||||
|
|
||||||
|
Q_PROPERTY( |
||||||
|
emoji::EmojiCategory category READ category WRITE setCategory NOTIFY categoryChanged) |
||||||
|
Q_PROPERTY(QString filter READ filter WRITE setFilter NOTIFY filterChanged) |
||||||
|
|
||||||
|
public: |
||||||
|
explicit EmojiProxyModel(QObject *parent = nullptr); |
||||||
|
~EmojiProxyModel() override; |
||||||
|
|
||||||
|
EmojiCategory category() const; |
||||||
|
void setCategory(EmojiCategory cat); |
||||||
|
|
||||||
|
QString filter() const; |
||||||
|
void setFilter(const QString &filter); |
||||||
|
|
||||||
|
signals: |
||||||
|
void categoryChanged(); |
||||||
|
void filterChanged(); |
||||||
|
|
||||||
|
protected: |
||||||
|
bool filterAcceptsRow(int sourceRow, const QModelIndex &sourceParent) const override; |
||||||
|
|
||||||
|
private: |
||||||
|
EmojiCategory category_ = EmojiCategory::Search; |
||||||
|
emoji::Provider emoji_provider_; |
||||||
|
}; |
||||||
|
|
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue