Updated GroupHeader, GroupInfoPanel
• Updated: - GroupHeader, GroupInfoPanel
This commit is contained in:
mgabdev
parent
4b9ad5445e
commit
b8b5edb581
|
|
@ -12,13 +12,16 @@ import { me } from '../initial_state'
|
|||
import Responsive from '../features/ui/util/responsive_component'
|
||||
import Button from './button'
|
||||
import Block from './block'
|
||||
import Heading from './heading'
|
||||
import Image from './image'
|
||||
import Icon from './icon'
|
||||
import TabBar from './tab_bar'
|
||||
import Pills from './pills'
|
||||
import Text from './text'
|
||||
|
||||
const messages = defineMessages({
|
||||
join: { id: 'groups.join', defaultMessage: 'Join group' },
|
||||
leave: { id: 'groups.leave', defaultMessage: 'Leave group' },
|
||||
member: { id: 'groups.member', defaultMessage: 'Member' },
|
||||
removed_accounts: { id: 'groups.removed_accounts', defaultMessage: 'Removed Accounts' },
|
||||
group_archived: { id: 'group.detail.archived_group', defaultMessage: 'Archived group' },
|
||||
group_admin: { id: 'groups.detail.role_admin', defaultMessage: 'You\'re an admin' }
|
||||
|
|
@ -54,6 +57,7 @@ class GroupHeader extends ImmutablePureComponent {
|
|||
group: ImmutablePropTypes.map,
|
||||
children: PropTypes.any,
|
||||
intl: PropTypes.object.isRequired,
|
||||
isXS: PropTypes.bool,
|
||||
onToggleMembership: PropTypes.func.isRequired,
|
||||
onOpenGroupOptions: PropTypes.func.isRequired,
|
||||
relationships: ImmutablePropTypes.map,
|
||||
|
|
@ -79,35 +83,55 @@ class GroupHeader extends ImmutablePureComponent {
|
|||
children,
|
||||
group,
|
||||
intl,
|
||||
isXS,
|
||||
relationships,
|
||||
} = this.props
|
||||
|
||||
const tabs = !group ? null : [
|
||||
{
|
||||
to: `/groups/${group.get('id')}`,
|
||||
title: 'Latest',
|
||||
},
|
||||
]
|
||||
|
||||
const coverSrc = !!group ? group.get('cover_image_url') : ''
|
||||
const coverSrcMissing = coverSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !coverSrc
|
||||
const title = !!group ? group.get('title') : undefined
|
||||
|
||||
const slug = !!group ? !!group.get('slug') ? `g/${group.get('slug')}` : undefined : undefined
|
||||
|
||||
let isAdmin = false
|
||||
let actionButtonTitle
|
||||
let actionButtonOptions = {}
|
||||
if (relationships) {
|
||||
isAdmin = relationships.get('admin')
|
||||
const isMember = relationships.get('member')
|
||||
actionButtonTitle = intl.formatMessage(!isMember ? messages.join : messages.leave)
|
||||
if (isMember) {
|
||||
actionButtonOptions = {
|
||||
backgroundColor: 'danger',
|
||||
color: 'white',
|
||||
}
|
||||
|
||||
actionButtonTitle = intl.formatMessage(isMember ? messages.member : messages.join)
|
||||
actionButtonOptions = {
|
||||
isOutline: !isMember,
|
||||
backgroundColor: isMember ? 'brand' : 'none',
|
||||
color: isMember ? 'white' : 'brand',
|
||||
}
|
||||
}
|
||||
|
||||
const tabs = !group ? [] : [
|
||||
{
|
||||
to: `/groups/${group.get('id')}`,
|
||||
title: 'Timeline',
|
||||
},
|
||||
{
|
||||
to: `/groups/${group.get('id')}/media`,
|
||||
title: 'Media',
|
||||
},
|
||||
]
|
||||
|
||||
if (isAdmin && group) {
|
||||
tabs.push({
|
||||
to: `/groups/${group.get('id')}/members`,
|
||||
title: 'Members',
|
||||
})
|
||||
}
|
||||
|
||||
if (isXS && group) {
|
||||
tabs.push({
|
||||
to: `/groups/${group.get('id')}/about`,
|
||||
title: 'About',
|
||||
})
|
||||
}
|
||||
|
||||
// : todo :
|
||||
// {group.get('archived') && <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />}
|
||||
|
||||
|
|
@ -128,38 +152,36 @@ class GroupHeader extends ImmutablePureComponent {
|
|||
{children}
|
||||
</div>
|
||||
|
||||
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.borderTop1PX, _s.borderColorSecondary, _s.mt5, _s.pt15, _s.height100PC, _s.px15].join(' ')}>
|
||||
{
|
||||
!!actionButtonTitle &&
|
||||
{
|
||||
!!me &&
|
||||
<div className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter, _s.mt5, _s.pb15, _s.pt5, _s.height100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15].join(' ')}>
|
||||
{
|
||||
!!actionButtonTitle &&
|
||||
<Button
|
||||
className={_s.mr5}
|
||||
onClick={this.handleOnToggleMembership}
|
||||
{...actionButtonOptions}
|
||||
>
|
||||
<Text color='inherit' size='medium' weight='bold' className={_s.px10}>
|
||||
{actionButtonTitle}
|
||||
</Text>
|
||||
</Button>
|
||||
}
|
||||
|
||||
<Button
|
||||
radiusSmall
|
||||
className={_s.mr5}
|
||||
onClick={this.handleOnToggleMembership}
|
||||
{...actionButtonOptions}
|
||||
>
|
||||
<Text color='inherit' size='small' className={_s.px10}>
|
||||
{actionButtonTitle}
|
||||
</Text>
|
||||
</Button>
|
||||
}
|
||||
|
||||
{
|
||||
isAdmin &&
|
||||
<Button
|
||||
radiusSmall
|
||||
color='primary'
|
||||
backgroundColor='tertiary'
|
||||
className={_s.mr5}
|
||||
className={[_s.px10, _s.mr5].join(' ')}
|
||||
icon='ellipsis'
|
||||
onClick={this.handleOnOpenGroupOptions}
|
||||
buttonRef={this.setInfoBtn}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className={[_s.default, _s.flexRow, _s.height100PC, _s.mt15, _s.pt10, _s.px10].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.height100PC, _s.mt5, _s.pt10, _s.pb5, _s.mb5, _s.px10].join(' ')}>
|
||||
|
||||
<TabBar tabs={tabs} />
|
||||
<Pills pills={tabs} />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -169,49 +191,79 @@ class GroupHeader extends ImmutablePureComponent {
|
|||
|
||||
{ /** desktop */}
|
||||
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
|
||||
<Block>
|
||||
<div className={[_s.default, _s.boxShadowBlock, _s.bgPrimary, _s.bottomLeftRadiusSmall, _s.bottomRightRadiusSmall].join(' ')}>
|
||||
<div className={[_s.default, _s.width100PC].join(' ')}>
|
||||
|
||||
{
|
||||
coverSrc && !coverSrcMissing &&
|
||||
<Image className={_s.height350PX} src={coverSrc} alt={title} />
|
||||
}
|
||||
|
||||
<div className={[_s.default].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.py10, _s.px10].join(' ')}>
|
||||
<div className={[_s.default, _s.width100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow].join(' ')}>
|
||||
<Icon id='group' size='28px' />
|
||||
<div className={[_s.default, _s.ml7, _s.flexNormal].join(' ')}>
|
||||
<Heading>
|
||||
{title}
|
||||
</Heading>
|
||||
{
|
||||
!!slug &&
|
||||
<Heading size='h4'>
|
||||
{slug}
|
||||
</Heading>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={[_s.default, _s.height53PX, _s.width100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
|
||||
|
||||
<TabBar tabs={tabs} isLarge />
|
||||
|
||||
<div className={[_s.default, _s.height53PX, _s.width100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
|
||||
<TabBar tabs={tabs} />
|
||||
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.mlAuto].join(' ')}>
|
||||
{
|
||||
!!actionButtonTitle &&
|
||||
<Button
|
||||
radiusSmall
|
||||
className={_s.mr5}
|
||||
onClick={this.handleOnToggleMembership}
|
||||
{...actionButtonOptions}
|
||||
>
|
||||
<Text color='inherit' size='small' className={_s.px10}>
|
||||
{actionButtonTitle}
|
||||
</Text>
|
||||
</Button>
|
||||
}
|
||||
|
||||
{
|
||||
!!me &&
|
||||
<Button
|
||||
radiusSmall
|
||||
color='primary'
|
||||
backgroundColor='tertiary'
|
||||
className={_s.mr5}
|
||||
icon='ellipsis'
|
||||
onClick={this.handleOnOpenGroupOptions}
|
||||
buttonRef={this.setInfoBtn}
|
||||
/>
|
||||
}
|
||||
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.mlAuto].join(' ')}>
|
||||
{
|
||||
!!me &&
|
||||
<div className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
|
||||
<Button
|
||||
iconSize='18px'
|
||||
color='brand'
|
||||
backgroundColor='none'
|
||||
className={[_s.mr10, _s.px10].join(' ')}
|
||||
icon='star-outline'
|
||||
onClick={this.handleOnOpenGroupOptions}
|
||||
buttonRef={this.setInfoBtn}
|
||||
/>
|
||||
<Button
|
||||
color='primary'
|
||||
backgroundColor='tertiary'
|
||||
className={[_s.mr10, _s.px10].join(' ')}
|
||||
icon='ellipsis'
|
||||
onClick={this.handleOnOpenGroupOptions}
|
||||
buttonRef={this.setInfoBtn}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
!!actionButtonTitle &&
|
||||
<Button
|
||||
className={_s.mr5}
|
||||
onClick={this.handleOnToggleMembership}
|
||||
{...actionButtonOptions}
|
||||
>
|
||||
<Text color='inherit' size='medium' weight='bold' className={_s.px10}>
|
||||
{actionButtonTitle}
|
||||
</Text>
|
||||
</Button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Block>
|
||||
</div>
|
||||
</Responsive>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,117 +1,239 @@
|
|||
import { Fragment } from 'react'
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import { openModal } from '../../actions/modal'
|
||||
import { MODAL_GROUP_MEMBERS } from '../../constants'
|
||||
import { me } from '../../initial_state'
|
||||
import moment from 'moment-mini'
|
||||
import { shortNumberFormat } from '../../utils/numbers'
|
||||
import PanelLayout from './panel_layout'
|
||||
import Button from '../button'
|
||||
import Divider from '../divider'
|
||||
import Dummy from '../dummy'
|
||||
import Heading from '../heading'
|
||||
import Icon from '../icon'
|
||||
import Text from '../text'
|
||||
import RelativeTimestamp from '../relative_timestamp'
|
||||
import DotTextSeperator from '../dot_text_seperator'
|
||||
import ProfileInfoPanelPlaceholder from '../placeholder/profile_info_panel_placeholder'
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'about', defaultMessage: 'About' },
|
||||
members: { id: 'members', defaultMessage: 'Members' },
|
||||
created: { id: 'created', defaultMessage: 'Created' },
|
||||
category: { id: 'category', defaultMessage: 'Category' },
|
||||
tags: { id: 'tags', defaultMessage: 'Tags' },
|
||||
privateGroup: { id: 'group.private', defaultMessage: 'Private' },
|
||||
publicGroup: { id: 'group.public', defaultMessage: 'Public' },
|
||||
visibleGroup: { id: 'group.visible', defaultMessage: 'Visible' },
|
||||
invisibleGroup: { id: 'group.invisible', defaultMessage: 'Invisible' },
|
||||
})
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onOpenGroupMembersModal(groupId) {
|
||||
dispatch(openModal(MODAL_GROUP_MEMBERS, { groupId }))
|
||||
},
|
||||
})
|
||||
const mapStateToProps = (state, { group }) => {
|
||||
const groupId = group ? group.get('id') : -1
|
||||
const relationships = group === -1 ? null : state.getIn(['group_relationships', groupId])
|
||||
|
||||
return { relationships }
|
||||
}
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
@connect(null, mapDispatchToProps)
|
||||
@connect(mapStateToProps)
|
||||
class GroupInfoPanel extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
group: ImmutablePropTypes.map.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
onOpenGroupMembersModal: PropTypes.func.isRequired,
|
||||
noPanel: PropTypes.bool,
|
||||
}
|
||||
|
||||
handleOnOpenGroupMembersModal = () => {
|
||||
this.props.onOpenGroupMembersModal(this.props.group.get('id'))
|
||||
relationships: ImmutablePropTypes.map,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, group, noPanel } = this.props
|
||||
const {
|
||||
intl,
|
||||
group,
|
||||
noPanel,
|
||||
relationships,
|
||||
} = this.props
|
||||
|
||||
const Wrapper = noPanel ? Dummy : PanelLayout
|
||||
if (!group && !noPanel) {
|
||||
return (
|
||||
<div title={intl.formatMessage(messages.title)}>
|
||||
<ProfileInfoPanelPlaceholder />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const isAdmin = relationships ? relationships.get('admin') : false
|
||||
const groupId = !!group ? group.get('id') : ''
|
||||
const slug = !!group ? !!group.get('slug') ? `g/${group.get('slug')}` : undefined : undefined
|
||||
const isPrivate = !!group ? group.get('is_private') : false
|
||||
const isVisible = !!group ? group.get('is_visible') : false
|
||||
const tags = !!group ? group.get('tags') : []
|
||||
|
||||
if (noPanel) {
|
||||
return (
|
||||
<div className={[_s.default].join(' ')}>
|
||||
{
|
||||
!!group &&
|
||||
<Fragment>
|
||||
<Heading isCentered>
|
||||
{group.get('title')}
|
||||
</Heading>
|
||||
{
|
||||
!!slug &&
|
||||
<Text className={_s.mt5} size='small' color='secondary' align='center'>
|
||||
{slug}
|
||||
</Text>
|
||||
}
|
||||
<Text className={[_s.mt10, _s.py2].join(' ')} color='secondary' size='small' align='center'>
|
||||
{group.get('description')}
|
||||
</Text>
|
||||
<div className={[_s.default, _s.mt10, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
|
||||
<Text color='secondary' size='small' align='center'>
|
||||
<Icon
|
||||
id={isPrivate ? 'lock-filled' : 'globe'}
|
||||
size='10px'
|
||||
className={_s.fillSecondary}
|
||||
/>
|
||||
<span className={_s.ml5}>
|
||||
{intl.formatMessage(isPrivate ? messages.privateGroup : messages.publicGroup)}
|
||||
</span>
|
||||
</Text>
|
||||
<DotTextSeperator />
|
||||
<Text className={_s.ml5} color='secondary' size='small' align='center'>
|
||||
{shortNumberFormat(group.get('member_count'))}
|
||||
|
||||
{intl.formatMessage(messages.members)}
|
||||
</Text>
|
||||
</div>
|
||||
</Fragment>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Wrapper title={intl.formatMessage(messages.title)}>
|
||||
<PanelLayout title={intl.formatMessage(messages.title)}>
|
||||
{
|
||||
!!group &&
|
||||
<Fragment>
|
||||
|
||||
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
|
||||
<Text weight='medium'>
|
||||
{group.get('title')}
|
||||
</Text>
|
||||
</div>
|
||||
<Text className={_s.mb5}>
|
||||
{group.get('description')}
|
||||
</Text>
|
||||
|
||||
<Divider isSmall />
|
||||
|
||||
{
|
||||
!!me &&
|
||||
<Fragment>
|
||||
<div className={[_s.default, _s.flexRow, _s.justifyContentCenter].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
|
||||
<Icon id='group' size='14px' className={_s.fillPrimary} />
|
||||
<Text size='small' className={_s.ml5}>
|
||||
{intl.formatMessage(messages.members)}
|
||||
</Text>
|
||||
</div>
|
||||
<Button
|
||||
isText
|
||||
color='brand'
|
||||
backgroundColor='none'
|
||||
className={_s.mlAuto}
|
||||
onClick={this.handleOnOpenGroupMembersModal}
|
||||
>
|
||||
<Text color='inherit' weight='medium' size='normal' className={_s.underline_onHover}>
|
||||
{shortNumberFormat(group.get('member_count'))}
|
||||
|
||||
{intl.formatMessage(messages.members)}
|
||||
</Text>
|
||||
</Button>
|
||||
</div>
|
||||
<GroupInfoPanelRow
|
||||
title={intl.formatMessage(isPrivate ? messages.privateGroup : messages.publicGroup)}
|
||||
icon={isPrivate ? 'lock-filled' : 'globe'}
|
||||
>
|
||||
<Button
|
||||
isNarrow
|
||||
backgroundColor='secondary'
|
||||
color='secondary'
|
||||
className={[_s.px5, _s.py2].join(' ')}
|
||||
>
|
||||
<Text size='small' color='inherit' className={_s.px5}>?</Text>
|
||||
</Button>
|
||||
</GroupInfoPanelRow>
|
||||
|
||||
<Divider isSmall />
|
||||
|
||||
<GroupInfoPanelRow
|
||||
title={intl.formatMessage(isVisible ? messages.visibleGroup : messages.invisibleGroup)}
|
||||
icon={isVisible ? 'visible' : 'invisible'}
|
||||
>
|
||||
<Button
|
||||
isNarrow
|
||||
backgroundColor='secondary'
|
||||
color='secondary'
|
||||
className={[_s.px5, _s.py2].join(' ')}
|
||||
>
|
||||
<Text size='small' color='inherit' className={_s.px5}>?</Text>
|
||||
</Button>
|
||||
</GroupInfoPanelRow>
|
||||
|
||||
<Divider isSmall />
|
||||
|
||||
<GroupInfoPanelRow title={intl.formatMessage(messages.members)} icon='group'>
|
||||
<Button
|
||||
isText
|
||||
color={isAdmin ? 'brand' : 'primary'}
|
||||
backgroundColor='none'
|
||||
className={_s.mlAuto}
|
||||
to={isAdmin ? `/groups/${groupId}/members` : undefined}
|
||||
>
|
||||
<Text color='inherit' weight={isAdmin ? 'medium' : 'normal'} size='normal' className={isAdmin ? _s.underline_onHover : undefined}>
|
||||
{shortNumberFormat(group.get('member_count'))}
|
||||
|
||||
{intl.formatMessage(messages.members)}
|
||||
</Text>
|
||||
</Button>
|
||||
</GroupInfoPanelRow>
|
||||
|
||||
<Divider isSmall />
|
||||
|
||||
<GroupInfoPanelRow title={intl.formatMessage(messages.category)} icon='apps'>
|
||||
<Text>General</Text>
|
||||
</GroupInfoPanelRow>
|
||||
|
||||
<Divider isSmall />
|
||||
|
||||
<GroupInfoPanelRow title={intl.formatMessage(messages.created)} icon='calendar'>
|
||||
<Text>
|
||||
{moment(group.get('created_at')).format('LL')}
|
||||
</Text>
|
||||
</GroupInfoPanelRow>
|
||||
|
||||
{
|
||||
!!tags &&
|
||||
<Fragment>
|
||||
<Divider isSmall />
|
||||
<GroupInfoPanelRow title={intl.formatMessage(messages.tags)} icon='shop'>
|
||||
<div className={[_s.default, _s.flexRow, _s.justifyContentEnd, _s.flexWrap, _s.pl5].join(' ')}>
|
||||
{
|
||||
tags.map((tag) => (
|
||||
<div className={[_s.mr5, _s.mb5].join(' ')}>
|
||||
<Text size='small' className={[_s.bgSecondary, _s.radiusSmall, _s.px10, _s.py2, _s.lineHeight15].join(' ')}>
|
||||
{tag}
|
||||
</Text>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</GroupInfoPanelRow>
|
||||
</Fragment>
|
||||
}
|
||||
|
||||
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
|
||||
<Icon id='calendar' size='12px' className={_s.fillSecondary} />
|
||||
<Text
|
||||
size='small'
|
||||
color='secondary'
|
||||
className={_s.ml5}
|
||||
>
|
||||
{
|
||||
<FormattedMessage id='lists.panel_created' defaultMessage='Created: {date}' values={{
|
||||
date: <RelativeTimestamp timestamp={group.get('created_at')} />,
|
||||
}} />
|
||||
}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<Divider isSmall />
|
||||
|
||||
<Text>
|
||||
{group.get('description')}
|
||||
</Text>
|
||||
</Fragment>
|
||||
}
|
||||
</Wrapper>
|
||||
</PanelLayout>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
class GroupInfoPanelRow extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
icon: PropTypes.string,
|
||||
title: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { icon, title } = this.props
|
||||
|
||||
return (
|
||||
<div className={[_s.default, _s.flexRow, _s.py2].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.justifyContentCenter].join(' ')}>
|
||||
<Icon id={icon} size='16px' />
|
||||
<Text weight='bold' size='medium' className={_s.ml10}>
|
||||
{title}
|
||||
</Text>
|
||||
</div>
|
||||
<div className={_s.mlAuto}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue