Skip to content

Commit

Permalink
A lot of wobbling around
Browse files Browse the repository at this point in the history
  • Loading branch information
@su-ex
su-ex committed Jun 10, 2021
1 parent 311c229 commit 43d7e16
Show file tree
Hide file tree
Showing 7 changed files with 42 additions and 12 deletions.
2 changes: 1 addition & 1 deletion res/css/views/rooms/_BubbleLayout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -467,7 +467,7 @@ $left-gutter: 56px;
display: inline-flex;
margin-inline-start: .7em;
opacity: 0;
line-height: 1; // don't add additional height
line-height: inherit; // don't add additional height

.mx_MessageTimestamp {
visibility: visible !important;
Expand Down
15 changes: 11 additions & 4 deletions src/components/structures/MessagePanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -552,7 +552,8 @@ export default class MessagePanel extends React.Component {

for (const Grouper of groupers) {
if (Grouper.canStartGroup(this, mxEv)) {
grouper = new Grouper(this, mxEv, prevEvent, lastShownEvent, nextEvent, nextTile);
grouper = new Grouper(this, mxEv, prevEvent, lastShownEvent, nextEvent, nextTile,
this.props.layout);
}
}
if (!grouper) {
Expand Down Expand Up @@ -919,7 +920,7 @@ class CreationGrouper {
return ev.getType() === "m.room.create";
};

constructor(panel, createEvent, prevEvent, lastShownEvent) {
constructor(panel, createEvent, prevEvent, lastShownEvent, nextEvent, nextEventTile, layout) {
this.panel = panel;
this.createEvent = createEvent;
this.prevEvent = prevEvent;
Expand All @@ -932,6 +933,7 @@ class CreationGrouper {
createEvent.getId(),
createEvent === lastShownEvent,
);
this.layout = layout;
}

shouldGroup(ev) {
Expand Down Expand Up @@ -1030,6 +1032,7 @@ class CreationGrouper {
onToggle={panel._onHeightChanged} // Update scroll state
summaryMembers={[ev.sender]}
summaryText={summaryText}
layout={this.layout}
>
{ eventTiles }
</EventListSummary>,
Expand All @@ -1052,7 +1055,7 @@ class RedactionGrouper {
return panel._shouldShowEvent(ev) && ev.isRedacted();
}

constructor(panel, ev, prevEvent, lastShownEvent, nextEvent, nextEventTile) {
constructor(panel, ev, prevEvent, lastShownEvent, nextEvent, nextEventTile, layout) {
this.panel = panel;
this.readMarker = panel._readMarkerForEvent(
ev.getId(),
Expand All @@ -1063,6 +1066,7 @@ class RedactionGrouper {
this.lastShownEvent = lastShownEvent;
this.nextEvent = nextEvent;
this.nextEventTile = nextEventTile;
this.layout = layout;
}

shouldGroup(ev) {
Expand Down Expand Up @@ -1128,6 +1132,7 @@ class RedactionGrouper {
onToggle={panel._onHeightChanged} // Update scroll state
summaryMembers={Array.from(senders)}
summaryText={_t("%(count)s messages deleted.", { count: eventTiles.length })}
layout={this.layout}
>
{ eventTiles }
</EventListSummary>,
Expand All @@ -1151,7 +1156,7 @@ class MemberGrouper {
return panel._shouldShowEvent(ev) && isMembershipChange(ev);
}

constructor(panel, ev, prevEvent, lastShownEvent) {
constructor(panel, ev, prevEvent, lastShownEvent, nextEvent, nextEventTile, layout) {
this.panel = panel;
this.readMarker = panel._readMarkerForEvent(
ev.getId(),
Expand All @@ -1160,6 +1165,7 @@ class MemberGrouper {
this.events = [ev];
this.prevEvent = prevEvent;
this.lastShownEvent = lastShownEvent;
this.layout = layout;
}

shouldGroup(ev) {
Expand Down Expand Up @@ -1234,6 +1240,7 @@ class MemberGrouper {
events={this.events}
onToggle={panel._onHeightChanged} // Update scroll state
startExpanded={highlightInMels}
layout={this.layout}
>
{ eventTiles }
</MemberEventListSummary>,
Expand Down
18 changes: 18 additions & 0 deletions src/components/structures/RoomView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1663,6 +1663,23 @@ export default class RoomView extends React.Component<IProps, IState> {
if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;

this.setState({auxPanelMaxHeight: auxPanelMaxHeight});

// Let the bubble layout choose between single side and both sides by threshold
if (this.state.layout == Layout.Bubble && this.state.adaptiveSideBubbles && this.roomView.current) {
// ToDo: Find better way to get the current width (references, but which???)
const messagelists = this.roomView.current.getElementsByClassName("mx_RoomView_MessageList");
let width = 0;
for (let i = 0; i < messagelists.length; i++) {
const boundingBox = messagelists[i].getBoundingClientRect();
if (boundingBox.width > width) width = boundingBox.width;
}
// ToDo: Make threshold configurable?
if (width < 1280) {
this.setState({singleSideBubbles: false});
} else {
this.setState({singleSideBubbles: true});
}
}
};

private onStatusBarVisible = () => {
Expand Down Expand Up @@ -1753,6 +1770,7 @@ export default class RoomView extends React.Component<IProps, IState> {
loading={loading}
joining={this.state.joining}
oobData={this.props.oobData}
layout={this.state.layout}
/>
</ErrorBoundary>
</div>
Expand Down
4 changes: 3 additions & 1 deletion src/components/views/elements/EventListSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,9 @@ const EventListSummary: React.FC<IProps> = ({
if (layout == Layout.Bubble) {
body = (
<div className="mx_EventTile_line sc_EventTile_bubbleLine sc_EventTile_bubbleLine_info">
<div className="sc_EventTile_bubbleArea sc_EventTile_bubbleArea_center sc_EventTile_bubbleArea_info">
<div
className="sc_EventTile_bubbleArea sc_EventTile_bubbleArea_center sc_EventTile_bubbleArea_info"
>
<div className="sc_EventTile_bubble sc_EventTile_bubble_info sc_EventTile_bubble_center">
<span className="mx_EventListSummary_avatars" onClick={toggleExpanded}>
{ avatars }
Expand Down
6 changes: 5 additions & 1 deletion src/components/views/elements/MemberEventListSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { _t } from '../../../languageHandler';
import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
import { isValid3pidInvite } from "../../../RoomInvite";
import EventListSummary from "./EventListSummary";
import { Layout } from '../../../settings/Layout';
import {replaceableComponent} from "../../../utils/replaceableComponent";

interface IProps {
Expand All @@ -39,6 +40,8 @@ interface IProps {
startExpanded?: boolean,
// An array of EventTiles to render when expanded
children: ReactChildren;
// which layout to use
layout: Layout,
// Called when the MELS expansion is toggled
onToggle?(): void,
}
Expand Down Expand Up @@ -448,6 +451,7 @@ export default class MemberEventListSummary extends React.Component<IProps> {
startExpanded={this.props.startExpanded}
children={this.props.children}
summaryMembers={[...latestUserAvatarMember.values()]}
summaryText={this.generateSummary(aggregate.names, orderedTransitionSequences)} />;
summaryText={this.generateSummary(aggregate.names, orderedTransitionSequences)}
layout={this.props.layout} />;
}
}
7 changes: 3 additions & 4 deletions src/components/views/rooms/EventTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1012,7 +1012,8 @@ export default class EventTile extends React.Component<IProps, IState> {
/> : undefined;

const showTimestamp = this.props.mxEvent.getTs() &&
(scBubbleEnabled || this.props.alwaysShowTimestamps || this.props.last || this.state.hover || this.state.actionBarFocused);
(scBubbleEnabled ||
this.props.alwaysShowTimestamps || this.props.last || this.state.hover || this.state.actionBarFocused);
const timestamp = showTimestamp ?
<MessageTimestamp showTwelveHour={this.props.isTwelveHour} ts={this.props.mxEvent.getTs()} /> : null;

Expand Down Expand Up @@ -1284,7 +1285,7 @@ export default class EventTile extends React.Component<IProps, IState> {
onHeightChanged={this.props.onHeightChanged}
scBubble={true}
scBubbleActionBar={mediaBody ? actionBar : null}
scBubbleGroupTimestamp={[placeholderTimestamp, groupTimestamp]}
scBubbleGroupTimestamp={<>{placeholderTimestamp}{groupTimestamp}</>}
/>
{ !mediaBody ? actionBar : null }
</div>
Expand All @@ -1294,7 +1295,6 @@ export default class EventTile extends React.Component<IProps, IState> {
</div>,
!infoBubble ? avatar : null,
msgOption,

])
);
} else {
Expand Down Expand Up @@ -1333,7 +1333,6 @@ export default class EventTile extends React.Component<IProps, IState> {
</div>,
msgOption,
avatar,

])
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/rooms/LinkPreviewWidget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ export default class LinkPreviewWidget extends React.Component {

const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
return (
<div className="mx_LinkPreviewWidget">
<div className="mx_LinkPreviewWidget" dir="auto">
{ img }
<div className="mx_LinkPreviewWidget_caption">
<div className="mx_LinkPreviewWidget_title"><a href={this.props.link} target="_blank" rel="noreferrer noopener">{ p["og:title"] }</a></div>
Expand Down

0 comments on commit 43d7e16

Please sign in to comment.