Big performance refactoring & various improvements

Instead of passing all sorts of events for the JS to handle and manually
add to different data models, we now handle everything we can in Python.

For any change, the python models send a sync event with their
contents (no more than 4 times per second) to JS, and the QSyncable
library's JsonListModel takes care of converting it to a QML ListModel
and sending the appropriate signals.

The SortFilterProxyModel library is not used anymore, the only case
where we need to filter/sort something now is when the user interacts
with the "Filter rooms" or "Filter members" fields. These cases are
handled by a simple JS function.

We now keep separated room and timeline models for different accounts,
the previous approach of sharing all the data we could between accounts
created a lot of complications (local echoes, decrypted messages
replacing others, etc).

The users's own account profile changes are now hidden in the timeline.
On startup, if all events for a room were only own profile changes, more
events will be loaded.

Any kind of image format supported by Qt is now handled by the
pyotherside image provider, instead of just PNG/JPG.
SVGs which previously caused errors are supported as well.

The typing members bar paddings/margins are fixed.

The behavior of the avatar/"upload a profile picture" overlay is fixed.

Config files read from disk are now cached (TODO: make them reloadable
again).

Pylint is not used anymore because of all its annoying false warnings
and lack of understanding for dataclasses, it is replaced by flake8 with
a custom config and various plugins.

Debug mode is now considered on if the program was compiled with
the right option, instead of taking an argument from CLI.
When on, C++ will set a flag in the Window QML component.

The loading screen is now unloaded after the UI is ready, where
previously it just stayed in the background invisible and wasted CPU.

The overall refactoring and improvements make us now able to handle
rooms with thousand of members and no lazy-loading, where previously
everything would freeze and simply scrolling up to load past events
in any room would block the UI for a few seconds.
This commit is contained in:
miruka
2019-08-11 08:01:22 -04:00
parent b534318b95
commit 67dde68126
70 changed files with 1261 additions and 1288 deletions

View File

