diff --git a/resources/qml/MessageView.qml b/resources/qml/MessageView.qml index 3fddc782..c465c72e 100644 --- a/resources/qml/MessageView.qml +++ b/resources/qml/MessageView.qml @@ -249,8 +249,8 @@ ScrollView { id: sectionHeader Column { - topPadding: 0 - bottomPadding: 0 + topPadding: userName_.visible? 4: 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) - height: Nheko.avatarSize * (Settings.bubbles? 0.5 : 1) + width: Nheko.avatarSize * (Settings.smallAvatars? 0.5 : 1) + height: Nheko.avatarSize * (Settings.smallAvatars? 0.5 : 1) url: !room ? "" : room.avatarUrl(userId).replace("mxc://", "image://MxcImage/") displayName: userName userid: userId diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml index f189f042..c7508a1c 100644 --- a/resources/qml/TimelineRow.qml +++ b/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 - anchors.leftMargin: (Settings.bubbles? 0 : Nheko.avatarSize) + (bubbleOnRight? parent.width/8 : 8) // align bubble with section header + property int bubblePadding: (parent.width-(Settings.smallAvatars? 0 : Nheko.avatarSize+8))/10 + 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)) - radius: parent.padding*2 + color: Qt.tint(bgColor, Qt.hsla(userColor.hslHue, 0.5, userColor.hslLightness, 0.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 - rows: narrowLayout? 3 : 2 + columns: Settings.bubbles? 1 : 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.row: msg.narrowLayout? 2 : 0 - Layout.rowSpan: msg.narrowLayout? 1 : 2 - Layout.bottomMargin: -4 + Layout.column: Settings.bubbles? 0 : 1 + Layout.row: Settings.bubbles? 2 : 0 + Layout.rowSpan: Settings.bubbles? 1 : 2 + 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 - leftMargin: Nheko.avatarSize + 16 + left: row.left } id: reactionRow diff --git a/resources/qml/delegates/Reply.qml b/resources/qml/delegates/Reply.qml index c60867de..a439b2eb 100644 --- a/resources/qml/delegates/Reply.qml +++ b/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)) } } diff --git a/src/UserSettingsPage.cpp b/src/UserSettingsPage.cpp index 80947950..265e45a6 100644 --- a/src/UserSettingsPage.cpp +++ b/src/UserSettingsPage.cpp @@ -71,6 +71,7 @@ UserSettings::load(std::optional 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}); }); diff --git a/src/UserSettingsPage.h b/src/UserSettingsPage.h index e5d22f6a..8f76c58f 100644 --- a/src/UserSettingsPage.h +++ b/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,