imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Align info EventTile and normal EventTile on IRC layout (#10197)

Browse source 
* fixes alignment issue in IRC layout
* adds cypress test for alignment

---------

Contributed-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Signed-off-by: Alun Turner <alunturner@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2023-03-03 09:32:38 +00:00 • committed by GitHub
parent b48b968ac4
commit ecebac6ea1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 120 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

18
res/css/views/rooms/_EventTile.pcss
View file

@ -270,7 +270,11 @@ $left-gutter: 64px;
}
&[data-layout="irc"] {
--EventTile_irc_line_info-margin-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
/* add --right-padding value of MessageTimestamp only */
/* stylelint-disable-next-line declaration-colon-space-after */
--EventTile_irc_line_info-margin-inline-start: calc(
var(--name-width) + var(--icon-width) + 1 * var(--right-padding)
);
.mx_EventTile_msgOption {
.mx_ReadReceiptGroup {
@ -483,20 +487,12 @@ $left-gutter: 64px;
}
&[data-layout="irc"] {
.mx_EventTile_line .mx_RedactedBody {
padding-left: 24px; /* 25px - 1px */
&::before {
left: var(--right-padding);
}
}
/* Apply only collapsed events block */
> .mx_EventTile_line {
/* 15 px of padding */
/* add --right-padding value of MessageTimestamp and avatar only */
/* stylelint-disable-next-line declaration-colon-space-after */
padding-left: calc(
var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding)
var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 2 * var(--right-padding)
);
}
}

3
res/css/views/rooms/_IRCLayout.pcss
View file

@ -159,7 +159,8 @@ $irc-line-height: $font-18px;
.mx_EventTile_emote {
.mx_EventTile_avatar {
margin-left: calc(var(--name-width) + var(--icon-width) + var(--right-padding));
/* add --right-padding value of MessageTimestamp only */
margin-left: calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding));
}
}