@@ -35,7 +35,7 @@ HRectangle {
text: name ? name.charAt(0) : "?"
font.pixelSize: parent.height / 1.4
color: Utils.hsla(
color: Utils.hsluv(
name ? Utils.hueFrom(name) : 0,
name ? theme.controls.avatar.letter.saturation : 0,
theme.controls.avatar.letter.lightness,

View File

@@ -2,124 +2,14 @@
// This file is part of harmonyqml, licensed under LGPLv3.
import QtQuick 2.12
import SortFilterProxyModel 0.2
import QSyncable 1.0
SortFilterProxyModel {
// To initialize a HListModel with items,
// use `Component.onCompleted: extend([{"foo": 1, "bar": 2}, ...])`
JsonListModel {
id: model
source: []
Component.onCompleted: if (! keyField) { throw "keyField not set" }
id: sortFilteredModel
property ListModel model: ListModel {}
sourceModel: model // Can't assign a "ListModel {}" directly here
function append(dict) { return model.append(dict) }
function clear() { return model.clear() }
function insert(index, dict) { return model.inset(index, dict) }
function move(from, to, n=1) { return model.move(from, to, n) }
function remove(index, count=1) { return model.remove(index, count) }
function set(index, dict) { return model.set(index, dict) }
function sync() { return model.sync() }
function setProperty(index, prop, value) {
return model.setProperty(index, prop, value)
}
function extend(newItems) {
for (let item of newItems) { model.append(item) }
}
function getIndices(whereRolesAre, maxResults=null, maxTries=null) {
// maxResults, maxTries: null or int
let results = []
for (let i = 0; i < model.count; i++) {
let item = model.get(i)
let include = true
for (let role in whereRolesAre) {
if (item[role] != whereRolesAre[role]) {
include = false
break
}
}
if (include) {
results.push(i)
if (maxResults && results.length >= maxResults) {
break
}
}
if (maxTries && i >= maxTries) {
break
}
}
return results
}
function getWhere(rolesAre, maxResults=null, maxTries=null) {
let items = []
for (let indice of getIndices(rolesAre, maxResults, maxTries)) {
items.push(model.get(indice))
}
return items
}
function forEachWhere(rolesAre, func, maxResults=null, maxTries=null) {
for (let item of getWhere(rolesAre, maxResults, maxTries)) {
func(item)
}
}
function upsert(
whereRolesAre, newItem, updateIfExist=true, maxTries=null
) {
let indices = getIndices(whereRolesAre, 1, maxTries)
if (indices.length == 0) {
model.append(newItem)
return model.get(model.count)
}
let existing = model.get(indices[0])
if (! updateIfExist) { return existing }
// Really update only if existing and new item have a difference
for (var role in existing) {
if (Boolean(existing[role].getTime)) {
if (existing[role].getTime() != newItem[role].getTime()) {
model.set(indices[0], newItem)
return existing
}
} else {
if (existing[role] != newItem[role]) {
model.set(indices[0], newItem)
return existing
}
}
}
return existing
}
function pop(index) {
let item = model.get(index)
model.remove(index)
return item
}
function popWhere(rolesAre, maxResults=null, maxTries=null) {
let items = []
for (let indice of getIndices(rolesAre, maxResults, maxTries)) {
items.push(model.get(indice))
model.remove(indice)
}
return items
}
function toObject(itemList=sortFilteredModel) {
function toObject(itemList=listModel) {
let objList = []
for (let item of itemList) {

View File

@@ -8,6 +8,7 @@ import "../SidePane"
SwipeView {
default property alias columnChildren: contentColumn.children
property alias page: innerPage
property alias header: innerPage.header
property alias footer: innerPage.header
@@ -81,7 +82,6 @@ SwipeView {
HColumnLayout {
id: contentColumn
spacing: theme.spacing
width: innerFlickable.width
height: innerFlickable.height
}

View File

@@ -4,16 +4,13 @@
import QtQuick 2.12
HAvatar {
property string userId: ""
property string roomId: ""
property string displayName: ""
property string avatarUrl: ""
readonly property var roomInfo: rooms.getWhere({userId, roomId}, 1)[0]
name: displayName[0] == "#" && displayName.length > 1 ?
displayName.substring(1) :
displayName
// Avoid error messages when a room is forgotten
readonly property var dname: roomInfo ? roomInfo.displayName : ""
readonly property var avUrl: roomInfo ? roomInfo.avatarUrl : ""
name: dname[0] == "#" && dname.length > 1 ? dname.substring(1) : dname
imageUrl: avUrl ? ("image://python/" + avUrl) : null
toolTipImageUrl: avUrl ? ("image://python/" + avUrl) : null
imageUrl: avatarUrl ? ("image://python/" + avatarUrl) : null
toolTipImageUrl: avatarUrl ? ("image://python/" + avatarUrl) : null
}

View File

@@ -26,9 +26,8 @@ TextField {
border.color: field.activeFocus ? focusedBorderColor : borderColor
border.width: bordered ? theme.controls.textField.borderWidth : 0
Behavior on color { HColorAnimation { factor: 0.5 } }
Behavior on border.color { HColorAnimation { factor: 0.5 } }
Behavior on border.width { HNumberAnimation { factor: 0.5 } }
Behavior on color { HColorAnimation { factor: 0.25 } }
Behavior on border.color { HColorAnimation { factor: 0.25 } }
}
selectByMouse: true

View File

@@ -5,23 +5,16 @@ import QtQuick 2.12
HAvatar {
property string userId: ""
readonly property var userInfo: userId ? users.find(userId) : ({})
property string displayName: ""
property string avatarUrl: ""
readonly property var defaultImageUrl:
userInfo.avatarUrl ? ("image://python/" + userInfo.avatarUrl) : null
avatarUrl ? ("image://python/" + avatarUrl) : null
readonly property var defaultToolTipImageUrl:
userInfo.avatarUrl ? ("image://python/" + userInfo.avatarUrl) : null
avatarUrl ? ("image://python/" + avatarUrl) : null
name: userInfo.displayName || userId.substring(1) // no leading @
name: displayName || userId.substring(1) // no leading @
imageUrl: defaultImageUrl
toolTipImageUrl:defaultToolTipImageUrl
//HImage {
//id: status
//anchors.right: parent.right
//anchors.bottom: parent.bottom
//source: "../../icons/status.svg"
//sourceSize.width: 12
//}
}

View File

@@ -6,7 +6,6 @@ import "../../Base"
Banner {
property string userId: ""
readonly property var userInfo: users.find(userId)
color: theme.chat.leftBanner.background

View File

@@ -4,29 +4,26 @@
import QtQuick 2.12
import QtQuick.Layouts 1.12
import "../Base"
import "../utils.js" as Utils
HPage {
id: chatPage
property bool ready: roomInfo && ! roomInfo.loading
property string userId: ""
property string roomId: ""
property var roomInfo: null
property bool ready: roomInfo !== "waiting"
readonly property var roomInfo: Utils.getItem(
modelSources[["Room", userId]] || [], "room_id", roomId
) || "waiting"
onRoomInfoChanged: if (! roomInfo) { pageStack.showPage("Default") }
readonly property string userId: roomInfo.userId
readonly property string category: roomInfo.category
readonly property string roomId: roomInfo.roomId
readonly property var senderInfo: users.find(userId)
readonly property bool hasUnknownDevices: false
//category == "Rooms" ?
//Backend.clients.get(userId).roomHasUnknownDevices(roomId) : false
header: RoomHeader {
header: Loader {
id: roomHeader
displayName: roomInfo.displayName
topic: roomInfo.topic
source: ready ? "RoomHeader.qml" : ""
clip: height < implicitHeight
width: parent.width
@@ -37,18 +34,7 @@ HPage {
page.leftPadding: 0
page.rightPadding: 0
Loader {
Timer {
interval: 200
repeat: true
running: ! ready
onTriggered: {
let info = rooms.find(userId, category, roomId)
if (! info.loading) { roomInfo = Qt.binding(() => info) }
}
}
source: ready ? "ChatSplitView.qml" : "../Base/HBusyIndicator.qml"
Layout.fillWidth: ready

View File

@@ -28,25 +28,21 @@ HSplitView {
}
InviteBanner {
visible: category == "Invites"
inviterId: roomInfo.inviterId
id: inviteBanner
visible: Boolean(inviterId)
inviterId: chatPage.roomInfo.inviter_id
Layout.fillWidth: true
}
//UnknownDevicesBanner {
//visible: category == "Rooms" && hasUnknownDevices
//
//Layout.fillWidth: true
//}
SendBox {
id: sendBox
visible: category == "Rooms" && ! hasUnknownDevices
visible: ! inviteBanner.visible && ! leftBanner.visible
}
LeftBanner {
visible: category == "Left"
id: leftBanner
visible: chatPage.roomInfo.left
userId: chatPage.userId
Layout.fillWidth: true
@@ -56,7 +52,8 @@ HSplitView {
RoomSidePane {
id: roomSidePane
activeView: roomHeader.activeButton
activeView: roomHeader.item ? roomHeader.item.activeButton : null
property int oldWidth: width
onActiveViewChanged:
activeView ? restoreAnimation.start() : hideAnimation.start()
@@ -89,7 +86,9 @@ HSplitView {
collapsed: width < theme.controls.avatar.size + theme.spacing
property bool wasSnapped: false
property int referenceWidth: roomHeader.buttonsWidth
property int referenceWidth:
roomHeader.item ? roomHeader.item.buttonsWidth : 0
onReferenceWidthChanged: {
if (! chatSplitView.manuallyResized || wasSnapped) {
if (wasSnapped) { chatSplitView.manuallyResized = false }

View File

@@ -6,9 +6,6 @@ import QtQuick.Layouts 1.12
import "../Base"
HRectangle {
property string displayName: ""
property string topic: ""
property alias buttonsImplicitWidth: viewButtons.implicitWidth
property int buttonsWidth: viewButtons.Layout.preferredWidth
property var activeButton: "members"
@@ -29,14 +26,14 @@ HRectangle {
HRoomAvatar {
id: avatar
userId: chatPage.userId
roomId: chatPage.roomId
displayName: chatPage.roomInfo.display_name
avatarUrl: chatPage.roomInfo.avatar_url
Layout.alignment: Qt.AlignTop
}
HLabel {
id: roomName
text: displayName
text: chatPage.roomInfo.display_name
font.pixelSize: theme.fontSize.big
color: theme.chat.roomHeader.name
elide: Text.ElideRight
@@ -53,7 +50,7 @@ HRectangle {
HLabel {
id: roomTopic
text: topic
text: chatPage.roomInfo.topic
font.pixelSize: theme.fontSize.small
color: theme.chat.roomHeader.topic
elide: Text.ElideRight

View File

@@ -4,14 +4,13 @@
import QtQuick 2.12
import QtQuick.Layouts 1.12
import "../../Base"
import "../../utils.js" as Utils
HInteractiveRectangle {
id: memberDelegate
width: memberList.width
height: childrenRect.height
property var memberInfo: users.find(model.userId)
Row {
width: parent.width - leftPadding * 2
padding: roomSidePane.currentSpacing / 2
@@ -24,7 +23,9 @@ HInteractiveRectangle {
HUserAvatar {
id: avatar
userId: model.userId
userId: model.user_id
displayName: model.display_name
avatarUrl: model.avatar_url
}
HColumnLayout {
@@ -32,7 +33,7 @@ HInteractiveRectangle {
HLabel {
id: memberName
text: memberInfo.displayName || model.userId
text: model.display_name || model.user_id
elide: Text.ElideRight
verticalAlignment: Qt.AlignVCenter

View File

@@ -3,7 +3,6 @@
import QtQuick 2.12
import QtQuick.Layouts 1.12
import SortFilterProxyModel 0.2
import "../../Base"
import "../../utils.js" as Utils
@@ -13,23 +12,11 @@ HColumnLayout {
bottomMargin: currentSpacing
model: HListModel {
sourceModel: chatPage.roomInfo.members
proxyRoles: ExpressionRole {
name: "displayName"
expression: users.find(userId).displayName || userId
}
sorters: StringSorter {
roleName: "displayName"
}
filters: ExpressionFilter {
function filterIt(filter, text) {
return Utils.filterMatches(filter, text)
}
expression: filterIt(filterField.text, displayName)
}
keyField: "user_id"
source: Utils.filterModelSource(
modelSources[["Member", chatPage.roomId]] || [],
filterField.text
)
}
delegate: MemberDelegate {}

View File

@@ -4,6 +4,7 @@
import QtQuick 2.12
import QtQuick.Layouts 1.12
import "../Base"
import "../utils.js" as Utils
HRectangle {
function setFocus() { areaScrollView.forceActiveFocus() }
@@ -11,9 +12,12 @@ HRectangle {
property string indent: " "
property var aliases: window.settings.writeAliases
property string writingUserId: chatPage.userId
property string toSend: ""
property string writingUserId: chatPage.userId
readonly property var writingUserInfo:
Utils.getItem(modelSources["Account"] || [], "user_id", writingUserId)
property bool textChangedSinceLostFocus: false
property alias textArea: areaScrollView.area
@@ -57,6 +61,8 @@ HRectangle {
HUserAvatar {
id: avatar
userId: writingUserId
displayName: writingUserInfo.display_name
avatarUrl: writingUserInfo.avatar_url
}
HScrollableTextArea {
@@ -166,6 +172,13 @@ HRectangle {
})
area.Keys.onPressed.connect(event => {
if (event.modifiers == Qt.MetaModifier) {
// Prevent super+key from sending the key as text
// on xwayland
event.accepted = true
return
}
if (event.modifiers == Qt.NoModifier &&
event.key == Qt.Key_Backspace &&
! textArea.selectedText)

View File

@@ -19,7 +19,9 @@ Row {
HUserAvatar {
id: avatar
userId: model.senderId
userId: model.sender_id
displayName: model.sender_name
avatarUrl: model.sender_avatar
width: hideAvatar ? 0 : 48
height: hideAvatar ? 0 : collapseAvatar ? 1 : 48
}
@@ -52,8 +54,8 @@ Row {
width: parent.width
visible: ! hideNameLine
text: senderInfo.displayName || model.senderId
color: Utils.nameColor(avatar.name)
text: Utils.coloredNameHtml(model.sender_name, model.sender_id)
textFormat: Text.StyledText
elide: Text.ElideRight
horizontalAlignment: onRight ? Text.AlignRight : Text.AlignLeft
@@ -74,7 +76,7 @@ Row {
Qt.formatDateTime(model.date, "hh:mm:ss") +
"</font>" +
// local echo icon
(model.isLocalEcho ?
(model.is_local_echo ?
"&nbsp;<font size=" + theme.fontSize.small +
"px>⏳</font>" : "")

View File

@@ -18,9 +18,7 @@ Column {
nextItem = eventList.model.get(model.index - 1)
}
property var senderInfo: senderInfo = users.find(model.senderId)
property bool isOwn: chatPage.userId === model.senderId
property bool isOwn: chatPage.userId === model.sender_id
property bool onRight: eventList.ownEventsOnRight && isOwn
property bool combine: eventList.canCombine(previousItem, model)
property bool talkBreak: eventList.canTalkBreak(previousItem, model)
@@ -28,22 +26,22 @@ Column {
readonly property bool smallAvatar:
eventList.canCombine(model, nextItem) &&
(model.eventType == "RoomMessageEmote" ||
! model.eventType.startsWith("RoomMessage"))
(model.event_type == "RoomMessageEmote" ||
! model.event_type.startsWith("RoomMessage"))
readonly property bool collapseAvatar: combine
readonly property bool hideAvatar: onRight
readonly property bool hideNameLine:
model.eventType == "RoomMessageEmote" ||
! model.eventType.startsWith("RoomMessage") ||
model.event_type == "RoomMessageEmote" ||
! model.event_type.startsWith("RoomMessage") ||
onRight ||
combine
width: eventList.width
topPadding:
model.eventType == "RoomCreateEvent" ? 0 :
model.event_type == "RoomCreateEvent" ? 0 :
dayBreak ? theme.spacing * 4 :
talkBreak ? theme.spacing * 6 :
combine ? theme.spacing / 2 :

View File

@@ -2,7 +2,6 @@
// This file is part of harmonyqml, licensed under LGPLv3.
import QtQuick 2.12
import SortFilterProxyModel 0.2
import "../../Base"
import "../../utils.js" as Utils
@@ -22,7 +21,7 @@ HRectangle {
return Boolean(
! canTalkBreak(item, itemAfter) &&
! canDayBreak(item, itemAfter) &&
item.senderId === itemAfter.senderId &&
item.sender_id === itemAfter.sender_id &&
Utils.minutesBetween(item.date, itemAfter.date) <= 5
)
}
@@ -42,18 +41,15 @@ HRectangle {
}
return Boolean(
itemAfter.eventType == "RoomCreateEvent" ||
itemAfter.event_type == "RoomCreateEvent" ||
item.date.getDate() != itemAfter.date.getDate()
)
}
model: HListModel {
sourceModel: timelines
filters: ValueFilter {
roleName: "roomId"
value: chatPage.roomId
}
keyField: "client_id"
source:
modelSources[["Event", chatPage.userId, chatPage.roomId]] || []
}
property bool ownEventsOnRight:
@@ -76,23 +72,20 @@ HRectangle {
// Declaring this as "alias" provides the on... signal
property real yPos: visibleArea.yPosition
property bool canLoad: true
// property int zz: 0
onYPosChanged: Qt.callLater(loadPastEvents)
onYPosChanged: {
if (chatPage.category != "Invites" && canLoad && yPos <= 0.1) {
// zz += 1
// print(canLoad, zz)
eventList.canLoad = false
py.callClientCoro(
chatPage.userId, "load_past_events", [chatPage.roomId],
moreToLoad => { eventList.canLoad = moreToLoad }
)
}
function loadPastEvents() {
if (chatPage.invited_id || ! canLoad || yPos > 0.1) { return }
eventList.canLoad = false
py.callClientCoro(
chatPage.userId, "load_past_events", [chatPage.roomId],
moreToLoad => { eventList.canLoad = moreToLoad }
)
}
}
HNoticePage {
text: qsTr("Nothing to show here yet...")
text: qsTr("Nothing here yet...")
visible: eventList.model.count < 1
anchors.fill: parent

View File

@@ -11,31 +11,42 @@ HRectangle {
property alias label: typingLabel
color: theme.chat.typingMembers.background
implicitHeight: typingLabel.text ? typingLabel.height : 0
implicitHeight: typingLabel.text ? rowLayout.height : 0
Behavior on implicitHeight { HNumberAnimation {} }
HRowLayout {
id: rowLayout
spacing: theme.spacing
anchors.fill: parent
Layout.leftMargin: spacing
Layout.rightMargin: spacing
Layout.topMargin: spacing / 4
Layout.bottomMargin: spacing / 4
HIcon {
id: icon
svgName: "typing" // TODO: animate
height: typingLabel.height
Layout.fillHeight: true
Layout.leftMargin: rowLayout.spacing / 2
}
HLabel {
id: typingLabel
text: chatPage.roomInfo.typingText
textFormat: Text.StyledText
elide: Text.ElideRight
text: {
let tm = chatPage.roomInfo.typing_members
if (tm.length == 0) return ""
if (tm.length == 1) return qsTr("%1 is typing...").arg(tm[0])
return qsTr("%1 and %2 are typing...")
.arg(tm.slice(0, -1).join(", ")).arg(tm.slice(-1)[0])
}
Layout.fillWidth: true
Layout.fillHeight: true
Layout.topMargin: rowLayout.spacing / 4
Layout.bottomMargin: rowLayout.spacing / 4
Layout.leftMargin: rowLayout.spacing / 2
Layout.rightMargin: rowLayout.spacing / 2
}
}
}

View File

@@ -1,9 +0,0 @@
// Copyright 2019 miruka
// This file is part of harmonyqml, licensed under LGPLv3.
"use strict"
// FIXME: Obsolete method, but need Qt 5.12+ for standard JS modules import
Qt.include("app.js")
Qt.include("users.js")
Qt.include("rooms.js")

View File

@@ -1,113 +0,0 @@
// Copyright 2019 miruka
// This file is part of harmonyqml, licensed under LGPLv3.
"use strict"
Qt.include("../utils.js")
function typingTextFor(members, ourUserId) {
let ourUsers = []
let profiles = []
let names = []
for (let i = 0; i < accounts.count; i++) {
ourUsers.push(accounts.get(i).userId)
}
for (let member of members) {
if (! ourUsers.includes(member)) { profiles.push(users.find(member)) }
}
profiles.sort((left, right) => {
if (left.displayName < right.displayName) { return -1 }
if (left.displayName > right.displayName) { return +1 }
return 0
})
for (let profile of profiles) {
names.push(coloredNameHtml(profile.displayName, profile.userId))
}
if (names.length == 0) { return "" }
if (names.length == 1) { return qsTr("%1 is typing...").arg(names[0]) }
let text = qsTr("%1 and %2 are typing...")
if (names.length == 2) { return text.arg(names[0]).arg(names[1]) }
return text.arg(names.slice(0, -1).join(", ")).arg(names.slice(-1)[0])
}
function onRoomUpdated(
userId, category, roomId, displayName, avatarUrl, topic,
members, typingMembers, inviterId
) {
roomCategories.upsert({userId, name: category}, {userId, name: category})
function find(category) {
let found = rooms.getIndices({userId, roomId, category}, 1)
return found.length > 0 ? found[0] : null
}
let replace = null
if (category == "Invites") { replace = find("Rooms") || find("Left") }
else if (category == "Rooms") { replace = find("Invites") || find("Left") }
else if (category == "Left") { replace = find("Invites") || find("Rooms")}
let item = {
loading: false,
typingText: typingTextFor(typingMembers, userId),
userId, category, roomId, displayName, avatarUrl, topic, members,
inviterId
}
if (replace === null) {
rooms.upsert({userId, roomId, category}, item)
} else {
rooms.set(replace, item)
}
}
function onRoomForgotten(userId, roomId) {
rooms.popWhere({userId, roomId})
}
function onTimelineEventReceived(
eventType, roomId, eventId, senderId, date, content, isLocalEcho,
targetUserId
) {
let item = {
eventType: py.getattr(eventType, "__name__"),
roomId, eventId, senderId, date, content, isLocalEcho, targetUserId
}
if (isLocalEcho) {
timelines.append(item)
return
}
// Replace first matching local echo
let found = timelines.getIndices(
{roomId, senderId, content, "isLocalEcho": true}, 1, 250
)
if (found.length > 0) {
timelines.set(found[0], item)
}
// Multiple clients will emit duplicate events with the same eventId
else if (item.eventType == "OlmEvent" || item.eventType == "MegolmEvent") {
// Don't replace if an item with the same eventId is found in these
// cases, because it would be the ecrypted version of the event.
timelines.upsert({eventId}, item, false, 250)
}
else {
timelines.upsert({eventId}, item, true, 250)
}
}
var onTimelineMessageReceived = onTimelineEventReceived

View File

@@ -1,23 +0,0 @@
// Copyright 2019 miruka
// This file is part of harmonyqml, licensed under LGPLv3.
"use strict"
function onAccountUpdated(userId) {
accounts.append({userId})
}
function onAccountDeleted(userId) {
accounts.popWhere({userId}, 1)
}
function onUserUpdated(userId, displayName, avatarUrl) {
users.upsert({userId}, {userId, displayName, avatarUrl, loading: false})
}
function onDeviceUpdated(userId, deviceId, ed25519Key, trust, displayName,
lastSeenIp, lastSeenDate) {
}
function onDeviceDeleted(userId, deviceId) {
}

View File

@@ -1,13 +0,0 @@
// Copyright 2019 miruka
// This file is part of harmonyqml, licensed under LGPLv3.
import QtQuick 2.12
import SortFilterProxyModel 0.2
import "../Base"
HListModel {
sorters: StringSorter {
roleName: "userId"
numericMode: true // human numeric sort
}
}

View File

@@ -1,8 +0,0 @@
// Copyright 2019 miruka
// This file is part of harmonyqml, licensed under LGPLv3.
import QtQuick 2.12
import SortFilterProxyModel 0.2
import "../Base"
HListModel {}

View File

@@ -1,14 +0,0 @@
// Copyright 2019 miruka
// This file is part of harmonyqml, licensed under LGPLv3.
import QtQuick 2.12
import SortFilterProxyModel 0.2
import "../Base"
HListModel {
sorters: [
FilterSorter { ValueFilter { roleName: "name"; value: "Invites" } },
FilterSorter { ValueFilter { roleName: "name"; value: "Rooms" } },
FilterSorter { ValueFilter { roleName: "name"; value: "Left" } }
]
}

View File

@@ -1,32 +0,0 @@
// Copyright 2019 miruka
// This file is part of harmonyqml, licensed under LGPLv3.
import QtQuick 2.12
import SortFilterProxyModel 0.2
import "../Base"
HListModel {
sorters: StringSorter {
roleName: "displayName"
}
readonly property ListModel _emptyModel: ListModel {}
function find(userId, category, roomId) {
if (! userId) { return }
let found = rooms.getWhere({userId, roomId, category}, 1)[0]
if (found) { return found }
return {
userId, category, roomId,
displayName: "",
avatarUrl: "",
topic: "",
members: _emptyModel,
typingText: "",
inviterId: "",
loading: true,
}
}
}

View File

@@ -1,24 +0,0 @@
// Copyright 2019 miruka
// This file is part of harmonyqml, licensed under LGPLv3.
import QtQuick 2.12
import SortFilterProxyModel 0.2
import "../Base"
HListModel {
function lastEventOf(roomId) {
for (let i = 0; i < count; i++) {
let item = get(i) // TODO: standardize
if (item.roomId == roomId) { return item }
}
return null
}
sorters: ExpressionSorter {
expression: modelLeft.isLocalEcho && ! modelRight.isLocalEcho ?
true :
! modelLeft.isLocalEcho && modelRight.isLocalEcho ?
false :
modelLeft.date > modelRight.date // descending order
}
}

View File

@@ -1,26 +0,0 @@
// Copyright 2019 miruka
// This file is part of harmonyqml, licensed under LGPLv3.
import QtQuick 2.12
import SortFilterProxyModel 0.2
import "../Base"
HListModel {
function find(userId) {
// Happens when SortFilterProxyModel ExpressionFilter/Sorter/Role tests
// the expression with invalid data to establish property bindings
if (! userId) { return }
let found = getWhere({userId}, 1)[0]
if (found) { return found }
py.callCoro("request_user_update_event", [userId])
return {
userId,
displayName: "",
avatarUrl: "",
loading: true,
}
}
}

View File

@@ -14,10 +14,14 @@ HPage {
property int avatarPreferredSize: 256
property string userId: ""
readonly property var userInfo: users.find(userId)
readonly property bool ready: userInfo && ! userInfo.loading
property string headerName: userInfo ? userInfo.displayName : ""
readonly property bool ready: accountInfo !== "waiting"
readonly property var accountInfo: Utils.getItem(
modelSources["Account"] || [], "user_id", userId
) || "waiting"
property string headerName: ready ? accountInfo.display_name : userId
hideHeaderUnderHeight: avatarPreferredSize
headerLabel.text: qsTr("Account settings for %1").arg(
@@ -27,6 +31,7 @@ HPage {
HSpacer {}
Repeater {
id: repeater
model: ["Profile.qml", "Encryption.qml"]
HRectangle {
@@ -34,6 +39,9 @@ HPage {
Behavior on color { HColorAnimation {} }
Layout.alignment: Qt.AlignCenter
Layout.topMargin: header.visible || index > 0 ? theme.spacing : 0
Layout.bottomMargin:
header.visible || index < repeater.count - 1? theme.spacing : 0
Layout.maximumWidth: Math.min(parent.width, 640)
Layout.preferredWidth:

View File

@@ -16,7 +16,7 @@ HGridLayout {
userId, "set_displayname", [nameField.field.text], () => {
saveButton.nameChangeRunning = false
editAccount.headerName =
Qt.binding(() => userInfo.displayName)
Qt.binding(() => accountInfo.display_name)
}
)
}
@@ -40,12 +40,12 @@ HGridLayout {
}
function cancelChanges() {
nameField.field.text = userInfo.displayName
nameField.field.text = accountInfo.display_name
aliasField.field.text = aliasField.currentAlias
fileDialog.selectedFile = ""
fileDialog.file = ""
editAccount.headerName = Qt.binding(() => userInfo.displayName)
editAccount.headerName = Qt.binding(() => accountInfo.display_name)
}
columns: 2
@@ -59,6 +59,8 @@ HGridLayout {
id: avatar
userId: editAccount.userId
displayName: accountInfo.display_name
avatarUrl: accountInfo.avatar_url
imageUrl: fileDialog.selectedFile || fileDialog.file || defaultImageUrl
toolTipImageUrl: ""
@@ -72,16 +74,22 @@ HGridLayout {
visible: opacity > 0
opacity: ! fileDialog.dialog.visible &&
(! avatar.imageUrl || avatar.hovered) ? 1 : 0
Behavior on opacity { HNumberAnimation {} }
anchors.fill: parent
color: Utils.hsla(0, 0, 0, avatar.imageUrl ? 0.7 : 1)
color: Utils.hsluv(0, 0, 0,
(! avatar.imageUrl && overlayHover.hovered) ? 0.9 : 0.7
)
Behavior on opacity { HNumberAnimation {} }
Behavior on color { HColorAnimation {} }
HColumnLayout {
anchors.centerIn: parent
spacing: currentSpacing
width: parent.width
HoverHandler { id: overlayHover }
HIcon {
svgName: "upload-avatar"
dimension: 64
@@ -92,7 +100,11 @@ HGridLayout {
HLabel {
text: qsTr("Upload profile picture")
color: Utils.hsla(0, 0, 90, 1)
color: (! avatar.imageUrl && overlayHover.hovered) ?
Qt.lighter(theme.colors.accentText, 1.2) :
Utils.hsluv(0, 0, 90, 1)
Behavior on color { HColorAnimation {} }
font.pixelSize: theme.fontSize.big *
avatar.height / avatarPreferredSize
wrapMode: Text.WordWrap
@@ -107,7 +119,7 @@ HGridLayout {
id: fileDialog
fileType: HFileDialogOpener.FileType.Images
dialog.title: qsTr("Select profile picture for %1")
.arg(userInfo.displayName)
.arg(accountInfo.display_name)
}
}
@@ -129,14 +141,14 @@ HGridLayout {
}
HLabeledTextField {
property bool changed: field.text != userInfo.displayName
property bool changed: field.text != accountInfo.display_name
property string fText: field.text
onFTextChanged: editAccount.headerName = field.text
id: nameField
label.text: qsTr("Display name:")
field.text: userInfo.displayName
field.text: accountInfo.display_name
field.onAccepted: applyChanges()
Layout.fillWidth: true

View File

@@ -4,7 +4,7 @@
import QtQuick 2.12
import QtQuick.Controls 2.12
import io.thp.pyotherside 1.5
import "EventHandlers/includes.js" as EventHandlers
import "event_handlers.js" as EventHandlers
Python {
id: py
@@ -60,21 +60,17 @@ Python {
addImportPath("src")
addImportPath("qrc:/")
importNames("python", ["APP"], () => {
call("APP.is_debug_on", [Qt.application.arguments], on => {
window.debug = on
loadSettings(() => {
callCoro("saved_accounts.any_saved", [], any => {
py.ready = true
willLoadAccounts(any)
loadSettings(() => {
callCoro("saved_accounts.any_saved", [], any => {
py.ready = true
willLoadAccounts(any)
if (any) {
py.loadingAccounts = true
py.callCoro("load_saved_accounts", [], () => {
py.loadingAccounts = false
})
}
})
if (any) {
py.loadingAccounts = true
py.callCoro("load_saved_accounts", [], () => {
py.loadingAccounts = false
})
}
})
})
})

View File

@@ -34,7 +34,7 @@ Item {
Shortcut {
sequences: settings.keys ? settings.keys.startDebugger : []
onActivated: if (window.debug) { py.call("APP.pdb") }
onActivated: if (debugMode) { py.call("APP.pdb") }
}
/*

View File

@@ -10,14 +10,14 @@ Column {
width: parent.width
spacing: theme.spacing / 2
property var userInfo: users.find(model.userId)
property bool expanded: true
readonly property var modelItem: model
Component.onCompleted:
expanded = ! window.uiState.collapseAccounts[model.userId]
expanded = ! window.uiState.collapseAccounts[model.user_id]
onExpandedChanged: {
window.uiState.collapseAccounts[model.userId] = ! expanded
window.uiState.collapseAccounts[model.user_id] = ! expanded
window.uiStateChanged()
}
@@ -28,7 +28,7 @@ Column {
TapHandler {
onTapped: pageStack.showPage(
"EditAccount/EditAccount", { "userId": model.userId }
"EditAccount/EditAccount", { "userId": model.user_id }
)
}
@@ -38,46 +38,22 @@ Column {
HUserAvatar {
id: avatar
// Need to do this because conflict with the model property
Component.onCompleted: userId = model.userId
userId: model.user_id
displayName: model.display_name
avatarUrl: model.avatar_url
}
HColumnLayout {
HLabel {
id: accountLabel
color: theme.sidePane.account.name
text: model.display_name || model.user_id
font.pixelSize: theme.fontSize.big
elide: HLabel.ElideRight
leftPadding: sidePane.currentSpacing
rightPadding: leftPadding
Layout.fillWidth: true
Layout.fillHeight: true
HLabel {
id: accountLabel
color: theme.sidePane.account.name
text: userInfo.displayName || model.userId
font.pixelSize: theme.fontSize.big
elide: HLabel.ElideRight
leftPadding: sidePane.currentSpacing
rightPadding: leftPadding
Layout.fillWidth: true
}
HTextField {
visible: false // TODO
id: statusEdit
// text: userInfo.statusMessage
placeholderText: qsTr("Set status message")
font.pixelSize: theme.fontSize.small
background: null
bordered: false
padding: 0
leftPadding: accountLabel.leftPadding
rightPadding: leftPadding
Layout.fillWidth: true
onEditingFinished: {
//Backend.setStatusMessage(model.userId, text) TODO
pageStack.forceActiveFocus()
}
}
}
ExpandButton {
@@ -88,17 +64,15 @@ Column {
}
}
RoomCategoriesList {
RoomList {
id: roomCategoriesList
visible: height > 0
width: parent.width
height: childrenRect.height * (accountDelegate.expanded ? 1 : 0)
clip: heightAnimation.running
userId: userInfo.userId
userId: modelItem.user_id
Behavior on height {
HNumberAnimation { id: heightAnimation }
}
Behavior on height { HNumberAnimation { id: heightAnimation } }
}
}

View File

@@ -9,6 +9,10 @@ HListView {
id: accountList
clip: true
model: accounts
model: HListModel {
keyField: "user_id"
source: modelSources["Account"] || []
}
delegate: AccountDelegate {}
}

View File

@@ -2,7 +2,6 @@
// This file is part of harmonyqml, licensed under LGPLv3.
import QtQuick 2.12
import QtQuick.Layouts 1.12
import "../Base"
HUIButton {

View File

@@ -1,23 +0,0 @@
// Copyright 2019 miruka
// This file is part of harmonyqml, licensed under LGPLv3.
import QtQuick 2.12
import QtQuick.Layouts 1.12
import SortFilterProxyModel 0.2
import "../Base"
HFixedListView {
property string userId: ""
id: roomCategoriesList
model: SortFilterProxyModel {
sourceModel: roomCategories
filters: ValueFilter {
roleName: "userId"
value: userId
}
}
delegate: RoomCategoryDelegate {}
}

View File

@@ -1,73 +0,0 @@
// Copyright 2019 miruka
// This file is part of harmonyqml, licensed under LGPLv3.
import QtQuick 2.12
import QtQuick.Layouts 1.12
import "../Base"
Column {
id: roomCategoryDelegate
width: roomCategoriesList.width
property int normalHeight: childrenRect.height // avoid binding loop
opacity: roomList.model.count > 0 ? 1 : 0
height: normalHeight * opacity
visible: opacity > 0
Behavior on opacity { HNumberAnimation {} }
property string roomListUserId: userId
property bool expanded: true
Component.onCompleted: {
if (! window.uiState.collapseCategories[model.userId]) {
window.uiState.collapseCategories[model.userId] = {}
window.uiStateChanged()
}
expanded = !window.uiState.collapseCategories[model.userId][model.name]
}
onExpandedChanged: {
window.uiState.collapseCategories[model.userId][model.name] = !expanded
window.uiStateChanged()
}
HRowLayout {
width: parent.width
HLabel {
id: roomCategoryLabel
text: model.name
font.weight: Font.DemiBold
elide: Text.ElideRight
topPadding: theme.spacing / 2
bottomPadding: topPadding
Layout.leftMargin: sidePane.currentSpacing
Layout.fillWidth: true
}
ExpandButton {
expandableItem: roomCategoryDelegate
iconDimension: 12
}
}
RoomList {
id: roomList
visible: height > 0
width: roomCategoriesList.width - accountList.Layout.leftMargin
opacity: roomCategoryDelegate.expanded ? 1 : 0
height: childrenRect.height * opacity
clip: listHeightAnimation.running
userId: roomListUserId
category: name
Behavior on opacity {
HNumberAnimation { id: listHeightAnimation }
}
}
}

View File

@@ -12,11 +12,7 @@ HInteractiveRectangle {
height: childrenRect.height
color: theme.sidePane.room.background
TapHandler {
onTapped: pageStack.showRoom(
roomList.userId, roomList.category, model.roomId
)
}
TapHandler { onTapped: pageStack.showRoom(userId, model.room_id) }
Row {
width: parent.width - leftPadding * 2
@@ -30,8 +26,8 @@ HInteractiveRectangle {
HRoomAvatar {
id: roomAvatar
userId: model.userId
roomId: model.roomId
displayName: model.display_name
avatarUrl: model.avatar_url
}
HColumnLayout {
@@ -40,9 +36,9 @@ HInteractiveRectangle {
HLabel {
id: roomLabel
color: theme.sidePane.room.name
text: model.displayName || "<i>Empty room</i>"
text: model.display_name || "<i>Empty room</i>"
textFormat:
model.displayName? Text.PlainText : Text.StyledText
model.display_name? Text.PlainText : Text.StyledText
elide: Text.ElideRight
verticalAlignment: Qt.AlignVCenter
@@ -50,30 +46,27 @@ HInteractiveRectangle {
}
HRichLabel {
function getText(ev) {
if (! ev) { return "" }
if (ev.eventType == "RoomMessageEmote" ||
! ev.eventType.startsWith("RoomMessage"))
{
return Utils.processedEventText(ev)
}
return Utils.coloredNameHtml(
users.find(ev.senderId).displayName,
ev.senderId
) + ": " + py.callSync("inlinify", [ev.content])
}
// Have to do it like this to avoid binding loop
property var lastEv: timelines.lastEventOf(model.roomId)
onLastEvChanged: text = getText(lastEv)
id: subtitleLabel
color: theme.sidePane.room.subtitle
visible: Boolean(text)
textFormat: Text.StyledText
text: {
if (! model.last_event) { return "" }
let ev = model.last_event
if (ev.event_type === "RoomMessageEmote" ||
! ev.event_type.startsWith("RoomMessage")) {
return Utils.processedEventText(ev)
}
return Utils.coloredNameHtml(
ev.sender_name, ev.sender_id
) + ": " + ev.inline_content
}
font.pixelSize: theme.fontSize.small
elide: Text.ElideRight

View File

@@ -2,38 +2,19 @@
// This file is part of harmonyqml, licensed under LGPLv3.
import QtQuick 2.12
import QtQuick.Layouts 1.12
import SortFilterProxyModel 0.2
import "../Base"
import "../utils.js" as Utils
HFixedListView {
id: roomList
property string userId: ""
property string category: ""
model: SortFilterProxyModel {
sourceModel: rooms
filters: AllOf {
ValueFilter {
roleName: "category"
value: category
}
ValueFilter {
roleName: "userId"
value: userId
}
ExpressionFilter {
// Utils... won't work directly in expression?
function filterIt(filter, text) {
return Utils.filterMatches(filter, text)
}
expression: filterIt(paneToolBar.roomFilter, displayName)
}
}
model: HListModel {
source: Utils.filterModelSource(
modelSources[["Room", userId]] || [],
paneToolBar.roomFilter,
)
keyField: "room_id"
}
delegate: RoomDelegate {}

View File

@@ -37,7 +37,7 @@ HRectangle {
let props = window.uiState.pageProperties
if (page == "Chat/Chat.qml") {
pageStack.showRoom(props.userId, props.category, props.roomId)
pageStack.showRoom(props.userId, props.roomId)
} else {
pageStack.show(page, props)
}
@@ -45,11 +45,11 @@ HRectangle {
}
property bool accountsPresent:
accounts.count > 0 || py.loadingAccounts
(modelSources["Account"] || []).length > 0 || py.loadingAccounts
HImage {
visible: Boolean(Qt.resolvedUrl(source))
id: mainUIBackground
visible: Boolean(Qt.resolvedUrl(source))
fillMode: Image.PreserveAspectCrop
source: theme.ui.image
sourceSize.width: Screen.width
@@ -99,12 +99,11 @@ HRectangle {
window.uiStateChanged()
}
function showRoom(userId, category, roomId) {
let roomInfo = rooms.find(userId, category, roomId)
show("Chat/Chat.qml", {roomInfo})
function showRoom(userId, roomId) {
show("Chat/Chat.qml", {userId, roomId})
window.uiState.page = "Chat/Chat.qml"
window.uiState.pageProperties = {userId, category, roomId}
window.uiState.pageProperties = {userId, roomId}
window.uiStateChanged()
}

View File

@@ -4,7 +4,6 @@
import QtQuick 2.12
import QtQuick.Controls 2.12
import "Base"
import "Models"
ApplicationWindow {
id: window
@@ -14,23 +13,14 @@ ApplicationWindow {
width: 640
height: 480
visible: true
title: "Harmony QML"
color: "transparent"
Component.onCompleted: {
Qt.application.organization = "harmonyqml"
Qt.application.name = "harmonyqml"
Qt.application.displayName = "Harmony QML"
Qt.application.version = "0.1.0"
window.ready = true
}
property bool debug: false
property bool ready: false
// Note: For JS object variables, the corresponding method to notify
// key/value changes must be called manually, e.g. settingsChanged().
property var modelSources: ({})
property var mainUI: null
// Note: settingsChanged(), uiStateChanged(), etc must be called manually
property var settings: ({})
onSettingsChanged: py.saveConfig("ui_settings", settings)
@@ -42,27 +32,16 @@ ApplicationWindow {
Shortcuts { id: shortcuts}
Python { id: py }
// Models
Accounts { id: accounts }
Devices { id: devices }
RoomCategories { id: roomCategories }
Rooms { id: rooms }
Timelines { id: timelines }
Users { id: users }
LoadingScreen {
id: loadingScreen
Loader {
anchors.fill: parent
visible: uiLoader.scale < 1
source: py.ready ? "" : "LoadingScreen.qml"
}
Loader {
id: uiLoader
anchors.fill: parent
property bool ready: window.ready && py.ready
scale: uiLoader.ready ? 1 : 0.5
source: uiLoader.ready ? "UI.qml" : ""
scale: py.ready ? 1 : 0.5
source: py.ready ? "UI.qml" : ""
Behavior on scale { HNumberAnimation {} }
}

View File

@@ -3,11 +3,19 @@
"use strict"
function onExitRequested(exitCode) {
Qt.exit(exitCode)
}
function onCoroutineDone(uuid, result) {
py.pendingCoroutines[uuid](result)
delete pendingCoroutines[uuid]
}
function onModelUpdated(syncId, data, serializedSyncId) {
window.modelSources[serializedSyncId] = data
window.modelSourcesChanged()
}

View File

@@ -19,20 +19,6 @@ function hsla(hue, saturation, lightness, alpha=1.0) {
}
function arrayToModelItem(keysName, array) {
// Convert an array to an object suitable to be in a model, example:
// [1, 2, 3] → [{keysName: 1}, {keysName: 2}, {keysName: 3}]
let items = []
for (let item of array) {
let obj = {}
obj[keysName] = item
items.push(obj)
}
return items
}
function hueFrom(string) {
// Calculate and return a unique hue between 0 and 360 for the string
let hue = 0
@@ -52,7 +38,7 @@ function nameColor(name) {
}
function coloredNameHtml(name, userId, displayText=null) {
function coloredNameHtml(name, userId, displayText=null, disambiguate=false) {
// substring: remove leading @
return "<font color='" + nameColor(name || userId.substring(1)) + "'>" +
escapeHtml(displayText || name || userId) +
@@ -71,19 +57,20 @@ function escapeHtml(string) {
function processedEventText(ev) {
if (ev.eventType == "RoomMessageEmote") {
let name = users.find(ev.senderId).displayName
return "<i>" + coloredNameHtml(name) + " " + ev.content + "</i>"
if (ev.event_type == "RoomMessageEmote") {
return "<i>" +
coloredNameHtml(ev.sender_name, ev.sender_id) + " " +
ev.content + "</i>"
}
if (ev.eventType.startsWith("RoomMessage")) { return ev.content }
if (ev.event_type.startsWith("RoomMessage")) { return ev.content }
let name = users.find(ev.senderId).displayName
let text = qsTr(ev.content).arg(coloredNameHtml(name, ev.senderId))
let text = qsTr(ev.content).arg(
coloredNameHtml(ev.sender_name, ev.sender_id)
)
if (text.includes("%2") && ev.targetUserId) {
let tname = users.find(ev.targetUserId).displayName
text = text.arg(coloredNameHtml(tname, ev.targetUserId))
if (text.includes("%2") && ev.target_id) {
text = text.arg(coloredNameHtml(ev.target_name, ev.target_id))
}
return text
@@ -105,6 +92,17 @@ function filterMatches(filter, text) {
}
function filterModelSource(source, filter_text, property="filter_string") {
if (! filter_text) { return source }
let results = []
for (let item of source) {
if (filterMatches(filter_text, item[property])) { results.push(item) }
}
return results
}
function thumbnailParametersFor(width, height) {
// https://matrix.org/docs/spec/client_server/latest#thumbnails
@@ -127,3 +125,11 @@ function thumbnailParametersFor(width, height) {
function minutesBetween(date1, date2) {
return Math.round((((date2 - date1) % 86400000) % 3600000) / 60000)
}
function getItem(array, mainKey, value) {
for (let i = 0; i < array.length; i++) {
if (array[i][mainKey] === value) { return array[i] }
}
return undefined
}