From 3a2aa9d96cea7bedeef51f2cacf89daca3bab434 Mon Sep 17 00:00:00 2001 From: Germain Date: Mon, 29 Nov 2021 10:58:34 +0000 Subject: [PATCH] Polish threads misalignments and UI diversion (#7209) --- res/css/views/rooms/_EventTile.scss | 62 +++++++++------------ src/components/structures/TimelinePanel.tsx | 2 +- src/components/views/rooms/EventTile.tsx | 19 +------ 3 files changed, 31 insertions(+), 52 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index be23146096..9b4d875b6b 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -113,16 +113,11 @@ $left-gutter: 64px; margin-right: 10px; } - &.mx_EventTile_selected > div > a > .mx_MessageTimestamp { - 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 $selected-message-border-width solid; - padding-left: calc($left-gutter - $selected-message-border-width); + box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $accent; background-color: $event-selected-color; } @@ -136,7 +131,7 @@ $left-gutter: 64px; } &.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line { - padding-left: calc($left-gutter + 18px - $selected-message-border-width); + padding-left: calc($left-gutter + 18px); } &.mx_EventTile:hover .mx_EventTile_line, @@ -218,28 +213,22 @@ $left-gutter: 64px; 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 { - padding-left: calc($left-gutter - $selected-message-border-width); - } - &:hover.mx_EventTile_verified .mx_EventTile_line { - border-left: $e2e-verified-color $selected-message-border-width solid; + box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $e2e-verified-color; } &:hover.mx_EventTile_unverified .mx_EventTile_line { - border-left: $e2e-unverified-color $selected-message-border-width solid; + box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $e2e-unverified-color; } &:hover.mx_EventTile_unknown .mx_EventTile_line { - border-left: $e2e-unknown-color $selected-message-border-width solid; + box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $e2e-unknown-color; } &: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 - $selected-message-border-width); + padding-left: calc($left-gutter + 18px + $selected-message-border-width); } /* End to end encryption stuff */ @@ -247,21 +236,6 @@ $left-gutter: 64px; opacity: 1; } - // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) - &: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(-$selected-message-border-width); - } - - // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) - &:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon, - &:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon, - &:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon { - display: block; - left: 41px; - } - .mx_MImageBody { margin-right: 34px; } @@ -808,7 +782,7 @@ $left-gutter: 64px; } .mx_MessageTimestamp { right: 0; - left: auto; + left: auto !important; top: -23px; } } @@ -851,7 +825,7 @@ $left-gutter: 64px; padding-top: 0; .mx_EventTile_line { - padding-left: $selected-message-border-width !important; + padding-left: 0; order: 10 !important; } @@ -860,6 +834,7 @@ $left-gutter: 64px; right: 2px !important; top: 1px !important; font-size: 1rem; + text-align: right; } .mx_ReactionsRow { @@ -872,9 +847,26 @@ $left-gutter: 64px; } .mx_EventTile_content, - .mx_RedactedBody { + .mx_RedactedBody, + .mx_ReplyChain_wrapper { margin-left: 36px; margin-right: 50px; + + .mx_EventTile_content, + .mx_RedactedBody, + .mx_MImageBody { + margin: 0; + } + } + + .mx_EventTile_mediaLine { + padding-left: 36px !important; + padding-right: 50px; + + .mx_MImageBody { + margin: 0; + padding: 0; + } } .mx_MessageComposer_sendMessage { diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx index f1b67c4f87..71d0775e41 100644 --- a/src/components/structures/TimelinePanel.tsx +++ b/src/components/structures/TimelinePanel.tsx @@ -507,7 +507,7 @@ class TimelinePanel extends React.Component { // (and user is active), switch timeout const timeout = this.readMarkerTimeout(rmPosition); // NO-OP when timeout already has set to the given value - this.readMarkerActivityTimer.changeTimeout(timeout); + this.readMarkerActivityTimer?.changeTimeout(timeout); }, READ_MARKER_DEBOUNCE_MS, { leading: false, trailing: true }); private onAction = (payload: ActionPayload): void => { diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 3ca0dafcfe..12ab121b9d 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1362,22 +1362,9 @@ export default class EventTile extends React.Component { > { linkedTimestamp } { this.renderE2EPadlock() } - { replyChain } - - { keyRequestInfo } +
+ { MessagePreviewStore.instance.generatePreviewForEvent(this.props.mxEvent) } +
{ this.renderThreadPanelSummary() }