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

Align E2E icon and avatar of info tile in compact modern layout #8906

Closed
wants to merge 4 commits into from
Closed

Align E2E icon and avatar of info tile in compact modern layout #8906

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b5c37e5
Align E2E icon and avatar of info line in compact modern layout
luixxiul Jun 24, 2022
ce14d5c
Use variables
luixxiul Jun 24, 2022
c21f3da
Merge branch 'develop' into MatrixChat_useCompactLayout
luixxiul Jul 1, 2022
99a6436
Merge branch 'develop' into MatrixChat_useCompactLayout
luixxiul Jul 2, 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
19 changes: 11 additions & 8 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1090,6 +1090,9 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_EventTile {
// Override :not([data-layout="bubble"])
&[data-layout=group] {
--MatrixChat_useCompactLayout-top-avatar: 2px;
--MatrixChat_useCompactLayout-top-e2eIcon: 3px;
--MatrixChat_useCompactLayout_line-spacing-block: 0px;
Copy link
Contributor Author

@luixxiul luixxiul Jun 27, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

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

--MatrixChat_useCompactLayout_group-padding-top: $spacing-4;

padding-top: var(--MatrixChat_useCompactLayout_group-padding-top);
Expand All @@ -1098,8 +1101,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
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 @@ -1116,13 +1121,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss

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

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

.mx_EventTile_line,
Expand All @@ -1133,17 +1137,16 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}

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

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

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

.mx_DisambiguatedProfile {
Expand Down