place metadata below message when the Layout is narrow (<350)

This commit is contained in:
Malte E 2022-02-05 14:12:51 +01:00
parent 3f7c15c7af
commit f5a693ac03
2 changed files with 22 additions and 22 deletions

View file

@ -97,10 +97,11 @@ Item {
topMargin: 1 topMargin: 1
bottomMargin: 1 bottomMargin: 1
} }
property bool narrowLayout: (row.width < 350) && Settings.bubbles
rowSpacing: 0 rowSpacing: 0
columnSpacing: 0 columnSpacing: 0
columns: 2 columns: narrowLayout? 1 : 2
rows: 2 rows: narrowLayout? 3 : 2
// fancy reply, if this is a reply // fancy reply, if this is a reply
Reply { Reply {
@ -147,7 +148,7 @@ Item {
Layout.leftMargin: 4 Layout.leftMargin: 4
Layout.rightMargin: 4 Layout.rightMargin: 4
Layout.topMargin: reply.visible ? 2 : 4 Layout.topMargin: reply.visible ? 2 : 4
Layout.bottomMargin: Settings.bubbles? 4: 2 Layout.bottomMargin: Settings.bubbles? (msg.narrowLayout? 0 : 4) : 2
id: contentItem id: contentItem
blurhash: r.blurhash blurhash: r.blurhash
@ -174,17 +175,17 @@ Item {
} }
RowLayout { RowLayout {
Layout.column: 1 Layout.column: msg.narrowLayout? 0 : 1
Layout.row: 0 Layout.row: msg.narrowLayout? 2 : 0
Layout.rowSpan: 2 Layout.rowSpan: msg.narrowLayout? 1 : 2
Layout.alignment: Qt.AlignTop | Qt.AlignRight Layout.alignment: Qt.AlignTop | Qt.AlignRight
Layout.topMargin: 4 Layout.topMargin: msg.narrowLayout? 0 : 4
Layout.rightMargin: Settings.bubbles? 4 : 0 Layout.rightMargin: Settings.bubbles? 4 : 0
property double scaling: msg.narrowLayout? 0.75 : 1
StatusIndicator { StatusIndicator {
Layout.alignment: Qt.AlignRight | Qt.AlignTop Layout.alignment: Qt.AlignRight | Qt.AlignTop
Layout.preferredHeight: 16 Layout.preferredHeight: 16*parent.scaling
width: 16 width: 16*parent.scaling
status: r.status status: r.status
eventId: r.eventId eventId: r.eventId
} }
@ -192,12 +193,12 @@ Item {
Image { Image {
visible: isEdited || eventId == chat.model.edit visible: isEdited || eventId == chat.model.edit
Layout.alignment: Qt.AlignRight | Qt.AlignTop Layout.alignment: Qt.AlignRight | Qt.AlignTop
Layout.preferredHeight: 16 Layout.preferredHeight: 16*parent.scaling
Layout.preferredWidth: 16 Layout.preferredWidth: 16*parent.scaling
height: 16 height: 16*parent.scaling
width: 16 width: 16*parent.scaling
sourceSize.width: 16 * Screen.devicePixelRatio sourceSize.width: 16 * Screen.devicePixelRatio*parent.scaling
sourceSize.height: 16 * Screen.devicePixelRatio sourceSize.height: 16 * Screen.devicePixelRatio*parent.scaling
source: "image://colorimage/:/icons/icons/ui/edit.svg?" + ((eventId == chat.model.edit) ? Nheko.colors.highlight : Nheko.colors.buttonText) source: "image://colorimage/:/icons/icons/ui/edit.svg?" + ((eventId == chat.model.edit) ? Nheko.colors.highlight : Nheko.colors.buttonText)
ToolTip.visible: editHovered.hovered ToolTip.visible: editHovered.hovered
ToolTip.delay: Nheko.tooltipDelay ToolTip.delay: Nheko.tooltipDelay
@ -214,8 +215,8 @@ Item {
encrypted: isEncrypted encrypted: isEncrypted
trust: trustlevel trust: trustlevel
Layout.alignment: Qt.AlignRight | Qt.AlignTop Layout.alignment: Qt.AlignRight | Qt.AlignTop
Layout.preferredHeight: 16 Layout.preferredHeight: 16*parent.scaling
Layout.preferredWidth: 16 Layout.preferredWidth: 16*parent.scaling
} }
Label { Label {
@ -226,7 +227,7 @@ Item {
ToolTip.visible: ma.hovered ToolTip.visible: ma.hovered
ToolTip.delay: Nheko.tooltipDelay ToolTip.delay: Nheko.tooltipDelay
ToolTip.text: Qt.formatDateTime(timestamp, Qt.DefaultLocaleLongDate) ToolTip.text: Qt.formatDateTime(timestamp, Qt.DefaultLocaleLongDate)
font.pointSize: 10*parent.scaling
HoverHandler { HoverHandler {
id: ma id: ma
} }

View file

@ -1059,8 +1059,7 @@ UserSettingsModel::data(const QModelIndex &index, int role) const
"Allow using markdown in messages.\nWhen disabled, all messages are sent as a plain " "Allow using markdown in messages.\nWhen disabled, all messages are sent as a plain "
"text."); "text.");
case Bubbles: case Bubbles:
return tr( return tr("Messages received a bubble background.");
"Messages received a bubble background.");
case AnimateImagesOnHover: case AnimateImagesOnHover:
return tr("Plays media like GIFs or WEBPs only when explicitly hovering over them."); return tr("Plays media like GIFs or WEBPs only when explicitly hovering over them.");
case TypingNotifications: case TypingNotifications: