Add elements count to antennas page

This commit is contained in:
KMY 2023-08-19 09:53:42 +09:00
parent f99dde6df1
commit d23ecd1dff
3 changed files with 30 additions and 4 deletions

View file

@ -12,6 +12,7 @@ import { createSelector } from 'reselect';
import { fetchAntennas } from 'mastodon/actions/antennas'; import { fetchAntennas } from 'mastodon/actions/antennas';
import Column from 'mastodon/components/column'; import Column from 'mastodon/components/column';
import ColumnHeader from 'mastodon/components/column_header'; import ColumnHeader from 'mastodon/components/column_header';
import { Icon } from 'mastodon/components/icon';
import { LoadingIndicator } from 'mastodon/components/loading_indicator'; import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import ScrollableList from 'mastodon/components/scrollable_list'; import ScrollableList from 'mastodon/components/scrollable_list';
import ColumnLink from 'mastodon/features/ui/components/column_link'; import ColumnLink from 'mastodon/features/ui/components/column_link';
@ -75,9 +76,16 @@ class Antennas extends ImmutablePureComponent {
prepend={<ColumnSubheading text={intl.formatMessage(messages.subheading)} />} prepend={<ColumnSubheading text={intl.formatMessage(messages.subheading)} />}
bindToDocument={!multiColumn} bindToDocument={!multiColumn}
> >
{antennas.map(antenna => {antennas.map(antenna => (
<ColumnLink key={antenna.get('id')} to={`/antennasw/${antenna.get('id')}`} icon='wifi' text={antenna.get('title')} />, <ColumnLink key={antenna.get('id')} to={`/antennasw/${antenna.get('id')}`} icon='wifi' text={antenna.get('title')}>
)} <p className='antenna-list-detail'>
<span className='group'><Icon id='users' />{antenna.get('accounts_count')}</span>
<span className='group'><Icon id='sitemap' />{antenna.get('domains_count')}</span>
<span className='group'><Icon id='hashtag' />{antenna.get('tags_count')}</span>
<span className='group'><Icon id='paragraph' />{antenna.get('keywords_count')}</span>
</p>
</ColumnLink>
))}
</ScrollableList> </ScrollableList>
<Helmet> <Helmet>

View file

@ -5,10 +5,11 @@ import { NavLink } from 'react-router-dom';
import { Icon } from 'mastodon/components/icon'; import { Icon } from 'mastodon/components/icon';
const ColumnLink = ({ icon, text, to, href, method, badge, transparent, ...other }) => { const ColumnLink = ({ icon, text, to, href, method, badge, transparent, children, ...other }) => {
const className = classNames('column-link', { 'column-link--transparent': transparent }); const className = classNames('column-link', { 'column-link--transparent': transparent });
const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null; const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null;
const iconElement = typeof icon === 'string' ? <Icon id={icon} fixedWidth className='column-link__icon' /> : icon; const iconElement = typeof icon === 'string' ? <Icon id={icon} fixedWidth className='column-link__icon' /> : icon;
const childElement = typeof children !== 'undefined' ? <p>{children}</p> : null;
if (href) { if (href) {
return ( return (
@ -24,6 +25,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge, transparent, ...other
{iconElement} {iconElement}
<span>{text}</span> <span>{text}</span>
{badgeElement} {badgeElement}
{childElement}
</NavLink> </NavLink>
); );
} }
@ -37,6 +39,7 @@ ColumnLink.propTypes = {
method: PropTypes.string, method: PropTypes.string,
badge: PropTypes.node, badge: PropTypes.node,
transparent: PropTypes.bool, transparent: PropTypes.bool,
children: PropTypes.any,
}; };
export default ColumnLink; export default ColumnLink;

View file

@ -7364,6 +7364,21 @@ noscript {
} }
} }
.antenna-list-detail {
font-size: 12px;
margin-left: 24px;
.group {
margin-right: 16px;
i.fa {
color: $light-text-color;
margin-right: 4px;
font-size: 10px;
}
}
}
.antenna-setting { .antenna-setting {
margin: 8px 16px; margin: 8px 16px;