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

Commit 3df65ca

Browse files
luixxiulluixxiul
authored
Merge branch 'develop' into AudioPlayer
2 parents 69593d0 + 7335b35 commit 3df65ca

33 files changed

+369
-171
lines changed

‎res/css/structures/_ToastContainer.scss

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -108,26 +108,25 @@ limitations under the License.
108108
}
109109

110110
.mx_Toast_title {
111+
display: flex;
112+
align-items: center;
113+
column-gap: 8px;
111114
width: 100%;
112115
box-sizing: border-box;
113116

114117
h2 {
115-
grid-column: 1 / 3;
116-
grid-row: 1;
117118
margin: 0;
118119
font-size: $font-15px;
119120
font-weight: 600;
120121
display: inline;
121122
width: auto;
122-
vertical-align: middle;
123123
}
124124

125-
span {
126-
padding-left: 8px;
127-
float: right;
125+
.mx_Toast_title_countIndicator {
128126
font-size: $font-12px;
129127
line-height: $font-22px;
130128
color: $secondary-content;
129+
margin-inline-start: auto; // on the end side of the div
131130
}
132131
}
133132

@@ -137,17 +136,14 @@ limitations under the License.
137136
}
138137

139138
.mx_Toast_buttons {
140-
float: right;
141139
display: flex;
140+
justify-content: flex-end;
141+
column-gap: 5px;
142142

143143
.mx_AccessibleButton {
144144
min-width: 96px;
145145
box-sizing: border-box;
146146
}
147-
148-
.mx_AccessibleButton + .mx_AccessibleButton {
149-
margin-left: 5px;
150-
}
151147
}
152148

153149
.mx_Toast_description {

‎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+
}

‎res/css/views/right_panel/_TimelineCard.scss

Lines changed: 50 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -55,29 +55,61 @@ limitations under the License.
5555
margin-right: 0;
5656
}
5757

58-
.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_line {
59-
padding-left: 36px;
60-
padding-right: 36px;
61-
}
58+
.mx_EventTile:not([data-layout="bubble"]) {
59+
.mx_EventTile_line {
60+
padding-left: 36px;
61+
padding-right: 36px;
62+
}
6263

63-
.mx_EventTile:not([data-layout="bubble"]) .mx_ReactionsRow {
64-
padding-left: 36px;
65-
padding-right: 36px;
66-
}
64+
.mx_ReactionsRow {
65+
padding: 0;
6766

68-
.mx_EventTile:not([data-layout="bubble"]) .mx_ThreadInfo {
69-
margin-left: 36px;
70-
margin-right: 0;
71-
max-width: min(calc(100% - 36px), 600px);
72-
}
67+
// See margin setting of ReactionsRow on _EventTile.scss
68+
margin-left: 36px;
69+
margin-right: 8px;
70+
}
7371

74-
.mx_GroupLayout .mx_EventTile > .mx_DisambiguatedProfile {
75-
margin-left: 36px;
72+
.mx_ThreadInfo {
73+
margin-left: 36px;
74+
margin-right: 0;
75+
max-width: min(calc(100% - 36px), 600px);
76+
}
77+
78+
.mx_EventTile_avatar {
79+
top: 12px;
80+
left: -3px;
81+
}
82+
83+
.mx_MessageTimestamp {
84+
right: -4px;
85+
left: auto;
86+
}
87+
88+
.mx_EventTile_msgOption {
89+
margin-right: 2px;
90+
}
91+
92+
&.mx_EventTile_info {
93+
.mx_EventTile_line {
94+
padding-left: 36px;
95+
}
96+
97+
.mx_EventTile_avatar {
98+
left: 18px;
99+
}
100+
}
76101
}
77102

78-
.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_avatar {
79-
top: 12px;
80-
left: -3px;
103+
.mx_GroupLayout {
104+
.mx_EventTile {
105+
> .mx_DisambiguatedProfile {
106+
margin-left: 36px;
107+
}
108+
109+
.mx_EventTile_line {
110+
padding-bottom: 8px;
111+
}
112+
}
81113
}
82114

83115
.mx_CallEvent_wrapper {
@@ -88,36 +120,15 @@ limitations under the License.
88120
}
89121
}
90122

91-
.mx_EventTile:not([data-layout="bubble"]) .mx_MessageTimestamp {
92-
right: -4px;
93-
left: auto;
94-
}
95-
96-
.mx_EventTile:not([data-layout="bubble"]) .mx_EventTile_msgOption {
97-
margin-right: 2px;
98-
}
99-
100123
.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line,
101124
.mx_GenericEventListSummary:not([data-layout=bubble]) > .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
102125
padding-left: 36px;
103126
}
104127

105-
.mx_GroupLayout .mx_EventTile .mx_EventTile_line {
106-
padding-bottom: 8px;
107-
}
108-
109128
.mx_EventTile_readAvatars {
110129
top: -10px;
111130
}
112131

113-
.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line {
114-
padding-left: 36px;
115-
}
116-
117-
.mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_avatar {
118-
left: 18px;
119-
}
120-
121132
.mx_WhoIsTypingTile {
122133
margin-left: -12px; // undo padding on the message list
123134
}

0 commit comments

Comments
 (0)