mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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()}