tan
/
Spectral
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'develop' of https://gitlab.com/b0/spectral into square-messages

square-messages
expectocode 2019-05-11 14:03:13 +01:00
parent 05e88b5e4b 7557f785f5
commit 42f8cc81df
13 changed files with 357 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
imports/Spectral/Component/AutoListView.qml
View File

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

1
imports/Spectral/Component/Avatar.qml
View File

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

74
imports/Spectral/Component/ScrollHelper.qml
View File

@ -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
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()
}

54
imports/Spectral/Component/Timeline/FileDelegate.qml
View File

@ -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

279
imports/Spectral/Component/Timeline/ImageDelegate.qml
View File

@ -14,8 +14,8 @@ import Spectral.Menu.Timeline 2.0
import Spectral.Effect 2.0
import Spectral.Font 0.1
ColumnLayout {
readonly property bool avatarVisible: !sentByMe && showAuthor
RowLayout {
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,161 +34,164 @@ ColumnLayout {
}
}
Label {
Layout.leftMargin: 48
text: author.displayName
Avatar {
Layout.preferredWidth: 32
Layout.preferredHeight: 32
Layout.alignment: Qt.AlignBottom
visible: avatarVisible
hint: author.displayName
source: author.avatarMediaId
font.pixelSize: 13
verticalAlignment: Text.AlignVCenter
Component {
id: userDetailDialog
UserDetailDialog {}
}
RippleEffect {
anchors.fill: parent
circular: true
onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": author}).open()
}
}
RowLayout {
z: -5
Label {
Layout.preferredWidth: 32
Layout.preferredHeight: 32
id: messageRow
visible: !(sentByMe || avatarVisible)
}
spacing: 4
BusyIndicator {
Layout.preferredWidth: 64
Layout.preferredHeight: 64
Avatar {
Layout.preferredWidth: 32
Layout.preferredHeight: 32
Layout.alignment: Qt.AlignTop
visible: img.status == Image.Loading
}
visible: avatarVisible
hint: author.displayName
source: author.avatarMediaId
Image {
Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + root.spacing : 0) - 48
id: img
source: "image://mxc/" +
(content.info && content.info.thumbnail_info ?
content.thumbnailMediaId : content.mediaId)
sourceSize.width: 720
sourceSize.height: 720
fillMode: Image.PreserveAspectCrop
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: img.width
height: img.height
radius: 18
}
}
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
}
}
Rectangle {
anchors.fill: parent
visible: progressInfo.active && !downloaded
color: "#BB000000"
ProgressBar {
anchors.centerIn: parent
width: parent.width * 0.8
from: 0
to: progressInfo.total
value: progressInfo.progress
}
}
RippleEffect {
anchors.fill: parent
id: messageMouseArea
onPrimaryClicked: fullScreenImage.createObject(parent, {"filename": eventId, "localPath": currentRoom.urlToDownload(eventId)}).show()
onSecondaryClicked: {
var contextMenu = imageDelegateContextMenu.createObject(ApplicationWindow.overlay)
contextMenu.viewSource.connect(function() {
messageSourceDialog.createObject(ApplicationWindow.overlay, {"sourceText": toolTip}).open()
})
contextMenu.downloadAndOpen.connect(downloadAndOpen)
contextMenu.saveFileAs.connect(saveFileAs)
contextMenu.reply.connect(function() {
roomPanelInput.replyUser = author
roomPanelInput.replyEventID = eventId
roomPanelInput.replyContent = message
roomPanelInput.isReply = true
roomPanelInput.focus()
})
contextMenu.redact.connect(function() {
currentRoom.redactEvent(eventId)
})
contextMenu.popup()
}
Component {
id: userDetailDialog
id: messageSourceDialog
UserDetailDialog {}
MessageSourceDialog {}
}
RippleEffect {
anchors.fill: parent
Component {
id: openFolderDialog
circular: true
onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": author}).open()
}
}
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 {
Layout.preferredWidth: 64
Layout.preferredHeight: 64
visible: img.status == Image.Loading
}
Image {
Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + messageRow.spacing : 0) - 48
id: img
source: "image://mxc/" +
(content.info && content.info.thumbnail_info ?
content.thumbnailMediaId : content.mediaId)
sourceSize.width: 720
sourceSize.height: 720
fillMode: Image.PreserveAspectCrop
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: img.width
height: img.height
radius: 6
}
OpenFolderDialog {}
}
Rectangle {
anchors.fill: parent
Component {
id: imageDelegateContextMenu
visible: progressInfo.active && !downloaded
color: "#BB000000"
ProgressBar {
anchors.centerIn: parent
width: parent.width * 0.8
from: 0
to: progressInfo.total
value: progressInfo.progress
}
FileDelegateContextMenu {}
}
RippleEffect {
anchors.fill: parent
Component {
id: fullScreenImage
id: messageMouseArea
onPrimaryClicked: fullScreenImage.createObject(parent, {"filename": eventId, "localPath": currentRoom.urlToDownload(eventId)}).show()
onSecondaryClicked: {
var contextMenu = imageDelegateContextMenu.createObject(ApplicationWindow.overlay)
contextMenu.viewSource.connect(function() {
messageSourceDialog.createObject(ApplicationWindow.overlay, {"sourceText": toolTip}).open()
})
contextMenu.downloadAndOpen.connect(downloadAndOpen)
contextMenu.saveFileAs.connect(saveFileAs)
contextMenu.reply.connect(function() {
roomPanelInput.replyUser = author
roomPanelInput.replyEventID = eventId
roomPanelInput.replyContent = message
roomPanelInput.isReply = true
roomPanelInput.focus()
})
contextMenu.redact.connect(function() {
currentRoom.redactEvent(eventId)
})
contextMenu.popup()
}
Component {
id: messageSourceDialog
MessageSourceDialog {}
}
Component {
id: openFolderDialog
OpenFolderDialog {}
}
Component {
id: imageDelegateContextMenu
FileDelegateContextMenu {}
}
Component {
id: fullScreenImage
FullScreenImage {}
}
FullScreenImage {}
}
}
}

