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

Polish threads misalignments and UI diversion #7209

Merged
merged 6 commits into from
Nov 29, 2021
Merged

Polish threads misalignments and UI diversion #7209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3d8e343
Fix reply padding in thread view
Nov 26, 2021
980f7de
fix hover and attachment alignment in threads
Nov 26, 2021
d4ce538
fix thread panel preview
Nov 26, 2021
992489c
Fix timestamp on hover in thread panel
Nov 26, 2021
a003e2b
Make box-shadow outline look like border
Nov 29, 2021
3cf1650
Replace all border-left with box-shadow
Nov 29, 2021
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
62 changes: 27 additions & 35 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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,
Expand Down Expand Up @@ -218,50 +213,29 @@ $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 */
&:hover .mx_EventTile_e2eIcon {
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;
}
Expand Down Expand Up @@ -808,7 +782,7 @@ $left-gutter: 64px;
}
.mx_MessageTimestamp {
right: 0;
left: auto;
left: auto !important;
top: -23px;
}
}
Expand Down Expand Up @@ -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;
}

Expand All @@ -860,6 +834,7 @@ $left-gutter: 64px;
right: 2px !important;
top: 1px !important;
font-size: 1rem;
text-align: right;
}

.mx_ReactionsRow {
Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/components/structures/TimelinePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
19 changes: 3 additions & 16 deletions src/components/views/rooms/EventTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) }
Copy link
Contributor

Choose a reason for hiding this comment

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

I am a little confused by this change... Why are we doing this? It seems like the callEventGrouper isn't getting to the event?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

There won't be any call events in a thread. This is to tackle this element-hq/element-web#19710 (comment)

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh, oops, didn't notice the full context of the code 🤦

</div>
{ this.renderThreadPanelSummary() }
</div>
<Toolbar className="mx_MessageActionBar" aria-label={_t("Message Actions")} aria-live="off">
Expand Down