Updated UserPanel to shrink header if no header image available

• Updated:
- UserPanel to shrink header if no header image available
This commit is contained in:
mgabdev
2020-12-30 12:20:39 -05:00
parent 92d8b3df7c
commit cf9f2bb824
2 changed files with 22 additions and 8 deletions

View File

@@ -12,6 +12,7 @@ import { openModal } from '../../actions/modal'
import {
CX,
MODAL_EDIT_PROFILE,
PLACEHOLDER_MISSING_HEADER_SRC,
} from '../../constants'
import PanelLayout from './panel_layout'
import Avatar from '../avatar'
@@ -50,29 +51,41 @@ class UserPanel extends ImmutablePureComponent {
} = this.props
const { hovering } = this.state
const acct = account.get('acct')
const headerSrc = !!account ? account.get('header') : undefined
const headerMissing = !headerSrc ? true : headerSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1
const buttonClasses = CX({
posAbs: 1,
mt10: 1,
mr10: 1,
top0: 1,
right0: 1,
mt10: 1,
displayNone: !hovering,
})
const acct = account.get('acct')
const headerContainerClasses = CX({
d: 1,
h122PX: !headerMissing,
h55PX: headerMissing,
bgSecondary: headerMissing,
})
return (
<PanelLayout noPadding>
<div
className={[_s.d, _s.h122PX].join(' ')}
className={headerContainerClasses}
onMouseEnter={this.handleOnMouseEnter}
onMouseLeave={this.handleOnMouseLeave}
>
<Image
alt={intl.formatMessage(messages.headerPhoto)}
className={_s.h122PX}
src={account.get('header_static')}
/>
{
!headerMissing &&
<Image
alt={intl.formatMessage(messages.headerPhoto)}
className={_s.h122PX}
src={account.get('header_static')}
/>
}
<Button
color='secondary'
backgroundColor='secondary'