From 9b92eca73d25fe86eb16adcf59b200c4f6e07eb5 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 18 May 2022 13:10:02 +0000 Subject: [PATCH] Organize rules of GenericEventListSummary on bubble layout (#8599) * Organize - data-expanded=false Signed-off-by: Suguru Hirahara * Organize - data-expanded=true Signed-off-by: Suguru Hirahara * Organize - EventTile Signed-off-by: Suguru Hirahara * Dedupe mx_GenericEventListSummary[data-layout=bubble] Signed-off-by: Suguru Hirahara * yarn run lint:style --fix Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.scss | 62 +++++++++++------------ 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index bbc4d3c53f..1625c3171a 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -606,42 +606,42 @@ limitations under the License. content: ""; clear: both; } -} -.mx_GenericEventListSummary[data-expanded=false][data-layout=bubble] { - // Align with left edge of bubble tiles - padding: 0 49px; -} + &[data-expanded=false] { + // Align with left edge of bubble tiles + padding: 0 49px; -// ideally we'd use display=contents here for the layout to all work regardless of the *ELS but -// that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse. -.mx_GenericEventListSummary[data-expanded=true][data-layout=bubble] { - display: flex; - flex-direction: column; - margin: 0; - - .mx_EventTile_info { - padding: 2px 0; - margin-right: 0; - - .mx_MessageActionBar { - inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar - right: 48px; // align with that of right-column bubbles - } - - .mx_ReadReceiptGroup { - right: -18px; // match alignment to RRs of chat bubbles - } - - &::before { - right: 0; // match alignment of the hover background to that of chat bubbles + // increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button + + .mx_EventTile[data-layout=bubble][data-self=true] { + margin-top: 20px; } } -} -// increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button -.mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] + .mx_EventTile[data-layout=bubble][data-self=true] { - margin-top: 20px; + // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but + // that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse. + &[data-expanded=true] { + display: flex; + flex-direction: column; + margin: 0; + + .mx_EventTile_info { + padding: 2px 0; + margin-right: 0; + + .mx_MessageActionBar { + inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar + right: 48px; // align with that of right-column bubbles + } + + .mx_ReadReceiptGroup { + right: -18px; // match alignment to RRs of chat bubbles + } + + &::before { + right: 0; // match alignment of the hover background to that of chat bubbles + } + } + } } /* events that do not require bubble layout */