imports/Spectral/Component/AutoListView.qml

@@ -1,8 +1,6 @@
 import QtQuick 2.12
 
 ListView {
-    pixelAligned: true
-
     ScrollHelper {
         anchors.fill: parent
 

imports/Spectral/Component/Avatar.qml

@@ -18,6 +18,7 @@ Item {
         sourceSize.width: width
         sourceSize.height: width
         fillMode: Image.PreserveAspectCrop
+        mipmap: true
         layer.enabled: true
         layer.effect: OpacityMask {
             maskSource: Rectangle {

imports/Spectral/Component/ScrollHelper.qml

@@ -1,49 +1,34 @@
-/*
- *  Copyright (C) 2016 Michael Bohlender, <michael.bohlender@kdemail.net>
- *  Copyright (C) 2017 Christian Mollekopf, <mollekopf@kolabsystems.com>
- *
- *  This program is free software; you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- *  the Free Software Foundation; either version 2 of the License, or
- *  (at your option) any later version.
- *
- *  This program is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- *  GNU General Public License for more details.
- *
- *  You should have received a copy of the GNU General Public License along
- *  with this program; if not, write to the Free Software Foundation, Inc.,
- *  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
- */
-
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 
-/*
-* The MouseArea + interactive: false + maximumFlickVelocity are required
-* to fix scrolling for desktop systems where we don't want flicking behaviour.
-*
-* See also:
-* ScrollView.qml in qtquickcontrols
-* qquickwheelarea.cpp in qtquickcontrols
-*/
 MouseArea {
     id: root
     propagateComposedEvents: true
 
     property Flickable flickable
-    property alias enabled: root.enabled
 
     //Place the mouse area under the flickable
     z: -1
     onFlickableChanged: {
-        if (enabled) {
         flickable.interactive = false
         flickable.maximumFlickVelocity = 100000
         flickable.boundsBehavior = Flickable.StopAtBounds
-            root.parent = flickable
     }
+
+    function scrollByPixelDelta(flickableItem, pixelDelta) {
+        if (!pixelDelta) {
+            return flickableItem.contentY;
+        }
+
+        var minYExtent = flickableItem.originY + flickableItem.topMargin;
+        var maxYExtent = (flickableItem.contentHeight + flickableItem.bottomMargin + flickableItem.originY) - flickableItem.height;
+
+        if (typeof(flickableItem.headerItem) !== "undefined" && flickableItem.headerItem) {
+            minYExtent += flickableItem.headerItem.height
+        }
+
+        //Avoid overscrolling
+        return Math.max(minYExtent, Math.min(maxYExtent, flickableItem.contentY - pixelDelta));
     }
 
     function calculateNewPosition(flickableItem, wheel) {
@@ -67,30 +52,27 @@ MouseArea {
             pixelDelta = wheel.pixelDelta.y
         }
 
-        if (!pixelDelta) {
+        return scrollByPixelDelta(flickableItem, pixelDelta);
-            return flickableItem.contentY;
     }
 
-        var minYExtent = flickableItem.originY + flickableItem.topMargin;
+    function scrollDown() {
-        var maxYExtent = (flickableItem.contentHeight + flickableItem.bottomMargin + flickableItem.originY) - flickableItem.height;
+        flickable.flick(0, 0);
-
+        flickable.contentY = scrollByPixelDelta(flickable, -60); //3 lines * 20 pixels
-        if (typeof(flickableItem.headerItem) !== "undefined" && flickableItem.headerItem) {
-            minYExtent += flickableItem.headerItem.height
     }
 
-        //Avoid overscrolling
+    function scrollUp() {
-        return Math.max(minYExtent, Math.min(maxYExtent, flickableItem.contentY - pixelDelta));
+        flickable.flick(0, 0);
+        flickable.contentY = scrollByPixelDelta(flickable, 60); //3 lines * 20 pixels
     }
 
     onWheel: {
-        var newPos = calculateNewPosition(flickable, wheel);
         // console.warn("Delta: ", wheel.pixelDelta.y);
         // console.warn("Old position: ", flickable.contentY);
         // console.warn("New position: ", newPos);
 
         // Show the scrollbars
         flickable.flick(0, 0);
-        flickable.contentY = newPos;
+        flickable.contentY = calculateNewPosition(flickable, wheel);
         cancelFlickStateTimer.start()
     }
 

imports/Spectral/Component/Timeline/FileDelegate.qml

@@ -76,7 +76,7 @@ ColumnLayout {
 
             visible: !(sentByMe || avatarVisible)
 
-            text: Qt.formatTime(time, "hh:mm AP")
+            text: Qt.formatDateTime(time, "hh:mm")
             color: "#5B7480"
 
             font.pixelSize: 10
@@ -119,58 +119,6 @@ ColumnLayout {
                 color: MPalette.background
                 radius: 18
 
-                Rectangle {
-                    anchors.top: parent.top
-                    anchors.left: parent.left
-
-                    width: parent.width / 2
-                    height: parent.height / 2
-
-                    visible: !sentByMe && (bubbleShape == 3 || bubbleShape == 2)
-
-                    color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
-                    radius: 2
-                }
-
-                Rectangle {
-                    anchors.top: parent.top
-                    anchors.right: parent.right
-
-                    width: parent.width / 2
-                    height: parent.height / 2
-
-                    visible: sentByMe && (bubbleShape == 3 || bubbleShape == 2)
-
-                    color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
-                    radius: 2
-                }
-
-                Rectangle {
-                    anchors.bottom: parent.bottom
-                    anchors.left: parent.left
-
-                    width: parent.width / 2
-                    height: parent.height / 2
-
-                    visible: !sentByMe && (bubbleShape == 1 || bubbleShape == 2)
-
-                    color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
-                    radius: 2
-                }
-
-                Rectangle {
-                    anchors.bottom: parent.bottom
-                    anchors.right: parent.right
-
-                    width: parent.width / 2
-                    height: parent.height / 2
-
-                    visible: sentByMe && (bubbleShape == 1 || bubbleShape == 2)
-
-                    color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
-                    radius: 2
-                }
-
                 AutoMouseArea {
                     anchors.fill: parent
 

imports/Spectral/Component/Timeline/ImageDelegate.qml

@@ -14,8 +14,8 @@ import Spectral.Menu.Timeline 2.0
 import Spectral.Effect 2.0
 import Spectral.Font 0.1
 
-RowLayout {
+ColumnLayout {
-    readonly property bool avatarVisible: showAuthor && !sentByMe
+    readonly property bool avatarVisible: !sentByMe && showAuthor
     readonly property bool sentByMe: author === currentRoom.localUser
 
     property bool openOnFinished: false
@@ -23,9 +23,7 @@ RowLayout {
 
     id: root
 
-    spacing: 4
+    spacing: 0
-
-    z: -5
 
     onDownloadedChanged: {
         if (downloaded && openOnFinished) {
@@ -34,10 +32,28 @@ RowLayout {
         }
     }
 
+    Label {
+        Layout.leftMargin: 48
+
+        text: author.displayName
+
+        visible: avatarVisible
+
+        font.pixelSize: 13
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    RowLayout {
+        z: -5
+
+        id: messageRow
+
+        spacing: 4
+
         Avatar {
             Layout.preferredWidth: 32
             Layout.preferredHeight: 32
-        Layout.alignment: Qt.AlignBottom
+            Layout.alignment: Qt.AlignTop
 
             visible: avatarVisible
             hint: author.displayName
@@ -61,8 +77,16 @@ RowLayout {
         Label {
             Layout.preferredWidth: 32
             Layout.preferredHeight: 32
+            Layout.alignment: Qt.AlignTop
 
             visible: !(sentByMe || avatarVisible)
+
+            text: Qt.formatDateTime(time, "hh:mm")
+            color: "#5B7480"
+
+            font.pixelSize: 10
+            horizontalAlignment: Label.AlignHCenter
+            verticalAlignment: Label.AlignVCenter
         }
 
         BusyIndicator {
@@ -73,7 +97,7 @@ RowLayout {
         }
 
         Image {
-        Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + root.spacing : 0) - 48
+            Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + messageRow.spacing : 0) - 48
 
             id: img
 
@@ -91,37 +115,7 @@ RowLayout {
                 maskSource: Rectangle {
                     width: img.width
                     height: img.height
-                radius: 5
+                    radius: 6
-            }
-        }
-
-        Control {
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 8
-            anchors.right: parent.right
-            anchors.rightMargin: 8
-
-            horizontalPadding: 8
-            verticalPadding: 4
-
-            contentItem: RowLayout {
-                Label {
-                    text: Qt.formatTime(time, "hh:mm AP")
-                    color: "white"
-                    font.pixelSize: 12
-                }
-
-                Label {
-                    text: author.displayName
-                    color: "white"
-                    font.pixelSize: 12
-                }
-            }
-
-            background: Rectangle {
-                radius: height / 2
-                color: "black"
-                opacity: 0.3
                 }
             }
 
@@ -195,6 +189,7 @@ RowLayout {
                 }
             }
         }
+    }
 
     function saveFileAs() {
         var folderDialog = openFolderDialog.createObject(ApplicationWindow.overlay)

imports/Spectral/Component/Timeline/MessageDelegate.qml

@@ -27,8 +27,6 @@ ColumnLayout {
     spacing: 0
 
     RowLayout {
-        Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
-
         id: messageRow
 
         spacing: 4
@@ -36,7 +34,7 @@ ColumnLayout {
         Avatar {
             Layout.preferredWidth: 32
             Layout.preferredHeight: 32
-            Layout.alignment: Qt.AlignBottom
+            Layout.alignment: Qt.AlignTop
 
             visible: avatarVisible
             hint: author.displayName
@@ -191,8 +189,6 @@ ColumnLayout {
                     Control {
                         Layout.fillWidth: true
 
-                        visible: replyVisible
-
                         padding: 0
 
                         background: RippleEffect {
@@ -200,6 +196,9 @@ ColumnLayout {
                         }
 
                         contentItem: Label {
+                            Layout.fillWidth: true
+
+                            visible: replyVisible
                             color: darkBackground ? "white" : MPalette.lighter
                             text: "<style>a{color: " + (darkBackground ? "white" : MPalette.foreground) + ";} .user-pill{}</style>" + (replyDisplay || "")
 
@@ -263,18 +262,20 @@ ColumnLayout {
         Layout.rightMargin: sentByMe ? 12 : undefined
         Layout.bottomMargin: 4
 
-        visible: showAuthor
+        visible: showTimestamp || (showAuthor && !sentByMe)
 
         Label {
-            visible: !sentByMe
+            visible: showTimestamp
+
+            text: Qt.formatDateTime(time, "hh:mm")
+            color: MPalette.lighter
+        }
+
+        Label {
+            visible: showAuthor && !sentByMe
 
             text: author.displayName
             color: MPalette.lighter
         }
-
-        Label {
-            text: Qt.formatTime(time, "hh:mm AP")
-            color: MPalette.lighter
-        }
     }
 }

imports/Spectral/Component/Timeline/SectionDelegate.qml

@@ -3,11 +3,10 @@ import QtQuick.Controls 2.12
 import Spectral.Setting 0.1
 
 Label {
-    text: section + " • " + Qt.formatTime(time, "hh:mm AP")
+    text: section + " • " + Qt.formatTime(time, "hh:mm")
     color: MPalette.foreground
     font.pixelSize: 13
     font.weight: Font.Medium
     font.capitalization: Font.AllUppercase
     verticalAlignment: Text.AlignVCenter
-    padding: 8
 }

imports/Spectral/Component/Timeline/StateDelegate.qml

@@ -3,33 +3,26 @@ import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.12
 import QtQuick.Controls.Material 2.12
 
-import Spectral.Component 2.0
 import Spectral.Setting 0.1
 
-Control {
+Label {
-    padding: 8
+    text: "<b>" + author.displayName + "</b> " + display
-
-    contentItem: RowLayout {
-        Avatar {
-            Layout.preferredWidth: 24
-            Layout.preferredHeight: 24
-
-            hint: author.displayName
-            source: author.avatarMediaId
-        }
-
-        Label {
-            Layout.fillWidth: true
-            Layout.maximumWidth: messageListView.width - 48
-
-            text: "<b>" + author.displayName + "</b> " + display + " • " + Qt.formatTime(time, "hh:mm AP")
     color: MPalette.foreground
     font.pixelSize: 13
     font.weight: Font.Medium
-            textFormat: Label.StyledText
+
+    topPadding: 8
+    bottomPadding: 8
+    leftPadding: 24
+    rightPadding: 24
 
     wrapMode: Label.Wrap
+    textFormat: MSettings.richText ? Text.RichText : Text.StyledText
     onLinkActivated: Qt.openUrlExternally(link)
-        }
+
+    background: Rectangle {
+        color: MPalette.background
+        radius: 4
+        antialiasing: true
     }
 }

imports/Spectral/Panel/RoomListPanel.qml

@@ -201,8 +201,6 @@ Item {
             background: Rectangle {
                 color: Material.background
 
-                opacity: listView.atYBeginning ? 0 : 1
-
                 layer.enabled: true
                 layer.effect: ElevationEffect {
                     elevation: 2

imports/Spectral/Panel/RoomPanel.qml

@@ -155,6 +155,8 @@ Item {
                         roleValue: "state"
                         delegate: StateDelegate {
                             anchors.horizontalCenter: parent.horizontalCenter
+
+                            width: Math.min(implicitWidth, parent.width)
                         }
                     }
 
@@ -162,78 +164,40 @@ Item {
                         roleValue: "emote"
                         delegate: StateDelegate {
                             anchors.horizontalCenter: parent.horizontalCenter
+
+                            width: Math.min(implicitWidth, parent.width)
                         }
                     }
 
                     DelegateChoice {
                         roleValue: "message"
-                        delegate: ColumnLayout {
+                        delegate: MessageDelegate {
-                            width: messageListView.width
+                            anchors.right: sentByMe ? parent.right : undefined
-
-                            SectionDelegate {
-                                Layout.alignment: Qt.AlignHCenter
-                                Layout.maximumWidth: parent.width
-
-                                visible: showSection
-                            }
-
-                            MessageDelegate {
-                                Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
-                            }
                         }
                     }
 
                     DelegateChoice {
                         roleValue: "notice"
-                        delegate: ColumnLayout {
+                        delegate: MessageDelegate {
-                            width: messageListView.width
+                            anchors.right: sentByMe ? parent.right : undefined
-
-                            SectionDelegate {
-                                Layout.alignment: Qt.AlignHCenter
-                                Layout.maximumWidth: parent.width
-
-                                visible: showSection
-                            }
-
-                            MessageDelegate {
-                                Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
-                            }
                         }
                     }
 
                     DelegateChoice {
                         roleValue: "image"
-                        delegate: ColumnLayout {
+                        delegate: ImageDelegate {
-                            width: messageListView.width
+                            anchors.right: sentByMe ? parent.right : undefined
 
-                            SectionDelegate {
-                                Layout.alignment: Qt.AlignHCenter
                             Layout.maximumWidth: parent.width
-
-                                visible: showSection
-                            }
-
-                            ImageDelegate {
-                                Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
-                            }
                         }
                     }
 
                     DelegateChoice {
                         roleValue: "file"
-                        delegate: ColumnLayout {
+                        delegate: FileDelegate {
-                            width: messageListView.width
+                            anchors.right: sentByMe ? parent.right : undefined
 
-                            SectionDelegate {
-                                Layout.alignment: Qt.AlignHCenter
                             Layout.maximumWidth: parent.width
-
-                                visible: showSection
-                            }
-
-                            FileDelegate {
-                                Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
-                            }
                         }
                     }
 

src/messageeventmodel.cpp

@@ -34,8 +34,8 @@ QHash<int, QByteArray> MessageEventModel::roleNames() const {
   roles[ReplyAuthorRole] = "replyAuthor";
   roles[ReplyDisplayRole] = "replyDisplay";
   roles[UserMarkerRole] = "userMarker";
+  roles[ShowTimestampRole] = "showTimestamp";
   roles[ShowAuthorRole] = "showAuthor";
-  roles[ShowSectionRole] = "showSection";
   roles[BubbleShapeRole] = "bubbleShape";
   return roles;
 }
@@ -83,8 +83,9 @@ void MessageEventModel::setRoom(SpectralRoom* room) {
               if (biggest < m_currentRoom->maxTimelineIndex()) {
                 auto rowBelowInserted = m_currentRoom->maxTimelineIndex() -
                                         biggest + timelineBaseIndex() - 1;
-                refreshEventRoles(rowBelowInserted,
+                refreshEventRoles(
-                                  {ShowAuthorRole, BubbleShapeRole});
+                    rowBelowInserted,
+                    {ShowTimestampRole, ShowAuthorRole, BubbleShapeRole});
               }
               for (auto i = m_currentRoom->maxTimelineIndex() - biggest;
                    i <= m_currentRoom->maxTimelineIndex() - lowest; ++i)
@@ -115,7 +116,7 @@ void MessageEventModel::setRoom(SpectralRoom* room) {
         refreshEventRoles(timelineBaseIndex() + 1, {ReadMarkerRole});
       if (timelineBaseIndex() > 0)  // Refresh below, see #312
         refreshEventRoles(timelineBaseIndex() - 1,
-                          {ShowAuthorRole, BubbleShapeRole});
+                          {ShowTimestampRole, ShowAuthorRole, BubbleShapeRole});
     });
     connect(m_currentRoom, &Room::pendingEventChanged, this,
             &MessageEventModel::refreshRow);
@@ -289,11 +290,9 @@ QVariant MessageEventModel::data(const QModelIndex& idx, int role) const {
           return "image";
         case MessageEventType::Audio:
           return "audio";
+        default:
+          return e->hasFileContent() ? "file" : "message";
       }
-      if (e->hasFileContent())
-        return "file";
-
-      return "message";
     }
     if (evt.isStateEvent())
       return "state";
@@ -416,13 +415,11 @@ QVariant MessageEventModel::data(const QModelIndex& idx, int role) const {
     return {};
   }
 
-  if (role == ShowAuthorRole) {
+  if (role == ShowTimestampRole) {
     for (auto r = row - 1; r >= 0; --r) {
       auto i = index(r);
       if (data(i, SpecialMarksRole) != EventStatus::Hidden) {
-        return data(i, AuthorRole) != data(idx, AuthorRole) ||
+        return data(idx, TimeRole)
-               data(i, EventTypeRole) != data(idx, EventTypeRole) ||
-               data(idx, TimeRole)
                    .toDateTime()
                    .msecsTo(data(i, TimeRole).toDateTime()) > 600000;
       }
@@ -431,13 +428,12 @@ QVariant MessageEventModel::data(const QModelIndex& idx, int role) const {
     return true;
   }
 
-  if (role == ShowSectionRole) {
+  if (role == ShowAuthorRole) {
-    for (auto r = row + 1; r < rowCount(); ++r) {
+    for (auto r = row - 1; r >= 0; --r) {
       auto i = index(r);
       if (data(i, SpecialMarksRole) != EventStatus::Hidden) {
-        return data(i, TimeRole)
+        return data(i, AuthorRole) != data(idx, AuthorRole) ||
-                   .toDateTime()
+               data(i, EventTypeRole) != data(idx, EventTypeRole);
-                   .msecsTo(data(idx, TimeRole).toDateTime()) > 600000;
       }
     }
 
@@ -459,9 +455,11 @@ QVariant MessageEventModel::data(const QModelIndex& idx, int role) const {
     if (aboveRow == -1) {
       aboveShow = true;
     } else {
-      aboveShow = data(index(aboveRow), ShowAuthorRole).toBool();
+      aboveShow = data(index(aboveRow), ShowAuthorRole).toBool() ||
+                  data(index(aboveRow), ShowTimestampRole).toBool();
     }
-    belowShow = data(idx, ShowAuthorRole).toBool();
+    belowShow = data(idx, ShowAuthorRole).toBool() ||
+                data(idx, ShowTimestampRole).toBool();
 
     if (aboveShow && belowShow)
       return BubbleShapes::NoShape;

src/messageeventmodel.h

@@ -31,8 +31,8 @@ class MessageEventModel : public QAbstractListModel {
     ReplyAuthorRole,
     ReplyDisplayRole,
 
+    ShowTimestampRole,
     ShowAuthorRole,
-    ShowSectionRole,
     BubbleShapeRole,
     // For debugging
     EventResolvedTypeRole,

src/spectralroom.h

@@ -144,10 +144,8 @@ class SpectralRoom : public Room {
                   text += " and ";
                 if (e.avatarUrl().isEmpty())
                   text += tr("cleared the avatar");
-                else if (e.prevContent()->avatarUrl.isEmpty())
-                  text += tr("set an avatar");
                 else
-                  text += tr("updated their avatar");
+                  text += tr("updated the avatar");
               }
               return text;
             }