diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js
index 9244b6f27f..9ed9fbf9bd 100644
--- a/app/javascript/flavours/glitch/components/status_content.js
+++ b/app/javascript/flavours/glitch/components/status_content.js
@@ -62,6 +62,43 @@ const isLinkMisleading = (link) => {
return !(textMatchesTarget(text, origin, host) || textMatchesTarget(text.toLowerCase(), origin, host));
};
+class TranslateButton extends React.PureComponent {
+
+ static propTypes = {
+ translation: ImmutablePropTypes.map,
+ onClick: PropTypes.func,
+ };
+
+ render () {
+ const { translation, onClick } = this.props;
+
+ if (translation) {
+ const language = preloadedLanguages.find(lang => lang[0] === translation.get('detected_source_language'));
+ const languageName = language ? language[2] : translation.get('detected_source_language');
+ const provider = translation.get('provider');
+
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+ }
+
+}
+
export default @injectIntl
class StatusContent extends React.PureComponent {
@@ -279,8 +316,6 @@ class StatusContent extends React.PureComponent {
const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
const renderTranslate = translationEnabled && this.context.identity.signedIn && this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('contentHtml').length > 0 && status.get('language') !== null && intl.locale !== status.get('language');
- const language = preloadedLanguages.find(lang => lang[0] === status.get('language'));
- const languageName = language ? language[2] : status.get('language');
const content = { __html: status.get('translation') ? status.getIn(['translation', 'content']) : status.get('contentHtml') };
const spoilerContent = { __html: status.get('spoilerHtml') };
@@ -290,10 +325,8 @@ class StatusContent extends React.PureComponent {
'status__content--with-spoiler': status.get('spoiler_text').length > 0,
});
- const translateButton = (
-
+ const translateButton = renderTranslate && (
+
);
if (status.get('spoiler_text').length > 0) {
@@ -376,7 +409,7 @@ class StatusContent extends React.PureComponent {
{extraMedia}
- {!hidden && renderTranslate && translateButton}
+ {!hidden && translateButton}
);
} else if (parseClick) {
@@ -399,7 +432,7 @@ class StatusContent extends React.PureComponent {
/>
{media}
{extraMedia}
- {!hidden && renderTranslate && translateButton}
+ {!hidden && translateButton}
);
} else {
@@ -420,7 +453,7 @@ class StatusContent extends React.PureComponent {
/>
{media}
{extraMedia}
- {!hidden && renderTranslate && translateButton}
+ {!hidden && translateButton}
);
}
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 80b0598a50..84aca2ebc0 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -15,7 +15,7 @@
display: block;
font-size: 15px;
line-height: 20px;
- color: $ui-highlight-color;
+ color: $highlight-text-color;
border: 0;
background: transparent;
padding: 0;
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 054110e410..7cc6f5386b 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -206,15 +206,13 @@
}
}
-.status__content__edited-label {
- display: block;
- cursor: default;
+.translate-button {
+ margin-top: 16px;
font-size: 15px;
line-height: 20px;
- padding: 0;
- padding-top: 8px;
+ display: flex;
+ justify-content: space-between;
color: $dark-text-color;
- font-weight: 500;
}
.status__content__spoiler-link {