Moves the timestamp to the left

This should help a lot on mobile, makes the timeline a bit denser and
gives additional horizontal space. Not sure I like the smaller avatars
though.
This commit is contained in:
Nicolas Werner 2021-06-15 13:41:08 +02:00
parent 84434433f2
commit 74fb9385b0
No known key found for this signature in database
GPG key ID: C8D75E610773F2D9
3 changed files with 35 additions and 14 deletions

View file

@ -71,7 +71,7 @@ Rectangle {
AdaptiveLayoutElement {
id: timlineViewC
minimumWidth: fontMetrics.averageCharacterWidth * 40 + Nheko.avatarSize + 2* Nheko.paddingMedium
minimumWidth: fontMetrics.averageCharacterWidth * 40 + Nheko.avatarSize + 2 * Nheko.paddingMedium
TimelineView {
id: timeline

View file

@ -241,8 +241,11 @@ ScrollView {
Avatar {
id: messageUserAvatar
width: Nheko.avatarSize
height: Nheko.avatarSize
property int avatarSize: Math.ceil(fontMetrics.lineSpacing * 1.5)
width: avatarSize
height: avatarSize
y: -Math.ceil(fontMetrics.lineSpacing * 0.25)
url: modelData ? chat.model.avatarUrl(modelData.userId).replace("mxc://", "image://MxcImage/") : ""
displayName: modelData ? modelData.userName : ""
userid: modelData ? modelData.userId : ""

View file

@ -41,12 +41,16 @@ Item {
RowLayout {
id: row
property int avatarSize: Math.ceil(fontMetrics.lineSpacing * 1.5)
anchors.rightMargin: 1
anchors.leftMargin: Nheko.avatarSize + 16
anchors.leftMargin: avatarSize + Nheko.paddingMedium
anchors.left: parent.left
anchors.right: parent.right
Column {
id: messageCol
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
spacing: 4
@ -111,18 +115,32 @@ Item {
}
Label {
Layout.alignment: Qt.AlignRight | Qt.AlignTop
text: model.timestamp.toLocaleTimeString(Locale.ShortFormat)
width: Math.max(implicitWidth, text.length * fontMetrics.maximumCharacterWidth)
color: Nheko.inactiveColors.text
ToolTip.visible: ma.hovered
ToolTip.text: Qt.formatDateTime(model.timestamp, Qt.DefaultLocaleLongDate)
}
HoverHandler {
id: ma
}
Label {
id: ts
property int marginPadding: Math.floor((fontMetrics.font.pixelSize - smallFontMetrics.font.pixelSize) / 2)
anchors.left: parent.left
anchors.leftMargin: marginPadding
anchors.bottom: parent.bottom
anchors.bottomMargin: (reactionRow.height > 0 ? reactionRow.height + messageCol.spacing : 0) + marginPadding
text: model.timestamp.toLocaleTimeString(Locale.ShortFormat)
width: Math.max(implicitWidth, text.length * smallFontMetrics.maximumCharacterWidth)
font.pixelSize: smallFontMetrics.font.pixelSize
color: Nheko.inactiveColors.text
ToolTip.visible: ma.hovered
ToolTip.text: Qt.formatDateTime(model.timestamp, Qt.DefaultLocaleLongDate)
FontMetrics {
id: smallFontMetrics
font.pixelSize: Math.ceil(fontMetrics.font.pixelSize * 0.6)
}
HoverHandler {
id: ma
}
}