Redo square images

Change avatar update text (fixes #139)

See merge request b0/spectral!49

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: {
+        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) {
@@ -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
+
+        if (typeof(flickableItem.headerItem) !== "undefined" && flickableItem.headerItem) {
+            minYExtent += flickableItem.headerItem.height
         }
 
-    function scrollUp() {
+        //Avoid overscrolling
-        flickable.flick(0, 0);
+        return Math.max(minYExtent, Math.min(maxYExtent, flickableItem.contentY - pixelDelta));
-        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 = 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

@@ -14,8 +14,8 @@ import Spectral.Menu.Timeline 2.0
 import Spectral.Effect 2.0
 import Spectral.Font 0.1
 
-ColumnLayout {
+RowLayout {
-    readonly property bool avatarVisible: !sentByMe && showAuthor
+    readonly property bool avatarVisible: showAuthor && !sentByMe
     readonly property bool sentByMe: author === currentRoom.localUser
 
     property bool openOnFinished: false
@@ -23,7 +23,9 @@ ColumnLayout {
 
     id: root
 
-    spacing: 0
+    spacing: 4
+
+    z: -5
 
     onDownloadedChanged: {
         if (downloaded && openOnFinished) {
@@ -32,28 +34,10 @@ ColumnLayout {
         }
     }
 
-    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.AlignTop
+        Layout.alignment: Qt.AlignBottom
 
         visible: avatarVisible
         hint: author.displayName
@@ -77,16 +61,8 @@ ColumnLayout {
     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 {
@@ -97,7 +73,7 @@ ColumnLayout {
     }
 
     Image {
-            Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + messageRow.spacing : 0) - 48
+        Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + root.spacing : 0) - 48
 
         id: img
 
@@ -115,7 +91,37 @@ ColumnLayout {
             maskSource: Rectangle {
                 width: img.width
                 height: img.height
-                    radius: 6
+                radius: 5
+            }
+        }
+
+        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
             }
         }
 
@@ -189,7 +195,6 @@ ColumnLayout {
             }
         }
     }
-    }
 
     function saveFileAs() {
         var folderDialog = openFolderDialog.createObject(ApplicationWindow.overlay)

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 || "")
 
@@ -262,20 +263,18 @@ ColumnLayout {
         Layout.rightMargin: sentByMe ? 12 : undefined
         Layout.bottomMargin: 4
 
-        visible: showTimestamp || (showAuthor && !sentByMe)
+        visible: showAuthor
 
         Label {
-            visible: showTimestamp
+            visible: !sentByMe
-
-            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,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
 
+Control {
+    padding: 8
+
+    contentItem: RowLayout {
+        Avatar {
+            Layout.preferredWidth: 24
+            Layout.preferredHeight: 24
+
+            hint: author.displayName
+            source: author.avatarMediaId
+        }
+
         Label {
-    text: "<b>" + author.displayName + "</b> " + display
+            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,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,40 +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
 
+                            SectionDelegate {
+                                Layout.alignment: Qt.AlignHCenter
                                 Layout.maximumWidth: parent.width
+
+                                visible: showSection
+                            }
+
+                            ImageDelegate {
+                                Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
+                            }
                         }
                     }
 
                     DelegateChoice {
                         roleValue: "file"
-                        delegate: FileDelegate {
+                        delegate: ColumnLayout {
-                            anchors.right: sentByMe ? parent.right : undefined
+                            width: messageListView.width
 
+                            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,9 +83,8 @@ void MessageEventModel::setRoom(SpectralRoom* room) {
               if (biggest < m_currentRoom->maxTimelineIndex()) {
                 auto rowBelowInserted = m_currentRoom->maxTimelineIndex() -
                                         biggest + timelineBaseIndex() - 1;
-                refreshEventRoles(
+                refreshEventRoles(rowBelowInserted,
-                    rowBelowInserted,
+                                  {ShowAuthorRole, BubbleShapeRole});
-                    {ShowTimestampRole, ShowAuthorRole, BubbleShapeRole});
               }
               for (auto i = m_currentRoom->maxTimelineIndex() - biggest;
                    i <= m_currentRoom->maxTimelineIndex() - lowest; ++i)
@@ -116,7 +115,7 @@ void MessageEventModel::setRoom(SpectralRoom* room) {
         refreshEventRoles(timelineBaseIndex() + 1, {ReadMarkerRole});
       if (timelineBaseIndex() > 0)  // Refresh below, see #312
         refreshEventRoles(timelineBaseIndex() - 1,
-                          {ShowTimestampRole, ShowAuthorRole, BubbleShapeRole});
+                          {ShowAuthorRole, BubbleShapeRole});
     });
     connect(m_currentRoom, &Room::pendingEventChanged, this,
             &MessageEventModel::refreshRow);
@@ -290,9 +289,11 @@ 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";
@@ -415,11 +416,13 @@ QVariant MessageEventModel::data(const QModelIndex& idx, int role) const {
     return {};
   }
 
-  if (role == ShowTimestampRole) {
+  if (role == ShowAuthorRole) {
     for (auto r = row - 1; r >= 0; --r) {
       auto i = index(r);
       if (data(i, SpecialMarksRole) != EventStatus::Hidden) {
-        return data(idx, TimeRole)
+        return data(i, AuthorRole) != data(idx, AuthorRole) ||
+               data(i, EventTypeRole) != data(idx, EventTypeRole) ||
+               data(idx, TimeRole)
                        .toDateTime()
                        .msecsTo(data(i, TimeRole).toDateTime()) > 600000;
       }
@@ -428,12 +431,13 @@ QVariant MessageEventModel::data(const QModelIndex& idx, int role) const {
     return true;
   }
 
-  if (role == ShowAuthorRole) {
+  if (role == ShowSectionRole) {
-    for (auto r = row - 1; r >= 0; --r) {
+    for (auto r = row + 1; r < rowCount(); ++r) {
       auto i = index(r);
       if (data(i, SpecialMarksRole) != EventStatus::Hidden) {
-        return data(i, AuthorRole) != data(idx, AuthorRole) ||
+        return data(i, TimeRole)
-               data(i, EventTypeRole) != data(idx, EventTypeRole);
+                   .toDateTime()
+                   .msecsTo(data(idx, TimeRole).toDateTime()) > 600000;
       }
     }
 
@@ -455,11 +459,9 @@ 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,8 +144,10 @@ 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 the avatar");
+                  text += tr("updated their avatar");
               }
               return text;
             }