From 228abb6f076c36ff6b97247c04fe0a4363ad67dc Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 3 Jun 2022 06:45:10 +0000 Subject: [PATCH] Move style rules of MatrixChat_useCompactLayout from _GroupLayout.scss to _EventTile.scss and _RoomView.scss (#8725) * Move mx_RoomView_MessageList h2 block from _GroupLayout.scss to _RoomView.scss Signed-off-by: Suguru Hirahara * Move mx_MatrixChat_useCompactLayout block from _GroupLayout.scss to _EventTile.scss This block is not related to the group layout. Signed-off-by: Suguru Hirahara * Include EventTile_continuation block in EventTile_emote Signed-off-by: Suguru Hirahara * Use logical properties for the padding values Signed-off-by: Suguru Hirahara * Sort declarations for maintainability - EventTile_avatar - EventTile_line - EventTile_reply Signed-off-by: Suguru Hirahara * yarn run lint:style --fix Signed-off-by: Suguru Hirahara * Separate selectors of .markdown-body Signed-off-by: Suguru Hirahara --- res/css/structures/_RoomView.scss | 4 ++ res/css/views/rooms/_EventTile.scss | 80 ++++++++++++++++++++++++++ res/css/views/rooms/_GroupLayout.scss | 82 --------------------------- 3 files changed, 84 insertions(+), 82 deletions(-) diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index eba8ae8f6e..b19173a313 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -272,6 +272,10 @@ hr.mx_RoomView_myReadMarker { .mx_MatrixChat_useCompactLayout { .mx_RoomView_MessageList { margin-bottom: 4px; + + h2 { + margin-top: 6px; // TODO: Use a spacing variable + } } .mx_RoomView_statusAreaBox { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 3f2a1fbf19..13eb3c27df 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -610,6 +610,86 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } +/* Compact layout overrides */ + +.mx_MatrixChat_useCompactLayout { + .mx_EventTile { + padding-top: $spacing-4; + + &.mx_EventTile_info { + padding-top: 0; // same as the padding for non-compact .mx_EventTile.mx_EventTile_info + font-size: $font-13px; + + .mx_EventTile_avatar { + top: 4px; + } + + .mx_EventTile_line, + .mx_EventTile_reply { + line-height: $font-20px; + } + } + + &.mx_EventTile_emote { + padding-top: $spacing-8; // add a bit more space for emotes so that avatars don't collide + + &.mx_EventTile_continuation { + padding-top: 0; + + .mx_EventTile_line, + .mx_EventTile_reply { + padding-block: 0; + } + } + + .mx_EventTile_avatar { + top: 2px; + } + + .mx_EventTile_line, + .mx_EventTile_reply { + padding-top: 0px; + padding-bottom: 1px; + } + } + + .mx_EventTile_avatar { + top: 2px; + } + + .mx_EventTile_line, + .mx_EventTile_reply { + padding-block: 0; + } + + .mx_EventTile_e2eIcon { + top: 3px; + } + + .mx_DisambiguatedProfile { + font-size: $font-13px; + } + + .mx_ReadReceiptGroup { + // This aligns the avatar with the last line of the + // message. We want to move it one line up - 2rem + top: -2rem; + } + + .mx_EventTile_content .markdown-body { + p, + ul, + ol, + dl, + blockquote, + pre, + table { + margin-bottom: $spacing-4; // 1/4 of the non-compact margin-bottom + } + } + } +} + /* end of overrides */ .mx_EventTile_keyRequestInfo { diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss index 86c0eb176e..aab8781254 100644 --- a/res/css/views/rooms/_GroupLayout.scss +++ b/res/css/views/rooms/_GroupLayout.scss @@ -46,85 +46,3 @@ $left-gutter: 64px; } } } - -/* Compact layout overrides */ - -.mx_MatrixChat_useCompactLayout { - .mx_EventTile { - padding-top: 4px; - - .mx_EventTile_line, - .mx_EventTile_reply { - padding-top: 0; - padding-bottom: 0; - } - - &.mx_EventTile_info { - // same as the padding for non-compact .mx_EventTile.mx_EventTile_info - padding-top: 0px; - font-size: $font-13px; - - .mx_EventTile_line, - .mx_EventTile_reply { - line-height: $font-20px; - } - - .mx_EventTile_avatar { - top: 4px; - } - } - - .mx_DisambiguatedProfile { - font-size: $font-13px; - } - - &.mx_EventTile_emote { - // add a bit more space for emotes so that avatars don't collide - padding-top: 8px; - - .mx_EventTile_avatar { - top: 2px; - } - - .mx_EventTile_line, - .mx_EventTile_reply { - padding-top: 0px; - padding-bottom: 1px; - } - } - - &.mx_EventTile_emote.mx_EventTile_continuation { - padding-top: 0; - - .mx_EventTile_line, - .mx_EventTile_reply { - padding-top: 0px; - padding-bottom: 0px; - } - } - - .mx_EventTile_avatar { - top: 2px; - } - - .mx_EventTile_e2eIcon { - top: 3px; - } - - .mx_ReadReceiptGroup { - // This aligns the avatar with the last line of the - // message. We want to move it one line up - 2rem - top: -2rem; - } - - .mx_EventTile_content .markdown-body { - p, ul, ol, dl, blockquote, pre, table { - margin-bottom: 4px; // 1/4 of the non-compact margin-bottom - } - } - } - - .mx_RoomView_MessageList h2 { - margin-top: 6px; - } -}