67dde68126
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.
241 lines
6.7 KiB
QML
241 lines
6.7 KiB
QML
// vim: syntax=qml
|
|
|
|
// Base variables
|
|
|
|
real uiScale: 1.0 /* TODO: Implement correctly, do not change for now */
|
|
real fontScale: uiScale
|
|
|
|
Behavior on uiScale { HNumberAnimation {} }
|
|
Behavior on fontScale { HNumberAnimation {} }
|
|
|
|
int minimumSupportedWidth: 240 * uiScale
|
|
int minimumSupportedHeight: 120 * uiScale
|
|
int contentIsWideAbove: 439 * uiScale
|
|
|
|
int minimumSupportedWidthPlusSpacing: minimumSupportedWidth + spacing * 2
|
|
int minimumSupportedHeightPlusSpacing: minimumSupportedHeight + spacing * 2
|
|
|
|
int baseElementsHeight: 36 * uiScale
|
|
int spacing: 12 * uiScale
|
|
int radius: 5
|
|
int animationDuration: 100
|
|
|
|
string preferredIconPack: "light-thin"
|
|
|
|
fontSize:
|
|
int smaller: 8 * fontScale
|
|
int small: 13 * fontScale
|
|
int normal: 16 * fontScale
|
|
int big: 22 * fontScale
|
|
int bigger: 32 * fontScale
|
|
int biggest: 48 * fontScale
|
|
|
|
fontFamily:
|
|
string sans: "Roboto"
|
|
string serif: "Roboto Slab"
|
|
string mono: "Hack"
|
|
|
|
colors:
|
|
int hue: 260
|
|
int saturation: 40
|
|
real intensity: 1.0
|
|
real opacity: 1.0
|
|
|
|
color weakBackground: hsluv(hue, saturation, intensity * 12, opacity)
|
|
color mediumBackground: hsluv(hue, saturation, intensity * 9, opacity)
|
|
color strongBackground: hsluv(hue, saturation, intensity * 6, opacity)
|
|
|
|
color inputBackground:
|
|
hsluv(hue, saturation, intensity * 2, Math.min(0.6, opacity))
|
|
|
|
color brightText: hsluv(0, 0, intensity * 100)
|
|
color text: hsluv(0, 0, intensity * 80)
|
|
color dimText: hsluv(0, 0, intensity * 55)
|
|
color dimmerText: hsluv(0, 0, intensity * 30)
|
|
color accentText: hsluv(hue - 10, saturation * 2.25, 60)
|
|
color link: accentText
|
|
color code: hsluv(hue + 5, saturation * 1.5, intensity * 60)
|
|
|
|
// Example of an animation, set running: true to enable
|
|
NumberAnimation on hue
|
|
running: false
|
|
from: 0
|
|
to: 360
|
|
duration: 10000
|
|
loops: Animation.Infinite
|
|
|
|
|
|
// Generic UI controls
|
|
|
|
controls:
|
|
box:
|
|
color background: colors.strongBackground
|
|
int radius: theme.radius
|
|
|
|
popup:
|
|
color background: colors.strongBackground
|
|
|
|
header:
|
|
color background: colors.strongBackground
|
|
|
|
button:
|
|
color background: colors.inputBackground
|
|
color disabledBackground:
|
|
hsluv(0, 0, colors.intensity * 2, Math.min(0.6, opacity))
|
|
color checkedBackground:
|
|
hsluv(0, 0, colors.intensity * 40, Math.min(0.6, opacity))
|
|
|
|
color hoveredOverlay: hsluv(0, 0, 100)
|
|
color text: colors.text
|
|
color disabledText: colors.dimmerText
|
|
|
|
interactiveRectangle:
|
|
color background: "transparent"
|
|
|
|
color hoveredOverlay: hsluv(0, 0, 100)
|
|
color pressedOverlay: hsluv(0, 0, 100)
|
|
color checkedOverlay: hsluv(0, 0, 100)
|
|
|
|
real hoveredOpacity: 0.1
|
|
real pressedOpacity: 0.2
|
|
real checkedOpacity: 0.2
|
|
|
|
textField:
|
|
color background: colors.inputBackground
|
|
color focusedBackground: background
|
|
|
|
int borderWidth: 1
|
|
color border: "transparent"
|
|
color focusedBorder: colors.accentText
|
|
|
|
color text: colors.text
|
|
color focusedText: colors.text
|
|
|
|
textArea:
|
|
color background: colors.inputBackground
|
|
color text: colors.text
|
|
|
|
avatar:
|
|
int size: baseElementsHeight
|
|
int radius: theme.radius
|
|
|
|
background:
|
|
int saturation: colors.saturation - 5
|
|
int lightness: Math.min(50, colors.intensity * 20)
|
|
real opacity: 1.0
|
|
|
|
letter:
|
|
int saturation: colors.saturation * 1.5
|
|
int lightness: colors.intensity * 60
|
|
real opacity: 1.0
|
|
|
|
displayName:
|
|
int saturation: colors.saturation
|
|
int lightness: Math.min(55, colors.intensity * 55)
|
|
|
|
|
|
// Special UI parts
|
|
|
|
ui:
|
|
// Supported: local file path or web URL
|
|
url image: ""
|
|
color background: colors.weakBackground
|
|
|
|
|
|
sidePane:
|
|
real autoWidthRatio: 0.33 * uiScale
|
|
int maximumAutoWidth: 320 * uiScale
|
|
|
|
int autoCollapseBelowWidth: 128 * uiScale
|
|
int collapsedWidth: controls.avatar.size
|
|
|
|
int autoReduceBelowWindowWidth:
|
|
minimumSupportedWidthPlusSpacing + collapsedWidth
|
|
|
|
color background: colors.strongBackground
|
|
|
|
account:
|
|
color background: "transparent"
|
|
color name: colors.text
|
|
|
|
room:
|
|
color background: "transparent"
|
|
color name: colors.text
|
|
color subtitle: colors.dimText
|
|
|
|
settingsButton:
|
|
color background: "transparent"
|
|
|
|
filterRooms:
|
|
color background: "transparent"
|
|
|
|
|
|
chat:
|
|
roomHeader:
|
|
color background: colors.strongBackground
|
|
color name: colors.text
|
|
color topic: colors.dimText
|
|
|
|
roomSidePane:
|
|
color background: colors.mediumBackground
|
|
|
|
selectViewBar:
|
|
color background: chat.roomHeader.background
|
|
|
|
eventList:
|
|
int ownEventsOnRightUnderWidth: 768
|
|
color background: "transparent"
|
|
|
|
message:
|
|
int radius: theme.radius
|
|
color background: colors.strongBackground
|
|
color ownBackground: hsluv(
|
|
colors.hue, colors.saturation + 30, colors.intensity * 6, opacity
|
|
)
|
|
|
|
color body: colors.text
|
|
color date: colors.dimText
|
|
|
|
color greenText: hsluv(135, colors.saturation * 2.25, 80)
|
|
color link: colors.link
|
|
color code: colors.code
|
|
|
|
string styleSheet:
|
|
"a { color: " + link + " }" +
|
|
|
|
"code { font-family: " + fontFamily.mono + "; " +
|
|
"color: " + code + " }" +
|
|
|
|
"h1, h2, h3 { font-weight: normal }" +
|
|
"h1 { font-size: " + fontSize.biggest + "px }" +
|
|
"h2 { font-size: " + fontSize.bigger + "px }" +
|
|
"h3 { font-size: " + fontSize.big + "px }" +
|
|
"h4 { font-size: " + fontSize.normal + "px }" +
|
|
"h5 { font-size: " + fontSize.small + "px }" +
|
|
"h6 { font-size: " + fontSize.smaller + "px }" +
|
|
|
|
".greentext { color: " + greenText + " }"
|
|
|
|
string styleInclude:
|
|
'<style type"text/css">\n' + styleSheet + '\n</style>\n'
|
|
|
|
daybreak:
|
|
color background: colors.strongBackground
|
|
color text: colors.text
|
|
int radius: theme.radius
|
|
|
|
inviteBanner:
|
|
color background: colors.mediumBackground
|
|
|
|
leftBanner:
|
|
color background: colors.mediumBackground
|
|
|
|
unknownDevices:
|
|
color background: colors.mediumBackground
|
|
|
|
typingMembers:
|
|
color background: colors.mediumBackground
|
|
|
|
sendBox:
|
|
color background: colors.strongBackground
|