d3v1l/matrixion
1
0
Fork 0
mirror of https://github.com/Nheko-Reborn/nheko.git synced 2024-11-22 11:00:48 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix layout - no more binding loops (hopefully)

Browse source
This commit is contained in:
Malte E 2022-02-11 22:02:30 +01:00
parent 0e548b7d39
commit d0ac110cb7
10 changed files with 35 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/qml/MessageView.qml
View file

@ -33,7 +33,7 @@ ScrollView {
//reuseItems: true
boundsBehavior: Flickable.StopAtBounds
pixelAligned: true
spacing: 4
spacing: 2
verticalLayoutDirection: ListView.BottomToTop
onCountChanged: {
// Mark timeline as read
@ -464,7 +464,7 @@ ScrollView {
property date timestamp: wrapper.timestamp
z: 4
active: previousMessageUserId !== undefined && previousMessageUserId !== userId || previousMessageDay !== day
active: previousMessageUserId !== undefined && previousMessageUserId !== userId || previousMessageDay !== day || previousMessageIsStateEvent !== isStateEvent
//asynchronous: true
sourceComponent: sectionHeader
visible: status == Loader.Ready

1
resources/qml/ReplyPopup.qml
View file

@ -47,6 +47,7 @@ Rectangle {
userId: modelData.userId ?? ""
userName: modelData.userName ?? ""
encryptionError: modelData.encryptionError ?? ""
width: parent.width
}
ImageButton {

31
resources/qml/TimelineRow.qml
View file

@ -47,7 +47,7 @@ Item {
anchors.left: parent.left
anchors.right: parent.right
height: row.height+reactionRow.height+(Settings.bubbles? 8 : 4)
height: row.height+reactionRow.height
Rectangle {
color: (Settings.messageHoverHighlight && hoverHandler.hovered) ? Nheko.colors.alternateBase : "transparent"
@ -78,30 +78,19 @@ Item {
anchors.rightMargin: 1
anchors.leftMargin: Nheko.avatarSize + 12 // align bubble with section header
anchors.left: parent.left
//anchors.right: parent.right
property int maxWidth: parent.width-anchors.leftMargin-anchors.rightMargin
width: Math.min(maxWidth,msg.implicitWidth)
height: msg.height
topInset: -4
bottomInset: -4
leftInset: -4
rightInset: -4
width: Settings.bubbles? Math.min(maxWidth,implicitWidth+metadata.width) : maxWidth
padding: isStateEvent? 0 : 3
background: Rectangle {
//anchors.fill: msg
property color userColor: TimelineManager.userColor(userId, Nheko.colors.base)
property color bgColor: Nheko.colors.base
color: Qt.rgba(userColor.r*0.1+bgColor.r*0.9,userColor.g*0.1+bgColor.g*0.9,userColor.b*0.1+bgColor.b*0.9,1) //TimelineManager.userColor(userId, Nheko.colors.base)
radius: 4
color: Qt.tint(bgColor, Qt.rgba(userColor.r, userColor.g, userColor.b, 0.2))
radius: parent.padding*2
visible: Settings.bubbles && !isStateEvent
}
GridLayout {
contentItem: GridLayout {
id: msg
anchors {
right: parent.right
left: parent.left
top: parent.top
}
property bool narrowLayout: Settings.bubbles //&& (timelineView.width < 500) // timelineView causes fewew binding loops than r. But maybe it shouldn't depend on width anyway
rowSpacing: 0
columnSpacing: 2
@ -114,6 +103,8 @@ Item {
Layout.column: 0
Layout.fillWidth: true
Layout.bottomMargin: visible? 2 : 0
Layout.preferredHeight: height
Layout.maximumWidth: implicitWidth
id: reply
function fromModel(role) {
@ -142,7 +133,6 @@ Item {
callType: r.relatedEventCacheBuster, fromModel(Room.CallType) ?? ""
encryptionError: r.relatedEventCacheBuster, fromModel(Room.EncryptionError) ?? ""
relatedEventCacheBuster: r.relatedEventCacheBuster, fromModel(Room.RelatedEventCacheBuster) ?? 0
maxWidth: row.maxWidth
}
// actual message content
@ -150,6 +140,8 @@ Item {
Layout.row: 1
Layout.column: 0
Layout.fillWidth: true
Layout.preferredHeight: height
Layout.maximumWidth: implicitWidth
id: contentItem
blurhash: r.blurhash
@ -174,7 +166,6 @@ Item {
encryptionError: r.encryptionError
relatedEventCacheBuster: r.relatedEventCacheBuster
isReply: false
maxWidth: row.maxWidth
}
RowLayout {
@ -182,7 +173,7 @@ Item {
Layout.column: msg.narrowLayout? 0 : 1
Layout.row: msg.narrowLayout? 2 : 0
Layout.rowSpan: msg.narrowLayout? 1 : 2
Layout.bottomMargin: msg.narrowLayout? -4 : 0
Layout.bottomMargin: -4
Layout.alignment: Qt.AlignTop | Qt.AlignRight
Layout.preferredWidth: implicitWidth
visible: !isStateEvent

5
resources/qml/delegates/FileMessage.qml
View file

@ -11,11 +11,10 @@ Item {
required property string eventId
required property string filename
required property string filesize
property int maxWidth
height: row.height + 24
width: maxWidth
implicitWidth: maxWidth
width: parent.width
implicitWidth: row.implicitWidth
RowLayout {
id: row

11
resources/qml/delegates/ImageMessage.qml
View file

@ -17,16 +17,11 @@ Item {
required property string filename
required property bool isReply
required property string eventId
property int maxWidth
property double tempWidth: Math.min(maxWidth, originalWidth < 1 ? 200 : originalWidth)
property double tempHeight: tempWidth * proportionalHeight
property double divisor: isReply ? 5 : 3
property bool tooHigh: tempHeight > timelineView.height / divisor
height: Math.round(tooHigh ? timelineView.height / divisor : tempHeight)
width: Math.round(tooHigh ? (timelineView.height / divisor) / proportionalHeight : tempWidth)
implicitHeight: height
implicitWidth: width
implicitWidth: Math.round(originalWidth*Math.min((timelineView.height/divisor)/(originalWidth*proportionalHeight), 1))
width: parent.width
height: width*proportionalHeight
Image {
id: blurhash_

13
resources/qml/delegates/MessageDelegate.qml
View file

@ -35,9 +35,8 @@ Item {
required property string callType
required property int encryptionError
required property int relatedEventCacheBuster
property int maxWidth
Layout.preferredHeight: chooser.child ? chooser.child.height : Nheko.paddingLarge
height: chooser.child ? chooser.child.height : Nheko.paddingLarge
DelegateChooser {
id: chooser
@ -46,8 +45,7 @@ Item {
roleValue: type
//anchors.fill: parent
anchors.left: parent.left
anchors.right: parent.right
width: parent.width? parent.width: 0 // this should get rid of "cannot read property 'width' of null"
DelegateChoice {
roleValue: MtxEvent.UnknownMessage
@ -111,7 +109,6 @@ Item {
filename: d.filename
isReply: d.isReply
eventId: d.eventId
maxWidth: d.maxWidth
}
}
@ -129,7 +126,6 @@ Item {
filename: d.filename
isReply: d.isReply
eventId: d.eventId
maxWidth: d.maxWidth
}
}
@ -141,7 +137,6 @@ Item {
eventId: d.eventId
filename: d.filename
filesize: d.filesize
maxWidth: d.maxWidth
}
}
@ -158,7 +153,6 @@ Item {
url: d.url
body: d.body
filesize: d.filesize
maxWidth: d.maxWidth
}
}
@ -175,7 +169,6 @@ Item {
url: d.url
body: d.body
filesize: d.filesize
maxWidth: d.maxWidth
}
}
@ -184,7 +177,7 @@ Item {
roleValue: MtxEvent.Redacted
Redacted {
delegateWidth: d.width
//delegateWidth: d.width
}
}

4
resources/qml/delegates/Pill.qml
View file

@ -11,8 +11,8 @@ Label {
property bool isStateEvent
color: Nheko.colors.text
horizontalAlignment: Text.AlignHCenter
height: contentHeight * 1.2
width: contentWidth * 1.2
//height: contentHeight * 1.2
//width: contentWidth * 1.2
font.pointSize: isStateEvent? 0.75*fontMetrics.font.pointSize : 1*fontMetrics.font.pointSize
background: Rectangle {

11
resources/qml/delegates/PlayableMediaMessage.qml
View file

@ -22,16 +22,11 @@ Item {
required property string url
required property string body
required property string filesize
property int maxWidth
property double tempWidth: Math.min(maxWidth, originalWidth < 1 ? 400 : originalWidth)
property double tempHeight: tempWidth * proportionalHeight
property double divisor: isReply ? 4 : 2
property bool tooHigh: tempHeight > timelineRoot.height / divisor
height: (type == MtxEvent.VideoMessage ? tooHigh ? timelineRoot.height / divisor : tempHeight : 80) + fileInfoLabel.height
width: type == MtxEvent.VideoMessage ? tooHigh ? (timelineRoot.height / divisor) / proportionalHeight : tempWidth : 250
implicitWidth: type == MtxEvent.VideoMessage ? Math.round(originalWidth*Math.min((timelineView.height/divisor)/(originalWidth*proportionalHeight), 1)) : 500
width: parent.width
height: (type == MtxEvent.VideoMessage ? width*proportionalHeight : 80) + fileInfoLabel.height
implicitHeight: height
implicitWidth: width
MxcMedia {
id: mxcmedia

11
resources/qml/delegates/Redacted.qml
View file

@ -10,10 +10,10 @@ import im.nheko 1.0
Rectangle{
required property real delegateWidth
//required property real delegateWidth
height: redactedLayout.implicitHeight + Nheko.paddingSmall
width: redactedLayout.implicitWidth + 2 * Nheko.paddingMedium
implicitWidth: width
implicitWidth: redactedLayout.implicitWidth + 2 * Nheko.paddingMedium
//implicitWidth: width
radius: fontMetrics.lineSpacing / 2 + 2 * Nheko.paddingSmall
color: Nheko.colors.alternateBase
@ -33,8 +33,9 @@ Rectangle{
id: redactedLabel
Layout.margins: 0
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
Layout.fillWidth: true
Layout.maximumWidth: delegateWidth - 4 * Nheko.paddingSmall - trashImg.width - 2 * Nheko.paddingMedium
Layout.preferredWidth: implicitWidth
//Layout.fillWidth: true
//Layout.maximumWidth: delegateWidth - 4 * Nheko.paddingSmall - trashImg.width - 2 * Nheko.paddingMedium
property var redactedPair: room.formatRedactedEvent(eventId)
text: redactedPair["first"]
wrapMode: Label.WordWrap

4
resources/qml/delegates/Reply.qml
View file

@ -37,8 +37,8 @@ Item {
property int relatedEventCacheBuster
property int maxWidth
Layout.preferredHeight: replyContainer.height
height: replyContainer.height
implicitHeight: replyContainer.height
implicitWidth: visible? colorLine.width+replyContainer.implicitWidth : 0
CursorShape {
@ -99,6 +99,7 @@ Item {
MessageDelegate {
Layout.leftMargin: 4
Layout.preferredHeight: height
id: reply
blurhash: r.blurhash
body: r.body
@ -125,7 +126,6 @@ Item {
enabled: false
Layout.fillWidth: true
isReply: true
maxWidth: r.maxWidth-4
}
}