From 9b54aba4c06eab89b494a777c8a77e3f14edd948 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Sun, 31 Jan 2021 11:11:34 +0100 Subject: [PATCH] fix timestamp width if there is a 2e2 indicator bar Signed-off-by: Michael Weimann --- res/css/_common.scss | 5 +++++ res/css/views/rooms/_EventTile.scss | 9 ++++----- res/css/views/rooms/_GroupLayout.scss | 2 +- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 87336a1c03..6e9d252659 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -21,6 +21,11 @@ limitations under the License. $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 { font-size: 10px; } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 429ac7ed4b..92b218e937 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -421,15 +421,15 @@ $left-gutter: 64px; } .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 { - 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 { - 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, @@ -447,8 +447,7 @@ $left-gutter: 64px; .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_unknown .mx_EventTile_line > a > .mx_MessageTimestamp { - left: 3px; - width: auto; + width: $MessageTimestamp_width_hover; } // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss index 50ef50110f..543e6ed685 100644 --- a/res/css/views/rooms/_GroupLayout.scss +++ b/res/css/views/rooms/_GroupLayout.scss @@ -34,7 +34,7 @@ $left-gutter: 64px; .mx_MessageTimestamp { position: absolute; - width: 46px; /* 8 + 30 (avatar) + 8 */ + width: $MessageTimestamp_width; } .mx_EventTile_line, .mx_EventTile_reply {