From c175263fd7a935d65dc4c665dacbcb8443919adf Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 12 Jul 2022 13:40:19 +0000 Subject: [PATCH] Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) (#8994) * Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara * Move style rules for avatar and E2E icon of mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group] Signed-off-by: Suguru Hirahara * Use variables Signed-off-by: Suguru Hirahara * Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) for both IRC and modern layout Signed-off-by: Suguru Hirahara * Apply the style rule for mx_MessageTimestamp on info event tile line to group layout only Signed-off-by: Suguru Hirahara * Apply zero padding-top to modern/group layout only (IRC layout has zero padding by default) Signed-off-by: Suguru Hirahara * Apply avatar position settings to modern/group layout only Signed-off-by: Suguru Hirahara * Maintain the style block for avatar on info event tile in IRC layout on _EventTile.scss Signed-off-by: Suguru Hirahara * Remove obsolete style block Signed-off-by: Suguru Hirahara * Remove inline padding setting from mx_EventTile_line Signed-off-by: Suguru Hirahara * Use a correct variable Signed-off-by: Suguru Hirahara * Fix misalignment of avatars and textual events on IRC layout Signed-off-by: Suguru Hirahara * Align avatars and hidden events on IRC layout Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 73 ++++++++++++++++------------- res/css/views/rooms/_IRCLayout.scss | 12 ++--- 2 files changed, 45 insertions(+), 40 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index d8da3117bd..d7cc99c7c5 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -207,6 +207,12 @@ $left-gutter: 64px; } } + &.mx_EventTile_info { + .mx_EventTile_e2eIcon { + top: 0; + } + } + &.mx_EventTile_continuation .mx_EventTile_line { clear: both; } @@ -267,6 +273,15 @@ $left-gutter: 64px; padding-inline-start: calc($selected-message-border-width + var(--EditMessageComposer-padding-inline)); } } + + &.mx_EventTile_info { + .mx_EventTile_avatar { + left: var(--EventTile_irc_line_info-inset-inline-start); + top: 0; + margin-right: var(--right-padding); + padding-block: var(--EventTile_irc_line-padding-block); + } + } } &[data-layout=group] { @@ -338,8 +353,31 @@ $left-gutter: 64px; padding-top: 0px !important; } - &.mx_EventTile_info .mx_EventTile_line { - padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter + &.mx_EventTile_info { + $spacing-block-start: 3px; + $spacing-block-end: 2px; + + padding-top: 0; + + .mx_EventTile_avatar, + .mx_EventTile_e2eIcon { + margin: $spacing-block-start 0 $spacing-block-end; + } + + .mx_EventTile_avatar { + top: initial; + inset-inline-start: $left-gutter; + height: 14px; + } + + .mx_EventTile_line { + padding-block: $spacing-block-start $spacing-block-end; + padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px); // 20px: avatar area + + .mx_MessageTimestamp { + top: 0; + } + } } &:hover { @@ -370,33 +408,6 @@ $left-gutter: 64px; font-size: $font-14px; position: relative; - &.mx_EventTile_info { - padding-top: 0; - - .mx_EventTile_avatar, - .mx_EventTile_e2eIcon { - margin: 3px 0 2px; // Align with mx_EventTile_line - } - - .mx_EventTile_e2eIcon { - top: 0; - } - - .mx_EventTile_avatar { - top: initial; - inset-inline-start: $left-gutter; - height: 14px; - } - - .mx_EventTile_line { - padding-block: 3px 2px; // Align with mx_EventTile_avatar and mx_EventTile_e2eIcon - - .mx_MessageTimestamp { - top: 0; - } - } - } - /* this is used for the tile for the event which is selected via the URL. * TODO: ultimately we probably want some transition on here. */ @@ -425,10 +436,6 @@ $left-gutter: 64px; } &[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 diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index e6b6fcbfb3..cc358d212e 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -24,6 +24,8 @@ $irc-line-height: $font-18px; line-height: $irc-line-height !important; .mx_EventTile { + --EventTile_irc_line-padding-block: 1px; + // timestamps are links which shouldn't be underlined > a { text-decoration: none; @@ -129,10 +131,11 @@ $irc-line-height: $font-18px; .mx_EventTile_line { .mx_EventTile_e2eIcon, .mx_TextualEvent, + .mx_ViewSourceEvent, .mx_MTextBody { display: inline-block; // add a 1px padding top and bottom because our larger emoji font otherwise gets cropped by anti-zalgo - padding: 1px 0; + padding: var(--EventTile_irc_line-padding-block) 0; } .mx_ReplyTile { @@ -162,16 +165,11 @@ $irc-line-height: $font-18px; } .mx_EventTile.mx_EventTile_info { - .mx_EventTile_avatar { - left: var(--EventTile_irc_line_info-inset-inline-start); - top: 0; - margin-right: var(--right-padding); - } - .mx_EventTile_line { left: var(--EventTile_irc_line_info-inset-inline-start); } + .mx_ViewSourceEvent, // For hidden events .mx_TextualEvent { line-height: $irc-line-height; }