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

Animate in-conversation panels on show/hide

Browse source
This commit is contained in:
Ken Powers 2019-07-25 12:24:03 -04:00 • committed by Scott Nonnenberg
parent c952d628c1
commit 464361b2eb
6 changed files with 112 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

33
ts/components/conversation/ConversationHeader.tsx
View file

@ -1,4 +1,5 @@
import React from 'react';
import classnames from 'classnames';
import { Emojify } from './Emojify';
import { Avatar } from '../Avatar';
@ -49,7 +50,7 @@ interface Props {
}
export class ConversationHeader extends React.Component<Props> {
public showMenuBound: (event: React.MouseEvent<HTMLDivElement>) => void;
public showMenuBound: (event: React.MouseEvent<HTMLButtonElement>) => void;
public menuTriggerRef: React.RefObject<any>;
public constructor(props: Props) {
@ -59,7 +60,7 @@ export class ConversationHeader extends React.Component<Props> {
this.showMenuBound = this.showMenu.bind(this);
}
public showMenu(event: React.MouseEvent<HTMLDivElement>) {
public showMenu(event: React.MouseEvent<HTMLButtonElement>) {
if (this.menuTriggerRef.current) {
this.menuTriggerRef.current.handleContextClick(event);
}
@ -68,15 +69,14 @@ export class ConversationHeader extends React.Component<Props> {
public renderBackButton() {
const { onGoBack, showBackButton } = this.props;
if (!showBackButton) {
return null;
}
return (
<div
<button
onClick={onGoBack}
role="button"
className="module-conversation-header__back-icon"
className={classnames(
'module-conversation-header__back-icon',
showBackButton ? 'module-conversation-header__back-icon--show' : null
)}
disabled={!showBackButton}
/>
);
}
@ -171,16 +171,17 @@ export class ConversationHeader extends React.Component<Props> {
public renderGear(triggerId: string) {
const { showBackButton } = this.props;
if (showBackButton) {
return null;
}
return (
<ContextMenuTrigger id={triggerId} ref={this.menuTriggerRef}>
<div
role="button"
<button
onClick={this.showMenuBound}
className="module-conversation-header__gear-icon"
className={classnames(
'module-conversation-header__gear-icon',
showBackButton
? null
: 'module-conversation-header__gear-icon--show'
)}
disabled={showBackButton}
/>
</ContextMenuTrigger>
);