From c4460d8add9ee6622207b1b4740ccf1abbcfa033 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 18 Jun 2022 13:43:23 +0000 Subject: [PATCH] Move EventTile style rules of compact modern layout, enabling it on the right panel as well (#8766) --- res/css/_components.scss | 1 - res/css/structures/_RoomView.scss | 4 ++ res/css/views/rooms/_EventTile.scss | 84 +++++++++++++++++++++++ res/css/views/rooms/_GroupLayout.scss | 98 --------------------------- 4 files changed, 88 insertions(+), 99 deletions(-) delete mode 100644 res/css/views/rooms/_GroupLayout.scss diff --git a/res/css/_components.scss b/res/css/_components.scss index 4fb7901cd0b..c8a050088eb 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -241,7 +241,6 @@ @import "./views/rooms/_EntityTile.scss"; @import "./views/rooms/_EventBubbleTile.scss"; @import "./views/rooms/_EventTile.scss"; -@import "./views/rooms/_GroupLayout.scss"; @import "./views/rooms/_HistoryTile.scss"; @import "./views/rooms/_IRCLayout.scss"; @import "./views/rooms/_JumpToBottomButton.scss"; diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss index a3172e39d72..63c2a61bc9d 100644 --- a/res/css/structures/_RoomView.scss +++ b/res/css/structures/_RoomView.scss @@ -278,6 +278,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 91cb387e56c..6e730597056 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -1069,6 +1069,90 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } +// Cascading - compact modern layout on the main timeline and the right panel +.mx_MatrixChat_useCompactLayout { + .mx_EventTile { + // Override :not([data-layout="bubble"]) + &[data-layout=group] { + 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: $spacing-4; + } + + .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-top: 0; + padding-bottom: 0; + } + } + + .mx_EventTile_avatar { + top: 2px; + } + + .mx_EventTile_line, + .mx_EventTile_reply { + padding-top: 0; + padding-bottom: 1px; + } + } + + .mx_EventTile_avatar { + top: 2px; + } + + .mx_EventTile_line, + .mx_EventTile_reply { + padding-top: 0; + padding-bottom: 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 + } + } + } + } +} + // Media query for mobile UI @media only screen and (max-width: 480px) { .mx_EventTile_content { diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss deleted file mode 100644 index 01c4ff98f6f..00000000000 --- a/res/css/views/rooms/_GroupLayout.scss +++ /dev/null @@ -1,98 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2020 The Matrix.org Foundation C.I.C. - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -/* 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; - } -}