Fix media modal footer's “external link” not being a link (#17561)

This commit is contained in:
Claire 2022-02-25 01:20:41 +01:00 committed by GitHub
parent e884f7dfbd
commit 255748dff4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 2 deletions

View file

@ -27,6 +27,7 @@ export default class IconButton extends React.PureComponent {
tabIndex: PropTypes.string, tabIndex: PropTypes.string,
counter: PropTypes.number, counter: PropTypes.number,
obfuscateCount: PropTypes.bool, obfuscateCount: PropTypes.bool,
href: PropTypes.string,
}; };
static defaultProps = { static defaultProps = {
@ -102,6 +103,7 @@ export default class IconButton extends React.PureComponent {
title, title,
counter, counter,
obfuscateCount, obfuscateCount,
href,
} = this.props; } = this.props;
const { const {
@ -123,6 +125,20 @@ export default class IconButton extends React.PureComponent {
style.width = 'auto'; style.width = 'auto';
} }
let contents = (
<React.Fragment>
<Icon id={icon} fixedWidth aria-hidden='true' /> {typeof counter !== 'undefined' && <span className='icon-button__counter'><AnimatedNumber value={counter} obfuscate={obfuscateCount} /></span>}
</React.Fragment>
);
if (href) {
contents = (
<a href={href} target='_blank' rel='noopener noreferrer'>
{contents}
</a>
);
}
return ( return (
<button <button
aria-label={title} aria-label={title}
@ -138,7 +154,7 @@ export default class IconButton extends React.PureComponent {
tabIndex={tabIndex} tabIndex={tabIndex}
disabled={disabled} disabled={disabled}
> >
<Icon id={icon} fixedWidth aria-hidden='true' /> {typeof counter !== 'undefined' && <span className='icon-button__counter'><AnimatedNumber value={counter} obfuscate={obfuscateCount} /></span>} {contents}
</button> </button>
); );
} }

View file

@ -156,7 +156,7 @@ class Footer extends ImmutablePureComponent {
<IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount /> <IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
<IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={status.get('reblogs_count')} /> <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={status.get('reblogs_count')} />
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={status.get('favourites_count')} /> <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={status.get('favourites_count')} />
{withOpenButton && <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.open)} icon='external-link' onClick={this.handleOpenClick} />} {withOpenButton && <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.open)} icon='external-link' onClick={this.handleOpenClick} href={status.get('url')} />}
</div> </div>
); );
} }

View file

@ -166,6 +166,11 @@
transition-property: background-color, color; transition-property: background-color, color;
text-decoration: none; text-decoration: none;
a {
color: inherit;
text-decoration: none;
}
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {