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

Commit 2571042

Browse files
luixxiulluixxiul
authored
Move style rules of GenericEventListSummary from _EventBubbleTile.scss to _GenericEventListSummary.scss (#8713)
* Move declarations of mx_GenericEventListSummary to _GenericEventListSummary.scss Signed-off-by: Suguru Hirahara <[email protected]> * Move declarations of mx_GenericEventListSummary[data-expanded=false] to _GenericEventListSummary.scss Signed-off-by: Suguru Hirahara <[email protected]> * Move declarations of mx_GenericEventListSummary[data-expanded=true] to _GenericEventListSummary.scss Signed-off-by: Suguru Hirahara <[email protected]> * de-nestify style rules Signed-off-by: Suguru Hirahara <[email protected]> * Remove a padding declaration for _EventBubbleTile.scss to set correct cascading order Signed-off-by: Suguru Hirahara <[email protected]> * GenericEventListSummary_toggle for ':not([data-layout=bubble])' Stop setting margin values as default ones Signed-off-by: Suguru Hirahara <[email protected]> * GenericEventListSummary_avatars for ':not([data-layout=bubble])' Signed-off-by: Suguru Hirahara <[email protected]> * Extract flexbox declarations into _GenericEventListSummary.scss Signed-off-by: Suguru Hirahara <[email protected]> * Move declarations of '&[data-layout=bubble]' up Signed-off-by: Suguru Hirahara <[email protected]> * Extract background color into _GenericEventListSummary.scss Signed-off-by: Suguru Hirahara <[email protected]> * Merge style rules of background of EventTile_bad Signed-off-by: Suguru Hirahara <[email protected]> * Move .mx_GenericEventListSummary_avatars block from _IRCLayout.scsss to _GenericEventListSummary.scss Signed-off-by: Suguru Hirahara <[email protected]> * de-nestify style rules Signed-off-by: Suguru Hirahara <[email protected]> * Stop using :not() pseudo class Signed-off-by: Suguru Hirahara <[email protected]>
1 parent 8b84195 commit 2571042

File tree

4 files changed

+110
-99
lines changed

4 files changed

+110
-99
lines changed

‎res/css/views/elements/_GenericEventListSummary.scss‎

Lines changed: 70 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,76 @@ limitations under the License.
1616

1717
.mx_GenericEventListSummary {
1818
position: relative;
19+
20+
&[data-layout=irc],
21+
&[data-layout=group] {
22+
.mx_GenericEventListSummary_toggle {
23+
float: right;
24+
margin: 8px 10px 0 0;
25+
}
26+
27+
.mx_GenericEventListSummary_avatars {
28+
padding-top: $spacing-8;
29+
}
30+
}
31+
32+
&[data-layout=irc] {
33+
.mx_GenericEventListSummary_avatars {
34+
padding: 0;
35+
margin: 0 9px 0 0;
36+
}
37+
}
38+
39+
&[data-layout=bubble] {
40+
--maxWidth: 70%;
41+
margin-left: calc(var(--avatarSize) + var(--gutterSize));
42+
43+
&[data-expanded=false] {
44+
display: flex;
45+
align-items: center;
46+
justify-content: flex-start;
47+
padding: 0 49px; // Align with left edge of bubble tiles
48+
}
49+
50+
// ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
51+
// that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
52+
&[data-expanded=true] {
53+
display: flex;
54+
flex-direction: column;
55+
margin: 0;
56+
}
57+
58+
&::after {
59+
content: "";
60+
clear: both;
61+
}
62+
63+
&:hover {
64+
&::before {
65+
background: transparent;
66+
}
67+
}
68+
69+
.mx_GenericEventListSummary_toggle {
70+
margin: 0 55px 0 5px;
71+
72+
&[aria-expanded=false] {
73+
order: 9;
74+
}
75+
76+
&[aria-expanded=true] {
77+
text-align: right;
78+
}
79+
}
80+
81+
.mx_GenericEventListSummary_line {
82+
display: none;
83+
}
84+
85+
.mx_GenericEventListSummary_avatars {
86+
padding-top: 0;
87+
}
88+
}
1989
}
2090

2191
.mx_GenericEventListSummary_unstyledList {
@@ -31,7 +101,6 @@ limitations under the License.
31101
.mx_GenericEventListSummary_avatars {
32102
display: inline-block;
33103
margin-right: 8px;
34-
padding-top: 8px;
35104
line-height: $font-12px;
36105
}
37106

@@ -43,9 +112,6 @@ limitations under the License.
43112
.mx_GenericEventListSummary_toggle {
44113
color: $accent;
45114
cursor: pointer;
46-
float: right;
47-
margin-right: 10px;
48-
margin-top: 8px;
49115
}
50116

51117
.mx_GenericEventListSummary_line {

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

Lines changed: 34 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -489,6 +489,12 @@ limitations under the License.
489489
}
490490

491491
&.mx_EventTile_bad {
492+
&:hover {
493+
&::before {
494+
background: transparent;
495+
}
496+
}
497+
492498
/* Special layout scenario for "Unable To Decrypt (UTD)" events */
493499
.mx_EventTile_line {
494500
display: grid;
@@ -588,18 +594,22 @@ limitations under the License.
588594
}
589595
}
590596

597+
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
598+
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
599+
.mx_EventTile.mx_EventTile_info[data-layout=bubble] {
600+
padding: 5px 0;
601+
display: flex;
602+
align-items: center;
603+
justify-content: flex-start;
604+
}
605+
591606
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
592607
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
593608
.mx_EventTile.mx_EventTile_info[data-layout=bubble],
594609
.mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] {
595610
--backgroundColor: transparent;
596611
--gutterSize: 0;
597612

598-
display: flex;
599-
align-items: center;
600-
justify-content: flex-start;
601-
padding: 5px 0;
602-
603613
.mx_EventTile_avatar {
604614
position: static;
605615
order: -1;
@@ -634,90 +644,34 @@ limitations under the License.
634644
}
635645

636646
.mx_GenericEventListSummary[data-layout=bubble] {
637-
--maxWidth: 70%;
638-
margin-left: calc(var(--avatarSize) + var(--gutterSize));
639-
640-
.mx_GenericEventListSummary_toggle {
641-
margin: 0 55px 0 5px;
642-
float: none;
643-
644-
&[aria-expanded=false] {
645-
order: 9;
646-
}
647-
&[aria-expanded=true] {
648-
text-align: right;
649-
}
650-
}
651-
652-
.mx_GenericEventListSummary_line {
653-
display: none;
654-
}
655-
656-
.mx_GenericEventListSummary_avatars {
657-
padding-top: 0;
647+
.mx_EventTile.mx_EventTile_info .mx_EventTile_line {
648+
// Avoid overflow of event info by cancelling width settings
649+
width: 100%;
650+
min-width: 0;
651+
max-width: 100%;
658652
}
659653

660-
.mx_EventTile {
661-
&.mx_EventTile_info {
662-
.mx_EventTile_line {
663-
// Avoid overflow of event info by cancelling width settings
664-
width: 100%;
665-
min-width: 0;
666-
max-width: 100%;
667-
}
668-
}
654+
// increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
655+
&[data-expanded=false] + .mx_EventTile[data-layout=bubble][data-self=true] {
656+
margin-top: 20px;
669657
}
670658

671-
/* events that do not require bubble layout */
672-
.mx_EventTile_line {
673-
background: transparent;
674-
}
659+
&[data-expanded=true] .mx_EventTile_info {
660+
padding: 2px 0;
661+
margin-right: 0;
675662

676-
&:hover {
677-
&::before {
678-
background: transparent;
663+
.mx_MessageActionBar {
664+
inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
665+
inset-inline-end: 48px; // align with that of right-column bubbles
679666
}
680-
}
681667

682-
&::after {
683-
content: "";
684-
clear: both;
685-
}
686-
687-
&[data-expanded=false] {
688-
// Align with left edge of bubble tiles
689-
padding: 0 49px;
690-
691-
// increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
692-
+ .mx_EventTile[data-layout=bubble][data-self=true] {
693-
margin-top: 20px;
668+
.mx_ReadReceiptGroup {
669+
// match alignment to RRs of chat bubbles
670+
inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 60px);
694671
}
695-
}
696-
697-
// ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
698-
// that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
699-
&[data-expanded=true] {
700-
display: flex;
701-
flex-direction: column;
702-
margin: 0;
703-
704-
.mx_EventTile_info {
705-
padding: 2px 0;
706-
margin-right: 0;
707672

708-
.mx_MessageActionBar {
709-
inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
710-
inset-inline-end: 48px; // align with that of right-column bubbles
711-
}
712-
713-
.mx_ReadReceiptGroup {
714-
// match alignment to RRs of chat bubbles
715-
inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 60px);
716-
}
717-
718-
&::before {
719-
inset-inline-end: 0; // match alignment of the hover background to that of chat bubbles
720-
}
673+
&::before {
674+
inset-inline-end: 0; // match alignment of the hover background to that of chat bubbles
721675
}
722676
}
723677
}

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -307,13 +307,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
307307
}
308308
}
309309

310-
.mx_GenericEventListSummary:not([data-layout=bubble]) {
311-
.mx_EventTile_line {
312-
padding-left: $left-gutter;
310+
.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
311+
padding-left: $left-gutter;
313312

314-
.mx_RedactedBody {
315-
line-height: 1; // remove spacing between lines
316-
}
313+
.mx_RedactedBody {
314+
line-height: 1; // remove spacing between lines
317315
}
318316
}
319317

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

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -120,15 +120,8 @@ $irc-line-height: $font-18px;
120120
margin: 0;
121121
}
122122

123-
.mx_GenericEventListSummary {
124-
> .mx_EventTile_line {
125-
padding-left: calc(var(--name-width) + $icon-width + $MessageTimestamp_width + 3 * $right-padding); // 15 px of padding
126-
}
127-
128-
.mx_GenericEventListSummary_avatars {
129-
padding: 0;
130-
margin: 0 9px 0 0;
131-
}
123+
.mx_GenericEventListSummary > .mx_EventTile_line {
124+
padding-left: calc(var(--name-width) + $icon-width + $MessageTimestamp_width + 3 * $right-padding); // 15 px of padding
132125
}
133126

134127
.mx_EventTile.mx_EventTile_info {

0 commit comments

Comments
 (0)