OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix buggy hovering/selecting of event tiles 

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-06-10 18:53:56 +02:00
parent 91a88f25a8
commit 5343be7814
No known key found for this signature in database
GPG Key ID: 9760693FDD98A790
2 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
res/css/views/rooms/_EventTile.scss
View File

@ -16,6 +16,7 @@ limitations under the License.
*/ */
$left-gutter: 64px; $left-gutter: 64px;
$hover-select-border: 4px;
.mx_EventTile { .mx_EventTile {
max-width: 100%; max-width: 100%;
@ -142,8 +143,7 @@ $left-gutter: 64px;
} }
.mx_EventTile_selected > div > a > .mx_MessageTimestamp { .mx_EventTile_selected > div > a > .mx_MessageTimestamp {
left: 3px; left: calc(-$hover-select-border);
width: auto;
} }
.mx_EventTile:hover .mx_MessageActionBar, .mx_EventTile:hover .mx_MessageActionBar,
@ -158,7 +158,7 @@ $left-gutter: 64px;
*/ */
.mx_EventTile_selected > .mx_EventTile_line { .mx_EventTile_selected > .mx_EventTile_line {
border-left: $accent-color 4px solid; border-left: $accent-color 4px solid;
padding-left: 60px; padding-left: calc($left-gutter - $hover-select-border);
background-color: $event-selected-color; background-color: $event-selected-color;
} }
@ -171,8 +171,12 @@ $left-gutter: 64px;
} }
} }
.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px);
}
.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line { .mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
padding-left: 78px; padding-left: calc($left-gutter + 18px - $hover-select-border);
} }
.mx_EventTile:hover .mx_EventTile_line, .mx_EventTile:hover .mx_EventTile_line,
@ -408,7 +412,7 @@ $left-gutter: 64px;
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
padding-left: 60px; padding-left: calc($left-gutter - $hover-select-border);
} }
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
@ -426,7 +430,7 @@ $left-gutter: 64px;
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
padding-left: 78px; padding-left: calc($left-gutter + 18px - $hover-select-border);
} }
/* End to end encryption stuff */ /* End to end encryption stuff */
@ -438,7 +442,7 @@ $left-gutter: 64px;
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp, .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp { .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
width: $MessageTimestamp_width_hover; left: calc(-$hover-select-border);
} }
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)

8
res/css/views/rooms/_GroupLayout.scss
View File

@ -24,10 +24,6 @@ $left-gutter: 64px;
margin-left: $left-gutter; margin-left: $left-gutter;
} }
> .mx_EventTile_line {
padding-left: $left-gutter;
}
> .mx_EventTile_avatar { > .mx_EventTile_avatar {
position: absolute; position: absolute;
} }
@ -43,10 +39,6 @@ $left-gutter: 64px;
line-height: $font-22px; line-height: $font-22px;
} }
} }
.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px);
}
} }
/* Compact layout overrides */ /* Compact layout overrides */