[Glitch] Fix media modal footer's “external link” not being a link
Port 255748dff4
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
main
parent
8e04ba87b7
commit
4eed5019a2
|
@ -30,6 +30,7 @@ export default class IconButton extends React.PureComponent {
|
|||
label: PropTypes.string,
|
||||
counter: PropTypes.number,
|
||||
obfuscateCount: PropTypes.bool,
|
||||
href: PropTypes.string,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
|
@ -109,6 +110,7 @@ export default class IconButton extends React.PureComponent {
|
|||
title,
|
||||
counter,
|
||||
obfuscateCount,
|
||||
href,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
|
@ -130,6 +132,21 @@ export default class IconButton extends React.PureComponent {
|
|||
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>}
|
||||
{this.props.label}
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
if (href) {
|
||||
contents = (
|
||||
<a href={href} target='_blank' rel='noopener noreferrer'>
|
||||
{contents}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
aria-label={title}
|
||||
|
@ -145,8 +162,7 @@ export default class IconButton extends React.PureComponent {
|
|||
tabIndex={tabIndex}
|
||||
disabled={disabled}
|
||||
>
|
||||
<Icon id={icon} fixedWidth aria-hidden='true' /> {typeof counter !== 'undefined' && <span className='icon-button__counter'><AnimatedNumber value={counter} obfuscate={obfuscateCount} /></span>}
|
||||
{this.props.label}
|
||||
{contents}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -181,7 +181,7 @@ class Footer extends ImmutablePureComponent {
|
|||
{replyButton}
|
||||
<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')} />
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -146,6 +146,11 @@
|
|||
transition-property: background-color, color;
|
||||
text-decoration: none;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
|
Loading…
Reference in New Issue