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

Commit 4fb1196

Browse files
luixxiulluixxiul
authored
Move style declarations out of :not([data-layout=bubble]) in ThreadView (#9020)
* Move mx_EventTile out of mx_EventTile:not([data-layout=bubble]) in mx_ThreadView Signed-off-by: Suguru Hirahara <[email protected]> * Use a logical property Signed-off-by: Suguru Hirahara <[email protected]> * Remove a redundant declaration Signed-off-by: Suguru Hirahara <[email protected]> * Apply zero inline start padding to group layout only Signed-off-by: Suguru Hirahara <[email protected]> * Reorder style blocks; irc/group before bubble Signed-off-by: Suguru Hirahara <[email protected]> * Move styles for mx_EventTile_avatar of info event lines on ThreadView out of :not() pseudo class Signed-off-by: Suguru Hirahara <[email protected]> * Move styles in mx_GenericEventListSummary on ThreadView out of :not() pseudo class Signed-off-by: Suguru Hirahara <[email protected]> * Shorthand for inline margin Signed-off-by: Suguru Hirahara <[email protected]> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <[email protected]>
1 parent eff0395 commit 4fb1196

File tree

1 file changed

+50
-51
lines changed

1 file changed

+50
-51
lines changed

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

Lines changed: 50 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -326,7 +326,7 @@ $left-gutter: 64px;
326326
&.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
327327
&.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
328328
&.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
329-
padding-left: calc($left-gutter + 18px + $selected-message-border-width);
329+
padding-inline-start: calc($left-gutter + 18px + $selected-message-border-width);
330330
}
331331
}
332332
}
@@ -957,8 +957,7 @@ $left-gutter: 64px;
957957
}
958958

959959
.mx_EventTile_line {
960-
padding-top: var(--BaseCard_EventTile_line-padding-block);
961-
padding-bottom: var(--BaseCard_EventTile_line-padding-block);
960+
padding-block: var(--BaseCard_EventTile_line-padding-block);
962961
}
963962

964963
.mx_EventTile_line,
@@ -1004,16 +1003,14 @@ $left-gutter: 64px;
10041003
&[data-layout=group] {
10051004
padding-top: 0;
10061005

1007-
.mx_MessageTimestamp {
1008-
top: 2px; // Align with avatar
1009-
}
1010-
}
1011-
1012-
&:not([data-layout=bubble]) {
10131006
.mx_EventTile_avatar {
10141007
left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text
10151008
z-index: 9; // position above the hover styling
10161009
}
1010+
1011+
.mx_MessageTimestamp {
1012+
top: 2px; // Align with avatar
1013+
}
10171014
}
10181015

10191016
&[data-layout=bubble] {
@@ -1023,19 +1020,11 @@ $left-gutter: 64px;
10231020
}
10241021
}
10251022

1026-
&:not([data-layout=bubble]) {
1027-
padding-top: $spacing-16;
1028-
1029-
&:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
1030-
&:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
1031-
&:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
1032-
padding-inline-start: 0; // Override
1033-
}
1023+
&[data-layout=irc],
1024+
&[data-layout=group] {
1025+
padding-block-start: $spacing-16;
10341026

10351027
.mx_EventTile_line {
1036-
padding-top: var(--BaseCard_EventTile_line-padding-block);
1037-
padding-bottom: var(--BaseCard_EventTile_line-padding-block);
1038-
10391028
.mx_EventTile_content {
10401029
&.mx_EditMessageComposer {
10411030
padding-inline-start: 0; // align start of first letter with that of the event body
@@ -1044,34 +1033,6 @@ $left-gutter: 64px;
10441033
}
10451034
}
10461035

1047-
&[data-layout=bubble] {
1048-
margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
1049-
margin-inline-end: var(--BaseCard_EventTile-spacing-inline);
1050-
1051-
&::before {
1052-
inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
1053-
z-index: auto; // enable background color on hover
1054-
}
1055-
1056-
.mx_ReactionsRow {
1057-
position: relative; // display on hover
1058-
}
1059-
1060-
.mx_EventTile_line.mx_EventTile_mediaLine {
1061-
padding-block: 0;
1062-
padding-inline-start: 0;
1063-
max-width: var(--EventBubbleTile_line-max-width);
1064-
}
1065-
1066-
&[data-self=true] {
1067-
align-items: flex-end;
1068-
1069-
.mx_EventTile_line.mx_EventTile_mediaLine {
1070-
margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; // align with normal messages
1071-
}
1072-
}
1073-
}
1074-
10751036
&[data-layout=group] {
10761037
width: 100%;
10771038

@@ -1139,13 +1100,51 @@ $left-gutter: 64px;
11391100
position: absolute; // for IRC layout
11401101
top: 2px; // Align with mx_EventTile_content
11411102
}
1103+
1104+
&:hover {
1105+
&.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
1106+
&.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
1107+
&.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
1108+
padding-inline-start: 0;
1109+
}
1110+
}
1111+
}
1112+
1113+
&[data-layout=bubble] {
1114+
margin-inline: var(--BaseCard_EventTile-spacing-inline);
1115+
1116+
&::before {
1117+
inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
1118+
z-index: auto; // enable background color on hover
1119+
}
1120+
1121+
.mx_ReactionsRow {
1122+
position: relative; // display on hover
1123+
}
1124+
1125+
.mx_EventTile_line.mx_EventTile_mediaLine {
1126+
padding-block: 0;
1127+
padding-inline-start: 0;
1128+
max-width: var(--EventBubbleTile_line-max-width);
1129+
}
1130+
1131+
&[data-self=true] {
1132+
align-items: flex-end;
1133+
1134+
.mx_EventTile_line.mx_EventTile_mediaLine {
1135+
margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; // align with normal messages
1136+
}
1137+
}
11421138
}
11431139
}
11441140

11451141
.mx_GenericEventListSummary {
1146-
&:not([data-layout=bubble]) > .mx_EventTile_line {
1147-
padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text
1148-
padding-inline-end: var(--ThreadView_group_spacing-end); // align summary text with message text
1142+
&[data-layout=irc],
1143+
&[data-layout=group] {
1144+
> .mx_EventTile_line {
1145+
padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text
1146+
padding-inline-end: var(--ThreadView_group_spacing-end); // align summary text with message text
1147+
}
11491148
}
11501149
}
11511150
}

0 commit comments

Comments
 (0)