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

Commit fb49ccc

Browse files
t3chguyt3chguy
authored
Show bubble tile timestamps for bubble layout inside the bubble (#7622)
1 parent 8ddd677 commit fb49ccc

11 files changed

+66
-11
lines changed

‎res/css/views/messages/_CallEvent.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,10 @@ limitations under the License.
183183
}
184184
}
185185

186+
.mx_MessageTimestamp {
187+
margin-left: 16px;
188+
}
189+
186190
&.mx_CallEvent_narrow {
187191
height: unset;
188192
width: 290px;

‎res/css/views/messages/_EventTileBubble.scss

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ limitations under the License.
2222
max-width: 75%;
2323
box-sizing: border-box;
2424
display: grid;
25-
grid-template-columns: 24px minmax(0, 1fr) min-content;
25+
grid-template-columns: 24px minmax(0, 1fr) min-content min-content;
2626

2727
&::before, &::after {
2828
position: relative;
@@ -57,4 +57,11 @@ limitations under the License.
5757
grid-column: 2;
5858
grid-row: 2;
5959
}
60+
61+
.mx_MessageTimestamp {
62+
grid-column: 4;
63+
grid-row: 1 / 3;
64+
align-self: center;
65+
margin-left: 16px;
66+
}
6067
}

‎res/css/views/rooms/_EventBubbleTile.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -450,6 +450,14 @@ limitations under the License.
450450
}
451451
}
452452

453+
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
454+
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble] {
455+
.mx_EventTile_line > a {
456+
// hide this timestamp as the tile will render its own
457+
display: none;
458+
}
459+
}
460+
453461
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
454462
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
455463
.mx_EventTile.mx_EventTile_info[data-layout=bubble],

‎src/components/views/messages/CallEvent.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const MAX_NON_NARROW_WIDTH = 450 / 70 * 100;
3333
interface IProps {
3434
mxEvent: MatrixEvent;
3535
callEventGrouper: CallEventGrouper;
36+
timestamp?: JSX.Element;
3637
}
3738

3839
interface IState {
@@ -145,6 +146,7 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
145146
>
146147
<span> { _t("Accept") } </span>
147148
</AccessibleButton>
149+
{ this.props.timestamp }
148150
</div>
149151
);
150152
}
@@ -157,6 +159,7 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
157159
<div className="mx_CallEvent_content">
158160
{ _t("Call declined") }
159161
{ this.renderCallBackButton(_t("Call back")) }
162+
{ this.props.timestamp }
160163
</div>
161164
);
162165
} else if (([CallErrorCode.UserHangup, "user hangup"].includes(hangupReason) || !hangupReason)) {
@@ -174,13 +177,15 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
174177
return (
175178
<div className="mx_CallEvent_content">
176179
{ text }
180+
{ this.props.timestamp }
177181
</div>
178182
);
179183
} else if (hangupReason === CallErrorCode.InviteTimeout) {
180184
return (
181185
<div className="mx_CallEvent_content">
182186
{ _t("No answer") }
183187
{ this.renderCallBackButton(_t("Call back")) }
188+
{ this.props.timestamp }
184189
</div>
185190
);
186191
}
@@ -215,20 +220,23 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
215220
/>
216221
{ _t("Connection failed") }
217222
{ this.renderCallBackButton(_t("Retry")) }
223+
{ this.props.timestamp }
218224
</div>
219225
);
220226
}
221227
if (state === CallState.Connected) {
222228
return (
223229
<div className="mx_CallEvent_content">
224230
<Clock seconds={this.state.length} />
231+
{ this.props.timestamp }
225232
</div>
226233
);
227234
}
228235
if (state === CallState.Connecting) {
229236
return (
230237
<div className="mx_CallEvent_content">
231238
{ _t("Connecting") }
239+
{ this.props.timestamp }
232240
</div>
233241
);
234242
}
@@ -237,13 +245,15 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
237245
<div className="mx_CallEvent_content">
238246
{ _t("Missed call") }
239247
{ this.renderCallBackButton(_t("Call back")) }
248+
{ this.props.timestamp }
240249
</div>
241250
);
242251
}
243252

