From 255748dff48b80335cfb7af12d1ea67979af09ad Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Fri, 25 Feb 2022 01:20:41 +0100
Subject: [PATCH] =?UTF-8?q?Fix=20media=20modal=20footer's=20=E2=80=9Cexter?=
=?UTF-8?q?nal=20link=E2=80=9D=20not=20being=20a=20link=20(#17561)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../mastodon/components/icon_button.js | 18 +++++++++++++++++-
.../picture_in_picture/components/footer.js | 2 +-
app/javascript/styles/mastodon/components.scss | 5 +++++
3 files changed, 23 insertions(+), 2 deletions(-)
diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js
index 7ec39198a4..6a653675b8 100644
--- a/app/javascript/mastodon/components/icon_button.js
+++ b/app/javascript/mastodon/components/icon_button.js
@@ -27,6 +27,7 @@ export default class IconButton extends React.PureComponent {
tabIndex: PropTypes.string,
counter: PropTypes.number,
obfuscateCount: PropTypes.bool,
+ href: PropTypes.string,
};
static defaultProps = {
@@ -102,6 +103,7 @@ export default class IconButton extends React.PureComponent {
title,
counter,
obfuscateCount,
+ href,
} = this.props;
const {
@@ -123,6 +125,20 @@ 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>}
+ </React.Fragment>
+ );
+
+ if (href) {
+ contents = (
+ <a href={href} target='_blank' rel='noopener noreferrer'>
+ {contents}
+ </a>
+ );
+ }
+
return (
<button
aria-label={title}
@@ -138,7 +154,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>}
+ {contents}
</button>
);
}
diff --git a/app/javascript/mastodon/features/picture_in_picture/components/footer.js b/app/javascript/mastodon/features/picture_in_picture/components/footer.js
index 690a77531c..0cb42b25aa 100644
--- a/app/javascript/mastodon/features/picture_in_picture/components/footer.js
+++ b/app/javascript/mastodon/features/picture_in_picture/components/footer.js
@@ -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={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>
);
}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 647e7ea31b..6b18ca6f21 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -166,6 +166,11 @@
transition-property: background-color, color;
text-decoration: none;
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+
&:hover,
&:active,
&:focus {
--
GitLab