diff --git a/imports/Spectral/Component/AutoListView.qml b/imports/Spectral/Component/AutoListView.qml index 1fca551..ddb82d7 100644 --- a/imports/Spectral/Component/AutoListView.qml +++ b/imports/Spectral/Component/AutoListView.qml @@ -1,6 +1,8 @@ import QtQuick 2.12 ListView { + pixelAligned: true + ScrollHelper { anchors.fill: parent diff --git a/imports/Spectral/Component/Avatar.qml b/imports/Spectral/Component/Avatar.qml index d7972d5..b9c2c8d 100644 --- a/imports/Spectral/Component/Avatar.qml +++ b/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 { diff --git a/imports/Spectral/Component/ScrollHelper.qml b/imports/Spectral/Component/ScrollHelper.qml index 89425d6..e3a6032 100644 --- a/imports/Spectral/Component/ScrollHelper.qml +++ b/imports/Spectral/Component/ScrollHelper.qml @@ -1,34 +1,49 @@ +/* + * Copyright (C) 2016 Michael Bohlender, + * Copyright (C) 2017 Christian Mollekopf, + * + * 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 - flickable.maximumFlickVelocity = 100000 - flickable.boundsBehavior = Flickable.StopAtBounds - } - - function scrollByPixelDelta(flickableItem, pixelDelta) { - if (!pixelDelta) { - return flickableItem.contentY; + if (enabled) { + flickable.interactive = false + flickable.maximumFlickVelocity = 100000 + flickable.boundsBehavior = Flickable.StopAtBounds + root.parent = flickable } - - 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() { - flickable.flick(0, 0); - flickable.contentY = scrollByPixelDelta(flickable, -60); //3 lines * 20 pixels - } + var minYExtent = flickableItem.originY + flickableItem.topMargin; + var maxYExtent = (flickableItem.contentHeight + flickableItem.bottomMargin + flickableItem.originY) - flickableItem.height; - function scrollUp() { - 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 + 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() } diff --git a/imports/Spectral/Component/Timeline/FileDelegate.qml b/imports/Spectral/Component/Timeline/FileDelegate.qml index f956370..f8bd0d7 100644 --- a/imports/Spectral/Component/Timeline/FileDelegate.qml +++ b/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 diff --git a/imports/Spectral/Component/Timeline/ImageDelegate.qml b/imports/Spectral/Component/Timeline/ImageDelegate.qml index f1bd6ce..e72888d 100644 --- a/imports/Spectral/Component/Timeline/ImageDelegate.qml +++ b/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 } diff --git a/imports/Spectral/Component/Timeline/MessageDelegate.qml b/imports/Spectral/Component/Timeline/MessageDelegate.qml index 7d70093..863e1be 100644 --- a/imports/Spectral/Component/Timeline/MessageDelegate.qml +++ b/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: "" + (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 + } } } diff --git a/imports/Spectral/Component/Timeline/SectionDelegate.qml b/imports/Spectral/Component/Timeline/SectionDelegate.qml index e84be60..fdc6c29 100644 --- a/imports/Spectral/Component/Timeline/SectionDelegate.qml +++ b/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 } diff --git a/imports/Spectral/Component/Timeline/StateDelegate.qml b/imports/Spectral/Component/Timeline/StateDelegate.qml index c5ea823..9d64660 100644 --- a/imports/Spectral/Component/Timeline/StateDelegate.qml +++ b/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 { - text: "" + author.displayName + " " + display - color: MPalette.foreground - font.pixelSize: 13 - font.weight: Font.Medium +Control { + padding: 8 - topPadding: 8 - bottomPadding: 8 - leftPadding: 24 - rightPadding: 24 + contentItem: RowLayout { + Avatar { + Layout.preferredWidth: 24 + Layout.preferredHeight: 24 - wrapMode: Label.Wrap - textFormat: MSettings.richText ? Text.RichText : Text.StyledText - onLinkActivated: Qt.openUrlExternally(link) + hint: author.displayName + source: author.avatarMediaId + } - background: Rectangle { - color: MPalette.background - radius: 4 - antialiasing: true + Label { + Layout.fillWidth: true + Layout.maximumWidth: messageListView.width - 48 + + text: "" + author.displayName + " " + 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) + } } } diff --git a/imports/Spectral/Panel/RoomListPanel.qml b/imports/Spectral/Panel/RoomListPanel.qml index c120722..00cf0b1 100644 --- a/imports/Spectral/Panel/RoomListPanel.qml +++ b/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 diff --git a/imports/Spectral/Panel/RoomPanel.qml b/imports/Spectral/Panel/RoomPanel.qml index 26a7354..d63a7dc 100644 --- a/imports/Spectral/Panel/RoomPanel.qml +++ b/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 { - anchors.right: sentByMe ? parent.right : undefined + delegate: ColumnLayout { + 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 { - anchors.right: sentByMe ? parent.right : undefined + delegate: ColumnLayout { + 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 { - anchors.right: sentByMe ? parent.right : undefined + delegate: ColumnLayout { + width: messageListView.width - Layout.maximumWidth: parent.width - } - } + SectionDelegate { + Layout.alignment: Qt.AlignHCenter + Layout.maximumWidth: parent.width - DelegateChoice { - roleValue: "sticker" - delegate: ImageDelegate { - anchors.right: sentByMe ? parent.right : undefined + visible: showSection + } - Layout.maximumWidth: parent.width + ImageDelegate { + Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft + } } } DelegateChoice { roleValue: "file" - delegate: FileDelegate { - anchors.right: sentByMe ? parent.right : undefined + delegate: ColumnLayout { + 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 + } } } diff --git a/src/messageeventmodel.cpp b/src/messageeventmodel.cpp index 42dd2d6..a90067b 100644 --- a/src/messageeventmodel.cpp +++ b/src/messageeventmodel.cpp @@ -35,6 +35,7 @@ QHash 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 diff --git a/src/messageeventmodel.h b/src/messageeventmodel.h index ec696d2..3def157 100644 --- a/src/messageeventmodel.h +++ b/src/messageeventmodel.h @@ -32,6 +32,7 @@ class MessageEventModel : public QAbstractListModel { ReplyDisplayRole, ShowAuthorRole, + ShowSectionRole, BubbleShapeRole, // For debugging EventResolvedTypeRole,