Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 13:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5601 from weeman1337/fix-16325-timestamp-jump

Browse Source 
Fix jumping timestamp if hovering a message with e2e indicator bar
This commit is contained in:
J. Ryan Stinnett 2021-02-04 16:02:18 +00:00 committed by GitHub
commit a4318299ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
res/css/_common.scss
View File

@ -21,6 +21,11 @@ limitations under the License.
$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
$EventTile_e2e_state_indicator_width: 4px;
$MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */
$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width);
:root { :root {
font-size: 10px; font-size: 10px;
} }

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

@ -420,15 +420,15 @@ $left-gutter: 64px;
} }
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
border-left: $e2e-verified-color 4px solid; border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid;
} }
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: $e2e-unverified-color 4px solid; border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid;
} }
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
border-left: $e2e-unknown-color 4px solid; border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid;
} }
.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
@ -446,8 +446,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 {
left: 3px; width: $MessageTimestamp_width_hover;
width: auto;
} }
// 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)

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

@ -34,7 +34,7 @@ $left-gutter: 64px;
.mx_MessageTimestamp { .mx_MessageTimestamp {
position: absolute; position: absolute;
width: 46px; /* 8 + 30 (avatar) + 8 */ width: $MessageTimestamp_width;
} }
.mx_EventTile_line, .mx_EventTile_reply { .mx_EventTile_line, .mx_EventTile_reply {