mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-21 16:55:34 +03:00
Code Issues Projects Releases Packages Wiki Activity

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
Show stats 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 {

2
src/components/structures/TimelinePanel.tsx
View file

@ -507,7 +507,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
// (and user is active), switch timeout
const timeout = this.readMarkerTimeout(rmPosition);
// NO-OP when timeout already has set to the given value
this.readMarkerActivityTimer.changeTimeout(timeout);
this.readMarkerActivityTimer?.changeTimeout(timeout);
}, READ_MARKER_DEBOUNCE_MS, { leading: false, trailing: true });
private onAction = (payload: ActionPayload): void => {

19
src/components/views/rooms/EventTile.tsx
View file

@ -1362,22 +1362,9 @@ export default class EventTile extends React.Component<IProps, IState> {
>
{ linkedTimestamp }
{ this.renderE2EPadlock() }
{ replyChain }
<EventTileType ref={this.tile}
mxEvent={this.props.mxEvent}
forExport={this.props.forExport}
replacingEventId={this.props.replacingEventId}
editState={this.props.editState}
highlights={this.props.highlights}
highlightLink={this.props.highlightLink}
showUrlPreview={this.props.showUrlPreview}
permalinkCreator={this.props.permalinkCreator}
onHeightChanged={this.props.onHeightChanged}
callEventGrouper={this.props.callEventGrouper}
tileShape={this.props.tileShape}
getRelationsForEvent={this.props.getRelationsForEvent}
/>
{ keyRequestInfo }
<div className="mx_EventTile_body">
{ MessagePreviewStore.instance.generatePreviewForEvent(this.props.mxEvent) }
</div>
{ this.renderThreadPanelSummary() }
</div>
<Toolbar className="mx_MessageActionBar" aria-label={_t("Message Actions")} aria-live="off">