Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2025-12-24 20:26:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adds transitions to panels

Browse Source 
Co-authored-by: Jamie Kyle <jamie@signal.org>
This commit is contained in:
Josh Perez
2023-07-26 18:23:32 -04:00
committed by GitHub
parent bbd43b6e38
commit 4ec94367c9
40 changed files with 708 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
ts/components/conversation/ConversationView.tsx
View File

@@ -2,6 +2,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import classNames from 'classnames';
import { useEscapeHandling } from '../../hooks/useEscapeHandling';
export type PropsType = {
@@ -17,6 +18,7 @@ export type PropsType = {
renderConversationHeader: () => JSX.Element;
renderTimeline: () => JSX.Element;
renderPanel: () => JSX.Element | undefined;
shouldHideConversationView?: boolean;
};
export function ConversationView({
@@ -29,6 +31,7 @@ export function ConversationView({
renderConversationHeader,
renderTimeline,
renderPanel,
shouldHideConversationView,
}: PropsType): JSX.Element {
const onDrop = React.useCallback(
(event: React.DragEvent<HTMLDivElement>) => {
@@ -92,18 +95,28 @@ export function ConversationView({
);
return (
<div className="ConversationView" onDrop={onDrop} onPaste={onPaste}>
<div className="ConversationView__header">
{renderConversationHeader()}
</div>
<div className="ConversationView__pane main panel">
<div className="ConversationView__timeline--container">
<div aria-live="polite" className="ConversationView__timeline">
{renderTimeline()}
</div>
<div
className="ConversationView ConversationPanel"
onDrop={onDrop}
onPaste={onPaste}
>
<div
className={classNames('ConversationPanel', {
ConversationPanel__hidden: shouldHideConversationView,
})}
>
<div className="ConversationView__header">
{renderConversationHeader()}
</div>
<div className="ConversationView__composition-area">
{renderCompositionArea()}
<div className="ConversationView__pane">
<div className="ConversationView__timeline--container">
<div aria-live="polite" className="ConversationView__timeline">
{renderTimeline()}
</div>
</div>
<div className="ConversationView__composition-area">
{renderCompositionArea()}
</div>
</div>
</div>
{renderPanel()}