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

@@ -232,6 +232,10 @@ emoji--Panel > * {
     color: #caccd1;
 }
 
+emoji--Category {
+    qproperty-hoverBackgroundColor: rgba(230, 230, 230, 30);
+}
+
 emoji--Category,
 emoji--Category > * {
     background-color: #2d3139;

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;

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);

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_->setFixedSize(cols * gridSize + 20, rows * gridSize);
-        emojiListView_->setGridSize(QSize(50, 50));
+        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);

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

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();
 }

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
+        // We want the top of the category to be visible, so scroll to the top first and then to the
-        // the 6*50 offset won't work because not all the categories have the same
+        // category
-        // height. To ensure the category is at the top, we move to the top and go as
-        // normal to the next category.
         if (current > posToGo)
                 this->scrollArea_->ensureVisible(0, 0, 0, 0);
 
-        posToGo += 6 * 50;
+        posToGo += scrollArea_->height();
         this->scrollArea_->ensureVisible(0, posToGo, 0, 0);
 }