LatestAccountsPanel: add expand button, use compact display of accounts

remove-account-counters-reducer
Alex Gleason 2021-07-14 13:17:21 -05:00
rodzic 5f3b33cce7
commit 12939e3354
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
5 zmienionych plików z 67 dodań i 20 usunięć

Wyświetl plik

@ -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 ?
<span className='relationship-tag'>
<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
</span>
: '' }
{withRelationship ? (<>
{followedBy &&
<span className='relationship-tag'>
<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
</span>}
<div className='account__relationship'>
{buttons}
</div>
<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>
);
}

Wyświetl plik

@ -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}
/>
);

Wyświetl plik

@ -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>
);
};

Wyświetl plik

@ -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>

Wyświetl plik

@ -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;
}
}