FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-22 19:15:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Portal the fullscreen viewer to avoid issues

Browse Source
This commit is contained in:
denis0001-dev
2025-10-02 21:27:14 +03:00
Unverified
parent 9e3449d07d
commit de3caf880a
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/app/ui/components/chat/Message.tsx
+5 -3
View File
@@ -1,4 +1,4 @@
import { formatTime } from "../../../utils/utils"; import { formatTime, id } from "../../../utils/utils";
import type { Attachment, Message as MessageType } from "../../../core/types"; import type { Attachment, Message as MessageType } from "../../../core/types";
import defaultAvatar from "../../../resources/images/default-avatar.png"; import defaultAvatar from "../../../resources/images/default-avatar.png";
import Quote from "../core/Quote"; import Quote from "../core/Quote";
@@ -12,6 +12,7 @@ import { getAuthHeaders } from "../../../auth/api";
import { useAppState } from "../../state"; import { useAppState } from "../../state";
import { ub64 } from "../../../utils/utils"; import { ub64 } from "../../../utils/utils";
import { useImmer } from "use-immer"; import { useImmer } from "use-immer";
import { createPortal } from "react-dom";
interface MessageProps { interface MessageProps {
message: MessageType; message: MessageType;
@@ -398,7 +399,7 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
</div> </div>
{/* Fullscreen Image Viewer with shared-element like transition */} {/* Fullscreen Image Viewer with shared-element like transition */}
{fullscreenImage && ( {fullscreenImage && createPortal(
<div <div
className={`fullscreen-image-overlay ${isAnimatingOpen ? "open" : "closing"}`} className={`fullscreen-image-overlay ${isAnimatingOpen ? "open" : "closing"}`}
onClick={closeFullscreen}> onClick={closeFullscreen}>
@@ -424,7 +425,8 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
<mdui-button-icon icon="download" onClick={downloadImage} /> <mdui-button-icon icon="download" onClick={downloadImage} />
)} )}
</div> </div>
</div> </div>,
id("root")
)} )}
</> </>
); );