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.
left-avatar
Nicolas Werner 3 years ago
parent 84434433f2
commit 74fb9385b0
No known key found for this signature in database
GPG Key ID: C8D75E610773F2D9
  1. 7
      resources/qml/MessageView.qml
  2. 28
      resources/qml/TimelineRow.qml

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

@ -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,18 +115,32 @@ 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)
HoverHandler { FontMetrics {
id: ma id: smallFontMetrics
font.pixelSize: Math.ceil(fontMetrics.font.pixelSize * 0.6)
} }
HoverHandler {
id: ma
} }
} }

Loading…
Cancel
Save