From 67cace7de7e8674a0c916bf47836c0f60becb651 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 9 Jun 2022 12:31:38 +0000 Subject: [PATCH] Move style rules for EventTile on ThreadView from _ThreadPanel.scss to _EventTile.scss (#8689) --- res/css/views/right_panel/_ThreadPanel.scss | 70 +-------- res/css/views/rooms/_EventTile.scss | 166 ++++++++++++++------ 2 files changed, 116 insertions(+), 120 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index eccd2d7624..4199466d32 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -142,17 +142,10 @@ limitations under the License. } } + // For style rules of EventTile in a thread, see _EventTile.scss &.mx_ThreadView { max-height: 100%; - // Inside a thread timeline only - .mx_GenericEventListSummary { - &:not([data-layout=bubble]) > .mx_EventTile_line { - padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text - padding-inline-end: var(--ThreadView_group_spacing-end); // align summary text with message text - } - } - .mx_ThreadView_timelinePanelWrapper { position: relative; min-height: 0; // don't displace the composer @@ -207,67 +200,6 @@ limitations under the License. color: $secondary-content; } - &.mx_ThreadView .mx_EventTile { - // handling for hidden events (e.g reactions) in the thread view - - &:not([data-layout=bubble]) { - &: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-inline-start: 0; // Override - } - } - - &.mx_EventTile_info { - padding-top: 0; - - &.mx_EventTile_selected .mx_EventTile_line, - .mx_EventTile_line { - $line-height: $font-12px; - - padding-inline-start: 0; - line-height: $line-height; - - .mx_EventTile_content, - .mx_RedactedBody { - width: auto; - margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px); // 14px: avatar width, 6px: 20px - 14px - font-size: $line-height; - } - } - - &:not([data-layout=bubble]) { - .mx_MessageTimestamp { - top: 2px; // Align with avatar - } - - .mx_EventTile_avatar { - left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text - z-index: 9; // position above the hover styling - } - } - - &[data-layout=bubble] { - .mx_EventTile_avatar { - inset-inline-start: 0; - } - } - - .mx_EventTile_avatar { - position: absolute; - top: 1.5px; // Align with hidden event content - margin-top: 0; - margin-bottom: 0; - width: 14px; // avatar img size - height: 14px; // avatar img size - } - - .mx_ViewSourceEvent_toggle { - display: none; // hide the hidden event expand button, not enough space, view source can still be used - } - } - } - .mx_BaseCard_footer { text-align: left; font-size: $font-12px; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index dbad345f56..f28e08cbec 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -852,18 +852,19 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } +// For style rules of ThreadView, see _ThreadPanel.scss .mx_ThreadView { --ThreadView_group_spacing-start: 56px; // 56px: 64px - 8px (padding) --ThreadView_group_spacing-end: 8px; // same as padding - .mx_EventTile_roomName { - display: none; - } - .mx_EventTile { display: flex; flex-direction: column; + .mx_EventTile_roomName { + display: none; + } + .mx_EventTile_line { padding-top: var(--BaseCard_EventTile_line-padding-block); padding-bottom: var(--BaseCard_EventTile_line-padding-block); @@ -882,9 +883,65 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss font-size: $font-10px; } + // handling for hidden events (e.g reactions) in the thread view + &.mx_EventTile_info { + padding-top: 0; + + .mx_EventTile_avatar { + position: absolute; + top: 1.5px; // Align with hidden event content + margin-top: 0; + margin-bottom: 0; + width: 14px; // avatar img size + height: 14px; // avatar img size + } + + .mx_ViewSourceEvent_toggle { + display: none; // hide the hidden event expand button, not enough space, view source can still be used + } + + &.mx_EventTile_selected .mx_EventTile_line, + .mx_EventTile_line { + $line-height: $font-12px; + + padding-inline-start: 0; + line-height: $line-height; + + .mx_EventTile_content, + .mx_RedactedBody { + width: auto; + margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px); // 14px: avatar width, 6px: 20px - 14px + font-size: $line-height; + } + } + + &:not([data-layout=bubble]) { + .mx_MessageTimestamp { + top: 2px; // Align with avatar + } + + .mx_EventTile_avatar { + left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text + z-index: 9; // position above the hover styling + } + } + + &[data-layout=bubble] { + .mx_EventTile_avatar { + inset-inline-start: 0; + } + } + } + &:not([data-layout=bubble]) { padding-top: $spacing-16; + &: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-inline-start: 0; // Override + } + .mx_EventTile_line { padding-top: var(--BaseCard_EventTile_line-padding-block); padding-bottom: var(--BaseCard_EventTile_line-padding-block); @@ -915,73 +972,80 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } } - } - .mx_EventTile[data-layout=group] { - width: 100%; - - .mx_EventTile_content, - .mx_HiddenBody, - .mx_RedactedBody, - .mx_UnknownBody, - .mx_MPollBody, - .mx_MLocationBody, - .mx_ReplyChain_wrapper, - .mx_ReactionsRow { - margin-inline-start: var(--ThreadView_group_spacing-start); - margin-inline-end: var(--ThreadView_group_spacing-end); + &[data-layout=group] { + width: 100%; .mx_EventTile_content, .mx_HiddenBody, .mx_RedactedBody, - .mx_MImageBody { - margin: 0; - } - } - - .mx_ReplyChain_wrapper { + .mx_UnknownBody, + .mx_MPollBody, .mx_MLocationBody, - .mx_UnknownBody { // Error message inside ReplyTile - margin-inline: unset; - } - } - - .mx_EventTile_mediaLine { - // such as MImageBody - > div, - > span { + .mx_ReplyChain_wrapper, + .mx_ReactionsRow { margin-inline-start: var(--ThreadView_group_spacing-start); margin-inline-end: var(--ThreadView_group_spacing-end); + + .mx_EventTile_content, + .mx_HiddenBody, + .mx_RedactedBody, + .mx_MImageBody { + margin: 0; + } } - // such as MAudioBody and MFileBody - > span { - display: block; // Apply the margin declarations to span element + .mx_ReplyChain_wrapper { + .mx_MLocationBody, + .mx_UnknownBody { // Error message inside ReplyTile + margin-inline: unset; + } } - } - .mx_MessageTimestamp { - top: 2px; // Align with mx_EventTile_content - } + .mx_EventTile_mediaLine { + // such as MImageBody + > div, + > span { + margin-inline-start: var(--ThreadView_group_spacing-start); + margin-inline-end: var(--ThreadView_group_spacing-end); + } - .mx_EventTile_senderDetails { - display: flex; - align-items: center; - gap: $spacing-16; // gap between the avatar and the sender ID - padding-inline-start: $spacing-8; + // such as MAudioBody and MFileBody + > span { + display: block; // Apply the margin declarations to span element + } + } - a { - flex: 1; - min-width: unset; - max-width: 100%; + .mx_MessageTimestamp { + top: 2px; // Align with mx_EventTile_content + } + + .mx_EventTile_senderDetails { display: flex; align-items: center; + gap: $spacing-16; // gap between the avatar and the sender ID + padding-inline-start: $spacing-8; - .mx_DisambiguatedProfile { - margin-left: 8px; + a { flex: 1; + min-width: unset; + max-width: 100%; + display: flex; + align-items: center; + + .mx_DisambiguatedProfile { + margin-left: 8px; + flex: 1; + } } } } } + + .mx_GenericEventListSummary { + &:not([data-layout=bubble]) > .mx_EventTile_line { + padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text + padding-inline-end: var(--ThreadView_group_spacing-end); // align summary text with message text + } + } }