From 577239fff282e59d6b2ac65f1d5d7435a3e6af45 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 7 May 2022 18:15:42 +0900 Subject: [PATCH 1/2] Hide the verification left stroke only in the thread panel (ie. let it shown in a chat panel with a maximized widget) Respect the original comment that the stroke should be hidden in the thread list (and in a thread as well). Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 2 +- res/css/views/rooms/_EventTile.scss | 20 +++++++++++++++++--- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 9947a7575f0..db0b5098f22 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -201,7 +201,7 @@ limitations under the License. } &:hover .mx_EventTile_line { - box-shadow: unset !important; // don't show the verification left stroke in the thread list + box-shadow: inherit; // let the verification left stroke shown in the chat panel with a maximized widget } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 6f2fb704983..d456e510364 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -723,12 +723,22 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss flex-flow: wrap; align-items: center; - &:hover, - // To cancel "&.mx_EventTile:hover .mx_EventTile_line" - &:not([data-layout=bubble]):hover .mx_EventTile_line { + &:hover { background-color: $system; } + // To cancel "&.mx_EventTile:hover .mx_EventTile_line" + &:not([data-layout=bubble]):hover { + .mx_EventTile_line { + background-color: $system; + } + + // Override .mx_EventTile:not([data-layout=bubble]):hover.mx_EventTile_verified .mx_EventTile_line + &.mx_EventTile_verified .mx_EventTile_line { + box-shadow: none; // don't show the verification left stroke in the thread list (data-shape=ThreadsList) + } + } + &::after { content: ""; position: absolute; @@ -850,6 +860,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss &:not([data-layout=bubble]) { padding-top: $spacing-16; + + &:hover .mx_EventTile_line { + box-shadow: none; // don't show the verification left stroke in a thread (mx_ThreadView) + } } } From 5973d82558e5379d48816311fda9bdfcff8cf663 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 10 May 2022 23:35:31 +0900 Subject: [PATCH 2/2] Display the left stroke inside a thread Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 4 ---- res/css/views/rooms/_EventTile.scss | 20 +++++--------------- 2 files changed, 5 insertions(+), 19 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index db0b5098f22..043e2444b1c 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -199,10 +199,6 @@ limitations under the License. .mx_EventTile_e2eIcon { left: 8px; } - - &:hover .mx_EventTile_line { - box-shadow: inherit; // let the verification left stroke shown in the chat panel with a maximized widget - } } .mx_MessageComposer { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index d456e510364..dc703692f9d 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -723,20 +723,14 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss flex-flow: wrap; align-items: center; - &:hover { + &:hover, + // Override .mx_EventTile:not([data-layout=bubble]).mx_EventTile:hover .mx_EventTile_line + &:not([data-layout=bubble]):hover .mx_EventTile_line { background-color: $system; } - // To cancel "&.mx_EventTile:hover .mx_EventTile_line" - &:not([data-layout=bubble]):hover { - .mx_EventTile_line { - background-color: $system; - } - - // Override .mx_EventTile:not([data-layout=bubble]):hover.mx_EventTile_verified .mx_EventTile_line - &.mx_EventTile_verified .mx_EventTile_line { - box-shadow: none; // don't show the verification left stroke in the thread list (data-shape=ThreadsList) - } + &:not([data-layout=bubble]):hover .mx_EventTile_line { + box-shadow: none; // don't show the verification left stroke in the thread list } &::after { @@ -860,10 +854,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss &:not([data-layout=bubble]) { padding-top: $spacing-16; - - &:hover .mx_EventTile_line { - box-shadow: none; // don't show the verification left stroke in a thread (mx_ThreadView) - } } }