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

Add conversation header button hover states

Browse source
This commit is contained in:
Evan Hahn 2021-03-02 19:16:04 -06:00 • committed by Josh Perez
parent a2a0d56270
commit 8c951602b7
2 changed files with 113 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -249,10 +249,9 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
type="button"
onClick={this.showMenuBound}
className={classNames(
'module-ConversationHeader__more-button',
showBackButton
? null
: 'module-ConversationHeader__more-button--show'
'module-ConversationHeader__button',
'module-ConversationHeader__button--more',
showBackButton ? null : 'module-ConversationHeader__button--show'
)}
disabled={showBackButton}
aria-label={i18n('moreInfo')}
@ -269,10 +268,9 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
type="button"
onClick={onSearchInConversation}
className={classNames(
'module-ConversationHeader__search-button',
showBackButton
? null
: 'module-ConversationHeader__search-button--show'
'module-ConversationHeader__button',
'module-ConversationHeader__button--search',
showBackButton ? null : 'module-ConversationHeader__button--show'
)}
disabled={showBackButton}
aria-label={i18n('search')}
@ -295,11 +293,9 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
type="button"
onClick={onOutgoingVideoCallInConversation}
className={classNames(
'module-ConversationHeader__calling-button',
'module-ConversationHeader__calling-button--video',
showBackButton
? null
: 'module-ConversationHeader__calling-button--show'
'module-ConversationHeader__button',
'module-ConversationHeader__button--video',
showBackButton ? null : 'module-ConversationHeader__button--show'
)}
disabled={showBackButton}
aria-label={i18n('makeOutgoingVideoCall')}
@ -319,11 +315,11 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
type="button"
onClick={onOutgoingAudioCallInConversation}
className={classNames(
'module-ConversationHeader__calling-button',
'module-ConversationHeader__calling-button--audio',
'module-ConversationHeader__button',
'module-ConversationHeader__button--audio',
showBackButton
? null
: 'module-ConversationHeader__calling-button--show'
: 'module-ConversationHeader__button--show'
)}
disabled={showBackButton}
aria-label={i18n('makeOutgoingCall')}
@ -337,11 +333,9 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
type="button"
onClick={onOutgoingVideoCallInConversation}
className={classNames(
'module-ConversationHeader__calling-button',
'module-ConversationHeader__calling-button--join',
showBackButton
? null
: 'module-ConversationHeader__calling-button--show'
'module-ConversationHeader__button',
'module-ConversationHeader__button--join-call',
showBackButton ? null : 'module-ConversationHeader__button--show'
)}
disabled={showBackButton}
>
@ -576,8 +570,10 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
<Measure
bounds
onResize={({ bounds }) => {
const width = (bounds && bounds.width) || 0;
this.setState({ isNarrow: width < 500 });
if (!bounds || !bounds.width) {
return;
}
this.setState({ isNarrow: bounds.width < 500 });
}}
>
{({ measureRef }) => (