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

Add section back. 

Enable pixelAligned for flickable.
Tweak timeline delegate.
square-messages
Black Hat 2019-05-11 20:53:33 +08:00
parent 627647207b
commit 49545df607
12 changed files with 205 additions and 88 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

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

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

19
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 || "")
@ -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
}
}
}

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

69
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,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
}
}
}

17
src/messageeventmodel.cpp
View File

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

1
src/messageeventmodel.h
View File

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