Move mx_EventTile_line and mx_EventTile_reply out of mx_EventTile:not([data-layout=bubble]) (#8910)

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-06-29 05:41:52 +00:00 committed by GitHub
parent 80be02b53c
commit 035786aae0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 30 deletions

View file

@ -34,9 +34,25 @@ limitations under the License.
.mx_EventTile { .mx_EventTile {
&[data-layout=irc], &[data-layout=irc],
&[data-layout=group] { &[data-layout=group] {
&.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile_line {
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden
.mx_EventTile_e2eIcon {
inset-inline-start: $spacing-8;
}
}
&.mx_EventTile_info {
.mx_EventTile_avatar {
inset-inline-start: 18px;
}
}
.mx_EventTile_avatar { .mx_EventTile_avatar {
position: absolute; // for IRC layout position: absolute; // for IRC layout
left: -3px; inset-inline-start: -3px;
} }
.mx_EventTile_msgOption { .mx_EventTile_msgOption {
@ -83,27 +99,11 @@ limitations under the License.
} }
&:not([data-layout="bubble"]) { &:not([data-layout="bubble"]) {
&.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile_line {
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
padding-inline-end: $MessageTimestamp_width; // ensure timestamp is not hidden
.mx_EventTile_e2eIcon {
inset-inline-start: 8px;
}
}
.mx_MessageTimestamp { .mx_MessageTimestamp {
position: absolute; // for modern layout and IRC layout position: absolute; // for modern layout and IRC layout
inset-inline-start: auto; inset-inline-start: auto;
inset-inline-end: 0; inset-inline-end: 0;
} }
&.mx_EventTile_info {
.mx_EventTile_avatar {
left: 18px;
}
}
} }
} }

View file

@ -86,6 +86,16 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_MImageBody { .mx_MImageBody {
margin-right: 34px; margin-right: 34px;
} }
.mx_EventTile_line,
.mx_EventTile_reply {
position: relative;
border-radius: 8px;
}
.mx_EventTile_reply {
margin-right: 10px;
}
} }
&[data-layout=group] { &[data-layout=group] {
@ -113,6 +123,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_EventTile_reply { .mx_EventTile_reply {
padding-top: 1px; padding-top: 1px;
padding-bottom: 3px; padding-bottom: 3px;
padding-left: $left-gutter;
line-height: $font-22px; line-height: $font-22px;
} }
@ -197,17 +208,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
clear: both; clear: both;
} }
.mx_EventTile_line,
.mx_EventTile_reply {
position: relative;
padding-left: $left-gutter;
border-radius: 8px;
}
.mx_EventTile_reply {
margin-right: 10px;
}
/* this is used for the tile for the event which is selected via the URL. /* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here. * TODO: ultimately we probably want some transition on here.
*/ */

View file

@ -48,8 +48,8 @@ $irc-line-height: $font-18px;
} }
} }
.mx_EventTile_line, .mx_EventTile_reply { .mx_EventTile_line,
padding: 0; .mx_EventTile_reply {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
order: 3; order: 3;