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

Commit af3eac2

Browse files
luixxiulluixxiul
authored
Fixes call tiles overflow (#8096)
* Responsive call tiles Fixes element-hq/element-web#20254 Signed-off-by: Suguru Hirahara <[email protected]> * Take e2e icon into consideration on Bubble message layout Signed-off-by: Suguru Hirahara <[email protected]> * Use spacing variables Signed-off-by: Suguru Hirahara <[email protected]> * spacing variables Signed-off-by: Suguru Hirahara <[email protected]>
1 parent 1436f23 commit af3eac2

File tree

1 file changed

+78
-47
lines changed

1 file changed

+78
-47
lines changed

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

Lines changed: 78 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,24 @@ limitations under the License.
1919
width: 100%;
2020

2121
.mx_CallEvent {
22-
position: relative;
2322
display: flex;
2423
flex-direction: row;
24+
flex-wrap: wrap;
2525
align-items: center;
2626
justify-content: space-between;
27+
gap: $spacing-4 0;
2728

29+
position: relative;
30+
margin: $spacing-4 0;
31+
padding: $spacing-12 $spacing-24;
32+
box-sizing: border-box;
2833
background-color: $dark-panel-bg-color;
2934
border-radius: 8px;
3035
width: 65%;
31-
box-sizing: border-box;
32-
height: 60px;
33-
margin: 4px 0;
36+
height: fit-content;
3437

3538
.mx_CallEvent_iconButton {
3639
display: inline-flex;
37-
margin-right: 8px;
3840

3941
&::before {
4042
content: '';
@@ -62,6 +64,13 @@ limitations under the License.
6264
.mx_CallEvent_content_button_answer span::before {
6365
mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
6466
}
67+
68+
&.mx_CallEvent_rejected,
69+
&.mx_CallEvent_noAnswer {
70+
.mx_CallEvent_type_icon::before {
71+
mask-image: url('$(res)/img/voip/declined-voice.svg');
72+
}
73+
}
6574
}
6675

6776
&.mx_CallEvent_video {
@@ -70,57 +79,62 @@ limitations under the License.
7079
.mx_CallEvent_content_button_answer span::before {
7180
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
7281
}
73-
}
7482

75-
&.mx_CallEvent_voice.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
76-
mask-image: url('$(res)/img/voip/missed-voice.svg');
77-
}
78-
79-
&.mx_CallEvent_video.mx_CallEvent_missed .mx_CallEvent_type_icon::before {
80-
mask-image: url('$(res)/img/voip/missed-video.svg');
83+
&.mx_CallEvent_rejected,
84+
&.mx_CallEvent_noAnswer {
85+
.mx_CallEvent_type_icon::before {
86+
mask-image: url('$(res)/img/voip/declined-video.svg');
87+
}
88+
}
8189
}
8290

83-
&.mx_CallEvent_voice.mx_CallEvent_rejected .mx_CallEvent_type_icon::before,
84-
&.mx_CallEvent_voice.mx_CallEvent_noAnswer .mx_CallEvent_type_icon::before {
85-
mask-image: url('$(res)/img/voip/declined-voice.svg');
86-
}
91+
&.mx_CallEvent_missed {
92+
&.mx_CallEvent_voice {
93+
.mx_CallEvent_type_icon::before {
94+
mask-image: url('$(res)/img/voip/missed-voice.svg');
95+
}
96+
}
8797

88-
&.mx_CallEvent_video.mx_CallEvent_rejected .mx_CallEvent_type_icon::before,
89-
&.mx_CallEvent_video.mx_CallEvent_noAnswer .mx_CallEvent_type_icon::before {
90-
mask-image: url('$(res)/img/voip/declined-video.svg');
98+
&.mx_CallEvent_video {
99+
.mx_CallEvent_type_icon::before {
100+
mask-image: url('$(res)/img/voip/missed-video.svg');
101+
}
102+
}
91103
}
92104

93105
.mx_CallEvent_info {
94106
display: flex;
95107
flex-direction: row;
96108
align-items: center;
97-
margin-left: 12px;
98-
min-width: 0;
109+
width: fit-content;
110+
max-width: 100%;
99111

100112
.mx_CallEvent_info_basic {
101113
display: flex;
102114
flex-direction: column;
115+
gap: $spacing-4;
103116
margin-left: 10px; // To match mx_CallEvent
117+
margin-right: 10px;
104118
min-width: 0;
105119

106120
.mx_CallEvent_sender {
107121
font-weight: 600;
108122
font-size: 1.5rem;
109123
line-height: 1.8rem;
110-
margin-bottom: 3px;
124+
margin-bottom: $spacing-4;
111125

112126
overflow: hidden;
113127
white-space: nowrap;
114128
text-overflow: ellipsis;
115129
}
116130

117131
.mx_CallEvent_type {
132+
display: flex;
133+
align-items: center;
118134
font-weight: 400;
119135
color: $secondary-content;
120136
font-size: 1.2rem;
121137
line-height: $font-13px;
122-
display: flex;
123-
align-items: center;
124138

125139
.mx_CallEvent_type_icon {
126140
height: 13px;
@@ -143,16 +157,17 @@ limitations under the License.
143157

144158
.mx_CallEvent_content {
145159
display: flex;
146-
flex-direction: row;
160+
flex-wrap: wrap;
147161
align-items: center;
148162
color: $secondary-content;
149-
margin-right: 16px;
150-
gap: 12px; // See mx_IncomingCallToast_buttons
151-
min-width: max-content;
163+
gap: $spacing-12; // See mx_IncomingCallToast_buttons
164+
margin-inline-start: 42px; // avatar (32px) + mx_CallEvent_info_basic margin (10px)
165+
word-break: break-word;
166+
max-width: fit-content;
152167

153168
.mx_CallEvent_content_button {
154169
@mixin CallButton;
155-
padding: 0 12px;
170+
padding: 0 $spacing-12;
156171

157172
span::before {
158173
mask-size: 16px;
@@ -162,25 +177,23 @@ limitations under the License.
162177
}
163178
}
164179

165-
.mx_CallEvent_content_button_reject span::before {
166-
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
180+
.mx_CallEvent_content_button_reject {
181+
span::before {
182+
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
183+
}
167184
}
168185

169186
.mx_CallEvent_content_tooltip {
170187
margin-right: 5px;
171188
}
172189
}
173190

174-
.mx_MessageTimestamp {
175-
margin-left: 16px;
176-
}
177-
178191
&.mx_CallEvent_narrow {
179-
height: unset;
180-
width: 290px;
181192
flex-direction: column;
182193
align-items: unset;
183-
gap: 16px;
194+
gap: $spacing-4 $spacing-16;
195+
height: unset;
196+
min-width: 290px;
184197

185198
.mx_CallEvent_iconButton {
186199
position: absolute;
@@ -194,18 +207,36 @@ limitations under the License.
194207

195208
.mx_CallEvent_info {
196209
align-items: unset;
197-
margin-top: 12px;
198-
margin-right: 12px;
199-
200-
.mx_CallEvent_sender {
201-
margin-bottom: 8px;
202-
}
203210
}
211+
}
212+
}
213+
}
214+
215+
.mx_EventTile[data-layout="bubble"] {
216+
.mx_EventTile_e2eIcon + .mx_CallEvent_wrapper {
217+
.mx_CallEvent {
218+
position: relative;
219+
220+
// 5px (gap) + 14px (e2e icon size * mask-size) + 9px (margin-left of e2e icon)
221+
right: calc(5px + 14px + 9px);
222+
}
223+
}
224+
}
204225

205-
.mx_CallEvent_content {
206-
margin-left: 54px; // mx_CallEvent margin (12px) + avatar (32px) + mx_CallEvent_info_basic margin (10px)
207-
margin-bottom: 16px;
226+
.mx_EventTile_leftAlignedBubble {
227+
.mx_CallEvent_wrapper {
228+
.mx_CallEvent {
229+
&.mx_CallEvent_narrow {
230+
gap: $spacing-8 $spacing-4;
208231
}
209232
}
210233
}
211234
}
235+
236+
.mx_IRCLayout {
237+
.mx_CallEvent_wrapper {
238+
.mx_CallEvent {
239+
margin-inline-start: $spacing-4; // display green line
240+
}
241+
}
242+
}

0 commit comments

Comments
 (0)