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

Commit 5349f30

Browse files
luixxiulluixxiul
authored
Stop using :not() pseudo class for mx_GenericEventListSummary (#8944)
* Stop using :not() pseudo class for mx_GenericEventListSummary Signed-off-by: Suguru Hirahara <[email protected]> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width Signed-off-by: Suguru Hirahara <[email protected]> * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding Signed-off-by: Suguru Hirahara <[email protected]> * Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss Signed-off-by: Suguru Hirahara <[email protected]> * Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara <[email protected]> * Move common style rules up Signed-off-by: Suguru Hirahara <[email protected]> * Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout There should not be spacing between avatars and info tile line on IRC Layout Signed-off-by: Suguru Hirahara <[email protected]> * Apply the rule to group/modern layout only Signed-off-by: Suguru Hirahara <[email protected]> * Apply the inline start padding to modern/group layout only Overriding $left-gutter is not necessary for IRC layout Signed-off-by: Suguru Hirahara <[email protected]> * Merge the style block for mx_EventTile_info .mx_EventTile_line Signed-off-by: Suguru Hirahara <[email protected]> * Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout Signed-off-by: Suguru Hirahara <[email protected]> * Add spacing between avatar and a single info event tile line on IRC layout Signed-off-by: Suguru Hirahara <[email protected]> * Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard Signed-off-by: Suguru Hirahara <[email protected]> * Fix padding of line with redacted body text Signed-off-by: Suguru Hirahara <[email protected]>
1 parent 2706f14 commit 5349f30

File tree

3 files changed

+52
-23
lines changed

3 files changed

+52
-23
lines changed

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -149,11 +149,14 @@ limitations under the License.
149149
}
150150
}
151151

152-
.mx_GenericEventListSummary:not([data-layout=bubble]) {
153-
.mx_EventTile_line,
154-
> .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
155-
padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
156-
padding-inline-end: var(--BaseCard_EventTile-spacing-inline);
152+
.mx_GenericEventListSummary {
153+
&[data-layout=irc],
154+
&[data-layout=group] {
155+
.mx_EventTile_line,
156+
.mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
157+
padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
158+
padding-inline-end: var(--BaseCard_EventTile-spacing-inline);
159+
}
157160
}
158161
}
159162

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

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,10 @@ $left-gutter: 64px;
261261
&.mx_EventTile_continuation {
262262
padding-top: 0px !important;
263263
}
264+
265+
&.mx_EventTile_info .mx_EventTile_line {
266+
padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
267+
}
264268
}
265269

266270
&[data-layout=bubble] {
@@ -366,17 +370,42 @@ $left-gutter: 64px;
366370
}
367371
}
368372

369-
.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
370-
padding-left: $left-gutter;
373+
.mx_GenericEventListSummary {
374+
&[data-layout=irc],
375+
&[data-layout=group] {
376+
.mx_EventTile_line .mx_RedactedBody {
377+
line-height: 1; // remove spacing between lines
378+
}
379+
}
371380

372-
.mx_RedactedBody {
373-
line-height: 1; // remove spacing between lines
381+
&[data-layout=irc] {
382+
.mx_EventTile_info .mx_EventTile_line {
383+
padding-left: 0; // Override .mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line
384+
}
385+
386+
.mx_EventTile_line .mx_RedactedBody {
387+
padding-left: 24px; // 25px - 1px
388+
389+
&::before {
390+
left: var(--right-padding);
391+
}
392+
}
393+
394+
// Apply only collapsed events block
395+
> .mx_EventTile_line {
396+
padding-left: calc(var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding)); // 15 px of padding
397+
}
374398
}
375-
}
376399

377-
.mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line,
378-
.mx_GenericEventListSummary:not([data-layout=bubble]) > .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
379-
padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
400+
&[data-layout=group] {
401+
.mx_EventTile_line {
402+
padding-left: $left-gutter;
403+
}
404+
405+
.mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
406+
padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
407+
}
408+
}
380409
}
381410

382411
.mx_EventTile_content {

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

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
$icon-width: 14px;
18-
$right-padding: 5px;
1917
$irc-line-height: $font-18px;
2018

2119
.mx_IRCLayout {
2220
--name-width: 70px;
21+
--icon-width: 14px;
22+
--right-padding: 5px;
2323

2424
line-height: $irc-line-height !important;
2525

@@ -36,7 +36,7 @@ $irc-line-height: $font-18px;
3636
padding-top: 0;
3737

3838
> * {
39-
margin-right: $right-padding;
39+
margin-right: var(--right-padding);
4040
}
4141

4242
.mx_EventTile_msgOption {
@@ -157,26 +157,23 @@ $irc-line-height: $font-18px;
157157

158158
.mx_EventTile_emote {
159159
.mx_EventTile_avatar {
160-
margin-left: calc(var(--name-width) + $icon-width + $right-padding);
160+
margin-left: calc(var(--name-width) + var(--icon-width) + var(--right-padding));
161161
}
162162
}
163163

164164
blockquote {
165165
margin: 0;
166166
}
167167

168-
.mx_GenericEventListSummary > .mx_EventTile_line {
169-
padding-left: calc(var(--name-width) + $icon-width + $MessageTimestamp_width + 3 * $right-padding); // 15 px of padding
170-
}
171-
172168
.mx_EventTile.mx_EventTile_info {
173169
.mx_EventTile_avatar {
174-
left: calc(var(--name-width) + 10px + $icon-width);
170+
left: calc(var(--name-width) + 10px + var(--icon-width));
175171
top: 0;
172+
margin-right: var(--right-padding);
176173
}
177174

178175
.mx_EventTile_line {
179-
left: calc(var(--name-width) + 10px + $icon-width);
176+
left: calc(var(--name-width) + 10px + var(--icon-width));
180177
}
181178

182179
.mx_TextualEvent {

0 commit comments

Comments
 (0)