add small avatars option and tweak colors and spacings

resources/qml/MessageView.qml

@@ -249,8 +249,8 @@ ScrollView {
             id: sectionHeader
 
             Column {
-                topPadding: 0
+                topPadding: userName_.visible? 4: 0
-                bottomPadding: 0
+                bottomPadding: Settings.bubbles? 0 : 3
                 spacing: 8
                 visible: (previousMessageUserId !== userId || previousMessageDay !== day || isStateEvent !== previousMessageIsStateEvent)
                 width: parentWidth
@@ -283,8 +283,8 @@ ScrollView {
                     Avatar {
                         id: messageUserAvatar
 
-                        width: Nheko.avatarSize * (Settings.bubbles? 0.5 : 1)
+                        width: Nheko.avatarSize * (Settings.smallAvatars? 0.5 : 1)
-                        height: Nheko.avatarSize * (Settings.bubbles? 0.5 : 1)
+                        height: Nheko.avatarSize * (Settings.smallAvatars? 0.5 : 1)
                         url: !room ? "" : room.avatarUrl(userId).replace("mxc://", "image://MxcImage/")
                         displayName: userName
                         userid: userId

resources/qml/TimelineRow.qml

@@ -74,28 +74,31 @@ Item {
     Control {
         id: row
         property bool bubbleOnRight : isSender && Settings.bubbles
-        anchors.rightMargin: isSender || !Settings.bubbles? 0 : parent.width/8
+        property int bubblePadding: (parent.width-(Settings.smallAvatars? 0 : Nheko.avatarSize+8))/10
-        anchors.leftMargin: (Settings.bubbles? 0 : Nheko.avatarSize) + (bubbleOnRight? parent.width/8 : 8) // align bubble with section header
+        anchors.rightMargin: isSender || !Settings.bubbles? 0 : bubblePadding
+        anchors.leftMargin: (Settings.smallAvatars? 0 : Nheko.avatarSize+8) + (bubbleOnRight? bubblePadding : 0) // align bubble with section header
         anchors.left: bubbleOnRight? undefined : parent.left
         anchors.right: bubbleOnRight? parent.right : undefined
         property int maxWidth: parent.width-anchors.leftMargin-anchors.rightMargin
         width: Settings.bubbles? Math.min(maxWidth,implicitWidth+metadata.width) : maxWidth
-        padding: isStateEvent? 0 : 2
+        leftPadding: 4
+        rightPadding: (Settings.bubbles && !isStateEvent)? 4: 2
+        topPadding: (Settings.bubbles && !isStateEvent)? 4: 2
+        bottomPadding: topPadding
         background: Rectangle {
             property color userColor: TimelineManager.userColor(userId, Nheko.colors.base)
             property color bgColor: Nheko.colors.base
-            color: Qt.tint(bgColor, Qt.rgba(userColor.r, userColor.g, userColor.b, 0.2))
+            color: Qt.tint(bgColor, Qt.hsla(userColor.hslHue, 0.5, userColor.hslLightness, 0.2))
-            radius: parent.padding*2
+            radius: 4
             visible: Settings.bubbles && !isStateEvent
         }
 
         contentItem: GridLayout {
             id: msg
-            property bool narrowLayout: Settings.bubbles //&& (timelineView.width < 500) // timelineView causes fewew binding loops than r. But maybe it shouldn't depend on width anyway
             rowSpacing: 0
             columnSpacing: 2
-            columns: narrowLayout? 1 : 2
+            columns: Settings.bubbles? 1 : 2
-            rows: narrowLayout? 3 : 2
+            rows: Settings.bubbles? 3 : 2
 
             // fancy reply, if this is a reply
             Reply {
@@ -170,15 +173,15 @@ Item {
 
             RowLayout {
                 id: metadata
-                Layout.column: msg.narrowLayout? 0 : 1
+                Layout.column: Settings.bubbles? 0 : 1
-                Layout.row: msg.narrowLayout? 2 : 0
+                Layout.row: Settings.bubbles? 2 : 0
-                Layout.rowSpan: msg.narrowLayout? 1 : 2
+                Layout.rowSpan: Settings.bubbles? 1 : 2
-                Layout.bottomMargin: -4
+                Layout.bottomMargin: -2
                 Layout.alignment: Qt.AlignTop | Qt.AlignRight
                 Layout.preferredWidth: implicitWidth
                 visible: !isStateEvent
 
-                property double scaling: msg.narrowLayout? 0.75 : 1
+                property double scaling: Settings.bubbles? 0.75 : 1
 
                 StatusIndicator {
                     Layout.alignment: Qt.AlignRight | Qt.AlignTop
@@ -238,8 +241,7 @@ Item {
         anchors {
             top: row.bottom
             topMargin: -2
-            left: parent.left
+            left: row.left
-            leftMargin: Nheko.avatarSize + 16
         }
 
         id: reactionRow

resources/qml/delegates/Reply.qml

@@ -137,7 +137,7 @@ Item {
         anchors.fill: replyContainer
         property color userColor: TimelineManager.userColor(userId, Nheko.colors.base)
         property color bgColor: Nheko.colors.base
-        color: Qt.tint(bgColor, Qt.rgba(userColor.r, userColor.g, userColor.b, 0.1))
+        color: Qt.tint(bgColor, Qt.hsla(userColor.hslHue, 0.5, userColor.hslLightness, 0.1))
     }
 
 }

src/UserSettingsPage.cpp

@@ -71,6 +71,7 @@ UserSettings::load(std::optional<QString> profile)
       settings.value(QStringLiteral("user/timeline/enlarge_emoji_only_msg"), false).toBool();
     markdown_ = settings.value(QStringLiteral("user/markdown_enabled"), true).toBool();
     bubbles_  = settings.value(QStringLiteral("user/bubbles_enabled"), true).toBool();
+    smallAvatars_  = settings.value(QStringLiteral("user/small_avatars_enabled"), true).toBool();
     animateImagesOnHover_ =
       settings.value(QStringLiteral("user/animate_images_on_hover"), false).toBool();
     typingNotifications_ =
@@ -253,6 +254,16 @@ UserSettings::setBubbles(bool state)
     save();
 }
 
+void
+UserSettings::setSmallAvatars(bool state)
+{
+    if (state == smallAvatars_)
+        return;
+    smallAvatars_ = state;
+    emit smallAvatarsChanged(state);
+    save();
+}
+
 void
 UserSettings::setAnimateImagesOnHover(bool state)
 {
@@ -708,6 +719,7 @@ UserSettings::save()
     settings.setValue(QStringLiteral("group_view"), groupView_);
     settings.setValue(QStringLiteral("markdown_enabled"), markdown_);
     settings.setValue(QStringLiteral("bubbles_enabled"), bubbles_);
+    settings.setValue(QStringLiteral("small_avatars_enabled"), smallAvatars_);
     settings.setValue(QStringLiteral("animate_images_on_hover"), animateImagesOnHover_);
     settings.setValue(QStringLiteral("desktop_notifications"), hasDesktopNotifications_);
     settings.setValue(QStringLiteral("alert_on_notification"), hasAlertOnNotification_);
@@ -810,6 +822,8 @@ UserSettingsModel::data(const QModelIndex &index, int role) const
             return tr("Send messages as Markdown");
         case Bubbles:
             return tr("Enable message bubbles");
+        case SmallAvatars:
+            return tr("Enable small Avatars");
         case AnimateImagesOnHover:
             return tr("Play animated images only on hover");
         case TypingNotifications:
@@ -932,6 +946,8 @@ UserSettingsModel::data(const QModelIndex &index, int role) const
             return i->markdown();
         case Bubbles:
             return i->bubbles();
+        case SmallAvatars:
+            return i->smallAvatars();
         case AnimateImagesOnHover:
             return i->animateImagesOnHover();
         case TypingNotifications:
@@ -1061,6 +1077,9 @@ UserSettingsModel::data(const QModelIndex &index, int role) const
         case Bubbles:
             return tr(
               "Messages get a bubble background. This also triggers some layout changes (WIP).");
+        case SmallAvatars:
+            return tr(
+              "Avatars are resized to fit above the message.");
         case AnimateImagesOnHover:
             return tr("Plays media like GIFs or WEBPs only when explicitly hovering over them.");
         case TypingNotifications:
@@ -1178,6 +1197,7 @@ UserSettingsModel::data(const QModelIndex &index, int role) const
         case GroupView:
         case Markdown:
         case Bubbles:
+        case SmallAvatars:
         case AnimateImagesOnHover:
         case TypingNotifications:
         case SortByImportance:
@@ -1402,6 +1422,13 @@ UserSettingsModel::setData(const QModelIndex &index, const QVariant &value, int
             } else
                 return false;
         }
+        case SmallAvatars: {
+            if (value.userType() == QMetaType::Bool) {
+                i->setSmallAvatars(value.toBool());
+                return true;
+            } else
+                return false;
+        }
         case AnimateImagesOnHover: {
             if (value.userType() == QMetaType::Bool) {
                 i->setAnimateImagesOnHover(value.toBool());
@@ -1767,7 +1794,9 @@ UserSettingsModel::UserSettingsModel(QObject *p)
     connect(s.get(), &UserSettings::bubblesChanged, this, [this]() {
         emit dataChanged(index(Bubbles), index(Bubbles), {Value});
     });
-
+    connect(s.get(), &UserSettings::smallAvatarsChanged, this, [this]() {
+        emit dataChanged(index(SmallAvatars), index(SmallAvatars), {Value});
+    });
     connect(s.get(), &UserSettings::groupViewStateChanged, this, [this]() {
         emit dataChanged(index(GroupView), index(GroupView), {Value});
     });

src/UserSettingsPage.h

@@ -41,6 +41,7 @@ class UserSettings : public QObject
     Q_PROPERTY(bool groupView READ groupView WRITE setGroupView NOTIFY groupViewStateChanged)
     Q_PROPERTY(bool markdown READ markdown WRITE setMarkdown NOTIFY markdownChanged)
     Q_PROPERTY(bool bubbles READ bubbles WRITE setBubbles NOTIFY bubblesChanged)
+    Q_PROPERTY(bool smallAvatars READ smallAvatars WRITE setSmallAvatars NOTIFY smallAvatarsChanged)
     Q_PROPERTY(bool animateImagesOnHover READ animateImagesOnHover WRITE setAnimateImagesOnHover
                  NOTIFY animateImagesOnHoverChanged)
     Q_PROPERTY(bool typingNotifications READ typingNotifications WRITE setTypingNotifications NOTIFY
@@ -141,6 +142,7 @@ public:
     void setGroupView(bool state);
     void setMarkdown(bool state);
     void setBubbles(bool state);
+    void setSmallAvatars(bool state);
     void setAnimateImagesOnHover(bool state);
     void setReadReceipts(bool state);
     void setTypingNotifications(bool state);
@@ -193,6 +195,7 @@ public:
     int privacyScreenTimeout() const { return privacyScreenTimeout_; }
     bool markdown() const { return markdown_; }
     bool bubbles() const { return bubbles_; }
+    bool smallAvatars() const { return smallAvatars_; }
     bool animateImagesOnHover() const { return animateImagesOnHover_; }
     bool typingNotifications() const { return typingNotifications_; }
     bool sortByImportance() const { return sortByImportance_; }
@@ -251,6 +254,7 @@ signals:
     void startInTrayChanged(bool state);
     void markdownChanged(bool state);
     void bubblesChanged(bool state);
+    void smallAvatarsChanged(bool state);
     void animateImagesOnHoverChanged(bool state);
     void typingNotificationsChanged(bool state);
     void buttonInTimelineChanged(bool state);
@@ -307,6 +311,7 @@ private:
     bool groupView_;
     bool markdown_;
     bool bubbles_;
+    bool smallAvatars_;
     bool animateImagesOnHover_;
     bool typingNotifications_;
     bool sortByImportance_;
@@ -386,7 +391,7 @@ class UserSettingsModel : public QAbstractListModel
         ButtonsInTimeline,
         Markdown,
         Bubbles,
-
+        SmallAvatars,
         SidebarSection,
         GroupView,
         SortByImportance,