diff --git a/app/javascript/mastodon/features/about/index.jsx b/app/javascript/mastodon/features/about/index.jsx index 6f6daac80f..6acffa3141 100644 --- a/app/javascript/mastodon/features/about/index.jsx +++ b/app/javascript/mastodon/features/about/index.jsx @@ -14,13 +14,13 @@ import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react' import DisabledIcon from '@/material-icons/400-24px/close-fill.svg?react'; import EnabledIcon from '@/material-icons/400-24px/done-fill.svg?react'; import ExpandMoreIcon from '@/material-icons/400-24px/expand_more.svg?react'; -import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'mastodon/actions/server'; +import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'mastodon/actions/server'; import { Account } from 'mastodon/components/account'; import Column from 'mastodon/components/column'; -import { Icon } from 'mastodon/components/icon'; +import { Icon } from 'mastodon/components/icon'; import { ServerHeroImage } from 'mastodon/components/server_hero_image'; import { Skeleton } from 'mastodon/components/skeleton'; -import { LinkFooter} from 'mastodon/features/ui/components/link_footer'; +import { LinkFooter } from 'mastodon/features/ui/components/link_footer'; const messages = defineMessages({ title: { id: 'column.about', defaultMessage: 'About' }, @@ -40,6 +40,10 @@ const messages = defineMessages({ enabled: { id: 'about.enabled', defaultMessage: 'Enabled' }, disabled: { id: 'about.disabled', defaultMessage: 'Disabled' }, capabilities: { id: 'about.kmyblue_capabilities', defaultMessage: 'Features available in this server' }, + joinFediverse: { + id: 'about.join_fediverse', + defaultMessage: "Join the Fediverse, become part of a community, and break free from Big Tech™'s stranglehold on public discourse." + }, }); const severityMessages = { @@ -59,14 +63,13 @@ const severityMessages = { }, }; -const mapStateToProps = state => ({ +const mapStateToProps = (state) => ({ server: state.getIn(['server', 'server']), extendedDescription: state.getIn(['server', 'extendedDescription']), domainBlocks: state.getIn(['server', 'domainBlocks']), }); class Section extends PureComponent { - static propTypes = { title: PropTypes.string, children: PropTypes.node, @@ -85,49 +88,64 @@ class Section extends PureComponent { this.setState({ collapsed: !collapsed }, () => onOpen && onOpen()); }; - render () { + handleKeyDown = (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + this.handleClick(); + } + }; + + render() { const { title, children } = this.props; const { collapsed } = this.state; return (
-
+
{title}
- {!collapsed && ( -
{children}
- )} + {!collapsed &&
{children}
}
); } - } class CapabilityIcon extends PureComponent { - static propTypes = { intl: PropTypes.object.isRequired, state: PropTypes.bool, }; - render () { + render() { const { intl, state } = this.props; if (state) { return ( - {intl.formatMessage(messages.enabled)} + + + {intl.formatMessage(messages.enabled)} + ); } else { return ( - {intl.formatMessage(messages.disabled)} + + + {intl.formatMessage(messages.disabled)} + ); } } } class About extends PureComponent { - static propTypes = { server: ImmutablePropTypes.map, extendedDescription: ImmutablePropTypes.map, @@ -141,7 +159,7 @@ class About extends PureComponent { multiColumn: PropTypes.bool, }; - componentDidMount () { + componentDidMount() { const { dispatch } = this.props; dispatch(fetchServer()); dispatch(fetchExtendedDescription()); @@ -152,11 +170,11 @@ class About extends PureComponent { dispatch(fetchDomainBlocks()); }; - render () { + render() { const { multiColumn, intl, server, extendedDescription, domainBlocks } = this.props; const isLoading = server.get('isLoading'); - const fedibirdCapabilities = server.get('fedibird_capabilities') || []; // thinking about isLoading is true + const fedibirdCapabilities = server.get('fedibird_capabilities') || []; const isPublicUnlistedVisibility = fedibirdCapabilities.includes('kmyblue_visibility_public_unlisted'); const isPublicVisibility = !fedibirdCapabilities.includes('kmyblue_no_public_visibility'); const isEmojiReaction = fedibirdCapabilities.includes('emoji_reaction'); @@ -169,59 +187,88 @@ class About extends PureComponent { return ( -
-
- `${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' /> -

{isLoading ? : server.get('domain')}

-

+
+
+ `${value} ${key.replace('@', '')}`) + .join(', ')} + className="about__header__hero" + /> +

{isLoading ? : server.get('domain')}

+

+ +

-
-
-

+
+
+

+ +

-
+
-
-

+
+

+ +

- {isLoading ? : {server.getIn(['contact', 'email'])}} + {isLoading ? ( + + ) : ( + + {server.getIn(['contact', 'email'])} + + )}
{extendedDescription.get('isLoading') ? ( <> - +
- +
- +
- + - ) : (extendedDescription.get('content')?.length > 0 ? ( -
+ ) : extendedDescription.get('content')?.length > 0 ? ( +
) : ( -

- ))} +

+ +

+ )}
{!isLoading && (server.get('rules', ImmutableList()).isEmpty() ? ( -

+

+ +

) : ( -
    - {server.get('rules').map(rule => ( +
      + {server.get('rules').map((rule) => (
    1. -
      {rule.get('text')}
      - {rule.get('hint').length > 0 && (
      {rule.get('hint')}
      )} +
      {rule.get('text')}
      + {!!rule.get('hint') && rule.get('hint').length > 0 && ( +
      {rule.get('hint')}
      + )}
      2. ))}
    @@ -229,23 +276,38 @@ class About extends PureComponent {
-

+

+ +

{!isLoading && ( -
    +
    1. - {intl.formatMessage(messages.emojiReaction)}: + + {intl.formatMessage(messages.emojiReaction)}: +
    2. - {intl.formatMessage(messages.publicVisibility)}: + + {intl.formatMessage(messages.publicVisibility)}: +
    3. - {intl.formatMessage(messages.publicUnlistedVisibility)}: + + {intl.formatMessage(messages.publicUnlistedVisibility)}: +
    4. - {intl.formatMessage(messages.localTimeline)}: + + {intl.formatMessage(messages.localTimeline)}: +
    5. - {intl.formatMessage(messages.fullTextSearch)}: + + {intl.formatMessage(messages.fullTextSearch)}: +
    )} @@ -254,49 +316,75 @@ class About extends PureComponent {
    {domainBlocks.get('isLoading') ? ( <> - +
    - + - ) : (domainBlocks.get('isAvailable') ? ( + ) : domainBlocks.get('isAvailable') ? ( <> -

    +

    + +

    {domainBlocks.get('items').size > 0 && ( -
    - {domainBlocks.get('items').map(block => ( -
    -
    -
    {block.get('domain')}
    - {intl.formatMessage(severityMessages[block.get('severity_ex') || block.get('severity')].title)} +
    + {domainBlocks.get('items').map((block) => ( +
    +
    +
    + {block.get('domain')} +
    + + {intl.formatMessage( + severityMessages[block.get('severity_ex') || block.get('severity')].title + )} +
    -

    {(block.get('comment') || '').length > 0 ? block.get('comment') : }

    +

    + {(block.get('comment') || '').length > 0 ? ( + block.get('comment') + ) : ( + + )} +

    ))}
    )} ) : ( -

    - ))} +

    + +

    + )}
    -
    -

    +
    +

    + +

    {intl.formatMessage(messages.title)} - + ); } - } export default connect(mapStateToProps)(injectIntl(About));