sforkowany z mirror/soapbox
LatestAccountsPanel: add expand button, use compact display of accounts
rodzic
5f3b33cce7
commit
12939e3354
|
@ -11,6 +11,7 @@ import IconButton from './icon_button';
|
|||
import RelativeTimestamp from './relative_timestamp';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import classNames from 'classnames';
|
||||
|
||||
const messages = defineMessages({
|
||||
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
||||
|
@ -44,8 +45,14 @@ class Account extends ImmutablePureComponent {
|
|||
actionTitle: PropTypes.string,
|
||||
onActionClick: PropTypes.func,
|
||||
withDate: PropTypes.bool,
|
||||
withRelationship: PropTypes.bool,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
withDate: false,
|
||||
withRelationship: true,
|
||||
}
|
||||
|
||||
handleFollow = () => {
|
||||
this.props.onFollow(this.props.account);
|
||||
}
|
||||
|
@ -71,7 +78,7 @@ class Account extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { account, intl, hidden, onActionClick, actionIcon, actionTitle, me, withDate } = this.props;
|
||||
const { account, intl, hidden, onActionClick, actionIcon, actionTitle, me, withDate, withRelationship } = this.props;
|
||||
|
||||
if (!account) {
|
||||
return <div />;
|
||||
|
@ -87,7 +94,7 @@ class Account extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
let buttons;
|
||||
let followed_by;
|
||||
let followedBy;
|
||||
|
||||
if (onActionClick && actionIcon) {
|
||||
buttons = <IconButton icon={actionIcon} title={actionTitle} onClick={this.handleAction} />;
|
||||
|
@ -97,7 +104,7 @@ class Account extends ImmutablePureComponent {
|
|||
const blocking = account.getIn(['relationship', 'blocking']);
|
||||
const muting = account.getIn(['relationship', 'muting']);
|
||||
|
||||
followed_by = account.getIn(['relationship', 'followed_by']);
|
||||
followedBy = account.getIn(['relationship', 'followed_by']);
|
||||
|
||||
if (requested) {
|
||||
buttons = <IconButton disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />;
|
||||
|
@ -121,29 +128,36 @@ class Account extends ImmutablePureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
const createdAt = account.get('created_at');
|
||||
|
||||
const joinedAt = createdAt ? (
|
||||
<div className='account__joined-at'>
|
||||
<Icon id='calendar' />
|
||||
<RelativeTimestamp timestamp={createdAt} />
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<div className='account'>
|
||||
<div className={classNames('account', { 'account--with-relationship': withRelationship, 'account--with-date': withDate })}>
|
||||
<div className='account__wrapper'>
|
||||
<Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={`/@${account.get('acct')}`} to={`/@${account.get('acct')}`}>
|
||||
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
|
||||
<DisplayName account={account} />
|
||||
</Permalink>
|
||||
|
||||
{ followed_by ?
|
||||
{withRelationship ? (<>
|
||||
{followedBy &&
|
||||
<span className='relationship-tag'>
|
||||
<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
|
||||
</span>
|
||||
: '' }
|
||||
</span>}
|
||||
|
||||
<div className='account__relationship'>
|
||||
{buttons}
|
||||
</div>
|
||||
</>) : withDate && joinedAt}
|
||||
</div>
|
||||
|
||||
{withDate && (<div className='account__joined-at'>
|
||||
<Icon id='calendar' />
|
||||
<RelativeTimestamp timestamp={account.get('created_at')} />
|
||||
</div>)}
|
||||
{(withDate && withRelationship) && joinedAt}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -9,6 +9,7 @@ import { fetchUsers } from 'soapbox/actions/admin';
|
|||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'admin.latest_accounts_panel.title', defaultMessage: 'Latest Accounts' },
|
||||
expand: { id: 'admin.latest_accounts_panel.expand_message', defaultMessage: 'Click to see {count} more {count, plural, one {account} other {accounts}}' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
|
@ -28,13 +29,23 @@ class LatestAccountsPanel extends ImmutablePureComponent {
|
|||
limit: 5,
|
||||
}
|
||||
|
||||
state = {
|
||||
total: 0,
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { dispatch, limit } = this.props;
|
||||
dispatch(fetchUsers(['local', 'active'], 1, null, limit));
|
||||
|
||||
dispatch(fetchUsers(['local', 'active'], 1, null, limit))
|
||||
.then(({ count }) => {
|
||||
this.setState({ total: count });
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, accountIds, limit, ...props } = this.props;
|
||||
const { total } = this.state;
|
||||
|
||||
if (!accountIds || accountIds.isEmpty()) {
|
||||
return null;
|
||||
|
@ -46,6 +57,11 @@ class LatestAccountsPanel extends ImmutablePureComponent {
|
|||
title={intl.formatMessage(messages.title)}
|
||||
accountIds={accountIds}
|
||||
limit={limit}
|
||||
total={total}
|
||||
expandMessage={intl.formatMessage(messages.expand, { count: total })}
|
||||
expandRoute='/admin/users'
|
||||
withDate
|
||||
withRelationship={false}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -4,6 +4,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import AccountContainer from '../../../containers/account_container';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
export default class AccountListPanel extends ImmutablePureComponent {
|
||||
|
||||
|
@ -12,6 +13,9 @@ export default class AccountListPanel extends ImmutablePureComponent {
|
|||
accountIds: ImmutablePropTypes.orderedSet.isRequired,
|
||||
icon: PropTypes.string.isRequired,
|
||||
limit: PropTypes.number,
|
||||
total: PropTypes.number,
|
||||
expandMessage: PropTypes.string,
|
||||
expandRoute: PropTypes.string,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
|
@ -19,12 +23,14 @@ export default class AccountListPanel extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { title, icon, accountIds, limit, ...props } = this.props;
|
||||
const { title, icon, accountIds, limit, total, expandMessage, expandRoute, ...props } = this.props;
|
||||
|
||||
if (!accountIds || accountIds.isEmpty()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const canExpand = expandMessage && expandRoute && (accountIds.size < total);
|
||||
|
||||
return (
|
||||
<div className='wtf-panel'>
|
||||
<div className='wtf-panel-header'>
|
||||
|
@ -40,6 +46,9 @@ export default class AccountListPanel extends ImmutablePureComponent {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
{canExpand && <Link className='wtf-panel__expand-btn' to={expandRoute}>
|
||||
{expandMessage}
|
||||
</Link>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -29,7 +29,7 @@ class AdminPage extends ImmutablePureComponent {
|
|||
|
||||
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
|
||||
<div className='columns-area__panels__pane__inner'>
|
||||
<LatestAccountsPanel limit={5} withDate />
|
||||
<LatestAccountsPanel limit={5} />
|
||||
<LinkFooter />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -518,10 +518,18 @@ a .account__avatar {
|
|||
}
|
||||
|
||||
.account__joined-at {
|
||||
padding: 3px 2px 0 48px;
|
||||
padding: 3px 2px 0 5px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
|
||||
i.fa-calendar {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.account--with-date.account--with-relationship {
|
||||
.account__joined-at {
|
||||
padding-left: 48px;
|
||||
}
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue