From 5349f301da19b72dbc275d003fd25bc2dd985769 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 6 Jul 2022 10:44:23 +0000 Subject: [PATCH] Stop using :not() pseudo class for mx_GenericEventListSummary (#8944) * Stop using :not() pseudo class for mx_GenericEventListSummary Signed-off-by: Suguru Hirahara * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - icon-width Signed-off-by: Suguru Hirahara * Use a CSS variable for mx_GenericEventListSummary on _EventTile.scss - right-padding Signed-off-by: Suguru Hirahara * Move declarations for EventTile_line of GenericEventListSummary for IRC layout from _IRCLayout.scss to _EventTile.scss Signed-off-by: Suguru Hirahara * Move mx_EventTile_line out of mx_GenericEventListSummary:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara * Move common style rules up Signed-off-by: Suguru Hirahara * Set zero inline start padding to mx_EventTile_line of info tile of mx_GenericEventListSummary_unstyledList on IRC layout There should not be spacing between avatars and info tile line on IRC Layout Signed-off-by: Suguru Hirahara * Apply the rule to group/modern layout only Signed-off-by: Suguru Hirahara * Apply the inline start padding to modern/group layout only Overriding $left-gutter is not necessary for IRC layout Signed-off-by: Suguru Hirahara * Merge the style block for mx_EventTile_info .mx_EventTile_line Signed-off-by: Suguru Hirahara * Remove padding from info event tile line from mx_GenericEventListSummary on IRC layout Signed-off-by: Suguru Hirahara * Add spacing between avatar and a single info event tile line on IRC layout Signed-off-by: Suguru Hirahara * Stop using :not() pseudo class for mx_GenericEventListSummary on TimelineCard Signed-off-by: Suguru Hirahara * Fix padding of line with redacted body text Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_TimelineCard.scss | 13 +++--- res/css/views/rooms/_EventTile.scss | 45 ++++++++++++++++---- res/css/views/rooms/_IRCLayout.scss | 17 +++----- 3 files changed, 52 insertions(+), 23 deletions(-) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 6d608182cb5..d236ff46b11 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -149,11 +149,14 @@ limitations under the License. } } - .mx_GenericEventListSummary:not([data-layout=bubble]) { - .mx_EventTile_line, - > .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line { - padding-inline-start: var(--BaseCard_EventTile-spacing-inline); - padding-inline-end: var(--BaseCard_EventTile-spacing-inline); + .mx_GenericEventListSummary { + &[data-layout=irc], + &[data-layout=group] { + .mx_EventTile_line, + .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line { + padding-inline-start: var(--BaseCard_EventTile-spacing-inline); + padding-inline-end: var(--BaseCard_EventTile-spacing-inline); + } } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 4fc28d0bce7..9dc6b090b47 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -261,6 +261,10 @@ $left-gutter: 64px; &.mx_EventTile_continuation { padding-top: 0px !important; } + + &.mx_EventTile_info .mx_EventTile_line { + padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter + } } &[data-layout=bubble] { @@ -366,17 +370,42 @@ $left-gutter: 64px; } } -.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line { - padding-left: $left-gutter; +.mx_GenericEventListSummary { + &[data-layout=irc], + &[data-layout=group] { + .mx_EventTile_line .mx_RedactedBody { + line-height: 1; // remove spacing between lines + } + } - .mx_RedactedBody { - line-height: 1; // remove spacing between lines + &[data-layout=irc] { + .mx_EventTile_info .mx_EventTile_line { + padding-left: 0; // Override .mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line + } + + .mx_EventTile_line .mx_RedactedBody { + padding-left: 24px; // 25px - 1px + + &::before { + left: var(--right-padding); + } + } + + // Apply only collapsed events block + > .mx_EventTile_line { + padding-left: calc(var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding)); // 15 px of padding + } } -} -.mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line, -.mx_GenericEventListSummary:not([data-layout=bubble]) > .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line { - padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter + &[data-layout=group] { + .mx_EventTile_line { + padding-left: $left-gutter; + } + + .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line { + padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter + } + } } .mx_EventTile_content { diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index dd4df6e296c..7a6a618324a 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -14,12 +14,12 @@ See the License for the specific language governing permissions and limitations under the License. */ -$icon-width: 14px; -$right-padding: 5px; $irc-line-height: $font-18px; .mx_IRCLayout { --name-width: 70px; + --icon-width: 14px; + --right-padding: 5px; line-height: $irc-line-height !important; @@ -36,7 +36,7 @@ $irc-line-height: $font-18px; padding-top: 0; > * { - margin-right: $right-padding; + margin-right: var(--right-padding); } .mx_EventTile_msgOption { @@ -157,7 +157,7 @@ $irc-line-height: $font-18px; .mx_EventTile_emote { .mx_EventTile_avatar { - margin-left: calc(var(--name-width) + $icon-width + $right-padding); + margin-left: calc(var(--name-width) + var(--icon-width) + var(--right-padding)); } } @@ -165,18 +165,15 @@ $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_EventTile.mx_EventTile_info { .mx_EventTile_avatar { - left: calc(var(--name-width) + 10px + $icon-width); + left: calc(var(--name-width) + 10px + var(--icon-width)); top: 0; + margin-right: var(--right-padding); } .mx_EventTile_line { - left: calc(var(--name-width) + 10px + $icon-width); + left: calc(var(--name-width) + 10px + var(--icon-width)); } .mx_TextualEvent {