diff --git a/imports/NeoChat/Component/Timeline/AudioDelegate.qml b/imports/NeoChat/Component/Timeline/AudioDelegate.qml index 204caa644..158bc381f 100644 --- a/imports/NeoChat/Component/Timeline/AudioDelegate.qml +++ b/imports/NeoChat/Component/Timeline/AudioDelegate.qml @@ -21,7 +21,7 @@ TimelineContainer { hoverComponent: hoverActions innerObject: Control { Layout.fillWidth: true - Layout.maximumWidth: audioDelegate.bubbleMaxWidth + Layout.maximumWidth: audioDelegate.contentMaxWidth Audio { id: audio diff --git a/imports/NeoChat/Component/Timeline/EncryptedDelegate.qml b/imports/NeoChat/Component/Timeline/EncryptedDelegate.qml index 514cc9b8e..243564463 100644 --- a/imports/NeoChat/Component/Timeline/EncryptedDelegate.qml +++ b/imports/NeoChat/Component/Timeline/EncryptedDelegate.qml @@ -19,7 +19,7 @@ TimelineContainer { readOnly: true wrapMode: Text.WordWrap textFormat: Text.RichText - Layout.maximumWidth: encryptedDelegate.bubbleMaxWidth + Layout.maximumWidth: encryptedDelegate.contentMaxWidth Layout.leftMargin: Config.showAvatarInTimeline ? Kirigami.Units.largeSpacing : 0 } } diff --git a/imports/NeoChat/Component/Timeline/FileDelegate.qml b/imports/NeoChat/Component/Timeline/FileDelegate.qml index 6aaa73b16..ae36003ae 100644 --- a/imports/NeoChat/Component/Timeline/FileDelegate.qml +++ b/imports/NeoChat/Component/Timeline/FileDelegate.qml @@ -35,7 +35,7 @@ TimelineContainer { innerObject: RowLayout { Layout.fillWidth: true - Layout.maximumWidth: fileDelegate.bubbleMaxWidth + Layout.maximumWidth: fileDelegate.contentMaxWidth Layout.margins: Kirigami.Units.largeSpacing spacing: Kirigami.Units.largeSpacing diff --git a/imports/NeoChat/Component/Timeline/ImageDelegate.qml b/imports/NeoChat/Component/Timeline/ImageDelegate.qml index 124442256..fb5f6f6e5 100644 --- a/imports/NeoChat/Component/Timeline/ImageDelegate.qml +++ b/imports/NeoChat/Component/Timeline/ImageDelegate.qml @@ -32,8 +32,8 @@ TimelineContainer { innerObject: Image { id: img - Layout.maximumWidth: imageDelegate.bubbleMaxWidth - Layout.maximumHeight: imageDelegate.bubbleMaxWidth / imageDelegate.info.w * imageDelegate.info.h + Layout.maximumWidth: imageDelegate.contentMaxWidth + Layout.maximumHeight: imageDelegate.contentMaxWidth / imageDelegate.info.w * imageDelegate.info.h Layout.preferredWidth: imageDelegate.info.w Layout.preferredHeight: imageDelegate.info.h source: model.mediaUrl diff --git a/imports/NeoChat/Component/Timeline/MessageDelegate.qml b/imports/NeoChat/Component/Timeline/MessageDelegate.qml index 083233f12..9d6882488 100644 --- a/imports/NeoChat/Component/Timeline/MessageDelegate.qml +++ b/imports/NeoChat/Component/Timeline/MessageDelegate.qml @@ -20,7 +20,7 @@ TimelineContainer { innerObject: RichLabel { isEmote: messageDelegate.isEmote - Layout.maximumWidth: messageDelegate.bubbleMaxWidth + Layout.maximumWidth: messageDelegate.contentMaxWidth TapHandler { acceptedButtons: Qt.RightButton diff --git a/imports/NeoChat/Component/Timeline/ReplyComponent.qml b/imports/NeoChat/Component/Timeline/ReplyComponent.qml index fee7d1a9c..fb22f799e 100644 --- a/imports/NeoChat/Component/Timeline/ReplyComponent.qml +++ b/imports/NeoChat/Component/Timeline/ReplyComponent.qml @@ -15,11 +15,11 @@ MouseArea { id: replyButton Layout.fillWidth: true implicitHeight: replyName.implicitHeight + (loader.item ? loader.item.height : 0) + Kirigami.Units.largeSpacing - implicitWidth: Math.min(bubbleMaxWidth, Math.max((loader.item ? loader.item.width + Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing : 0), replyName.implicitWidth)) + Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 3 + implicitWidth: Math.min(contentMaxWidth, Math.max((loader.item ? loader.item.width + Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing : 0), replyName.implicitWidth)) + Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 3 Component.onCompleted: { parent.Layout.fillWidth = true; parent.Layout.preferredWidth = Qt.binding(function() { return implicitWidth; }) - parent.Layout.maximumWidth = Qt.binding(function() { return bubbleMaxWidth + Kirigami.Units.largeSpacing * 2; }) + parent.Layout.maximumWidth = Qt.binding(function() { return contentMaxWidth + Kirigami.Units.largeSpacing * 2; }) } Rectangle { id: replyLeftBorder @@ -79,7 +79,7 @@ MouseArea { id: replyText textMessage: reply.display textFormat: Text.RichText - width: Math.min(implicitWidth, bubbleMaxWidth - Kirigami.Units.largeSpacing * 3) + width: Math.min(implicitWidth, contentMaxWidth - Kirigami.Units.largeSpacing * 3) x: Kirigami.Units.smallSpacing * 3 + replyAvatar.width } } @@ -94,7 +94,7 @@ MouseArea { readonly property string mediaId: isThumbnail ? content.thumbnailMediaId : content.mediaId source: "image://mxc/" + mediaId - width: bubbleMaxWidth * 0.75 - Kirigami.Units.smallSpacing * 5 - replyAvatar.width + width: contentMaxWidth * 0.75 - Kirigami.Units.smallSpacing * 5 - replyAvatar.width height: reply.content.info.h / reply.content.info.w * width x: Kirigami.Units.smallSpacing * 3 + replyAvatar.width } diff --git a/imports/NeoChat/Component/Timeline/TimelineContainer.qml b/imports/NeoChat/Component/Timeline/TimelineContainer.qml index b633807ee..d2b8d9f2a 100644 --- a/imports/NeoChat/Component/Timeline/TimelineContainer.qml +++ b/imports/NeoChat/Component/Timeline/TimelineContainer.qml @@ -19,8 +19,9 @@ QQC2.ItemDelegate { property bool isEmote: false property bool cardBackground: true - readonly property int delegateMaxWidth: Math.min(messageListView.width, Kirigami.Units.gridUnit * 40) - readonly property int bubbleMaxWidth: Config.compactLayout && !Config.showAvatarInTimeline ? width - Kirigami.Units.largeSpacing * 4 : (Config.compactLayout ? width - Kirigami.Units.gridUnit * 2 - Kirigami.Units.largeSpacing * 4 : Math.min(width - Kirigami.Units.gridUnit * 2 - Kirigami.Units.largeSpacing * 6, Kirigami.Units.gridUnit * 20)) + readonly property int bubbleMaxWidth: Kirigami.Units.gridUnit * 20 + readonly property int delegateMaxWidth: Config.compactLayout ? messageListView.width : Math.min(messageListView.width, Kirigami.Units.gridUnit * 40) + readonly property int contentMaxWidth: Config.compactLayout ? width - (Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 : 0) - Kirigami.Units.largeSpacing * 4 : Math.min(width - Kirigami.Units.gridUnit * 2 - Kirigami.Units.largeSpacing * 6, bubbleMaxWidth) property bool showUserMessageOnRight: Config.showLocalMessagesOnRight && model.author.isLocalUser && !Config.compactLayout @@ -38,6 +39,7 @@ QQC2.ItemDelegate { bottomPadding: 0 width: delegateMaxWidth background: null + property Item hoverComponent // show hover actions @@ -56,6 +58,33 @@ QQC2.ItemDelegate { } } + state: Config.compactLayout ? "alignLeft" : "alignCentre" + // Align left when in compact mode and centre when using bubbles + states: [ + State { + name: "alignLeft" + AnchorChanges { + target: messageDelegate + anchors.horizontalCenter: undefined + anchors.left: parent ? parent.left : undefined + } + }, + State { + name: "alignCentre" + AnchorChanges { + target: messageDelegate + anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined + anchors.left: undefined + } + } + ] + + transitions: [ + Transition { + AnchorAnimation{duration: Kirigami.Units.longDuration; easing.type: Easing.OutCubic} + } + ] + height: sectionDelegate.height + Math.max(model.showAuthor ? avatar.height : 0, bubble.implicitHeight) + loader.height + (showAuthor ? Kirigami.Units.largeSpacing : 0) SectionDelegate { @@ -110,9 +139,6 @@ QQC2.ItemDelegate { rightPadding: Config.compactLayout ? Kirigami.Units.largeSpacing : Kirigami.Units.smallSpacing hoverEnabled: true - // state: Config.compactLayout ? "compactLayout" : "default" - state: showUserMessageOnRight ? "userMessageOnRight" : "userMessageOnLeft" - anchors { top: avatar.top leftMargin: Kirigami.Units.largeSpacing @@ -121,7 +147,7 @@ QQC2.ItemDelegate { // HACK: anchoring didn't reset anchors.right when switching from parent.right to undefined reliably width: Config.compactLayout ? messageDelegate.width - (Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 : 0) + Kirigami.Units.largeSpacing * 2 : implicitWidth - + state: showUserMessageOnRight ? "userMessageOnRight" : "userMessageOnLeft" // states for anchor animations on window resize // as setting anchors to undefined did not work reliably states: [ @@ -159,7 +185,7 @@ QQC2.ItemDelegate { Layout.leftMargin: Config.showAvatarInTimeline ? Kirigami.Units.largeSpacing : 0 Layout.rightMargin: Kirigami.Units.largeSpacing Layout.preferredWidth: nameLabel.implicitWidth + timeLabel.implicitWidth + Kirigami.Units.largeSpacing * 2 - Layout.maximumWidth: bubbleMaxWidth + Layout.maximumWidth: contentMaxWidth implicitHeight: visible ? nameLabel.implicitHeight : 0 QQC2.Label { diff --git a/imports/NeoChat/Component/Timeline/VideoDelegate.qml b/imports/NeoChat/Component/Timeline/VideoDelegate.qml index a1d2ef9ff..fd8d6d0c3 100644 --- a/imports/NeoChat/Component/Timeline/VideoDelegate.qml +++ b/imports/NeoChat/Component/Timeline/VideoDelegate.qml @@ -40,7 +40,7 @@ TimelineContainer { innerObject: Video { id: vid - Layout.maximumWidth: videoDelegate.bubbleMaxWidth + Layout.maximumWidth: videoDelegate.contentMaxWidth Layout.fillWidth: true Layout.maximumHeight: Kirigami.Units.gridUnit * 15 Layout.minimumHeight: Kirigami.Units.gridUnit * 5