diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2023-04-01 09:27:23 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-04-01 09:27:23 +0200 |
commit | 46483ae849bc06ee74f4745f4564b213e742c51c (patch) | |
tree | e831a193c024d221bada006d3cec47688a8c85fa /app/javascript/mastodon/components/account.jsx | |
parent | d5ad8b6422432b5a0e8f5268d662e6121186f532 (diff) |
Fix regressions from change in account row design in web UI (#24343)
Diffstat (limited to 'app/javascript/mastodon/components/account.jsx')
-rw-r--r-- | app/javascript/mastodon/components/account.jsx | 30 |
1 files changed, 17 insertions, 13 deletions
diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx index 0ee0e4551..a8a47ecac 100644 --- a/app/javascript/mastodon/components/account.jsx +++ b/app/javascript/mastodon/components/account.jsx @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import Avatar from './avatar'; @@ -13,6 +13,7 @@ import { Link } from 'react-router-dom'; import { counterRenderer } from 'mastodon/components/common_counter'; import ShortNumber from 'mastodon/components/short_number'; import Icon from 'mastodon/components/icon'; +import classNames from 'classnames'; const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, @@ -57,6 +58,7 @@ class Account extends ImmutablePureComponent { onMuteNotifications: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, hidden: PropTypes.bool, + minimal: PropTypes.bool, actionIcon: PropTypes.string, actionTitle: PropTypes.string, defaultAction: PropTypes.string, @@ -92,14 +94,14 @@ class Account extends ImmutablePureComponent { }; render () { - const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size } = this.props; + const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props; if (!account) { return ( - <div className='account'> + <div className={classNames('account', { 'account--minimal': minimal })}> <div className='account__wrapper'> <div className='account__display-name'> - <div className='account__avatar-wrapper'><Skeleton width={36} height={36} /></div> + <div className='account__avatar-wrapper'><Skeleton width={size} height={size} /></div> <div> <DisplayName /> @@ -113,10 +115,10 @@ class Account extends ImmutablePureComponent { if (hidden) { return ( - <Fragment> + <> {account.get('display_name')} {account.get('username')} - </Fragment> + </> ); } @@ -144,10 +146,10 @@ class Account extends ImmutablePureComponent { hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username') })} onClick={this.handleMuteNotifications} />; } buttons = ( - <Fragment> + <> <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} /> {hidingNotificationsButton} - </Fragment> + </> ); } else if (defaultAction === 'mute') { buttons = <IconButton icon='volume-off' title={intl.formatMessage(messages.mute, { name: account.get('username') })} onClick={this.handleMute} />; @@ -173,7 +175,7 @@ class Account extends ImmutablePureComponent { } return ( - <div className='account'> + <div className={classNames('account', { 'account--minimal': minimal })}> <div className='account__wrapper'> <Link key={account.get('id')} className='account__display-name' title={account.get('acct')} to={`/@${account.get('acct')}`}> <div className='account__avatar-wrapper'> @@ -182,13 +184,15 @@ class Account extends ImmutablePureComponent { <div> <DisplayName account={account} /> - <ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining} + {!minimal && <><ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}</>} </div> </Link> - <div className='account__relationship'> - {buttons} - </div> + {!minimal && ( + <div className='account__relationship'> + {buttons} + </div> + )} </div> </div> ); |