From 0c1e72f6708e76c1121cb9c064126261a613aeb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 2 Aug 2021 10:52:38 +0200 Subject: [PATCH 1/4] Use a variable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_EventTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 5de9a9f9d10..362f8e52705 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -117,7 +117,7 @@ $hover-select-border: 4px; * TODO: ultimately we probably want some transition on here. */ &.mx_EventTile_selected > .mx_EventTile_line { - border-left: $accent-color 4px solid; + border-left: $accent-color $hover-select-border solid; padding-left: calc($left-gutter - $hover-select-border); background-color: $event-selected-color; } From 0c054f6dda396f0f87957f73ffac6d2e2044220e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 2 Aug 2021 11:09:02 +0200 Subject: [PATCH 2/4] Unify variables MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/_common.scss | 4 ++-- res/css/views/rooms/_EventTile.scss | 21 ++++++++++----------- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 6b4e109b3ac..6b795484462 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -21,10 +21,10 @@ limitations under the License. $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic -$EventTile_e2e_state_indicator_width: 4px; +$selected-message-border-width: 4px; $MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */ -$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width); +$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $selected-message-border-width); :root { font-size: 10px; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 362f8e52705..0fd42f92504 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -16,7 +16,6 @@ limitations under the License. */ $left-gutter: 64px; -$hover-select-border: 4px; .mx_EventTile:not([data-layout=bubble]) { max-width: 100%; @@ -110,15 +109,15 @@ $hover-select-border: 4px; } &.mx_EventTile_selected > div > a > .mx_MessageTimestamp { - left: calc(-$hover-select-border); + left: calc(-$selected-message-border-width); } /* this is used for the tile for the event which is selected via the URL. * TODO: ultimately we probably want some transition on here. */ &.mx_EventTile_selected > .mx_EventTile_line { - border-left: $accent-color $hover-select-border solid; - padding-left: calc($left-gutter - $hover-select-border); + border-left: $accent-color $selected-message-border-width solid; + padding-left: calc($left-gutter - $selected-message-border-width); background-color: $event-selected-color; } @@ -132,7 +131,7 @@ $hover-select-border: 4px; } &.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line { - padding-left: calc($left-gutter + 18px - $hover-select-border); + padding-left: calc($left-gutter + 18px - $selected-message-border-width); } &.mx_EventTile:hover .mx_EventTile_line, @@ -211,25 +210,25 @@ $hover-select-border: 4px; &:hover.mx_EventTile_verified .mx_EventTile_line, &:hover.mx_EventTile_unverified .mx_EventTile_line, &:hover.mx_EventTile_unknown .mx_EventTile_line { - padding-left: calc($left-gutter - $hover-select-border); + padding-left: calc($left-gutter - $selected-message-border-width); } &:hover.mx_EventTile_verified .mx_EventTile_line { - border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid; + border-left: $e2e-verified-color $selected-message-border-width solid; } &:hover.mx_EventTile_unverified .mx_EventTile_line { - border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid; + border-left: $e2e-unverified-color $selected-message-border-width solid; } &:hover.mx_EventTile_unknown .mx_EventTile_line { - border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid; + border-left: $e2e-unknown-color $selected-message-border-width solid; } &:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, &:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, &:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { - padding-left: calc($left-gutter + 18px - $hover-select-border); + padding-left: calc($left-gutter + 18px - $selected-message-border-width); } /* End to end encryption stuff */ @@ -241,7 +240,7 @@ $hover-select-border: 4px; &:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp, &:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp, &:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp { - left: calc(-$hover-select-border); + left: calc(-$selected-message-border-width); } // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) From 72290bc2d99c9889e1b5115da96bcf97203542c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 2 Aug 2021 11:26:39 +0200 Subject: [PATCH 3/4] Soften left border radius when hovering MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_EventTile.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 0fd42f92504..ee684aa9092 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -207,6 +207,11 @@ $left-gutter: 64px; overflow-y: hidden; } + &:hover .mx_EventTile_line { + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + &:hover.mx_EventTile_verified .mx_EventTile_line, &:hover.mx_EventTile_unverified .mx_EventTile_line, &:hover.mx_EventTile_unknown .mx_EventTile_line { From 17b0517bd16ac7a93e505511433adb93a3490628 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 2 Aug 2021 11:29:40 +0200 Subject: [PATCH 4/4] Soften left border on selected messages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_EventTile.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index ee684aa9092..92507a7e100 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -207,6 +207,7 @@ $left-gutter: 64px; overflow-y: hidden; } + &.mx_EventTile_selected .mx_EventTile_line, &:hover .mx_EventTile_line { border-top-left-radius: 4px; border-bottom-left-radius: 4px;