imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* Enable background color on hover for chat panel and thread panel

- Display reactions row on hover
- Use variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Replace --BaseCard_EventTile-spacing-horizontal with --BaseCard_EventTile-spacing-inline

- horizontal: inline
- vertical: block

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* mx_EventTile.mx_EventTile_bad[data-layout=bubble] seems to require bubble layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-10 08:21:22 +00:00 • committed by GitHub
parent 8e9f7407e9
commit 0d3fe300aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 83 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/views/right_panel/_BaseCard.scss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_BaseCard { .mx_BaseCard {
--BaseCard_EventTile_line-padding-block: 2px; --BaseCard_EventTile_line-padding-block: 2px;
--BaseCard_EventTile-spacing-horizontal: 36px; --BaseCard_EventTile-spacing-inline: 36px;
padding: 0 8px; padding: 0 8px;
overflow: hidden; overflow: hidden;

96
res/css/views/right_panel/_TimelineCard.scss
View file

@ -43,63 +43,75 @@ limitations under the License.
} }
.mx_NewRoomIntro { .mx_NewRoomIntro {
margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal); margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal); margin-inline-end: var(--BaseCard_EventTile-spacing-inline);
} }
.mx_EventTile_content { .mx_EventTile_content {
margin-right: 0; margin-right: 0;
} }
.mx_EventTile:not([data-layout="bubble"]) { .mx_EventTile {
&.mx_EventTile_info .mx_EventTile_line, &[data-layout=bubble] {
.mx_EventTile_line { &::before {
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-horizontal); z-index: auto; // enable background color on hover
padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden }
.mx_EventTile_e2eIcon { .mx_ReactionsRow {
inset-inline-start: 8px; position: relative; // display on hover
} }
} }
.mx_DisambiguatedProfile, &:not([data-layout="bubble"]) {
.mx_ReactionsRow, &.mx_EventTile_info .mx_EventTile_line,
.mx_ThreadSummary { .mx_EventTile_line {
margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal); padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
} padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden
.mx_ReactionsRow { .mx_EventTile_e2eIcon {
padding: 0; inset-inline-start: 8px;
}
}
// See margin setting of ReactionsRow on _EventTile.scss .mx_DisambiguatedProfile,
margin-right: 8px; .mx_ReactionsRow,
} .mx_ThreadSummary {
margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
}
.mx_ThreadSummary { .mx_ReactionsRow {
margin-right: 0; padding: 0;
max-width: min(calc(100% - 36px), 600px);
}
.mx_EventTile_avatar { // See margin setting of ReactionsRow on _EventTile.scss
position: absolute; // for IRC layout margin-right: 8px;
top: 12px; }
left: -3px;
}
.mx_MessageTimestamp { .mx_ThreadSummary {
position: absolute; // for modern layout and IRC layout margin-right: 0;
inset-inline-start: auto; max-width: min(calc(100% - 36px), 600px);
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 { .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_GenericEventListSummary:not([data-layout=bubble]) {
.mx_EventTile_line, .mx_EventTile_line,
> .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .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-start: var(--BaseCard_EventTile-spacing-inline);
padding-inline-end: var(--BaseCard_EventTile-spacing-horizontal); padding-inline-end: var(--BaseCard_EventTile-spacing-inline);
} }
} }

34
res/css/views/rooms/_EventBubbleTile.scss
View file

@ -53,9 +53,12 @@ limitations under the License.
} }
.mx_EventTile[data-layout=bubble] { .mx_EventTile[data-layout=bubble] {
--EventTile_bubble-margin-inline-start: 49px;
--EventTile_bubble-margin-inline-end: 60px;
position: relative; position: relative;
margin-top: var(--gutterSize); margin-top: var(--gutterSize);
margin-left: 49px; margin-left: var(--EventTile_bubble-margin-inline-start);
font-size: $font-14px; font-size: $font-14px;
.mx_ThreadSummary { .mx_ThreadSummary {
@ -89,8 +92,8 @@ limitations under the License.
position: absolute; position: absolute;
top: -1px; top: -1px;
bottom: -1px; bottom: -1px;
left: -60px; left: calc(-1 * var(--EventTile_bubble-margin-inline-start));
right: -60px; right: calc(-1 * var(--EventTile_bubble-margin-inline-end));
z-index: -1; z-index: -1;
border-radius: 4px; 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 { &::after {
content: ""; content: "";
clear: both; 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] {
.mx_EventTile_line {
background: transparent;
}
&:hover {
&::before {
background: transparent;
}
}
}
.mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line { .mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line {
flex-direction: column; // restore the centering flex-direction: column; // restore the centering
} }

13
res/css/views/rooms/_EventTile.scss
View file

@ -955,8 +955,17 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
} }
&[data-layout=bubble] { &[data-layout=bubble] {
margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal); margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal); margin-inline-end: var(--BaseCard_EventTile-spacing-inline);
&::before {
inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
z-index: auto; // enable background color on hover
}
.mx_ReactionsRow {
position: relative; // display on hover
}
.mx_EventTile_line.mx_EventTile_mediaLine { .mx_EventTile_line.mx_EventTile_mediaLine {
padding-block: 0; padding-block: 0;