From e347472acb86d412d78e36eb483d330d3b8b1351 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 25 Oct 2022 18:47:21 +0200 Subject: [PATCH] [Glitch] Change design of translations in web UI Port 3a2f9a8c53adbc66c53478c5ece11eec18e69bb5 to glitch-soc Signed-off-by: Claire --- .../glitch/components/status_content.js | 51 +++++++++++++++---- .../glitch/styles/components/index.scss | 2 +- .../glitch/styles/components/status.scss | 10 ++-- 3 files changed, 47 insertions(+), 16 deletions(-) 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 {