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

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

View file

@ -41,12 +41,16 @@ Item {
RowLayout { RowLayout {
id: row id: row
property int avatarSize: Math.ceil(fontMetrics.lineSpacing * 1.5)
anchors.rightMargin: 1 anchors.rightMargin: 1
anchors.leftMargin: Nheko.avatarSize + 16 anchors.leftMargin: avatarSize + Nheko.paddingMedium
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
Column { Column {
id: messageCol
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
spacing: 4 spacing: 4
@ -111,14 +115,30 @@ Item {
} }
}
Label { Label {
Layout.alignment: Qt.AlignRight | Qt.AlignTop 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) text: model.timestamp.toLocaleTimeString(Locale.ShortFormat)
width: Math.max(implicitWidth, text.length * fontMetrics.maximumCharacterWidth) width: Math.max(implicitWidth, text.length * smallFontMetrics.maximumCharacterWidth)
font.pixelSize: smallFontMetrics.font.pixelSize
color: Nheko.inactiveColors.text color: Nheko.inactiveColors.text
ToolTip.visible: ma.hovered ToolTip.visible: ma.hovered
ToolTip.text: Qt.formatDateTime(model.timestamp, Qt.DefaultLocaleLongDate) ToolTip.text: Qt.formatDateTime(model.timestamp, Qt.DefaultLocaleLongDate)
FontMetrics {
id: smallFontMetrics
font.pixelSize: Math.ceil(fontMetrics.font.pixelSize * 0.6)
}
HoverHandler { HoverHandler {
id: ma id: ma
} }
@ -126,5 +146,3 @@ Item {
} }
} }
}