From 257104248032bdd8ab589645ae7bd7853009f13c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 28 Jun 2022 13:05:19 +0000 Subject: [PATCH] Move style rules of GenericEventListSummary from _EventBubbleTile.scss to _GenericEventListSummary.scss (#8713) * Move declarations of mx_GenericEventListSummary to _GenericEventListSummary.scss Signed-off-by: Suguru Hirahara * Move declarations of mx_GenericEventListSummary[data-expanded=false] to _GenericEventListSummary.scss Signed-off-by: Suguru Hirahara * Move declarations of mx_GenericEventListSummary[data-expanded=true] to _GenericEventListSummary.scss Signed-off-by: Suguru Hirahara * de-nestify style rules Signed-off-by: Suguru Hirahara * Remove a padding declaration for _EventBubbleTile.scss to set correct cascading order Signed-off-by: Suguru Hirahara * GenericEventListSummary_toggle for ':not([data-layout=bubble])' Stop setting margin values as default ones Signed-off-by: Suguru Hirahara * GenericEventListSummary_avatars for ':not([data-layout=bubble])' Signed-off-by: Suguru Hirahara * Extract flexbox declarations into _GenericEventListSummary.scss Signed-off-by: Suguru Hirahara * Move declarations of '&[data-layout=bubble]' up Signed-off-by: Suguru Hirahara * Extract background color into _GenericEventListSummary.scss Signed-off-by: Suguru Hirahara * Merge style rules of background of EventTile_bad Signed-off-by: Suguru Hirahara * Move .mx_GenericEventListSummary_avatars block from _IRCLayout.scsss to _GenericEventListSummary.scss Signed-off-by: Suguru Hirahara * de-nestify style rules Signed-off-by: Suguru Hirahara * Stop using :not() pseudo class Signed-off-by: Suguru Hirahara --- .../elements/_GenericEventListSummary.scss | 74 ++++++++++- res/css/views/rooms/_EventBubbleTile.scss | 120 ++++++------------ res/css/views/rooms/_EventTile.scss | 10 +- res/css/views/rooms/_IRCLayout.scss | 11 +- 4 files changed, 113 insertions(+), 102 deletions(-) diff --git a/res/css/views/elements/_GenericEventListSummary.scss b/res/css/views/elements/_GenericEventListSummary.scss index bb57408fde..2924af12cf 100644 --- a/res/css/views/elements/_GenericEventListSummary.scss +++ b/res/css/views/elements/_GenericEventListSummary.scss @@ -16,6 +16,76 @@ limitations under the License. .mx_GenericEventListSummary { position: relative; + + &[data-layout=irc], + &[data-layout=group] { + .mx_GenericEventListSummary_toggle { + float: right; + margin: 8px 10px 0 0; + } + + .mx_GenericEventListSummary_avatars { + padding-top: $spacing-8; + } + } + + &[data-layout=irc] { + .mx_GenericEventListSummary_avatars { + padding: 0; + margin: 0 9px 0 0; + } + } + + &[data-layout=bubble] { + --maxWidth: 70%; + margin-left: calc(var(--avatarSize) + var(--gutterSize)); + + &[data-expanded=false] { + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0 49px; // Align with left edge of bubble tiles + } + + // 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; + } + + &::after { + content: ""; + clear: both; + } + + &:hover { + &::before { + background: transparent; + } + } + + .mx_GenericEventListSummary_toggle { + margin: 0 55px 0 5px; + + &[aria-expanded=false] { + order: 9; + } + + &[aria-expanded=true] { + text-align: right; + } + } + + .mx_GenericEventListSummary_line { + display: none; + } + + .mx_GenericEventListSummary_avatars { + padding-top: 0; + } + } } .mx_GenericEventListSummary_unstyledList { @@ -31,7 +101,6 @@ limitations under the License. .mx_GenericEventListSummary_avatars { display: inline-block; margin-right: 8px; - padding-top: 8px; line-height: $font-12px; } @@ -43,9 +112,6 @@ limitations under the License. .mx_GenericEventListSummary_toggle { color: $accent; cursor: pointer; - float: right; - margin-right: 10px; - margin-top: 8px; } .mx_GenericEventListSummary_line { diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 9cbad9fa4f..285f16788b 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -489,6 +489,12 @@ limitations under the License. } &.mx_EventTile_bad { + &:hover { + &::before { + background: transparent; + } + } + /* Special layout scenario for "Unable To Decrypt (UTD)" events */ .mx_EventTile_line { display: grid; @@ -588,6 +594,15 @@ limitations under the License. } } +.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble], +.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble], +.mx_EventTile.mx_EventTile_info[data-layout=bubble] { + padding: 5px 0; + display: flex; + align-items: center; + justify-content: flex-start; +} + .mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble], .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble], .mx_EventTile.mx_EventTile_info[data-layout=bubble], @@ -595,11 +610,6 @@ limitations under the License. --backgroundColor: transparent; --gutterSize: 0; - display: flex; - align-items: center; - justify-content: flex-start; - padding: 5px 0; - .mx_EventTile_avatar { position: static; order: -1; @@ -634,90 +644,34 @@ limitations under the License. } .mx_GenericEventListSummary[data-layout=bubble] { - --maxWidth: 70%; - margin-left: calc(var(--avatarSize) + var(--gutterSize)); + .mx_EventTile.mx_EventTile_info .mx_EventTile_line { + // Avoid overflow of event info by cancelling width settings + width: 100%; + min-width: 0; + max-width: 100%; + } - .mx_GenericEventListSummary_toggle { - margin: 0 55px 0 5px; - float: none; + // increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button + &[data-expanded=false] + .mx_EventTile[data-layout=bubble][data-self=true] { + margin-top: 20px; + } - &[aria-expanded=false] { - order: 9; + &[data-expanded=true] .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 + inset-inline-end: 48px; // align with that of right-column bubbles } - &[aria-expanded=true] { - text-align: right; + + .mx_ReadReceiptGroup { + // match alignment to RRs of chat bubbles + inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 60px); } - } - .mx_GenericEventListSummary_line { - display: none; - } - - .mx_GenericEventListSummary_avatars { - padding-top: 0; - } - - .mx_EventTile { - &.mx_EventTile_info { - .mx_EventTile_line { - // Avoid overflow of event info by cancelling width settings - width: 100%; - min-width: 0; - max-width: 100%; - } - } - } - - /* events that do not require bubble layout */ - .mx_EventTile_line { - background: transparent; - } - - &:hover { &::before { - background: transparent; - } - } - - &::after { - content: ""; - clear: both; - } - - &[data-expanded=false] { - // Align with left edge of bubble tiles - padding: 0 49px; - - // 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; - } - } - - // 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 - inset-inline-end: 48px; // align with that of right-column bubbles - } - - .mx_ReadReceiptGroup { - // match alignment to RRs of chat bubbles - inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 60px); - } - - &::before { - inset-inline-end: 0; // match alignment of the hover background to that of chat bubbles - } + inset-inline-end: 0; // match alignment of the hover background to that of chat bubbles } } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 691cb32f6f..fdec5e6e24 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -307,13 +307,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } -.mx_GenericEventListSummary:not([data-layout=bubble]) { - .mx_EventTile_line { - padding-left: $left-gutter; +.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line { + padding-left: $left-gutter; - .mx_RedactedBody { - line-height: 1; // remove spacing between lines - } + .mx_RedactedBody { + line-height: 1; // remove spacing between lines } } diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index f7748b8609..36b06d8cc2 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -120,15 +120,8 @@ $irc-line-height: $font-18px; margin: 0; } - .mx_GenericEventListSummary { - > .mx_EventTile_line { - padding-left: calc(var(--name-width) + $icon-width + $MessageTimestamp_width + 3 * $right-padding); // 15 px of padding - } - - .mx_GenericEventListSummary_avatars { - padding: 0; - margin: 0 9px 0 0; - } + .mx_GenericEventListSummary > .mx_EventTile_line { + padding-left: calc(var(--name-width) + $icon-width + $MessageTimestamp_width + 3 * $right-padding); // 15 px of padding } .mx_EventTile.mx_EventTile_info {