244253
return (
245254
<div className="mx_CallEvent_content">
246255
{ _t("The call is in an unknown state!") }
256+
{ this.props.timestamp }
247257
</div>
248258
);
249259
}

‎src/components/views/messages/EncryptionEvent.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,12 @@ import { objectHasDiff } from "../../../utils/objects";
2727

2828
interface IProps {
2929
mxEvent: MatrixEvent;
30+
timestamp?: JSX.Element;
3031
}
3132

3233
const ALGORITHM = "m.megolm.v1.aes-sha2";
3334

34-
const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent }, ref) => {
35+
const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent, timestamp }, ref) => {
3536
const cli = useContext(MatrixClientContext);
3637
const roomId = mxEvent.getRoomId();
3738
const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(roomId);
@@ -60,6 +61,7 @@ const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent }, ref) =>
6061
className="mx_cryptoEvent mx_cryptoEvent_icon"
6162
title={_t("Encryption enabled")}
6263
subtitle={subtitle}
64+
timestamp={timestamp}
6365
/>;
6466
}
6567

@@ -68,6 +70,7 @@ const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent }, ref) =>
6870
className="mx_cryptoEvent mx_cryptoEvent_icon"
6971
title={_t("Encryption enabled")}
7072
subtitle={_t("Ignored attempt to disable encryption")}
73+
timestamp={timestamp}
7174
/>;
7275
}
7376

@@ -76,6 +79,7 @@ const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent }, ref) =>
7679
title={_t("Encryption not enabled")}
7780
subtitle={_t("The encryption used by this room isn't supported.")}
7881
ref={ref}
82+
timestamp={timestamp}
7983
/>;
8084
});
8185

‎src/components/views/messages/EventTileBubble.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,23 @@ import classNames from "classnames";
2020
interface IProps {
2121
className: string;
2222
title: string;
23+
timestamp?: JSX.Element;
2324
subtitle?: ReactNode;
2425
children?: ReactChildren;
2526
}
2627

27-
const EventTileBubble = forwardRef<HTMLDivElement, IProps>(({ className, title, subtitle, children }, ref) => {
28+
const EventTileBubble = forwardRef<HTMLDivElement, IProps>(({
29+
className,
30+
title,
31+
timestamp,
32+
subtitle,
33+
children,
34+
}, ref) => {
2835
return <div className={classNames("mx_EventTileBubble", className)} ref={ref}>
2936
<div className="mx_EventTileBubble_title">{ title }</div>
3037
{ subtitle && <div className="mx_EventTileBubble_subtitle">{ subtitle }</div> }
3138
{ children }
39+
{ timestamp }
3240
</div>;
3341
});
3442

‎src/components/views/messages/MJitsiWidgetEvent.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
2626

2727
interface IProps {
2828
mxEvent: MatrixEvent;
29+
timestamp?: JSX.Element;
2930
}
3031

3132
@replaceableComponent("views.messages.MJitsiWidgetEvent")
@@ -54,20 +55,23 @@ export default class MJitsiWidgetEvent extends React.PureComponent<IProps> {
5455
return <EventTileBubble
5556
className="mx_MJitsiWidgetEvent"
5657
title={_t('Video conference ended by %(senderName)s', { senderName })}
58+
timestamp={this.props.timestamp}
5759
/>;
5860
} else if (prevUrl) {
5961
// modified
6062
return <EventTileBubble
6163
className="mx_MJitsiWidgetEvent"
6264
title={_t('Video conference updated by %(senderName)s', { senderName })}
6365
subtitle={joinCopy}
66+
timestamp={this.props.timestamp}
6467
/>;
6568
} else {
6669
// assume added
6770
return <EventTileBubble
6871
className="mx_MJitsiWidgetEvent"
6972
title={_t("Video conference started by %(senderName)s", { senderName })}
7073
subtitle={joinCopy}
74+
timestamp={this.props.timestamp}
7175
/>;
7276
}
7377
}

‎src/components/views/messages/MKeyVerificationConclusion.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
2929
interface IProps {
3030
/* the MatrixEvent to show */
3131
mxEvent: MatrixEvent;
32+
timestamp?: JSX.Element;
3233
}
3334

3435
@replaceableComponent("views.messages.MKeyVerificationConclusion")
@@ -133,6 +134,7 @@ export default class MKeyVerificationConclusion extends React.Component<IProps>
133134
className={classes}
134135
title={title}
135136
subtitle={userLabelForEventRoom(request.otherUserId, mxEvent.getRoomId())}
137+
timestamp={this.props.timestamp}
136138
/>;
137139
}
138140

