From 78ed78c410b2aeed2dd9c5de249cb625fb5153be Mon Sep 17 00:00:00 2001 From: Nicolas Werner Date: Thu, 25 Jul 2019 11:40:18 +0200 Subject: [PATCH] Improve layout of Emoji Picker Respect system styling Increase size of emojis (to remove empty space) Add hover effect (partially adresses #41) Less hardcoding of sizes Use emoji font (color) --- resources/styles/nheko-dark.qss | 4 ++++ resources/styles/nheko.qss | 4 ++++ resources/styles/system.qss | 22 +++++++++++++++++++--- src/emoji/Category.cpp | 11 +++++++---- src/emoji/Category.h | 7 +++++++ src/emoji/ItemDelegate.cpp | 12 +++++++++++- src/emoji/Panel.cpp | 8 +++----- 7 files changed, 55 insertions(+), 13 deletions(-) diff --git a/resources/styles/nheko-dark.qss b/resources/styles/nheko-dark.qss index 7b5486b0..1e1333b2 100644 --- a/resources/styles/nheko-dark.qss +++ b/resources/styles/nheko-dark.qss @@ -232,6 +232,10 @@ emoji--Panel > * { color: #caccd1; } +emoji--Category { + qproperty-hoverBackgroundColor: rgba(230, 230, 230, 30); +} + emoji--Category, emoji--Category > * { background-color: #2d3139; diff --git a/resources/styles/nheko.qss b/resources/styles/nheko.qss index c352956a..a70441be 100644 --- a/resources/styles/nheko.qss +++ b/resources/styles/nheko.qss @@ -200,6 +200,10 @@ emoji--Panel > * { color: #333; } +emoji--Category { + qproperty-hoverBackgroundColor: rgba(200, 200, 200, 70); +} + emoji--Category, emoji--Category > * { background-color: white; diff --git a/resources/styles/system.qss b/resources/styles/system.qss index c1e8898a..dfb8ce65 100644 --- a/resources/styles/system.qss +++ b/resources/styles/system.qss @@ -85,10 +85,10 @@ QListWidget { background-color: palette(window); } -RoomInfoListItem { +RoomInfoListItem, UserMentionsWidget { qproperty-mentionedColor: palette(alternate-base); qproperty-highlightedBackgroundColor: palette(highlight); - qproperty-hoverBackgroundColor: palette(base); + qproperty-hoverBackgroundColor: palette(light); qproperty-backgroundColor: palette(window); qproperty-titleColor: palette(text); @@ -116,7 +116,7 @@ RoomInfoListItem { CommunitiesListItem { qproperty-highlightedBackgroundColor: palette(highlight); - qproperty-hoverBackgroundColor: palette(base); + qproperty-hoverBackgroundColor: palette(light); qproperty-backgroundColor: palette(window); qproperty-avatarBgColor: palette(base); @@ -131,6 +131,22 @@ LoadingIndicator { qproperty-color: palette(light); } +emoji--Panel, +emoji--Panel > * { + background-color: palette(base); + color: palette(text); +} + +emoji--Category { + qproperty-hoverBackgroundColor: palette(highlight); +} + +emoji--Category, +emoji--Category > * { + background-color: palette(window); + color: palette(text); +} + FloatingButton { qproperty-backgroundColor: palette(base); qproperty-foregroundColor: palette(text); diff --git a/src/emoji/Category.cpp b/src/emoji/Category.cpp index fbfbf4fc..659555f7 100644 --- a/src/emoji/Category.cpp +++ b/src/emoji/Category.cpp @@ -43,15 +43,18 @@ Category::Category(QString category, std::vector emoji, QWidget *parent) emojiListView_->setViewMode(QListView::IconMode); emojiListView_->setFlow(QListView::LeftToRight); emojiListView_->setResizeMode(QListView::Adjust); + emojiListView_->setMouseTracking(true); emojiListView_->verticalScrollBar()->setEnabled(false); emojiListView_->horizontalScrollBar()->setEnabled(false); const int cols = 7; - const int rows = emoji.size() / 7; + const int rows = emoji.size() / 7 + 1; + const int emojiSize = 48; + const int gridSize = emojiSize + 4; // TODO: Be precise here. Take the parent into consideration. - emojiListView_->setFixedSize(cols * 50 + 20, rows * 50 + 20); - emojiListView_->setGridSize(QSize(50, 50)); + emojiListView_->setFixedSize(cols * gridSize + 20, rows * gridSize); + emojiListView_->setGridSize(QSize(gridSize, gridSize)); emojiListView_->setDragEnabled(false); emojiListView_->setEditTriggers(QAbstractItemView::NoEditTriggers); @@ -59,7 +62,7 @@ Category::Category(QString category, std::vector emoji, QWidget *parent) data_->unicode = e.unicode; auto item = new QStandardItem; - item->setSizeHint(QSize(24, 24)); + item->setSizeHint(QSize(emojiSize, emojiSize)); QVariant unicode(data_->unicode); item->setData(unicode.toString(), Qt::UserRole); diff --git a/src/emoji/Category.h b/src/emoji/Category.h index a14029c8..2f39d621 100644 --- a/src/emoji/Category.h +++ b/src/emoji/Category.h @@ -17,6 +17,7 @@ #pragma once +#include #include #include #include @@ -29,9 +30,13 @@ namespace emoji { class Category : public QWidget { Q_OBJECT + Q_PROPERTY( + QColor hoverBackgroundColor READ hoverBackgroundColor WRITE setHoverBackgroundColor) public: Category(QString category, std::vector emoji, QWidget *parent = nullptr); + QColor hoverBackgroundColor() const { return hoverBackgroundColor_; } + void setHoverBackgroundColor(QColor color) { hoverBackgroundColor_ = color; } signals: void emojiSelected(const QString &emoji); @@ -55,5 +60,7 @@ private: emoji::ItemDelegate *delegate_; QLabel *category_; + + QColor hoverBackgroundColor_; }; } // namespace emoji diff --git a/src/emoji/ItemDelegate.cpp b/src/emoji/ItemDelegate.cpp index b79ae0fc..304ab023 100644 --- a/src/emoji/ItemDelegate.cpp +++ b/src/emoji/ItemDelegate.cpp @@ -37,12 +37,22 @@ ItemDelegate::paint(QPainter *painter, { Q_UNUSED(index); + painter->save(); + QStyleOptionViewItem viewOption(option); auto emoji = index.data(Qt::UserRole).toString(); - // QFont font("Emoji One"); QFont font; + font.setFamily("emoji"); + font.setPixelSize(48); painter->setFont(font); + if (option.state & QStyle::State_MouseOver) { + painter->setBackgroundMode(Qt::OpaqueMode); + QColor hoverColor = parent()->property("hoverBackgroundColor").value(); + painter->setBackground(hoverColor); + } painter->drawText(viewOption.rect, Qt::AlignCenter, emoji); + + painter->restore(); } diff --git a/src/emoji/Panel.cpp b/src/emoji/Panel.cpp index 710b501e..49ff40c5 100644 --- a/src/emoji/Panel.cpp +++ b/src/emoji/Panel.cpp @@ -202,14 +202,12 @@ Panel::showCategory(const Category *category) return; // HACK - // If we want to go to a previous category and position the label at the top - // the 6*50 offset won't work because not all the categories have the same - // height. To ensure the category is at the top, we move to the top and go as - // normal to the next category. + // We want the top of the category to be visible, so scroll to the top first and then to the + // category if (current > posToGo) this->scrollArea_->ensureVisible(0, 0, 0, 0); - posToGo += 6 * 50; + posToGo += scrollArea_->height(); this->scrollArea_->ensureVisible(0, posToGo, 0, 0); }