Updated GroupHeader, GroupInfoPanel

• Updated:
- GroupHeader, GroupInfoPanel

app/javascript/gabsocial/components/group_header.js

@@ -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) {
+      actionButtonTitle = intl.formatMessage(isMember ? messages.member : messages.join)
-        actionButtonOptions = {
+      actionButtonOptions = {
-          backgroundColor: 'danger',
+        isOutline: !isMember,
-          color: 'white',
+        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(' ')}>
+                {
-                  {
+                  !!me &&
-                    !!actionButtonTitle &&
+                  <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.alignItemsCenter, _s.height100PC, _s.mlAuto].join(' ')}>
-                <div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
+                      {
-                  <TabBar tabs={tabs} />
+                        !!me &&
-                  <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.mlAuto].join(' ')}>
+                        <div className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
-                    {
+                          <Button
-                      !!actionButtonTitle &&
+                            iconSize='18px'
-                      <Button
+                            color='brand'
-                        radiusSmall
+                            backgroundColor='none'
-                        className={_s.mr5}
+                            className={[_s.mr10, _s.px10].join(' ')}
-                        onClick={this.handleOnToggleMembership}
+                            icon='star-outline'
-                        {...actionButtonOptions}
+                            onClick={this.handleOnOpenGroupOptions}
-                      >
+                            buttonRef={this.setInfoBtn}
-                        <Text color='inherit' size='small' className={_s.px10}>
+                          />  
-                          {actionButtonTitle}
+                          <Button
-                        </Text>
+                            color='primary'
-                      </Button>
+                            backgroundColor='tertiary'
-                    }
+                            className={[_s.mr10, _s.px10].join(' ')}
-
+                            icon='ellipsis'
-                    {
+                            onClick={this.handleOnOpenGroupOptions}
-                      !!me &&
+                            buttonRef={this.setInfoBtn}
-                      <Button
+                          />
-                        radiusSmall
+                        </div>
-                        color='primary'
+                      }  
-                        backgroundColor='tertiary'
+                      {
-                        className={_s.mr5}
+                        !!actionButtonTitle &&
-                        icon='ellipsis'
+                        <Button
-                        onClick={this.handleOnOpenGroupOptions}
+                          className={_s.mr5}
-                        buttonRef={this.setInfoBtn}
+                          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>
     )

app/javascript/gabsocial/components/panel/group_info_panel.js

@@ -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 moment from 'moment-mini'
-import { MODAL_GROUP_MEMBERS } from '../../constants'
-import { me } from '../../initial_state'
 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) => ({
+const mapStateToProps = (state, { group }) => {
-  onOpenGroupMembersModal(groupId) {
+  const groupId = group ? group.get('id') : -1
-    dispatch(openModal(MODAL_GROUP_MEMBERS, { groupId }))
+  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,
-  }
+    relationships: ImmutablePropTypes.map,
-
-  handleOnOpenGroupMembersModal = () => {
-    this.props.onOpenGroupMembersModal(this.props.group.get('id'))
   }
 
   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'))}
+                  &nbsp;
+                  {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 className={_s.mb5}>
-              <Text weight='medium'>
+              {group.get('description')}
-                {group.get('title')}
+            </Text>
-              </Text>
-            </div>
 
             <Divider isSmall />
 
-            {
+            <GroupInfoPanelRow
-              !!me &&
+              title={intl.formatMessage(isPrivate ? messages.privateGroup : messages.publicGroup)}
-              <Fragment>
+              icon={isPrivate ? 'lock-filled' : 'globe'}
-                <div className={[_s.default, _s.flexRow, _s.justifyContentCenter].join(' ')}>
+            >
-                  <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+              <Button
-                    <Icon id='group' size='14px' className={_s.fillPrimary} />
+                isNarrow
-                    <Text size='small' className={_s.ml5}>
+                backgroundColor='secondary'
-                      {intl.formatMessage(messages.members)}
+                color='secondary'
-                    </Text>
+                className={[_s.px5, _s.py2].join(' ')}
-                  </div>
+              >
-                  <Button
+                <Text size='small' color='inherit' className={_s.px5}>?</Text>
-                    isText
+              </Button>
-                    color='brand'
+            </GroupInfoPanelRow>
-                    backgroundColor='none'
-                    className={_s.mlAuto}
-                    onClick={this.handleOnOpenGroupMembersModal}
-                  >
-                    <Text color='inherit' weight='medium' size='normal' className={_s.underline_onHover}>
-                      {shortNumberFormat(group.get('member_count'))}
-                      &nbsp;
-                      {intl.formatMessage(messages.members)}
-                    </Text>
-                  </Button>
-                </div>
 
+            <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'))}
+                  &nbsp;
+                  {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>
+    )
+
+  }
+
 }