Show own events on right only under certain width

TODO.md

@@ -29,7 +29,7 @@
   - "Rejoin" LeftBanner button if room is public
   - Daybreak color
   - Html links color
-  - Don't put own messages to the right past certain width
+  - Replies
   - `pyotherside.atexit()`
   - Sidepane
     - Header back button when reduced
@@ -65,7 +65,6 @@
     - Auto-trust accounts within the same client
     - Import/export keys
   - Uploads
-  - QQuickImageProvider
   - Read receipts
   - Status message and presence
   - Links preview
@@ -87,7 +86,6 @@
   - Room subtitle: show things like "*Image*" instead of blank, etc
 
 - Missing nio support
-  - Handle TimeoutError for all kind of async requests (nio)
   - MatrixRoom invited members list
   - Invite events are missing their timestamps (needed for sorting)
   - Left room events after client reboot

src/qml/Chat/Timeline/EventContent.qml

@@ -9,7 +9,7 @@ import "../../utils.js" as Utils
 Row {
     id: messageContent
     spacing: theme.spacing / 2
-    layoutDirection: isOwn ? Qt.RightToLeft : Qt.LeftToRight
+    layoutDirection: onRight ? Qt.RightToLeft : Qt.LeftToRight
 
     HUserAvatar {
         id: avatar
@@ -17,7 +17,7 @@ Row {
         width: model.showNameLine ? 48 : 28
         height: combine ? 1 : model.showNameLine ? 48 : 28
         opacity: combine ? 0 : 1
-        visible: ! isOwn
+        visible: ! onRight
     }
 
     Rectangle {
@@ -42,7 +42,7 @@ Row {
 
             HLabel {
                 width: parent.width
-                height: model.showNameLine && ! isOwn && ! combine ?
+                height: model.showNameLine && ! onRight && ! combine ?
                         implicitHeight : 0
                 visible: height > 0
 
@@ -50,7 +50,7 @@ Row {
                 text: senderInfo.displayName || model.senderId
                 color: Utils.nameColor(avatar.name)
                 elide: Text.ElideRight
-                horizontalAlignment: isOwn ? Text.AlignRight : Text.AlignLeft
+                horizontalAlignment: onRight ? Text.AlignRight : Text.AlignLeft
 
                 leftPadding: horizontalPadding
                 rightPadding: horizontalPadding

src/qml/Chat/Timeline/EventDelegate.qml

@@ -27,6 +27,7 @@ Column {
     Component.onCompleted: senderInfo = users.find(model.senderId)
 
     readonly property bool isOwn: chatPage.userId === model.senderId
+    readonly property bool onRight: eventList.ownEventsOnRight && isOwn
 
     readonly property bool isFirstEvent: model.eventType == "RoomCreateEvent"
 
@@ -62,7 +63,7 @@ Column {
         if (nextDelegate) { nextDelegate.reloadPreviousItem() }
     }
 
-    width: parent.width
+    width: eventList.width
 
     topPadding:
         isFirstEvent ? 0 :
@@ -77,6 +78,7 @@ Column {
     }
 
     EventContent {
-        anchors.right: isOwn ? parent.right : undefined
+        anchors.left: parent.left
+        anchors.right: onRight ? parent.right : undefined
     }
 }

src/qml/Chat/Timeline/EventList.qml

@@ -23,6 +23,9 @@ HRectangle {
             }
         }
 
+        property bool ownEventsOnRight:
+            width < theme.chat.eventList.ownEventsOnRightUnderWidth
+
         delegate: EventDelegate {}
 
         anchors.fill: parent

src/qml/Theme.qml

@@ -108,6 +108,7 @@ QtObject {
         }
 
         property QtObject eventList: QtObject {
+            property int ownEventsOnRightUnderWidth: 768
             property color background: "transparent"
         }