Change design of translations in web UI (#19453)

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 (
+        <div className='translate-button'>
+          <div className='translate-button__meta'>
+            <FormattedMessage id='status.translated_from_with' defaultMessage='Translated from {lang} using {provider}' values={{ lang: languageName, provider }} />
+          </div>
+
+          <button className='link-button' onClick={onClick}>
+            <FormattedMessage id='status.show_original' defaultMessage='Show original' />
+          </button>
+        </div>
+      );
+    }
+
+    return (
+      <button className='status__content__read-more-button' onClick={onClick}>
+        <FormattedMessage id='status.translate' defaultMessage='Translate' />
+      </button>
+    );
+  }
+
+}
+
 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 && (
       <button className='status__content__read-more-button' onClick={this.props.onClick}>
         <FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
       </button>
     );
 
-    const readMoreButton = (
+    const readMoreButton = renderReadMore && (
       <button className='status__content__read-more-button' onClick={this.props.onClick} key='read-more'>
         <FormattedMessage id='status.read_more' defaultMessage='Read more' /><Icon id='angle-right' fixedWidth />
       </button>
     );
 
-    const translateButton = (
+    const translateButton = renderTranslate && (
-      <button className='status__content__read-more-button' onClick={this.handleTranslate}>
+      <TranslateButton onClick={this.handleTranslate} translation={status.get('translation')} />
-        {status.get('translation') ? <span><FormattedMessage id='status.translated_from_with' defaultMessage='Translated from {lang} using {provider}' values={{ lang: languageName, provider: status.getIn(['translation', 'provider']) }} /> · <FormattedMessage id='status.show_original' defaultMessage='Show original' /></span> : <FormattedMessage id='status.translate' defaultMessage='Translate' />}
+    );
-      </button>
+
+    const poll = !!status.get('poll') && (
+      <PollContainer pollId={status.get('poll')} />
     );
 
     if (status.get('spoiler_text').length > 0) {
@@ -236,35 +273,33 @@ class StatusContent extends React.PureComponent {
 
           <div tabIndex={!hidden ? 0 : null} className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''} translate`} lang={lang} dangerouslySetInnerHTML={content} />
 
-          {!hidden && !!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
+          {!hidden && poll}
-          {!hidden && renderTranslate && translateButton}
+          {!hidden && translateButton}
-          {renderViewThread && showThreadButton}
+          {showThreadButton}
         </div>
       );
     } else if (this.props.onClick) {
-      const output = [
+      return (
-        <div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+        <>
-          <div className='status__content__text status__content__text--visible translate' lang={lang} dangerouslySetInnerHTML={content} />
+          <div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+            <div className='status__content__text status__content__text--visible translate' lang={lang} dangerouslySetInnerHTML={content} />
 
-          {!!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
+            {poll}
-          {renderTranslate && translateButton}
+            {translateButton}
-          {renderViewThread && showThreadButton}
+            {showThreadButton}
-        </div>,
+          </div>
-      ];
 
-      if (renderReadMore) {
+          {readMoreButton}
-        output.push(readMoreButton);
+        </>
-      }
+      );
-
-      return output;
     } else {
       return (
         <div className={classNames} ref={this.setRef} tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
           <div className='status__content__text status__content__text--visible translate' lang={lang} dangerouslySetInnerHTML={content} />
 
-          {!!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
+          {poll}
-          {renderTranslate && translateButton}
+          {translateButton}
-          {renderViewThread && showThreadButton}
+          {showThreadButton}
         </div>
       );
     }

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 {
+.translate-button {
-  display: block;
+  margin-top: 16px;
-  cursor: default;
   font-size: 15px;
   line-height: 20px;
-  padding: 0;
+  display: flex;
-  padding-top: 8px;
+  justify-content: space-between;
   color: $dark-text-color;
-  font-weight: 500;
 }
 
 .status__content__spoiler-link {