imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Polish threads misalignments and UI diversion (#7209)

Browse source
This commit is contained in:
Germain 2021-11-29 10:58:34 +00:00 • committed by GitHub
parent f5d32345f4
commit 3a2aa9d96c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -113,16 +113,11 @@ $left-gutter: 64px;
margin-right: 10px;
}
&.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
left: calc(-$selected-message-border-width);
}
/* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here.
*/
&.mx_EventTile_selected > .mx_EventTile_line {
border-left: $accent $selected-message-border-width solid;
padding-left: calc($left-gutter - $selected-message-border-width);
box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $accent;
background-color: $event-selected-color;
}
@ -136,7 +131,7 @@ $left-gutter: 64px;
}
&.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px - $selected-message-border-width);
padding-left: calc($left-gutter + 18px);
}
&.mx_EventTile:hover .mx_EventTile_line,
@ -218,28 +213,22 @@ $left-gutter: 64px;
border-bottom-left-radius: 4px;
}
&:hover.mx_EventTile_verified .mx_EventTile_line,
&:hover.mx_EventTile_unverified .mx_EventTile_line,
&:hover.mx_EventTile_unknown .mx_EventTile_line {
padding-left: calc($left-gutter - $selected-message-border-width);
}
&:hover.mx_EventTile_verified .mx_EventTile_line {
border-left: $e2e-verified-color $selected-message-border-width solid;
box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $e2e-verified-color;
}
&:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: $e2e-unverified-color $selected-message-border-width solid;
box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $e2e-unverified-color;
}
&:hover.mx_EventTile_unknown .mx_EventTile_line {
border-left: $e2e-unknown-color $selected-message-border-width solid;
box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $e2e-unknown-color;
}
&:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
&:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
&:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px - $selected-message-border-width);
padding-left: calc($left-gutter + 18px + $selected-message-border-width);
}
/* End to end encryption stuff */
@ -247,21 +236,6 @@ $left-gutter: 64px;
opacity: 1;
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
&:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
&:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
&:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
left: calc(-$selected-message-border-width);
}
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
&:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
&:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon,
&:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon {
display: block;
left: 41px;
}
.mx_MImageBody {
margin-right: 34px;
}
@ -808,7 +782,7 @@ $left-gutter: 64px;
}
.mx_MessageTimestamp {
right: 0;
left: auto;
left: auto !important;
top: -23px;
}
}
@ -851,7 +825,7 @@ $left-gutter: 64px;
padding-top: 0;
.mx_EventTile_line {
padding-left: $selected-message-border-width !important;
padding-left: 0;
order: 10 !important;
}
@ -860,6 +834,7 @@ $left-gutter: 64px;
right: 2px !important;
top: 1px !important;
font-size: 1rem;
text-align: right;
}
.mx_ReactionsRow {
@ -872,9 +847,26 @@ $left-gutter: 64px;
}
.mx_EventTile_content,
.mx_RedactedBody {
.mx_RedactedBody,
.mx_ReplyChain_wrapper {
margin-left: 36px;
margin-right: 50px;
.mx_EventTile_content,
.mx_RedactedBody,
.mx_MImageBody {
margin: 0;
}
}
.mx_EventTile_mediaLine {
padding-left: 36px !important;
padding-right: 50px;
.mx_MImageBody {
margin: 0;
padding: 0;
}
}
.mx_MessageComposer_sendMessage {