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

10
ts/components/Inbox.tsx
View file

@ -264,24 +264,24 @@ export function Inbox({
<div className="Inbox">
<div className="module-title-bar-drag-area" />
<div className="left-pane-wrapper">{renderLeftPane()}</div>
<div id="LeftPane">{renderLeftPane()}</div>
<div className="conversation-stack">
<div className="Inbox__conversation-stack">
<div id="toast" />
{selectedConversationId && (
<div
className="conversation"
className="Inbox__conversation"
id={`conversation-${selectedConversationId}`}
>
{renderConversationView()}
</div>
)}
{!prevConversationId && (
<div className="no-conversation-open">
<div className="Inbox__no-conversation-open">
{renderMiniPlayer({ shouldFlow: false })}
<div className="module-splash-screen__logo module-img--128 module-logo-blue" />
<h3>{i18n('icu:welcomeToSignal')}</h3>
<p className="whats-new-placeholder">
<p>
<WhatsNewLink
i18n={i18n}
showWhatsNewModal={showWhatsNewModal}

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()}