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

Commit 0d3fe30

Browse files
luixxiulluixxiul
authored
Enable background color on hover for chat panel and thread panel (#8644)
* Enable background color on hover for chat panel and thread panel - Display reactions row on hover - Use variables Signed-off-by: Suguru Hirahara <[email protected]> * Replace --BaseCard_EventTile-spacing-horizontal with --BaseCard_EventTile-spacing-inline - horizontal: inline - vertical: block Signed-off-by: Suguru Hirahara <[email protected]> * mx_EventTile.mx_EventTile_bad[data-layout=bubble] seems to require bubble layout Signed-off-by: Suguru Hirahara <[email protected]> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <[email protected]>
1 parent 8e9f740 commit 0d3fe30

File tree

4 files changed

+83
-62
lines changed

4 files changed

+83
-62
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ limitations under the License.
1616

1717
.mx_BaseCard {
1818
--BaseCard_EventTile_line-padding-block: 2px;
19-
--BaseCard_EventTile-spacing-horizontal: 36px;
19+
--BaseCard_EventTile-spacing-inline: 36px;
2020

2121
padding: 0 8px;
2222
overflow: hidden;

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

Lines changed: 54 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -43,63 +43,75 @@ limitations under the License.
4343
}
4444

4545
.mx_NewRoomIntro {
46-
margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
47-
margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal);
46+
margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
47+
margin-inline-end: var(--BaseCard_EventTile-spacing-inline);
4848
}
4949

5050
.mx_EventTile_content {
5151
margin-right: 0;
5252
}
5353

54-
.mx_EventTile:not([data-layout="bubble"]) {
55-
&.mx_EventTile_info .mx_EventTile_line,
56-
.mx_EventTile_line {
57-
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-horizontal);
58-
padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden
59-
60-
.mx_EventTile_e2eIcon {
61-
inset-inline-start: 8px;
54+
.mx_EventTile {
55+
&[data-layout=bubble] {
56+
&::before {
57+
z-index: auto; // enable background color on hover
6258
}
63-
}
6459

65-
.mx_DisambiguatedProfile,
66-
.mx_ReactionsRow,
67-
.mx_ThreadSummary {
68-
margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
60+
.mx_ReactionsRow {
61+
position: relative; // display on hover
62+
}
6963
}
7064

71-
.mx_ReactionsRow {
72-
padding: 0;
65+
&:not([data-layout="bubble"]) {
66+
&.mx_EventTile_info .mx_EventTile_line,
67+
.mx_EventTile_line {
68+
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
69+
padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden
7370

74-
// See margin setting of ReactionsRow on _EventTile.scss
75-
margin-right: 8px;
76-
}
71+
.mx_EventTile_e2eIcon {
72+
inset-inline-start: 8px;
73+
}
74+
}
7775

78-
.mx_ThreadSummary {
79-
margin-right: 0;
80-
max-width: min(calc(100% - 36px), 600px);
81-
}
76+
.mx_DisambiguatedProfile,
77+
.mx_ReactionsRow,
78+
.mx_ThreadSummary {
79+
margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
80+
}
8281

83-
.mx_EventTile_avatar {
84-
position: absolute; // for IRC layout
85-
top: 12px;
86-
left: -3px;
87-
}
82+
.mx_ReactionsRow {
83+
padding: 0;
8884

89-
.mx_MessageTimestamp {
90-
position: absolute; // for modern layout and IRC layout
91-
inset-inline-start: auto;
92-
inset-inline-end: 0;
93-
}
85+
// See margin setting of ReactionsRow on _EventTile.scss
86+
margin-right: 8px;
87+
}
9488

95-
.mx_EventTile_msgOption {
96-
// Override mx_EventTile_msgOption of mx_EventTile:not([data-layout="bubble"])
97-
margin-inline-end: 0;
98-
}
89+
.mx_ThreadSummary {
90+
margin-right: 0;
91+
max-width: min(calc(100% - 36px), 600px);
92+
}
9993

100-
&.mx_EventTile_info {
10194
.mx_EventTile_avatar {
102-
left: 18px;
95+
position: absolute; // for IRC layout
96+
top: 12px;
97+
left: -3px;
98+
}
99+
100+
.mx_MessageTimestamp {
101+
position: absolute; // for modern layout and IRC layout
102+
inset-inline-start: auto;
103+
inset-inline-end: 0;
104+
}
105+
106+
.mx_EventTile_msgOption {
107+
// Override mx_EventTile_msgOption of mx_EventTile:not([data-layout="bubble"])
108+
margin-inline-end: 0;
109+
}
110+
111+
&.mx_EventTile_info {
112+
.mx_EventTile_avatar {
113+
left: 18px;
114+
}
103115
}
104116
}
105117
}
@@ -134,8 +146,8 @@ limitations under the License.
134146
.mx_GenericEventListSummary:not([data-layout=bubble]) {
135147
.mx_EventTile_line,
136148
> .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
137-
padding-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
138-
padding-inline-end: var(--BaseCard_EventTile-spacing-horizontal);
149+
padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
150+
padding-inline-end: var(--BaseCard_EventTile-spacing-inline);
139151
}
140152
}
141153

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,12 @@ limitations under the License.
5353
}
5454

5555
.mx_EventTile[data-layout=bubble] {
56+
--EventTile_bubble-margin-inline-start: 49px;
57+
--EventTile_bubble-margin-inline-end: 60px;
58+
5659
position: relative;
5760
margin-top: var(--gutterSize);
58-
margin-left: 49px;
61+
margin-left: var(--EventTile_bubble-margin-inline-start);
5962
font-size: $font-14px;
6063

6164
.mx_ThreadSummary {
@@ -89,8 +92,8 @@ limitations under the License.
8992
position: absolute;
9093
top: -1px;
9194
bottom: -1px;
92-
left: -60px;
93-
right: -60px;
95+
left: calc(-1 * var(--EventTile_bubble-margin-inline-start));
96+
right: calc(-1 * var(--EventTile_bubble-margin-inline-end));
9497
z-index: -1;
9598
border-radius: 4px;
9699
}
@@ -665,6 +668,17 @@ limitations under the License.
665668
}
666669
}
667670

671+
/* events that do not require bubble layout */
672+
.mx_EventTile_line {
673+
background: transparent;
674+
}
675+
676+
&:hover {
677+
&::before {
678+
background: transparent;
679+
}
680+
}
681+
668682
&::after {
669683
content: "";
670684
clear: both;
@@ -708,20 +722,6 @@ limitations under the License.
708722
}
709723
}
710724

711-
/* events that do not require bubble layout */
712-
.mx_GenericEventListSummary[data-layout=bubble],
713-
.mx_EventTile.mx_EventTile_bad[data-layout=bubble] {
714-
.mx_EventTile_line {
715-
background: transparent;
716-
}
717-
718-
&:hover {
719-
&::before {
720-
background: transparent;
721-
}
722-
}
723-
}
724-
725725
.mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line {
726726
flex-direction: column; // restore the centering
727727
}

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -955,8 +955,17 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
955955
}
956956

957957
&[data-layout=bubble] {
958-
margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
959-
margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal);
958+
margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
959+
margin-inline-end: var(--BaseCard_EventTile-spacing-inline);
960+
961+
&::before {
962+
inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
963+
z-index: auto; // enable background color on hover
964+
}
965+
966+
.mx_ReactionsRow {
967+
position: relative; // display on hover
968+
}
960969

961970
.mx_EventTile_line.mx_EventTile_mediaLine {
962971
padding-block: 0;

0 commit comments

Comments
 (0)