PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) (#8994)

Browse source 
* Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group]

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

* Move style rules for avatar and E2E icon of mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group]

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

* Use variables

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

* Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) for both IRC and modern layout

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

* Apply the style rule for mx_MessageTimestamp on info event tile line to group layout only

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

* Apply zero padding-top to modern/group layout only (IRC layout has zero padding by default)

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

* Apply avatar position settings to modern/group layout only

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

* Maintain the style block for avatar on info event tile in IRC layout on _EventTile.scss

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

* Remove obsolete style block

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

* Remove inline padding setting from mx_EventTile_line

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

* Use a correct variable

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

* Fix misalignment of avatars and textual events on IRC layout

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

* Align avatars and hidden events on IRC layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-07-12 13:40:19 +00:00 committed by GitHub
parent 780a903e2f
commit c175263fd7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
res/css/views/rooms/_EventTile.scss
View file

@ -207,6 +207,12 @@ $left-gutter: 64px;
}
}
&.mx_EventTile_info {
.mx_EventTile_e2eIcon {
top: 0;
}
}
&.mx_EventTile_continuation .mx_EventTile_line {
clear: both;
}
@ -267,6 +273,15 @@ $left-gutter: 64px;
padding-inline-start: calc($selected-message-border-width + var(--EditMessageComposer-padding-inline));
}
}
&.mx_EventTile_info {
.mx_EventTile_avatar {
left: var(--EventTile_irc_line_info-inset-inline-start);
top: 0;
margin-right: var(--right-padding);
padding-block: var(--EventTile_irc_line-padding-block);
}
}
}
&[data-layout=group] {
@ -338,8 +353,31 @@ $left-gutter: 64px;
padding-top: 0px !important;
}
&.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
&.mx_EventTile_info {
$spacing-block-start: 3px;
$spacing-block-end: 2px;
padding-top: 0;
.mx_EventTile_avatar,
.mx_EventTile_e2eIcon {
margin: $spacing-block-start 0 $spacing-block-end;
}
.mx_EventTile_avatar {
top: initial;
inset-inline-start: $left-gutter;
height: 14px;
}
.mx_EventTile_line {
padding-block: $spacing-block-start $spacing-block-end;
padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px); // 20px: avatar area
.mx_MessageTimestamp {
top: 0;
}
}
}
&:hover {
@ -370,33 +408,6 @@ $left-gutter: 64px;
font-size: $font-14px;
position: relative;
&.mx_EventTile_info {
padding-top: 0;
.mx_EventTile_avatar,
.mx_EventTile_e2eIcon {
margin: 3px 0 2px; // Align with mx_EventTile_line
}
.mx_EventTile_e2eIcon {
top: 0;
}
.mx_EventTile_avatar {
top: initial;
inset-inline-start: $left-gutter;
height: 14px;
}
.mx_EventTile_line {
padding-block: 3px 2px; // Align with mx_EventTile_avatar and mx_EventTile_e2eIcon
.mx_MessageTimestamp {
top: 0;
}
}
}
/* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here.
*/
@ -425,10 +436,6 @@ $left-gutter: 64px;
}
&[data-layout=irc] {
.mx_EventTile_info .mx_EventTile_line {
padding-left: 0; // Override .mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line
}
.mx_EventTile_line .mx_RedactedBody {
padding-left: 24px; // 25px - 1px

12
res/css/views/rooms/_IRCLayout.scss
View file

@ -24,6 +24,8 @@ $irc-line-height: $font-18px;
line-height: $irc-line-height !important;
.mx_EventTile {
--EventTile_irc_line-padding-block: 1px;
// timestamps are links which shouldn't be underlined
> a {
text-decoration: none;
@ -129,10 +131,11 @@ $irc-line-height: $font-18px;
.mx_EventTile_line {
.mx_EventTile_e2eIcon,
.mx_TextualEvent,
.mx_ViewSourceEvent,
.mx_MTextBody {
display: inline-block;
// add a 1px padding top and bottom because our larger emoji font otherwise gets cropped by anti-zalgo
padding: 1px 0;
padding: var(--EventTile_irc_line-padding-block) 0;
}
.mx_ReplyTile {
@ -162,16 +165,11 @@ $irc-line-height: $font-18px;
}
.mx_EventTile.mx_EventTile_info {
.mx_EventTile_avatar {
left: var(--EventTile_irc_line_info-inset-inline-start);
top: 0;
margin-right: var(--right-padding);
}
.mx_EventTile_line {
left: var(--EventTile_irc_line_info-inset-inline-start);
}
.mx_ViewSourceEvent, // For hidden events
.mx_TextualEvent {
line-height: $irc-line-height;
}