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

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

Merged
merged 23 commits into from
Jul 12, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
532769a
Move mx_EventTile_info .mx_EventTile_line from mx_EventTile:not([data…
luixxiul Jun 28, 2022
be78289
Move style rules for avatar and E2E icon of mx_EventTile_info .mx_Eve…
luixxiul Jun 29, 2022
bb3dcda
Use variables
luixxiul Jun 29, 2022
b96ff7b
Move mx_EventTile_info out of mx_EventTile:not([data-layout=bubble]) …
luixxiul Jun 29, 2022
cc281c8
Apply the style rule for mx_MessageTimestamp on info event tile line …
luixxiul Jun 29, 2022
ecca514
Apply zero padding-top to modern/group layout only (IRC layout has ze…
luixxiul Jul 5, 2022
e61fe4c
Apply avatar position settings to modern/group layout only
luixxiul Jul 5, 2022
c971486
Maintain the style block for avatar on info event tile in IRC layout …
luixxiul Jul 6, 2022
902a283
Remove obsolete style block
luixxiul Jul 6, 2022
78dd03e
Merge branch 'develop' into positivism
luixxiul Jul 7, 2022
6ae8019
Merge branch 'develop' into positivism
luixxiul Jul 7, 2022
3a412fa
Merge branch 'develop' of https://github.com/matrix-org/matrix-react-…
luixxiul Jul 7, 2022
997756e
Remove inline padding setting from mx_EventTile_line
luixxiul Jul 7, 2022
4efc96f
Merge branch 'develop' of https://github.com/matrix-org/matrix-react-…
luixxiul Jul 7, 2022
6c63ffc
Merge branch 'develop' into positivism
luixxiul Jul 9, 2022
d8dde64
Use a correct variable
luixxiul Jul 9, 2022
b6f8282
Fix misalignment of avatars and textual events on IRC layout
luixxiul Jul 9, 2022
90f1f3c
Align avatars and hidden events on IRC layout
luixxiul Jul 9, 2022
d394290
Merge branch 'develop' into positivism
luixxiul Jul 10, 2022
3c50b5f
Merge branch 'develop' into positivism
luixxiul Jul 11, 2022
e6fba07
Merge remote-tracking branch 'upstream/develop' into positivism
luixxiul Jul 12, 2022
2185870
Merge branch 'develop' into positivism
luixxiul Jul 12, 2022
946bc87
Merge branch 'develop' into positivism
luixxiul Jul 12, 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
73 changes: 40 additions & 33 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,12 @@ $left-gutter: 64px;
}
}

&.mx_EventTile_info {
.mx_EventTile_e2eIcon {
top: 0;
}
}

&.mx_EventTile_continuation .mx_EventTile_line {
clear: both;
}
Expand Down Expand Up @@ -267,6 +273,15 @@ $left-gutter: 64px;
padding-inline-start: calc($selected-message-border-width + var(--EditMessageComposer-padding-inline));
}
}

&.mx_EventTile_info {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

For IRC layout

.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] {
Expand Down Expand Up @@ -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 {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

For modern layout

$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 {
Expand Down Expand Up @@ -370,33 +408,6 @@ $left-gutter: 64px;
font-size: $font-14px;
position: relative;

&.mx_EventTile_info {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

For both IRC and modern layouts

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.
*/
Expand Down Expand Up @@ -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
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Because overriding :not() pseudo class is no longer necessary.

}

.mx_EventTile_line .mx_RedactedBody {
padding-left: 24px; // 25px - 1px

Expand Down
12 changes: 5 additions & 7 deletions res/css/views/rooms/_IRCLayout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down