From 56258bcdb6b28b60e759ce475806c9af4fab3629 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 7 Jul 2022 12:01:37 +0000 Subject: [PATCH] Improve _GenericEventListSummary.scss (#9005) * Include mx_BaseAvatar Signed-off-by: Suguru Hirahara * Include style blocks of mx_MatrixChat_useCompactLayout Signed-off-by: Suguru Hirahara * yarn run lint:style --fix Signed-off-by: Suguru Hirahara * Set top padding to avatars on group layout only Signed-off-by: Suguru Hirahara * Remove a redundant declaration for bubble layout Signed-off-by: Suguru Hirahara * Set the same margin value to mx_GenericEventListSummary_avatars on every layout Signed-off-by: Suguru Hirahara * Remove margin-top from mx_GenericEventListSummary_toggle on IRC layout Signed-off-by: Suguru Hirahara * Remove block margin from mx_GenericEventListSummary_toggle on both IRC layout and modern layout Signed-off-by: Suguru Hirahara * Set spacing to mx_GenericEventListSummary instead of its child elements Signed-off-by: Suguru Hirahara * Apply the margin to every layout Signed-off-by: Suguru Hirahara * Move general rules up Signed-off-by: Suguru Hirahara * Apply block margin to mx_GenericEventListSummary_toggle of every layout Signed-off-by: Suguru Hirahara * Apply top margin to modern layout Signed-off-by: Suguru Hirahara * Include mx_MatrixChat_useCompactLayout Signed-off-by: Suguru Hirahara * Set top margin to mx_GenericEventListSummary insted of toggle Signed-off-by: Suguru Hirahara * Use a spacing variable Signed-off-by: Suguru Hirahara * Remove a redundant declaration Signed-off-by: Suguru Hirahara * Add a comment Signed-off-by: Suguru Hirahara * Apply display flex as a default value Signed-off-by: Suguru Hirahara --- .../elements/_GenericEventListSummary.scss | 89 ++++++++----------- 1 file changed, 38 insertions(+), 51 deletions(-) diff --git a/res/css/views/elements/_GenericEventListSummary.scss b/res/css/views/elements/_GenericEventListSummary.scss index a3bbd13663d..11963af423d 100644 --- a/res/css/views/elements/_GenericEventListSummary.scss +++ b/res/css/views/elements/_GenericEventListSummary.scss @@ -17,31 +17,45 @@ limitations under the License. .mx_GenericEventListSummary { position: relative; + .mx_GenericEventListSummary_avatars { + margin-right: $spacing-8; + } + &[data-layout=irc], &[data-layout=group] { .mx_GenericEventListSummary_toggle { float: right; - margin: 8px 10px 0 0; - } - - .mx_GenericEventListSummary_avatars { - padding-top: $spacing-8; + margin-inline: 0 10px; } } - &[data-layout=irc] { - .mx_GenericEventListSummary_avatars { - padding: 0; - margin: 0 9px 0 0; - } + &[data-layout=group] { + margin-top: $spacing-8; } &[data-layout=bubble] { --maxWidth: 70%; + display: flex; margin-left: calc(var(--avatarSize) + var(--gutterSize)); + .mx_GenericEventListSummary_toggle { + margin-block: 0; + + &[aria-expanded=false] { + order: 9; // TODO: Remove + } + + &[aria-expanded=true] { + margin-inline-start: auto; // reduce clickable area + margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin + } + } + + .mx_GenericEventListSummary_line { + display: none; + } + &[data-expanded=false] { - display: flex; align-items: center; justify-content: space-between; column-gap: 5px; @@ -50,7 +64,6 @@ limitations under the License. // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but // that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse. &[data-expanded=true] { - display: flex; flex-direction: column; margin: 0; } @@ -65,26 +78,22 @@ limitations under the License. background: transparent; } } + } - .mx_GenericEventListSummary_toggle { - margin-block: 0; - - &[aria-expanded=false] { - order: 9; - } + .mx_MatrixChat_useCompactLayout & { + font-size: $font-13px; + margin-top: $spacing-4; - &[aria-expanded=true] { - margin-inline-start: auto; // reduce clickable area - margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin - } + .mx_EventTile_line { + line-height: $font-20px; } .mx_GenericEventListSummary_line { - display: none; + line-height: $font-22px; } - .mx_GenericEventListSummary_avatars { - padding-top: 0; + .mx_TextualEvent.mx_GenericEventListSummary_summary { + font-size: $font-13px; } } } @@ -101,13 +110,12 @@ limitations under the License. .mx_GenericEventListSummary_avatars { display: inline-block; - margin-right: 8px; line-height: $font-12px; -} -.mx_GenericEventListSummary_avatars .mx_BaseAvatar { - margin-right: -4px; - cursor: pointer; + .mx_BaseAvatar { + margin-right: -4px; + cursor: pointer; + } } .mx_GenericEventListSummary_line { @@ -115,24 +123,3 @@ limitations under the License. margin-left: 63px; line-height: $font-30px; } - -.mx_MatrixChat_useCompactLayout { - .mx_GenericEventListSummary { - font-size: $font-13px; - .mx_EventTile_line { - line-height: $font-20px; - } - } - - .mx_GenericEventListSummary_line { - line-height: $font-22px; - } - - .mx_GenericEventListSummary_toggle { - margin-top: 3px; - } - - .mx_TextualEvent.mx_GenericEventListSummary_summary { - font-size: $font-13px; - } -}