Add message bubbles

resources/qml/TimelineRow.qml

@@ -75,10 +75,19 @@ Item {
         id: row
 
         anchors.rightMargin: 1
-        anchors.leftMargin: Nheko.avatarSize + 16
+        anchors.leftMargin: Nheko.avatarSize + 12
         anchors.left: parent.left
         anchors.right: parent.right
-        height: msg.height+reactionRow.height+2
+        height: msg.height+(reactionRow.height> 0 ? reactionRow.height-4 : 0)
+        Rectangle {
+            anchors.fill: msg
+            property color userColor: TimelineManager.userColor(userId, Nheko.colors.base)
+            property color bgColor: Nheko.colors.base
+            color: Qt.rgba(userColor.r*0.1+bgColor.r*0.9,userColor.g*0.1+bgColor.g*0.9,userColor.b*0.1+bgColor.b*0.9,1) //TimelineManager.userColor(userId, Nheko.colors.base)
+            radius: 4
+            visible: Settings.bubbles
+        }
+
         GridLayout {
             id: msg
             anchors {
@@ -98,7 +107,9 @@ Item {
                 Layout.row: 0
                 Layout.column: 0
                 Layout.fillWidth: true
-                Layout.margins: 0
+                Layout.margins: visible? 4 : 0
+                Layout.bottomMargin: 0
+                Layout.topMargin: visible? (Settings.bubbles? 4 : 2) : 0
                 id: reply
 
                 function fromModel(role) {
@@ -133,7 +144,10 @@ Item {
                 Layout.row: 1
                 Layout.column: 0
                 Layout.fillWidth: true
-                Layout.margins: 2
+                Layout.leftMargin: 4
+                Layout.rightMargin: 4
+                Layout.topMargin: reply.visible ? 2 : 4
+                Layout.bottomMargin: Settings.bubbles? 4: 2
                 id: contentItem
 
                 blurhash: r.blurhash
@@ -164,6 +178,8 @@ Item {
                 Layout.row: 0
                 Layout.rowSpan: 2
                 Layout.alignment: Qt.AlignTop | Qt.AlignRight
+                Layout.topMargin: 4
+                Layout.rightMargin: Settings.bubbles? 4 : 0
 
                 StatusIndicator {
                     Layout.alignment: Qt.AlignRight | Qt.AlignTop
@@ -221,7 +237,7 @@ Item {
 
         Reactions {
             anchors {
-                top: msg.bottom
+                bottom: parent.bottom
                 left: parent.left
             }
 

resources/qml/delegates/Reply.qml

@@ -130,7 +130,9 @@ Item {
 
         z: -1
         anchors.fill: replyContainer
-        color: Qt.rgba(userColor.r, userColor.g, userColor.b, 0.1)
+        property color userColor: TimelineManager.userColor(userId, Nheko.colors.base)
+        property color bgColor: Nheko.colors.base
+        color: Qt.rgba(userColor.r*0.1+bgColor.r*0.9,userColor.g*0.1+bgColor.g*0.9,userColor.b*0.1+bgColor.b*0.9,1) // alpha makes this mix with the bubble color
     }
 
 }

src/UserSettingsPage.cpp

@@ -70,6 +70,7 @@ UserSettings::load(std::optional<QString> profile)
     enlargeEmojiOnlyMessages_ =
       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();
     animateImagesOnHover_ =
       settings.value(QStringLiteral("user/animate_images_on_hover"), false).toBool();
     typingNotifications_ =
@@ -242,6 +243,16 @@ UserSettings::setMarkdown(bool state)
     save();
 }
 
+void
+UserSettings::setBubbles(bool state)
+{
+    if (state == bubbles_)
+        return;
+    bubbles_ = state;
+    emit bubblesChanged(state);
+    save();
+}
+
 void
 UserSettings::setAnimateImagesOnHover(bool state)
 {
@@ -696,6 +707,7 @@ UserSettings::save()
     settings.setValue(QStringLiteral("read_receipts"), readReceipts_);
     settings.setValue(QStringLiteral("group_view"), groupView_);
     settings.setValue(QStringLiteral("markdown_enabled"), markdown_);
+    settings.setValue(QStringLiteral("bubbles_enabled"), bubbles_);
     settings.setValue(QStringLiteral("animate_images_on_hover"), animateImagesOnHover_);
     settings.setValue(QStringLiteral("desktop_notifications"), hasDesktopNotifications_);
     settings.setValue(QStringLiteral("alert_on_notification"), hasAlertOnNotification_);
@@ -796,6 +808,8 @@ UserSettingsModel::data(const QModelIndex &index, int role) const
             return tr("Group's sidebar");
         case Markdown:
             return tr("Send messages as Markdown");
+        case Bubbles:
+            return tr("Enable Message bubbles");
         case AnimateImagesOnHover:
             return tr("Play animated images only on hover");
         case TypingNotifications:
@@ -916,6 +930,8 @@ UserSettingsModel::data(const QModelIndex &index, int role) const
             return i->groupView();
         case Markdown:
             return i->markdown();
+        case Bubbles:
+            return i->bubbles();
         case AnimateImagesOnHover:
             return i->animateImagesOnHover();
         case TypingNotifications:
@@ -1042,6 +1058,9 @@ UserSettingsModel::data(const QModelIndex &index, int role) const
             return tr(
               "Allow using markdown in messages.\nWhen disabled, all messages are sent as a plain "
               "text.");
+        case Bubbles:
+            return tr(
+              "Messages received a bubble background.");
         case AnimateImagesOnHover:
             return tr("Plays media like GIFs or WEBPs only when explicitly hovering over them.");
         case TypingNotifications:
@@ -1158,6 +1177,7 @@ UserSettingsModel::data(const QModelIndex &index, int role) const
         case StartInTray:
         case GroupView:
         case Markdown:
+        case Bubbles:
         case AnimateImagesOnHover:
         case TypingNotifications:
         case SortByImportance:
@@ -1375,6 +1395,13 @@ UserSettingsModel::setData(const QModelIndex &index, const QVariant &value, int
             } else
                 return false;
         }
+        case Bubbles: {
+            if (value.userType() == QMetaType::Bool) {
+                i->setBubbles(value.toBool());
+                return true;
+            } else
+                return false;
+        }
         case AnimateImagesOnHover: {
             if (value.userType() == QMetaType::Bool) {
                 i->setAnimateImagesOnHover(value.toBool());
@@ -1737,6 +1764,9 @@ UserSettingsModel::UserSettingsModel(QObject *p)
     connect(s.get(), &UserSettings::markdownChanged, this, [this]() {
         emit dataChanged(index(Markdown), index(Markdown), {Value});
     });
+    connect(s.get(), &UserSettings::bubblesChanged, this, [this]() {
+        emit dataChanged(index(Bubbles), index(Bubbles), {Value});
+    });
 
     connect(s.get(), &UserSettings::groupViewStateChanged, this, [this]() {
         emit dataChanged(index(GroupView), index(GroupView), {Value});

src/UserSettingsPage.h

@@ -40,6 +40,7 @@ class UserSettings : public QObject
     Q_PROPERTY(bool startInTray READ startInTray WRITE setStartInTray NOTIFY startInTrayChanged)
     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 animateImagesOnHover READ animateImagesOnHover WRITE setAnimateImagesOnHover
                  NOTIFY animateImagesOnHoverChanged)
     Q_PROPERTY(bool typingNotifications READ typingNotifications WRITE setTypingNotifications NOTIFY
@@ -139,6 +140,7 @@ public:
     void setEmojiFontFamily(QString family);
     void setGroupView(bool state);
     void setMarkdown(bool state);
+    void setBubbles(bool state);
     void setAnimateImagesOnHover(bool state);
     void setReadReceipts(bool state);
     void setTypingNotifications(bool state);
@@ -190,6 +192,7 @@ public:
     bool privacyScreen() const { return privacyScreen_; }
     int privacyScreenTimeout() const { return privacyScreenTimeout_; }
     bool markdown() const { return markdown_; }
+    bool bubbles() const { return bubbles_; }
     bool animateImagesOnHover() const { return animateImagesOnHover_; }
     bool typingNotifications() const { return typingNotifications_; }
     bool sortByImportance() const { return sortByImportance_; }
@@ -247,6 +250,7 @@ signals:
     void trayChanged(bool state);
     void startInTrayChanged(bool state);
     void markdownChanged(bool state);
+    void bubblesChanged(bool state);
     void animateImagesOnHoverChanged(bool state);
     void typingNotificationsChanged(bool state);
     void buttonInTimelineChanged(bool state);
@@ -302,6 +306,7 @@ private:
     bool startInTray_;
     bool groupView_;
     bool markdown_;
+    bool bubbles_;
     bool animateImagesOnHover_;
     bool typingNotifications_;
     bool sortByImportance_;
@@ -380,6 +385,7 @@ class UserSettingsModel : public QAbstractListModel
         ReadReceipts,
         ButtonsInTimeline,
         Markdown,
+        Bubbles,
 
         SidebarSection,
         GroupView,