Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Improve mx_MatrixChat_useCompactLayout on _EventTile.scss #8965

Merged
merged 5 commits into from
Jul 5, 2022
Merged

Improve mx_MatrixChat_useCompactLayout on _EventTile.scss #8965

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6ccb4e2
Ensure zero padding-top for mx_EventTile_continuation in mx_MatrixCha…
luixxiul Jul 1, 2022
63b5dfb
Apply mx_EventTile_continuation to mx_EventTile_emote too
luixxiul Jul 2, 2022
db32a9d
Correct cascading order for mx_EventTile_continuation
luixxiul Jul 2, 2022
e6eb283
Align E2E icon and avatar of info line in compact modern layout
luixxiul Jun 24, 2022
8dbc483
Use variables
luixxiul Jun 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 25 additions & 20 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1091,15 +1091,25 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
// Override :not([data-layout="bubble"])
&[data-layout=group] {
--MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
--MatrixChat_useCompactLayout-top-avatar: 2px;
--MatrixChat_useCompactLayout-top-e2eIcon: 3px;
--MatrixChat_useCompactLayout_line-spacing-block: 0px;
Copy link
Contributor Author

@luixxiul luixxiul Jul 2, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The last line might look redundant but I think this should explicitly ensure that the same (zero) margin/padding is applied to e2eIcon, avatar, line, and reply.


padding-top: var(--MatrixChat_useCompactLayout_group-padding-top);

.mx_EventTile_line,
.mx_EventTile_reply {
padding-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
}

&.mx_EventTile_info {
padding-top: 0; // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
font-size: $font-13px;

.mx_EventTile_e2eIcon,
.mx_EventTile_avatar {
top: $spacing-4;
top: 0;
margin-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
}

.mx_EventTile_line,
Expand All @@ -1111,39 +1121,34 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
&.mx_EventTile_emote {
padding-top: $spacing-8; // add a bit more space for emotes so that avatars don't collide

&.mx_EventTile_continuation {
padding-top: 0;

.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0;
padding-bottom: 0;
}
}

.mx_EventTile_avatar {
top: 2px;
top: var(--MatrixChat_useCompactLayout-top-avatar);
}

.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0;
padding-bottom: 1px;
}

&.mx_EventTile_continuation {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-bottom: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
}
}

.mx_EventTile_avatar {
top: 2px;
// Cascading - apply zero padding to every element including mx_EventTile_emote
&.mx_EventTile_continuation {
padding-top: var(--MatrixChat_useCompactLayout_line-spacing-block);
Copy link
Contributor Author

@luixxiul luixxiul Jul 2, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This declaration ensures zero padding-top after removing !important flag on _EventTile.scss.

}

.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0;
padding-bottom: 0;
.mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar);
}

.mx_EventTile_e2eIcon {
top: 3px;
top: var(--MatrixChat_useCompactLayout-top-e2eIcon);
}

.mx_DisambiguatedProfile {
Expand Down