Skip to content
This repository has been 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
2 changes: 1 addition & 1 deletion res/css/views/right_panel/_BaseCard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ limitations under the License.

.mx_BaseCard {
--BaseCard_EventTile_line-padding-block: 2px;
--BaseCard_EventTile-spacing-horizontal: 36px;
--BaseCard_EventTile-spacing-inline: 36px;
Copy link
Contributor Author

@luixxiul luixxiul Jun 3, 2022

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.


padding: 0 8px;
overflow: hidden;
Expand Down
96 changes: 54 additions & 42 deletions res/css/views/right_panel/_TimelineCard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Copy link
Contributor Author

@luixxiul luixxiul Jun 3, 2022

Choose a reason for hiding this comment

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

Around these changes please see the commit (1dae504) dedicated for yarn run lint:style --fix.

.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;
}
}
}
}
Expand Down Expand Up @@ -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);
}
}

Expand Down
34 changes: 17 additions & 17 deletions res/css/views/rooms/_EventBubbleTile.scss
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

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 Expand Up @@ -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;
Expand Down Expand Up @@ -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] {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

.mx_EventTile.mx_EventTile_bad[data-layout=bubble] actually seems to require the bubble layout. Removing the line requires .mx_GenericEventListSummary[data-layout=bubble] to be merged to the block above.

.mx_EventTile_line {
background: transparent;
}

&:hover {
&::before {
background: transparent;
}
}
}

.mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line {
flex-direction: column; // restore the centering
}
13 changes: 11 additions & 2 deletions res/css/views/rooms/_EventTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -955,8 +955,17 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}

&[data-layout=bubble] {
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);

&::before {
inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
weeman1337 marked this conversation as resolved.
Show resolved Hide resolved
z-index: auto; // enable background color on hover
}

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

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