From bb4684698123b473781e40de459d8614f014ada6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 18 May 2022 13:08:39 +0000 Subject: [PATCH] Set common horizontal spacing rules for EventTile on the right panel (#8528) * Remove an obsolete override against .mx_EventTile_line - Move &[data-layout=bubble] under mx_ThreadView - Use variables for .mx_NewRoomIntro - Move the variable to BaseCard Signed-off-by: Suguru Hirahara * Use --ThreadView_group_spacing-end variable Signed-off-by: Suguru Hirahara * Apply GenericEventListSummary rules to ThreadView only This commit stops those declarations from being applied to TimelineCard, which is also applied with mx_ThreadPanel class name. Signed-off-by: Suguru Hirahara * Nesting - mx_GenericEventListSummary:not([data-layout=bubble]) Signed-off-by: Suguru Hirahara * yarn run lint:style --fix Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_BaseCard.scss | 1 + res/css/views/right_panel/_ThreadPanel.scss | 32 ++++++++-------- res/css/views/right_panel/_TimelineCard.scss | 24 ++++++------ res/css/views/rooms/_EventTile.scss | 39 ++++++++++---------- 4 files changed, 48 insertions(+), 48 deletions(-) diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index 52dd99562c..db492a0825 100644 --- a/res/css/views/right_panel/_BaseCard.scss +++ b/res/css/views/right_panel/_BaseCard.scss @@ -16,6 +16,7 @@ limitations under the License. .mx_BaseCard { --BaseCard_EventTile_line-padding-block: 2px; + --BaseCard_EventTile-spacing-horizontal: 36px; padding: 0 8px; overflow: hidden; diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index bab7c2e608..1cfbdd420a 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -139,13 +139,23 @@ limitations under the License. } } - &.mx_ThreadView .mx_ThreadView_timelinePanelWrapper { - position: relative; - min-height: 0; // don't displace the composer - flex-grow: 1; + &.mx_ThreadView { + // Inside a thread timeline only + .mx_GenericEventListSummary { + &:not([data-layout=bubble]) > .mx_EventTile_line { + padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text + padding-inline-end: var(--ThreadView_group_spacing-end); // align summary text with message text + } + } - .mx_FileDropTarget { - border-radius: 8px; + .mx_ThreadView_timelinePanelWrapper { + position: relative; + min-height: 0; // don't displace the composer + flex-grow: 1; + + .mx_FileDropTarget { + border-radius: 8px; + } } } @@ -191,16 +201,6 @@ limitations under the License. } } - .mx_GenericEventListSummary { - &[data-layout=bubble] > .mx_EventTile_line { - padding-left: 30px !important; // Override main timeline styling - align summary text with message text - } - - &:not([data-layout=bubble]) > .mx_EventTile_line { - padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text - } - } - .mx_MessageComposer { background-color: $background; border-radius: 8px; diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 6b4c0d2361..f87e58a856 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -43,8 +43,8 @@ limitations under the License. } .mx_NewRoomIntro { - margin-inline-start: 36px; // TODO: Use a variable - margin-inline-end: 36px; // TODO: Use a variable + margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal); + margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal); } .mx_EventTile_content { @@ -52,13 +52,8 @@ limitations under the License. } .mx_EventTile:not([data-layout="bubble"]) { - $left-gutter: 36px; - .mx_EventTile_line { - padding-inline-start: $left-gutter; - padding-inline-end: 36px; - padding-top: var(--BaseCard_EventTile_line-padding-block); - padding-bottom: var(--BaseCard_EventTile_line-padding-block); + padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-horizontal); .mx_EventTile_e2eIcon { inset-inline-start: 8px; @@ -68,7 +63,7 @@ limitations under the License. .mx_DisambiguatedProfile, .mx_ReactionsRow, .mx_ThreadSummary { - margin-inline-start: $left-gutter; + margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal); } .mx_ReactionsRow { @@ -101,7 +96,7 @@ limitations under the License. &.mx_EventTile_info { .mx_EventTile_line { - padding-left: $left-gutter; + padding-left: var(--BaseCard_EventTile-spacing-horizontal); } .mx_EventTile_avatar { @@ -118,9 +113,12 @@ limitations under the License. } } - .mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line, - .mx_GenericEventListSummary:not([data-layout=bubble]) > .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line { - padding-left: 36px; + .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-horizontal); + padding-inline-end: var(--BaseCard_EventTile-spacing-horizontal); + } } .mx_ReadReceiptGroup { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 5a832bb333..83a906e129 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -839,6 +839,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_ThreadView { --ThreadView_group_spacing-start: 56px; // 56px: 64px - 8px (padding) + --ThreadView_group_spacing-end: 8px; // same as padding display: flex; flex-direction: column; @@ -882,26 +883,26 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss padding-bottom: var(--BaseCard_EventTile_line-padding-block); } } - } - .mx_EventTile[data-layout=bubble] { - margin-left: 36px; - margin-right: 36px; - - .mx_EventTile_line.mx_EventTile_mediaLine { - padding: 0 !important; - max-width: 100%; - - .mx_MFileBody { - width: 100%; - } - } - - &[data-self=true] { - align-items: flex-end; + &[data-layout=bubble] { + margin-inline-start: var(--BaseCard_EventTile-spacing-horizontal); + margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal); .mx_EventTile_line.mx_EventTile_mediaLine { - margin: 0 -13px 0 0; // align with normal messages + padding: 0 !important; + max-width: 100%; + + .mx_MFileBody { + width: 100%; + } + } + + &[data-self=true] { + align-items: flex-end; + + .mx_EventTile_line.mx_EventTile_mediaLine { + margin: 0 -13px 0 0; // align with normal messages + } } } } @@ -918,7 +919,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_ReplyChain_wrapper, .mx_ReactionsRow { margin-inline-start: var(--ThreadView_group_spacing-start); - margin-right: 8px; + margin-inline-end: var(--ThreadView_group_spacing-end); .mx_EventTile_content, .mx_HiddenBody, @@ -965,7 +966,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } .mx_EventTile_mediaLine { - padding-left: 36px; + padding-inline-start: var(--BaseCard_EventTile-spacing-horizontal); padding-right: 50px; .mx_MImageBody {