Add section back.

Enable pixelAligned for flickable.
Tweak timeline delegate.

imports/Spectral/Component/AutoListView.qml

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

imports/Spectral/Component/Avatar.qml

@@ -18,7 +18,6 @@ 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,34 +1,49 @@
+/*
+ *  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: {
-        flickable.interactive = false
+        if (enabled) {
-        flickable.maximumFlickVelocity = 100000
+            flickable.interactive = false
-        flickable.boundsBehavior = Flickable.StopAtBounds
+            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) {
@@ -52,27 +67,30 @@ MouseArea {
             pixelDelta = wheel.pixelDelta.y
         }
 
-        return scrollByPixelDelta(flickableItem, pixelDelta);
+        if (!pixelDelta) {
-    }
+            return flickableItem.contentY;
+        }
 
-    function scrollDown() {
+        var minYExtent = flickableItem.originY + flickableItem.topMargin;
-        flickable.flick(0, 0);
+        var maxYExtent = (flickableItem.contentHeight + flickableItem.bottomMargin + flickableItem.originY) - flickableItem.height;
-        flickable.contentY = scrollByPixelDelta(flickable, -60); //3 lines * 20 pixels
-    }
 
-    function scrollUp() {
+        if (typeof(flickableItem.headerItem) !== "undefined" && flickableItem.headerItem) {
-        flickable.flick(0, 0);
+            minYExtent += flickableItem.headerItem.height
-        flickable.contentY = scrollByPixelDelta(flickable, 60); //3 lines * 20 pixels
+        }
+
+        //Avoid overscrolling
+        return Math.max(minYExtent, Math.min(maxYExtent, flickableItem.contentY - pixelDelta));
     }
 
     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 = calculateNewPosition(flickable, wheel);
+        flickable.contentY = newPos;
         cancelFlickStateTimer.start()
     }
 

imports/Spectral/Component/Timeline/FileDelegate.qml

@@ -76,7 +76,7 @@ ColumnLayout {
 
             visible: !(sentByMe || avatarVisible)
 
-            text: Qt.formatDateTime(time, "hh:mm")
+            text: Qt.formatTime(time, "hh:mm AP")
             color: "#5B7480"
 
             font.pixelSize: 10
@@ -119,6 +119,58 @@ 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

@@ -37,7 +37,7 @@ RowLayout {
     Avatar {
         Layout.preferredWidth: 32
         Layout.preferredHeight: 32
-        Layout.alignment: Qt.AlignTop
+        Layout.alignment: Qt.AlignBottom
 
         visible: avatarVisible
         hint: author.displayName
@@ -61,16 +61,8 @@ 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 {
@@ -114,7 +106,7 @@ RowLayout {
 
             contentItem: RowLayout {
                 Label {
-                    text: Qt.formatDateTime(time, "hh:mm")
+                    text: Qt.formatTime(time, "hh:mm AP")
                     color: "white"
                     font.pixelSize: 12
                 }

imports/Spectral/Component/Timeline/MessageDelegate.qml

@@ -27,6 +27,8 @@ ColumnLayout {
     spacing: 0
 
     RowLayout {
+        Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
+
         id: messageRow
 
         spacing: 4
@@ -34,7 +36,7 @@ ColumnLayout {
         Avatar {
             Layout.preferredWidth: 32
             Layout.preferredHeight: 32
-            Layout.alignment: Qt.AlignTop
+            Layout.alignment: Qt.AlignBottom
 
             visible: avatarVisible
             hint: author.displayName
@@ -189,6 +191,8 @@ ColumnLayout {
                     Control {
                         Layout.fillWidth: true
 
+                        visible: replyVisible
+
                         padding: 0
 
                         background: RippleEffect {
@@ -196,9 +200,6 @@ 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 || "")
 
@@ -264,16 +265,16 @@ ColumnLayout {
 
         visible: showAuthor
 
-        Label {
-            text: Qt.formatDateTime(time, "hh:mm")
-            color: MPalette.lighter
-        }
-
         Label {
             visible: !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,10 +3,11 @@ import QtQuick.Controls 2.12
 import Spectral.Setting 0.1
 
 Label {
-    text: section + " • " + Qt.formatTime(time, "hh:mm")
+    text: section + " • " + Qt.formatTime(time, "hh:mm AP")
     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,26 +3,33 @@ 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
 
-Label {
+Control {
-    text: "<b>" + author.displayName + "</b> " + display
+    padding: 8
-    color: MPalette.foreground
-    font.pixelSize: 13
-    font.weight: Font.Medium
 
-    topPadding: 8
+    contentItem: RowLayout {
-    bottomPadding: 8
+        Avatar {
-    leftPadding: 24
+            Layout.preferredWidth: 24
-    rightPadding: 24
+            Layout.preferredHeight: 24
 
-    wrapMode: Label.Wrap
+            hint: author.displayName
-    textFormat: MSettings.richText ? Text.RichText : Text.StyledText
+            source: author.avatarMediaId
-    onLinkActivated: Qt.openUrlExternally(link)
+        }
 
-    background: Rectangle {
+        Label {
-        color: MPalette.background
+            Layout.fillWidth: true
-        radius: 4
+            Layout.maximumWidth: messageListView.width - 48
-        antialiasing: true
+
+            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
+
+            wrapMode: Label.Wrap
+            onLinkActivated: Qt.openUrlExternally(link)
+        }
     }
 }

imports/Spectral/Panel/RoomListPanel.qml

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

src/messageeventmodel.cpp

@@ -35,6 +35,7 @@ QHash<int, QByteArray> MessageEventModel::roleNames() const {
   roles[ReplyDisplayRole] = "replyDisplay";
   roles[UserMarkerRole] = "userMarker";
   roles[ShowAuthorRole] = "showAuthor";
+  roles[ShowSectionRole] = "showSection";
   roles[BubbleShapeRole] = "bubbleShape";
   return roles;
 }
@@ -289,7 +290,8 @@ QVariant MessageEventModel::data(const QModelIndex& idx, int role) const {
         case MessageEventType::Audio:
           return "audio";
       }
-      if (e->hasFileContent()) return "file";
+      if (e->hasFileContent())
+        return "file";
 
       return "message";
     }
@@ -429,6 +431,19 @@ QVariant MessageEventModel::data(const QModelIndex& idx, int role) const {
     return true;
   }
 
+  if (role == ShowSectionRole) {
+    for (auto r = row + 1; r < rowCount(); ++r) {
+      auto i = index(r);
+      if (data(i, SpecialMarksRole) != EventStatus::Hidden) {
+        return data(i, TimeRole)
+                   .toDateTime()
+                   .msecsTo(data(idx, TimeRole).toDateTime()) > 600000;
+      }
+    }
+
+    return true;
+  }
+
   if (role == BubbleShapeRole) {  // TODO: Convoluted logic.
     int aboveRow = -1;            // Invalid
 

src/messageeventmodel.h

@@ -32,6 +32,7 @@ class MessageEventModel : public QAbstractListModel {
     ReplyDisplayRole,
 
     ShowAuthorRole,
+    ShowSectionRole,
     BubbleShapeRole,
     // For debugging
     EventResolvedTypeRole,