sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Call Tile - Improve tile alignment in modern and bubble layout (#33478)

Browse Source 
* Tile must have same indent as messages

* Align the call tiles between the bubbles
This commit is contained in:
R Midhun Suresh
2026-05-19 09:18:30 +00:00
committed by GitHub
parent 02b6520f09
commit 00ccc97c79
4 changed files with 55 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/utils/EventRenderingUtils.ts
+32 -2
View File
@@ -54,6 +54,7 @@ export function getEventDisplayInfo(
isLeftAlignedBubbleMessage: boolean;
noBubbleEvent: boolean;
isSeeingThroughMessageHiddenForModeration: boolean;
isAlignedBetweenBubbles: boolean;
} {
const content = mxEvent.getContent();
const msgtype = content.msgtype;
@@ -77,14 +78,16 @@ export function getEventDisplayInfo(
// Info messages are basically information about commands processed on a room
let isBubbleMessage =
eventType === EventType.RTCNotification ||
eventType.startsWith("m.key.verification") ||
(eventType === EventType.RoomMessage && msgtype?.startsWith("m.key.verification")) ||
eventType === EventType.RoomCreate ||
eventType === EventType.RoomEncryption ||
factory === JitsiEventFactory;
const isLeftAlignedBubbleMessage =
!isBubbleMessage && (eventType === EventType.CallInvite || ElementCallEventType.matches(eventType));
!isBubbleMessage &&
(eventType === EventType.RTCNotification ||
eventType === EventType.CallInvite ||
ElementCallEventType.matches(eventType));
let isInfoMessage = calcIsInfoMessage(eventType, content, isBubbleMessage, isLeftAlignedBubbleMessage);
// Some non-info messages want to be rendered in the appropriate bubble column but without the bubble background
const noBubbleEvent =
@@ -107,6 +110,32 @@ export function getEventDisplayInfo(
}
}
/*
┌──────────────────────────────────────────────────────────┐
│ │
│ TILE ALIGNED BETWEEN BUBBLES │
│ │
└──────────────────────────────────────────────────────────┘
▲ ▲
│ │
│ │
│ │
┌────┤ │
│ ┌──┼───────────────────┐ │
│ │ │ │ │
└─┼──┘ Bubble │ │
└──────────────────────┘ │
│
│
│
├────┐
┌───────────────────┼──┐ │
│ │ │ │
│ Bubble └──┼─┘
└──────────────────────┘
*/
const isAlignedBetweenBubbles = eventType === EventType.RTCNotification;
return {
hasRenderer: !!factory,
isInfoMessage,
@@ -114,5 +143,6 @@ export function getEventDisplayInfo(
isLeftAlignedBubbleMessage,
noBubbleEvent,
isSeeingThroughMessageHiddenForModeration,
isAlignedBetweenBubbles,
};
}