random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New groups

Browse Source
This commit is contained in:
2458773093
2019-07-15 16:47:05 +03:00
parent fd50f03304
commit 1fabd28498
30 changed files with 809 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
app/javascript/gabsocial/features/groups/timeline/components/header.js
View File

@@ -1,44 +1,62 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import InnerHeader from './inner_header';
import Button from 'gabsocial/components/button';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { FormattedMessage } from 'react-intl';
import { defineMessages, injectIntl } from 'react-intl';
import { NavLink } from 'react-router-dom';
export default class Header extends ImmutablePureComponent {
const messages = defineMessages({
join: { id: 'groups.join', defaultMessage: 'Join group' },
leave: { id: 'groups.leave', defaultMessage: 'Leave group' },
});
static propTypes = {
group: ImmutablePropTypes.map,
relationships: ImmutablePropTypes.map,
toggleMembership: PropTypes.func.isRequired,
};
export default @injectIntl
class Header extends ImmutablePureComponent {
static propTypes = {
group: ImmutablePropTypes.map,
relationships: ImmutablePropTypes.map,
toggleMembership: PropTypes.func.isRequired,
};
static contextTypes = {
router: PropTypes.object,
};
static contextTypes = {
router: PropTypes.object,
};
render () {
const { group, relationships, toggleMembership } = this.props;
getActionButton() {
const { group, relationships, toggleMembership, intl } = this.props;
const toggle = () => toggleMembership(group, relationships);
if (group === null) {
return null;
}
if (!relationships) {
return '';
} else if (!relationships.get('member')) {
return <Button className='logo-button' text={intl.formatMessage(messages.join)} onClick={toggle} />;
} else if (relationships.get('member')) {
return <Button className='logo-button' text={intl.formatMessage(messages.leave, { name: group.get('title') })} onClick={toggle} />;
}
}
return (
<div className='account-timeline__header'>
<InnerHeader
group={group}
relationships={relationships}
toggleMembership={toggleMembership}
/>
render () {
const { group, relationships } = this.props;
<div className='account__section-headline'>
<NavLink exact to={`/groups/${group.get('id')}`}><FormattedMessage id='groups.posts' defaultMessage='Posts' /></NavLink>
<NavLink exact to={`/groups/${group.get('id')}/accounts`}><FormattedMessage id='group.accounts' defaultMessage='Members' /></NavLink>
</div>
</div>
);
}
if (!group || !relationships) {
return null;
}
return (
<div className='group__header-container'>
<div className="group__header">
<div className='group__cover'>
<img src={group.get('cover_image_url')} alt='' className='parallax' />
</div>
<div className='group__tabs'>
<NavLink exact className='group__tabs__tab' activeClassName='group__tabs__tab--active' to={`/groups/${group.get('id')}`}>Posts</NavLink>
<NavLink exact className='group__tabs__tab' activeClassName='group__tabs__tab--active' to={`/groups/${group.get('id')}/members`}>Members</NavLink>
{this.getActionButton()}
</div>
</div>
</div>
);
}
}

96
app/javascript/gabsocial/features/groups/timeline/components/inner_header.js
View File

@@ -1,96 +0,0 @@
'use strict';
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import Button from 'gabsocial/components/button';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Icon from 'gabsocial/components/icon';
import DropdownMenuContainer from 'gabsocial/containers/dropdown_menu_container';
const messages = defineMessages({
join: { id: 'groups.join', defaultMessage: 'Join' },
leave: { id: 'groups.leave', defaultMessage: 'Leave' },
});
export default @injectIntl
class InnerHeader extends ImmutablePureComponent {
static propTypes = {
group: ImmutablePropTypes.map,
relationships: ImmutablePropTypes.map,
toggleMembership: PropTypes.func.isRequired,
};
isStatusesPageActive = (match, location) => {
if (!match) {
return false;
}
return !location.pathname.match(/\/(accounts)\/?$/);
}
render () {
const { group, relationships, intl } = this.props;
if (!group || !relationships) {
return null;
}
let info = [];
let actionBtn = '';
let lockedIcon = '';
let menu = [];
if (relationships.get('admin')) {
info.push(<span key='admin'><FormattedMessage id='group.admin' defaultMessage='You are an admin' /></span>);
}
if (!relationships) { // Wait until the relationship is loaded
actionBtn = '';
} else if (!relationships.get('member')) {
actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.join)} onClick={() => this.props.toggleMembership(group, relationships)} />;
} else if (relationships.get('member')) {
actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.leave, { name: group.get('title') })} onClick={() => this.props.toggleMembership(group, relationships)} />;
}
if (group.get('archived')) {
lockedIcon = <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />;
}
return (
<div className='account__header'>
<div className='account__header__image'>
<div className='account__header__info'>
<img src={group.get('cover_image_url')} alt='' className='parallax' />
</div>
</div>
<div className='account__header__bar'>
<div className='account__header__tabs'>
<div className='account__header__tabs__buttons'>
{actionBtn}
<DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />
</div>
</div>
<div className='account__header__tabs__name'>
<h1>
<span>{group.get('title')} {info}</span>
<small>{lockedIcon}</small>
</h1>
</div>
<div className='account__header__extra'>
<div className='account__header__bio'>
{group.get('description').length > 0 && <div className='account__header__content'>{group.get('description')}</div>}
</div>
</div>
</div>
</div>
);
}
}

34
app/javascript/gabsocial/features/groups/timeline/components/panel.js Normal file
View File

@@ -0,0 +1,34 @@
import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { injectIntl, defineMessages } from 'react-intl';
const messages = defineMessages({
group_archived: { id: 'group.detail.archived_group', defaultMessage: 'Archived group' },
group_admin: { id: 'groups.detail.role_admin', defaultMessage: 'You\'re an admin' }
});
export default @injectIntl
class GroupPanel extends ImmutablePureComponent {
static propTypes = {
group: ImmutablePropTypes.map,
relationships: ImmutablePropTypes.map,
}
render() {
const { group, relationships, intl } = this.props;
return (
<div className="group__panel">
<h1 className="group__panel__title">
{group.get('title')}
{group.get('archived') && <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />}
</h1>
{relationships.get('admin') && <span className="group__panel__label">{intl.formatMessage(messages.group_admin)}</span>}
<div className="group__panel__description">{group.get('description')}</div>
</div>
);
}
}