Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 53ae781

Browse files
germain-gggermain-gg
authored
Merge pull request #6291 from matrix-org/gsouquet/message-bubbles-4635
2 parents e11e17e + dd65d47 commit 53ae781

File tree

18 files changed

+838
-316
lines changed

18 files changed

+838
-316
lines changed

‎res/css/_components.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,7 @@
201201
@import "./views/rooms/_EditMessageComposer.scss";
202202
@import "./views/rooms/_EntityTile.scss";
203203
@import "./views/rooms/_EventTile.scss";
204+
@import "./views/rooms/_EventBubbleTile.scss";
204205
@import "./views/rooms/_GroupLayout.scss";
205206
@import "./views/rooms/_IRCLayout.scss";
206207
@import "./views/rooms/_JumpToBottomButton.scss";

‎res/css/views/avatars/_BaseAvatar.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ limitations under the License.
2727
// https://bugzilla.mozilla.org/show_bug.cgi?id=255139
2828
display: inline-block;
2929
user-select: none;
30+
line-height: 1;
3031
}
3132

3233
.mx_BaseAvatar_initial {

‎res/css/views/messages/_MImageBody.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ $timelineImageBorderRadius: 4px;
1818

1919
.mx_MImageBody {
2020
display: block;
21-
margin-right: 34px;
2221
}
2322

2423
.mx_MImageBody_thumbnail {

‎res/css/views/messages/_ReactionsRow.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ limitations under the License.
2626
height: 24px;
2727
vertical-align: middle;
2828
margin-left: 4px;
29+
margin-right: 4px;
2930

3031
&::before {
3132
content: '';

‎res/css/views/rooms/_EventBubbleTile.scss

Lines changed: 323 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,323 @@
1+
/*
2+
Copyright 2021 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_EventTile[data-layout=bubble],
18+
.mx_EventTile[data-layout=bubble] ~ .mx_EventListSummary {
19+
--avatarSize: 32px;
20+
--gutterSize: 11px;
21+
--cornerRadius: 12px;
22+
--maxWidth: 70%;
23+
}
24+
25+
.mx_EventTile[data-layout=bubble] {
26+
27+
position: relative;
28+
margin-top: var(--gutterSize);
29+
margin-left: 50px;
30+
margin-right: 100px;
31+
32+
&.mx_EventTile_continuation {
33+
margin-top: 2px;
34+
}
35+
36+
/* For replies */
37+
.mx_EventTile {
38+
padding-top: 0;
39+
}
40+
41+
&:hover {
42+
&::before {
43+
content: '';
44+
position: absolute;
45+
top: -1px;
46+
bottom: -1px;
47+
left: -60px;
48+
right: -60px;
49+
z-index: -1;
50+
background: $eventbubble-bg-hover;
51+
border-radius: 4px;
52+
}
53+
54+
.mx_EventTile_avatar {
55+
img {
56+
box-shadow: 0 0 0 3px $eventbubble-bg-hover;
57+
}
58+
}
59+
}
60+
61+
.mx_SenderProfile,
62+
.mx_EventTile_line {
63+
width: fit-content;
64+
max-width: 70%;
65+
}
66+
67+
.mx_SenderProfile {
68+
position: relative;
69+
top: -2px;
70+
left: 2px;
71+
}
72+
73+
&[data-self=false] {
74+
.mx_EventTile_line {
75+
border-bottom-right-radius: var(--cornerRadius);
76+
}
77+
.mx_EventTile_avatar {
78+
left: -34px;
79+
}
80+
81+
.mx_MessageActionBar {
82+
right: 0;
83+
transform: translate3d(50%, 50%, 0);
84+
}
85+
86+
--backgroundColor: $eventbubble-others-bg;
87+
}
88+
&[data-self=true] {
89+
.mx_EventTile_line {
90+
border-bottom-left-radius: var(--cornerRadius);
91+
float: right;
92+
> a {
93+
left: auto;
94+
right: -48px;
95+
}
96+
}
97+
.mx_SenderProfile {
98+
display: none;
99+
}
100+
.mx_ReactionsRow {
101+
float: right;
102+
clear: right;
103+
display: flex;
104+
105+
/* Moving the "add reaction button" before the reactions */
106+
> :last-child {
107+
order: -1;
108+
}
109+
}
110+
.mx_EventTile_avatar {
111+
top: -19px; // height of the sender block
112+
right: -35px;
113+
}
114+
115+
--backgroundColor: $eventbubble-self-bg;
116+
}
117+
118+
.mx_EventTile_line {
119+
position: relative;
120+
padding: var(--gutterSize);
121+
border-top-left-radius: var(--cornerRadius);
122+
border-top-right-radius: var(--cornerRadius);
123+
background: var(--backgroundColor);
124+
display: flex;
125+
gap: 5px;
126+
margin: 0 -12px 0 -9px;
127+
> a {
128+
position: absolute;
129+
left: -48px;
130+
}
131+
}
132+
133+
&.mx_EventTile_continuation[data-self=false] .mx_EventTile_line {
134+
border-top-left-radius: 0;
135+
}
136+
&.mx_EventTile_lastInSection[data-self=false] .mx_EventTile_line {
137+
border-bottom-left-radius: var(--cornerRadius);
138+
}
139+
140+
&.mx_EventTile_continuation[data-self=true] .mx_EventTile_line {
141+
border-top-right-radius: 0;
142+
}
143+
&.mx_EventTile_lastInSection[data-self=true] .mx_EventTile_line {
144+
border-bottom-right-radius: var(--cornerRadius);
145+
}
146+
147+
.mx_EventTile_avatar {
148+
position: absolute;
149+
top: 0;
150+
line-height: 1;
151+
img {
152+
box-shadow: 0 0 0 3px $eventbubble-avatar-outline;
153+
border-radius: 50%;
154+
}
155+
}
156+
157+
&[data-has-reply=true] {
158+
> .mx_EventTile_line {
159+
flex-direction: column;
160+
}
161+
162+
.mx_ReplyThread_show {
163+
order: 99999;
164+
}
165+
166+
.mx_ReplyThread {
167+
margin: 0 calc(-1 * var(--gutterSize));
168+
169+
.mx_EventTile_reply {
170+
max-width: 90%;
171+
padding: 0;
172+
> a {
173+
display: none !important;
174+
}
175+
}
176+
177+
.mx_EventTile {
178+
display: flex;
179+
gap: var(--gutterSize);
180+
.mx_EventTile_avatar {
181+
position: static;
182+
}
183+
.mx_SenderProfile {
184+
display: none;
185+
}
186+
}
187+
}
188+
}
189+
190+
.mx_EditMessageComposer_buttons {
191+
position: static;
192+
padding: 0;
193+
margin: 0;
194+
background: transparent;
195+
}
196+
197+
.mx_ReactionsRow {
198+
margin-right: -18px;
199+
margin-left: -9px;
200+
}
201+
202+
.mx_ReplyThread {
203+
border-left-width: 2px;
204+
border-left-color: $eventbubble-reply-color;
205+
}
206+
207+
&.mx_EventTile_bubbleContainer,
208+
&.mx_EventTile_info,
209+
& ~ .mx_EventListSummary[data-expanded=false] {
210+
--backgroundColor: transparent;
211+
--gutterSize: 0;
212+
213+
display: flex;
214+
align-items: center;
215+
justify-content: center;
216+
217+
.mx_EventTile_avatar {
218+
position: static;
219+
order: -1;
220+
margin-right: 5px;
221+
}
222+
}
223+
224+
& ~ .mx_EventListSummary {
225+
--maxWidth: 80%;
226+
margin-left: calc(var(--avatarSize) + var(--gutterSize));
227+
margin-right: calc(var(--gutterSize) + var(--avatarSize));
228+
.mx_EventListSummary_toggle {
229+
float: none;
230+
margin: 0;
231+
order: 9;
232+
margin-left: 5px;
233+
}
234+
.mx_EventListSummary_avatars {
235+
padding-top: 0;
236+
}
237+
238+
&::after {
239+
content: "";
240+
clear: both;
241+
}
242+
243+
.mx_EventTile {
244+
margin: 0 6px;
245+
}
246+
247+
.mx_EventTile_line {
248+
margin: 0 5px;
249+
> a {
250+
left: auto;
251+
right: 0;
252+
transform: translateX(calc(100% + 5px));
253+
}
254+
}
255+
256+
.mx_MessageActionBar {
257+
transform: translate3d(50%, 0, 0);
258+
}
259+
}
260+
261+
& ~ .mx_EventListSummary[data-expanded=false] {
262+
padding: 0 34px;
263+
}
264+
265+
/* events that do not require bubble layout */
266+
& ~ .mx_EventListSummary,
267+
&.mx_EventTile_bad {
268+
.mx_EventTile_line {
269+
background: transparent;
270+
}
271+
272+
&:hover {
273+
&::before {
274+
background: transparent;
275+
}
276+
}
277+
}
278+
279+
& + .mx_EventListSummary {
280+
.mx_EventTile {
281+
margin-top: 0;
282+
padding: 0;
283+
}
284+
}
285+
286+
.mx_EventListSummary_toggle {
287+
margin-right: 55px;
288+
}
289+
290+
/* Special layout scenario for "Unable To Decrypt (UTD)" events */
291+
&.mx_EventTile_bad > .mx_EventTile_line {
292+
display: grid;
293+
grid-template:
294+
"reply reply" auto
295+
"shield body" auto
296+
"shield link" auto
297+
/ auto 1fr;
298+
.mx_EventTile_e2eIcon {
299+
grid-area: shield;
300+
}
301+
.mx_UnknownBody {
302+
grid-area: body;
303+
}
304+
.mx_EventTile_keyRequestInfo {
305+
grid-area: link;
306+
}
307+
.mx_ReplyThread_wrapper {
308+
grid-area: reply;
309+
}
310+
}
311+
312+
313+
.mx_EventTile_readAvatars {
314+
position: absolute;
315+
right: -110px;
316+
bottom: 0;
317+
top: auto;
318+
}
319+
320+
.mx_MTextBody {
321+
max-width: 100%;
322+
}
323+
}

0 commit comments

Comments
 (0)