‎src/components/views/messages/MKeyVerificationRequest.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import RightPanelStore from '../../../stores/right-panel/RightPanelStore';
3030

3131
interface IProps {
3232
mxEvent: MatrixEvent;
33+
timestamp?: JSX.Element;
3334
}
3435

3536
@replaceableComponent("views.messages.MKeyVerificationRequest")
@@ -168,6 +169,7 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
168169
className="mx_cryptoEvent mx_cryptoEvent_icon"
169170
title={title}
170171
subtitle={subtitle}
172+
timestamp={this.props.timestamp}
171173
>
172174
{ stateNode }
173175
</EventTileBubble>;

‎src/components/views/messages/RoomCreate.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
2929
interface IProps {
3030
/* the MatrixEvent to show */
3131
mxEvent: MatrixEvent;
32+
timestamp?: JSX.Element;
3233
}
3334

3435
@replaceableComponent("views.messages.RoomCreate")
@@ -65,6 +66,7 @@ export default class RoomCreate extends React.Component<IProps> {
6566
className="mx_CreateEvent"
6667
title={_t("This room is a continuation of another conversation.")}
6768
subtitle={link}
69+
timestamp={this.props.timestamp}
6870
/>;
6971
}
7072
}

‎src/components/views/rooms/EventTile.tsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1273,12 +1273,13 @@ export default class EventTile extends React.Component<IProps, IState> {
12731273
? this.props.mxEvent.getTs()
12741274
: thread?.lastReply().getTs();
12751275

1276-
const timestamp = showTimestamp && ts ?
1277-
<MessageTimestamp
1278-
showRelative={this.props.tileShape === TileShape.ThreadPanel}
1279-
showTwelveHour={this.props.isTwelveHour}
1280-
ts={ts}
1281-
/> : null;
1276+
const messageTimestamp = <MessageTimestamp
1277+
showRelative={this.props.tileShape === TileShape.ThreadPanel}
1278+
showTwelveHour={this.props.isTwelveHour}
1279+
ts={ts}
1280+
/>;
1281+
1282+
const timestamp = showTimestamp && ts ? messageTimestamp : null;
12821283

12831284
const keyRequestHelpText =
12841285
<div className="mx_EventTile_keyRequestInfo_tooltip_contents">
@@ -1339,9 +1340,10 @@ export default class EventTile extends React.Component<IProps, IState> {
13391340
{ timestamp }
13401341
</a>;
13411342

1342-
const useIRCLayout = this.props.layout == Layout.IRC;
1343+
const useIRCLayout = this.props.layout === Layout.IRC;
13431344
const groupTimestamp = !useIRCLayout ? linkedTimestamp : null;
13441345
const ircTimestamp = useIRCLayout ? linkedTimestamp : null;
1346+
const bubbleTimestamp = this.props.layout === Layout.Bubble ? messageTimestamp : null;
13451347
const groupPadlock = !useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
13461348
const ircPadlock = useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
13471349

@@ -1567,7 +1569,8 @@ export default class EventTile extends React.Component<IProps, IState> {
15671569
{ groupTimestamp }
15681570
{ groupPadlock }
15691571
{ replyChain }
1570-
<EventTileType ref={this.tile}
1572+
<EventTileType
1573+
ref={this.tile}
15711574
mxEvent={this.props.mxEvent}
15721575
forExport={this.props.forExport}
15731576
replacingEventId={this.props.replacingEventId}
@@ -1580,6 +1583,7 @@ export default class EventTile extends React.Component<IProps, IState> {
15801583
callEventGrouper={this.props.callEventGrouper}
15811584
getRelationsForEvent={this.props.getRelationsForEvent}
15821585
isSeeingThroughMessageHiddenForModeration={isSeeingThroughMessageHiddenForModeration}
1586+
timestamp={bubbleTimestamp}
15831587
/>
15841588
{ keyRequestInfo }
15851589
{ actionBar }

0 commit comments

Comments
 (0)