Adds transitions to panels
Co-authored-by: Jamie Kyle <jamie@signal.org>
This commit is contained in:
parent
bbd43b6e38
commit
4ec94367c9
40 changed files with 708 additions and 414 deletions
|
@ -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()}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue