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

Enable background color on hover for chat panel and thread panel #8644

Merged
merged 8 commits into from
Jun 10, 2022
Merged

Enable background color on hover for chat panel and thread panel #8644

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4e1ee74
Enable background color on hover for chat panel and thread panel
luixxiul May 18, 2022
1d43ab4
Replace --BaseCard_EventTile-spacing-horizontal with --BaseCard_Event…
luixxiul May 18, 2022
0b49106
mx_EventTile.mx_EventTile_bad[data-layout=bubble] seems to require bu…
luixxiul Jun 3, 2022
1dae504
yarn run lint:style --fix
luixxiul Jun 3, 2022
07ec009
Merge branch 'develop' into ThreadPanel_Hover
luixxiul Jun 5, 2022
f8bedb2
Merge branch 'develop' into ThreadPanel_Hover
luixxiul Jun 7, 2022
b2da082
Merge branch 'develop' into ThreadPanel_Hover
luixxiul Jun 8, 2022
c6a039e
Merge branch 'develop' into ThreadPanel_Hover
luixxiul Jun 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion res/css/views/right_panel/_TimelineCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,18 @@ limitations under the License.
margin-right: 0;
}

.mx_EventTile:not([data-layout="bubble"]) {
.mx_EventTile {
&[data-layout=bubble] {
&::before {
z-index: auto; // enable background color on hover
}

.mx_ReactionsRow {
position: relative; // display on hover
}
}

&: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);
Expand Down Expand Up @@ -103,6 +114,7 @@ limitations under the License.
}
}
}
}

.mx_EventTile,
.mx_GenericEventListSummary {
Expand Down
9 changes: 6 additions & 3 deletions res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -89,8 +92,8 @@ limitations under the License.
position: absolute;
top: -1px;
bottom: -1px;
left: -60px;
Copy link
Contributor Author

@luixxiul luixxiul Jun 3, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should not be -60px, instead it should be -49px (--EventTile_bubble-margin-inline-start), the same value as the inline start margin of the EventTile. Otherwise the background would overflow the left gutter, which I think is not expected.

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;
}
Expand Down
9 changes: 9 additions & 0 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -965,6 +965,15 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal);

&::before {
inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-horizontal));
z-index: auto; // enable background color on hover
}

.mx_ReactionsRow {
position: relative; // display on hover
}

.mx_EventTile_line.mx_EventTile_mediaLine {
padding-block: 0;
padding-inline-start: 0;
Expand Down