Fix high dpi scaling of avatars

resources/styles/nheko-dark.qss

@@ -145,13 +145,15 @@ UserMentionsWidget {
     qproperty-highlightedTimestampColor: #e7e7e9;
     qproperty-hoverTimestampColor: #f4f5f8;
 
-    qproperty-avatarBgColor: #202228;
-    qproperty-avatarFgColor: white;
-
     qproperty-bubbleFgColor: white;
     qproperty-bubbleBgColor: #4d84c7;
 }
 
+RoomInfoListItem > Avatar {
+    qproperty-backgroundColor: #202228;
+    qproperty-textColor: white;
+}
+
 CommunitiesListItem {
     qproperty-highlightedBackgroundColor: #4d84c7;
     qproperty-hoverBackgroundColor: rgba(230, 230, 230, 30);

resources/styles/nheko.qss

@@ -111,13 +111,15 @@ RoomInfoListItem {
     qproperty-highlightedTimestampColor: #f4f4f5;
     qproperty-hoverTimestampColor: white;
 
-    qproperty-avatarBgColor: #eee;
-    qproperty-avatarFgColor: black;
-
     qproperty-bubbleFgColor: white;
     qproperty-bubbleBgColor: #38A3D8;
 }
 
+RoomInfoListItem > Avatar {
+    qproperty-backgroundColor: #eee;
+    qproperty-textColor: black;
+}
+
 CommunitiesListItem {
     qproperty-highlightedBackgroundColor: #38A3D8;
     qproperty-hoverBackgroundColor: rgba(200, 200, 200, 40);

resources/styles/system.qss

@@ -108,13 +108,16 @@ UserMentionsWidget {
     qproperty-highlightedTimestampColor: palette(highlightedtext);
     qproperty-hoverTimestampColor: palette(highlightedtext);
 
-    qproperty-avatarBgColor: palette(base);
-    qproperty-avatarFgColor: palette(text);
-
     qproperty-bubbleBgColor: palette(base);
     qproperty-bubbleFgColor: palette(text);
 }
 
+RoomInfoListItem > Avatar {
+    qproperty-backgroundColor: palette(base);
+    qproperty-textColor: palette(text);
+}
+
+
 CommunitiesListItem {
     qproperty-highlightedBackgroundColor: palette(highlight);
     qproperty-hoverBackgroundColor: palette(light);

src/RoomInfoListItem.cpp

@@ -33,8 +33,7 @@
 
 constexpr int MaxUnreadCountDisplayed = 99;
 
-constexpr int IconSize = 44;
+constexpr int IconSize = 48;
-// constexpr int MaxHeight        = IconSize + 2 * Padding;
 
 struct WidgetMetrics
 {
@@ -77,7 +76,8 @@ RoomInfoListItem::init(QWidget *parent)
         setMouseTracking(true);
         setAttribute(Qt::WA_Hover);
 
-        setFixedHeight(getMetrics(QFont{}).maxHeight);
+        auto wm = getMetrics(QFont{});
+        setFixedHeight(wm.maxHeight);
 
         QPainterPath path;
         path.addRect(0, 0, parent->width(), height());
@@ -86,6 +86,10 @@ RoomInfoListItem::init(QWidget *parent)
         ripple_overlay_->setClipPath(path);
         ripple_overlay_->setClipping(true);
 
+        avatar_ = new Avatar(this, wm.iconSize);
+        avatar_->setLetter(utils::firstChar(roomName_));
+        avatar_->move(wm.padding, wm.padding);
+
         unreadCountFont_.setPointSizeF(unreadCountFont_.pointSizeF() * 0.8);
         unreadCountFont_.setBold(true);
 
@@ -130,8 +134,6 @@ RoomInfoListItem::resizeEvent(QResizeEvent *)
 void
 RoomInfoListItem::paintEvent(QPaintEvent *event)
 {
-        bool rounded = QSettings().value("user/avatar_circles", true).toBool();
-
         Q_UNUSED(event);
 
         QPainter p(this);
@@ -160,8 +162,6 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
                 subtitlePen.setColor(subtitleColor_);
         }
 
-        QRect avatarRegion(wm.padding, wm.padding, wm.iconSize, wm.iconSize);
-
         // Description line with the default font.
         int bottom_y = wm.maxHeight - wm.padding - metrics.ascent() / 2;
 
@@ -252,38 +252,6 @@ RoomInfoListItem::paintEvent(QPaintEvent *event)
 
         p.setPen(Qt::NoPen);
 
-        // We using the first letter of room's name.
-        if (roomAvatar_.isNull()) {
-                QBrush brush;
-                brush.setStyle(Qt::SolidPattern);
-                brush.setColor(avatarBgColor());
-
-                p.setPen(Qt::NoPen);
-                p.setBrush(brush);
-
-                rounded ? p.drawEllipse(avatarRegion.center(), wm.iconSize / 2, wm.iconSize / 2)
-                        : p.drawRoundedRect(avatarRegion, 3, 3);
-
-                QFont bubbleFont;
-                bubbleFont.setPointSizeF(bubbleFont.pointSizeF() * 1.4);
-                p.setFont(bubbleFont);
-                p.setPen(avatarFgColor());
-                p.setBrush(Qt::NoBrush);
-                p.drawText(
-                  avatarRegion.translated(0, -1), Qt::AlignCenter, utils::firstChar(roomName()));
-        } else {
-                p.save();
-
-                QPainterPath path;
-                rounded ? path.addEllipse(wm.padding, wm.padding, wm.iconSize, wm.iconSize)
-                        : path.addRoundedRect(avatarRegion, 3, 3);
-
-                p.setClipPath(path);
-
-                p.drawPixmap(avatarRegion, roomAvatar_);
-                p.restore();
-        }
-
         if (unreadMsgCount_ > 0) {
                 QBrush brush;
                 brush.setStyle(Qt::SolidPattern);
@@ -413,10 +381,7 @@ RoomInfoListItem::mousePressEvent(QMouseEvent *event)
 void
 RoomInfoListItem::setAvatar(const QString &avatar_url)
 {
-        AvatarProvider::resolve(avatar_url, IconSize, this, [this](const QPixmap &img) {
+        avatar_->setImage(avatar_url);
-                roomAvatar_ = img;
-                update();
-        });
 }
 
 void

src/RoomInfoListItem.h

@@ -25,6 +25,7 @@
 #include <mtx/responses.hpp>
 
 #include "CacheStructs.h"
+#include "ui/Avatar.h"
 
 class Menu;
 class RippleOverlay;
@@ -38,9 +39,6 @@ class RoomInfoListItem : public QWidget
           QColor hoverBackgroundColor READ hoverBackgroundColor WRITE setHoverBackgroundColor)
         Q_PROPERTY(QColor backgroundColor READ backgroundColor WRITE setBackgroundColor)
 
-        Q_PROPERTY(QColor avatarBgColor READ avatarBgColor WRITE setAvatarBgColor)
-        Q_PROPERTY(QColor avatarFgColor READ avatarFgColor WRITE setAvatarFgColor)
-
         Q_PROPERTY(QColor bubbleBgColor READ bubbleBgColor WRITE setBubbleBgColor)
         Q_PROPERTY(QColor bubbleFgColor READ bubbleFgColor WRITE setBubbleFgColor)
 
@@ -84,8 +82,6 @@ public:
         QColor hoverSubtitleColor() const { return hoverSubtitleColor_; }
         QColor hoverTimestampColor() const { return hoverTimestampColor_; }
         QColor backgroundColor() const { return backgroundColor_; }
-        QColor avatarBgColor() const { return avatarBgColor_; }
-        QColor avatarFgColor() const { return avatarFgColor_; }
 
         QColor highlightedTitleColor() const { return highlightedTitleColor_; }
         QColor highlightedSubtitleColor() const { return highlightedSubtitleColor_; }
@@ -108,8 +104,6 @@ public:
         void setHoverTimestampColor(QColor &color) { hoverTimestampColor_ = color; }
         void setBackgroundColor(QColor &color) { backgroundColor_ = color; }
         void setTimestampColor(QColor &color) { timestampColor_ = color; }
-        void setAvatarFgColor(QColor &color) { avatarFgColor_ = color; }
-        void setAvatarBgColor(QColor &color) { avatarBgColor_ = color; }
 
         void setHighlightedTitleColor(QColor &color) { highlightedTitleColor_ = color; }
         void setHighlightedSubtitleColor(QColor &color) { highlightedSubtitleColor_ = color; }
@@ -163,6 +157,7 @@ private:
         QString roomName() { return roomName_; }
 
         RippleOverlay *ripple_overlay_;
+        Avatar *avatar_;
 
         enum class RoomType
         {
@@ -180,8 +175,6 @@ private:
 
         DescInfo lastMsgInfo_;
 
-        QPixmap roomAvatar_;
-
         Menu *menu_;
         QAction *leaveRoom_;
 
@@ -219,9 +212,6 @@ private:
         QColor highlightedTimestampColor_;
         QColor hoverTimestampColor_;
 
-        QColor avatarBgColor_;
-        QColor avatarFgColor_;
-
         QColor bubbleBgColor_;
         QColor bubbleFgColor_;
 };

src/ui/Avatar.cpp

@@ -73,7 +73,11 @@ Avatar::setLetter(const QString &letter)
 void
 Avatar::setImage(const QString &avatar_url)
 {
-        AvatarProvider::resolve(avatar_url, size_, this, [this](QPixmap pm) {
+        avatar_url_ = avatar_url;
+        AvatarProvider::resolve(avatar_url,
+                                static_cast<int>(size_ * pixmap_.devicePixelRatio()),
+                                this,
+                                [this](QPixmap pm) {
                                         type_   = ui::AvatarType::Image;
                                         pixmap_ = pm;
                                         update();
@@ -83,7 +87,13 @@ Avatar::setImage(const QString &avatar_url)
 void
 Avatar::setImage(const QString &room, const QString &user)
 {
-        AvatarProvider::resolve(room, user, size_, this, [this](QPixmap pm) {
+        room_ = room;
+        user_ = user;
+        AvatarProvider::resolve(room,
+                                user,
+                                static_cast<int>(size_ * pixmap_.devicePixelRatio()),
+                                this,
+                                [this](QPixmap pm) {
                                         type_   = ui::AvatarType::Image;
                                         pixmap_ = pm;
                                         update();
@@ -118,6 +128,16 @@ Avatar::paintEvent(QPaintEvent *)
                 painter.setBrush(brush);
                 rounded ? painter.drawEllipse(r.center(), hs, hs)
                         : painter.drawRoundedRect(r, 3, 3);
+        } else if (painter.isActive() &&
+                   abs(pixmap_.devicePixelRatio() - painter.device()->devicePixelRatioF()) > 0.01) {
+                pixmap_ =
+                  pixmap_.scaled(QSize(size_, size_) * painter.device()->devicePixelRatioF());
+                pixmap_.setDevicePixelRatio(painter.device()->devicePixelRatioF());
+
+                if (!avatar_url_.isEmpty())
+                        setImage(avatar_url_);
+                else
+                        setImage(room_, user_);
         }
 
         switch (type_) {

src/ui/Avatar.h

@@ -38,6 +38,7 @@ private:
 
         ui::AvatarType type_;
         QString letter_;
+        QString avatar_url_, room_, user_;
         QColor background_color_;
         QColor text_color_;
         QIcon icon_;