Set line-height: 1 to RedactedBody inside GenericEventListSummary for IRC/modern layout (#8529)

* Move line-height of .mx_EventTile_line from _GroupLayout.scss to _EventTile.scss

Specifying mx_EventTile_line's line-height in mx_GroupLayout is too strong for mx_GenericEventListSummary.

- Set line-height:1 to mx_RedactedBody inside mx_GenericEventListSummary on IRC/modern layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use a variable to remove the comment

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Readability

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
pull/28217/head
Suguru Hirahara 2022-05-09 06:27:13 +00:00 committed by GitHub
parent b1daf3fec2
commit ed086b0608
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 8 deletions

View File

@ -50,6 +50,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_EventTile_receiptSending::before {
mask-image: url('$(res)/img/element-icons/circle-sending.svg');
}
&[data-layout=group] {
.mx_EventTile_line {
line-height: var(--GroupLayout-EventTile-line-height);
}
}
}
.mx_EventTile:not([data-layout=bubble]) {
@ -263,8 +269,15 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}
}
.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
padding-left: $left-gutter;
.mx_GenericEventListSummary:not([data-layout=bubble]) {
.mx_EventTile_line {
padding-left: $left-gutter;
line-height: normal;
.mx_RedactedBody {
line-height: 1; // remove spacing between lines
}
}
}
.mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line,

View File

@ -18,6 +18,8 @@ limitations under the License.
$left-gutter: 64px;
.mx_GroupLayout {
--GroupLayout-EventTile-line-height: $font-22px;
.mx_EventTile {
> .mx_DisambiguatedProfile {
line-height: $font-20px;
@ -33,10 +35,14 @@ $left-gutter: 64px;
position: absolute; // for modern layout
}
.mx_EventTile_line, .mx_EventTile_reply {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 1px;
padding-bottom: 3px;
line-height: $font-22px;
}
.mx_EventTile_reply {
line-height: var(--GroupLayout-EventTile-line-height);
}
}
}
@ -47,7 +53,8 @@ $left-gutter: 64px;
.mx_EventTile {
padding-top: 4px;
.mx_EventTile_line, .mx_EventTile_reply {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0;
padding-bottom: 0;
}
@ -56,9 +63,12 @@ $left-gutter: 64px;
// 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 {
.mx_EventTile_line,
.mx_EventTile_reply {
line-height: $font-20px;
}
.mx_EventTile_avatar {
top: 4px;
}
@ -71,10 +81,13 @@ $left-gutter: 64px;
&.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 {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 1px;
}
@ -82,7 +95,9 @@ $left-gutter: 64px;
&.mx_EventTile_emote.mx_EventTile_continuation {
padding-top: 0;
.mx_EventTile_line, .mx_EventTile_reply {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0px;
padding-bottom: 0px;
}