From 9319f072917479d4ad95a1805dcbbc7122c1a40e Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Tue, 19 Oct 2021 09:16:40 +0100
Subject: [PATCH 1/2] Revert "Fix threads with bubbles rendering (#6971)"
This reverts commit a2bc09060721f3a56a6f92e61f43a64cd3260352.
---
res/css/views/rooms/_EventBubbleTile.scss | 24 +----------------------
res/css/views/rooms/_EventTile.scss | 2 --
src/components/views/rooms/EventTile.tsx | 2 +-
3 files changed, 2 insertions(+), 26 deletions(-)
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 495c96ec67..72920936aa 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -28,12 +28,6 @@ limitations under the License.
margin-left: 49px;
margin-right: 100px;
font-size: $font-14px;
- flex-direction: column;
- display: flex;
-
- .mx_ThreadInfo {
- max-width: 100%;
- }
&.mx_EventTile_continuation {
margin-top: 2px;
@@ -91,8 +85,6 @@ limitations under the License.
}
&[data-self=false] {
- align-items: flex-start;
-
.mx_EventTile_line {
border-bottom-right-radius: var(--cornerRadius);
}
@@ -106,18 +98,11 @@ limitations under the License.
}
--backgroundColor: $eventbubble-others-bg;
-
- .mx_ThreadInfo {
- align-self: flex-start;
- margin-top: 8px;
- margin-left: -10px;
- margin-bottom: 8px;
- }
}
&[data-self=true] {
- align-items: flex-end;
.mx_EventTile_line {
border-bottom-left-radius: var(--cornerRadius);
+ float: right;
> a {
left: auto;
right: -68px;
@@ -147,13 +132,6 @@ limitations under the License.
}
--backgroundColor: $eventbubble-self-bg;
-
- .mx_ThreadInfo {
- align-self: flex-end;
- margin-right: -14px;
- margin-top: 8px;
- margin-bottom: 4px;
- }
}
.mx_EventTile_line {
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 5559f81e0a..18af9c25b2 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -690,8 +690,6 @@ $hover-select-border: 4px;
color: $secondary-content;
box-sizing: border-box;
justify-content: flex-start;
- margin-right: 110px;
- margin-left: 64px;
&:hover, &-active {
cursor: pointer;
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index b433babba7..8e051d97a1 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1335,9 +1335,9 @@ export default class EventTile extends React.Component<IProps, IState> {
{ keyRequestInfo }
{ actionBar }
{ this.props.layout === Layout.IRC && (reactionsRow) }
+ { this.renderThreadInfo() }
</div>
{ this.props.layout !== Layout.IRC && (reactionsRow) }
- { this.renderThreadInfo() }
{ msgOption }
</>)
);
From df407ef3a8001b0b1dc8c91fafba1ed9da2acd61 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germains@element.io>
Date: Tue, 19 Oct 2021 09:31:28 +0100
Subject: [PATCH 2/2] Fix EventTileSummary layout for message bubbles
---
res/css/views/rooms/_EventBubbleTile.scss | 11 +++++++++++
res/css/views/rooms/_EventTile.scss | 1 +
src/components/views/rooms/EventTile.tsx | 2 +-
3 files changed, 13 insertions(+), 1 deletion(-)
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 72920936aa..2a419530d8 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -29,6 +29,11 @@ limitations under the License.
margin-right: 100px;
font-size: $font-14px;
+ .mx_ThreadInfo {
+ clear: both;
+ width: fit-content;
+ }
+
&.mx_EventTile_continuation {
margin-top: 2px;
}
@@ -108,6 +113,12 @@ limitations under the License.
right: -68px;
}
}
+
+ .mx_ThreadInfo {
+ float: right;
+ margin-right: calc(-1 * var(--gutterSize));
+ }
+
.mx_SenderProfile {
display: none;
}
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 18af9c25b2..540b7d89af 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -690,6 +690,7 @@ $hover-select-border: 4px;
color: $secondary-content;
box-sizing: border-box;
justify-content: flex-start;
+ clear: both;
&:hover, &-active {
cursor: pointer;
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 8e051d97a1..14ec872bc9 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1335,8 +1335,8 @@ export default class EventTile extends React.Component<IProps, IState> {
{ keyRequestInfo }
{ actionBar }
{ this.props.layout === Layout.IRC && (reactionsRow) }
- { this.renderThreadInfo() }
</div>
+ { this.renderThreadInfo() }
{ this.props.layout !== Layout.IRC && (reactionsRow) }
{ msgOption }
</>)