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)

4 files changed, 28 insertions, 10 deletions

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> 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> 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 <QColor>
 #include <QLabel>
 #include <QLayout>
 #include <QListView>
@@ -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> 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<QColor>();
+                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);
 }