-
-
Notifications
You must be signed in to change notification settings - Fork 833
Enable background color on hover for chat panel and thread panel #8644
Changes from all commits
4e1ee74
1d43ab4
0b49106
1dae504
07ec009
f8bedb2
b2da082
c6a039e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -43,63 +43,75 @@ limitations under the License. | |
} | ||
|
||
.mx_NewRoomIntro { | ||
margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal); | ||
margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal); | ||
margin-inline-start: var(--BaseCard_EventTile-spacing-inline); | ||
margin-inline-end: var(--BaseCard_EventTile-spacing-inline); | ||
} | ||
|
||
.mx_EventTile_content { | ||
margin-right: 0; | ||
} | ||
|
||
.mx_EventTile:not([data-layout="bubble"]) { | ||
&.mx_EventTile_info .mx_EventTile_line, | ||
.mx_EventTile_line { | ||
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-horizontal); | ||
padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden | ||
|
||
.mx_EventTile_e2eIcon { | ||
inset-inline-start: 8px; | ||
.mx_EventTile { | ||
&[data-layout=bubble] { | ||
&::before { | ||
z-index: auto; // enable background color on hover | ||
} | ||
} | ||
|
||
.mx_DisambiguatedProfile, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Around these changes please see the commit (1dae504) dedicated for |
||
.mx_ReactionsRow, | ||
.mx_ThreadSummary { | ||
margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal); | ||
.mx_ReactionsRow { | ||
position: relative; // display on hover | ||
} | ||
} | ||
|
||
.mx_ReactionsRow { | ||
padding: 0; | ||
&:not([data-layout="bubble"]) { | ||
&.mx_EventTile_info .mx_EventTile_line, | ||
.mx_EventTile_line { | ||
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline); | ||
padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden | ||
|
||
// See margin setting of ReactionsRow on _EventTile.scss | ||
margin-right: 8px; | ||
} | ||
.mx_EventTile_e2eIcon { | ||
inset-inline-start: 8px; | ||
} | ||
} | ||
|
||
.mx_ThreadSummary { | ||
margin-right: 0; | ||
max-width: min(calc(100% - 36px), 600px); | ||
} | ||
.mx_DisambiguatedProfile, | ||
.mx_ReactionsRow, | ||
.mx_ThreadSummary { | ||
margin-inline-start: var(--BaseCard_EventTile-spacing-inline); | ||
} | ||
|
||
.mx_EventTile_avatar { | ||
position: absolute; // for IRC layout | ||
top: 12px; | ||
left: -3px; | ||
} | ||
.mx_ReactionsRow { | ||
padding: 0; | ||
|
||
.mx_MessageTimestamp { | ||
position: absolute; // for modern layout and IRC layout | ||
inset-inline-start: auto; | ||
inset-inline-end: 0; | ||
} | ||
// See margin setting of ReactionsRow on _EventTile.scss | ||
margin-right: 8px; | ||
} | ||
|
||
.mx_EventTile_msgOption { | ||
// Override mx_EventTile_msgOption of mx_EventTile:not([data-layout="bubble"]) | ||
margin-inline-end: 0; | ||
} | ||
.mx_ThreadSummary { | ||
margin-right: 0; | ||
max-width: min(calc(100% - 36px), 600px); | ||
} | ||
|
||
&.mx_EventTile_info { | ||
.mx_EventTile_avatar { | ||
left: 18px; | ||
position: absolute; // for IRC layout | ||
top: 12px; | ||
left: -3px; | ||
} | ||
|
||
.mx_MessageTimestamp { | ||
position: absolute; // for modern layout and IRC layout | ||
inset-inline-start: auto; | ||
inset-inline-end: 0; | ||
} | ||
|
||
.mx_EventTile_msgOption { | ||
// Override mx_EventTile_msgOption of mx_EventTile:not([data-layout="bubble"]) | ||
margin-inline-end: 0; | ||
} | ||
|
||
&.mx_EventTile_info { | ||
.mx_EventTile_avatar { | ||
left: 18px; | ||
} | ||
} | ||
} | ||
} | ||
|
@@ -134,8 +146,8 @@ limitations under the License. | |
.mx_GenericEventListSummary:not([data-layout=bubble]) { | ||
.mx_EventTile_line, | ||
> .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line { | ||
padding-inline-start: var(--BaseCard_EventTile-spacing-horizontal); | ||
padding-inline-end: var(--BaseCard_EventTile-spacing-horizontal); | ||
padding-inline-start: var(--BaseCard_EventTile-spacing-inline); | ||
padding-inline-end: var(--BaseCard_EventTile-spacing-inline); | ||
} | ||
} | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -53,9 +53,12 @@ limitations under the License. | |
} | ||
|
||
.mx_EventTile[data-layout=bubble] { | ||
--EventTile_bubble-margin-inline-start: 49px; | ||
--EventTile_bubble-margin-inline-end: 60px; | ||
|
||
position: relative; | ||
margin-top: var(--gutterSize); | ||
margin-left: 49px; | ||
margin-left: var(--EventTile_bubble-margin-inline-start); | ||
font-size: $font-14px; | ||
|
||
.mx_ThreadSummary { | ||
|
@@ -89,8 +92,8 @@ limitations under the License. | |
position: absolute; | ||
top: -1px; | ||
bottom: -1px; | ||
left: -60px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This should not be -60px, instead it should be -49px ( |
||
right: -60px; | ||
left: calc(-1 * var(--EventTile_bubble-margin-inline-start)); | ||
right: calc(-1 * var(--EventTile_bubble-margin-inline-end)); | ||
z-index: -1; | ||
border-radius: 4px; | ||
} | ||
|
@@ -665,6 +668,17 @@ limitations under the License. | |
} | ||
} | ||
|
||
/* events that do not require bubble layout */ | ||
.mx_EventTile_line { | ||
background: transparent; | ||
} | ||
|
||
&:hover { | ||
&::before { | ||
background: transparent; | ||
} | ||
} | ||
|
||
&::after { | ||
content: ""; | ||
clear: both; | ||
|
@@ -708,20 +722,6 @@ limitations under the License. | |
} | ||
} | ||
|
||
/* events that do not require bubble layout */ | ||
.mx_GenericEventListSummary[data-layout=bubble], | ||
.mx_EventTile.mx_EventTile_bad[data-layout=bubble] { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
.mx_EventTile_line { | ||
background: transparent; | ||
} | ||
|
||
&:hover { | ||
&::before { | ||
background: transparent; | ||
} | ||
} | ||
} | ||
|
||
.mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line { | ||
flex-direction: column; // restore the centering | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Using
inline
is better as it follows the rule of logical properties. You could double-check by looking up--BaseCard_EventTile-spacing-horizontal
.