diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js index ff539268c26..5e66c6fb318 100644 --- a/app/javascript/mastodon/components/status_content.js +++ b/app/javascript/mastodon/components/status_content.js @@ -10,6 +10,43 @@ import { autoPlayGif, languages as preloadedLanguages, translationEnabled } from const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top) +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 { @@ -179,8 +216,6 @@ class StatusContent extends React.PureComponent { const renderReadMore = this.props.onClick && status.get('collapsed'); const renderViewThread = this.props.showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']); 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') }; @@ -191,22 +226,24 @@ class StatusContent extends React.PureComponent { 'status__content--collapsed': renderReadMore, }); - const showThreadButton = ( + const showThreadButton = renderViewThread && ( ); - const readMoreButton = ( + const readMoreButton = renderReadMore && ( ); - const translateButton = ( - + const translateButton = renderTranslate && ( + + ); + + const poll = !!status.get('poll') && ( + ); if (status.get('spoiler_text').length > 0) { @@ -236,35 +273,33 @@ class StatusContent extends React.PureComponent {
- {!hidden && !!status.get('poll') && } - {!hidden && renderTranslate && translateButton} - {renderViewThread && showThreadButton} + {!hidden && poll} + {!hidden && translateButton} + {showThreadButton}
); } else if (this.props.onClick) { - const output = [ -
-
+ return ( + <> +
+
- {!!status.get('poll') && } - {renderTranslate && translateButton} - {renderViewThread && showThreadButton} -
, - ]; + {poll} + {translateButton} + {showThreadButton} +
- if (renderReadMore) { - output.push(readMoreButton); - } - - return output; + {readMoreButton} + + ); } else { return (
- {!!status.get('poll') && } - {renderTranslate && translateButton} - {renderViewThread && showThreadButton} + {poll} + {translateButton} + {showThreadButton}
); } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index f6b34b5f37f..15351d85032 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -24,7 +24,7 @@ display: block; font-size: 15px; line-height: 20px; - color: $ui-highlight-color; + color: $highlight-text-color; border: 0; background: transparent; padding: 0; @@ -969,15 +969,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 {