25
imports/Spectral/Component/Timeline/MessageDelegate.qml
View File

@ -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
text: Qt.formatDateTime(time, "hh:mm")
color: MPalette.lighter
}
Label {
visible: showAuthor && !sentByMe
visible: !sentByMe
text: author.displayName
color: MPalette.lighter
}
Label {
text: Qt.formatTime(time, "hh:mm AP")
color: MPalette.lighter
}
}
}

3
imports/Spectral/Component/Timeline/SectionDelegate.qml
View File

@ -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
}

39
imports/Spectral/Component/Timeline/StateDelegate.qml
View File

@ -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: "<b>" + author.displayName + "</b> " + 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: "<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)
}
}
}

2
imports/Spectral/Panel/RoomListPanel.qml
View File

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

64
imports/Spectral/Panel/RoomPanel.qml
View File

@ -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 {
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
visible: showSection
}
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
}
}
}

40
src/messageeventmodel.cpp
View File

@ -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(
rowBelowInserted,
{ShowTimestampRole, ShowAuthorRole, BubbleShapeRole});
refreshEventRoles(rowBelowInserted,
{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,25 +416,28 @@ 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)
.toDateTime()
.msecsTo(data(i, TimeRole).toDateTime()) > 600000;
return data(i, AuthorRole) != data(idx, AuthorRole) ||
data(i, EventTypeRole) != data(idx, EventTypeRole) ||
data(idx, TimeRole)
.toDateTime()
.msecsTo(data(i, TimeRole).toDateTime()) > 600000;
}
}
return true;
}
if (role == ShowAuthorRole) {
for (auto r = row - 1; r >= 0; --r) {
if (role == ShowSectionRole) {
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) ||
data(i, EventTypeRole) != data(idx, EventTypeRole);
return data(i, TimeRole)
.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() ||
data(index(aboveRow), ShowTimestampRole).toBool();
aboveShow = data(index(aboveRow), ShowAuthorRole).toBool();
}
belowShow = data(idx, ShowAuthorRole).toBool() ||
data(idx, ShowTimestampRole).toBool();
belowShow = data(idx, ShowAuthorRole).toBool();
if (aboveShow && belowShow)
return BubbleShapes::NoShape;

2
src/messageeventmodel.h
View File

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

4
src/spectralroom.h
View File

@ -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;
}