From 67efde9116b1cf8ff91100be1b57e589c4c8a1dc Mon Sep 17 00:00:00 2001
From: miruka <miruka@disroot.org>
Date: Thu, 18 Jul 2019 06:23:31 -0400
Subject: [PATCH] Show own events on right only under certain width

---
 TODO.md                                 | 4 +---
 src/qml/Chat/Timeline/EventContent.qml  | 8 ++++----
 src/qml/Chat/Timeline/EventDelegate.qml | 6 ++++--
 src/qml/Chat/Timeline/EventList.qml     | 3 +++
 src/qml/Theme.qml                       | 1 +
 5 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/TODO.md b/TODO.md
index ed872f54..eed7b808 100644
--- a/TODO.md
+++ b/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
diff --git a/src/qml/Chat/Timeline/EventContent.qml b/src/qml/Chat/Timeline/EventContent.qml
index 6468cd24..0a5037a3 100644
--- a/src/qml/Chat/Timeline/EventContent.qml
+++ b/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
diff --git a/src/qml/Chat/Timeline/EventDelegate.qml b/src/qml/Chat/Timeline/EventDelegate.qml
index c21b665d..cc3649a9 100644
--- a/src/qml/Chat/Timeline/EventDelegate.qml
+++ b/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
     }
 }
diff --git a/src/qml/Chat/Timeline/EventList.qml b/src/qml/Chat/Timeline/EventList.qml
index 5b6b87ed..d18e776e 100644
--- a/src/qml/Chat/Timeline/EventList.qml
+++ b/src/qml/Chat/Timeline/EventList.qml
@@ -23,6 +23,9 @@ HRectangle {
             }
         }
 
+        property bool ownEventsOnRight:
+            width < theme.chat.eventList.ownEventsOnRightUnderWidth
+
         delegate: EventDelegate {}
 
         anchors.fill: parent
diff --git a/src/qml/Theme.qml b/src/qml/Theme.qml
index a4e6f219..fcfb359e 100644
--- a/src/qml/Theme.qml
+++ b/src/qml/Theme.qml
@@ -108,6 +108,7 @@ QtObject {
         }
 
         property QtObject eventList: QtObject {
+            property int ownEventsOnRightUnderWidth: 768
             property color background: "transparent"
         }