From a3052dad04f2f520d4a91eff4db615233fab122a Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 23 Sep 2022 23:00:12 +0200 Subject: [Glitch] Add user content translations with configurable backends Port 0d6b878808a02aa4a544e894f06419c0f612c163 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/status.js | 6 +++++ .../flavours/glitch/components/status_content.js | 27 ++++++++++++++++++---- 2 files changed, 29 insertions(+), 4 deletions(-) (limited to 'app/javascript/flavours/glitch/components') diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 800832dc8..4041b4819 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -83,6 +83,7 @@ class Status extends ImmutablePureComponent { onEmbed: PropTypes.func, onHeightChange: PropTypes.func, onToggleHidden: PropTypes.func, + onTranslate: PropTypes.func, onInteractionModal: PropTypes.func, muted: PropTypes.bool, hidden: PropTypes.bool, @@ -472,6 +473,10 @@ class Status extends ImmutablePureComponent { this.node = c; } + handleTranslate = () => { + this.props.onTranslate(this.props.status); + } + renderLoadingMediaGallery () { return
; } @@ -788,6 +793,7 @@ class Status extends ImmutablePureComponent { mediaIcons={contentMediaIcons} expanded={isExpanded} onExpandedToggle={this.handleExpandedToggle} + onTranslate={this.handleTranslate} parseClick={parseClick} disabled={!router} tagLinks={settings.get('tag_misleading_links')} diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index c618cedca..63d017a38 100644 --- a/app/javascript/flavours/glitch/components/status_content.js +++ b/app/javascript/flavours/glitch/components/status_content.js @@ -1,7 +1,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; -import { FormattedMessage } from 'react-intl'; +import { FormattedMessage, injectIntl } from 'react-intl'; import Permalink from './permalink'; import classnames from 'classnames'; import Icon from 'flavours/glitch/components/icon'; @@ -62,13 +62,15 @@ const isLinkMisleading = (link) => { return !(textMatchesTarget(text, origin, host) || textMatchesTarget(text.toLowerCase(), origin, host)); }; -export default class StatusContent extends React.PureComponent { +export default @injectIntl +class StatusContent extends React.PureComponent { static propTypes = { status: ImmutablePropTypes.map.isRequired, expanded: PropTypes.bool, collapsed: PropTypes.bool, onExpandedToggle: PropTypes.func, + onTranslate: PropTypes.func, media: PropTypes.node, extraMedia: PropTypes.node, mediaIcons: PropTypes.arrayOf(PropTypes.string), @@ -77,6 +79,7 @@ export default class StatusContent extends React.PureComponent { onUpdate: PropTypes.func, tagLinks: PropTypes.bool, rewriteMentions: PropTypes.string, + intl: PropTypes.object, }; static defaultProps = { @@ -249,6 +252,10 @@ export default class StatusContent extends React.PureComponent { } } + handleTranslate = () => { + this.props.onTranslate(); + } + setContentsRef = (c) => { this.contentsNode = c; } @@ -263,18 +270,27 @@ export default class StatusContent extends React.PureComponent { disabled, tagLinks, rewriteMentions, + intl, } = this.props; const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden; + const renderTranslate = this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && intl.locale !== status.get('language'); + const languageNames = new Intl.DisplayNames([intl.locale], { type: 'language' }); - const content = { __html: status.get('contentHtml') }; + const content = { __html: status.get('translation') ? status.getIn(['translation', 'content']) : status.get('contentHtml') }; const spoilerContent = { __html: status.get('spoilerHtml') }; - const lang = status.get('language'); + const lang = status.get('translation') ? intl.locale : status.get('language'); const classNames = classnames('status__content', { 'status__content--with-action': parseClick && !disabled, 'status__content--with-spoiler': status.get('spoiler_text').length > 0, }); + const translateButton = ( + + ); + if (status.get('spoiler_text').length > 0) { let mentionsPlaceholder = ''; @@ -355,6 +371,7 @@ export default class StatusContent extends React.PureComponent { {extraMedia} + {!hidden && renderTranslate && translateButton}
); } else if (parseClick) { @@ -377,6 +394,7 @@ export default class StatusContent extends React.PureComponent { /> {media} {extraMedia} + {!hidden && renderTranslate && translateButton} ); } else { @@ -397,6 +415,7 @@ export default class StatusContent extends React.PureComponent { /> {media} {extraMedia} + {!hidden && renderTranslate && translateButton} ); } -- cgit From b5ee275ed978d307b87ced8a0b98f7efcaf5a070 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 28 Sep 2022 01:02:01 +0200 Subject: [Glitch] Fix translations not being formatted, other issues in web UI Port 55a2e9b5beb1fc923c42257edee3df738e208b38 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/components/status_content.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'app/javascript/flavours/glitch/components') diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index 63d017a38..a4ad5d1c8 100644 --- a/app/javascript/flavours/glitch/components/status_content.js +++ b/app/javascript/flavours/glitch/components/status_content.js @@ -5,7 +5,7 @@ import { FormattedMessage, injectIntl } from 'react-intl'; import Permalink from './permalink'; import classnames from 'classnames'; import Icon from 'flavours/glitch/components/icon'; -import { autoPlayGif } from 'flavours/glitch/initial_state'; +import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state'; import { decode as decodeIDNA } from 'flavours/glitch/utils/idna'; const textMatchesTarget = (text, origin, host) => { @@ -274,8 +274,9 @@ class StatusContent extends React.PureComponent { } = this.props; const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden; - const renderTranslate = this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && intl.locale !== status.get('language'); - const languageNames = new Intl.DisplayNames([intl.locale], { type: 'language' }); + const renderTranslate = this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('contentHtml').length > 0 && 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') }; @@ -287,7 +288,7 @@ class StatusContent extends React.PureComponent { const translateButton = ( ); -- cgit From 5e143db13aeffc5f0353ed7226b8f0df13763868 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 29 Sep 2022 06:21:51 +0200 Subject: [Glitch] Don't show translate button to logged-out users Port part of e623c302d5d4dfc05689eb8fb8e051e30fc38ec8 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/components/status_content.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/components') diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index a4ad5d1c8..cadcf5c11 100644 --- a/app/javascript/flavours/glitch/components/status_content.js +++ b/app/javascript/flavours/glitch/components/status_content.js @@ -65,6 +65,10 @@ const isLinkMisleading = (link) => { export default @injectIntl class StatusContent extends React.PureComponent { + static contextTypes = { + identity: PropTypes.object, + }; + static propTypes = { status: ImmutablePropTypes.map.isRequired, expanded: PropTypes.bool, @@ -274,7 +278,7 @@ class StatusContent extends React.PureComponent { } = this.props; const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden; - const renderTranslate = this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('contentHtml').length > 0 && intl.locale !== status.get('language'); + const renderTranslate = this.context.identity.signedIn && this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('contentHtml').length > 0 && intl.locale !== status.get('language'); const language = preloadedLanguages.find(lang => lang[0] === status.get('language')); const languageName = language ? language[2] : status.get('language'); -- cgit From e8d0a1b320713eda76f303b6e840d004f1890d27 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 18 Oct 2022 21:21:20 +0200 Subject: [Glitch] Fix showing translate button when status has no language in web UI Port 4adb267f9177f6036f8f27cd37544c54b97f3dd2 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/components/status_content.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/components') diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index cadcf5c11..7c13c7ee4 100644 --- a/app/javascript/flavours/glitch/components/status_content.js +++ b/app/javascript/flavours/glitch/components/status_content.js @@ -278,7 +278,7 @@ class StatusContent extends React.PureComponent { } = this.props; const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden; - const renderTranslate = this.context.identity.signedIn && this.props.onTranslate && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('contentHtml').length > 0 && intl.locale !== status.get('language'); + const renderTranslate = 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'); -- cgit From 47bd934061c8f6686bb478d5ea1eaa131bd1d1f9 Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 24 Oct 2022 18:30:58 +0200 Subject: [Glitch] Change “Translate” button to only show up when a translation backend is configured MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Port 8046cf34d68209b39845e07a9d2db40926cc5512 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/components/status_content.js | 4 ++-- app/javascript/flavours/glitch/initial_state.js | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch/components') diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index 7c13c7ee4..a510cd24d 100644 --- a/app/javascript/flavours/glitch/components/status_content.js +++ b/app/javascript/flavours/glitch/components/status_content.js @@ -5,7 +5,7 @@ import { FormattedMessage, injectIntl } from 'react-intl'; import Permalink from './permalink'; import classnames from 'classnames'; import Icon from 'flavours/glitch/components/icon'; -import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state'; +import { autoPlayGif, languages as preloadedLanguages, translationEnabled } from 'flavours/glitch/initial_state'; import { decode as decodeIDNA } from 'flavours/glitch/utils/idna'; const textMatchesTarget = (text, origin, host) => { @@ -278,7 +278,7 @@ class StatusContent extends React.PureComponent { } = this.props; const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden; - const renderTranslate = 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 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'); diff --git a/app/javascript/flavours/glitch/initial_state.js b/app/javascript/flavours/glitch/initial_state.js index 5be177ced..bbf25c8a8 100644 --- a/app/javascript/flavours/glitch/initial_state.js +++ b/app/javascript/flavours/glitch/initial_state.js @@ -79,6 +79,7 @@ * @property {boolean} use_blurhash * @property {boolean=} use_pending_items * @property {string} version + * @property {boolean} translation_enabled * @property {object} local_settings */ @@ -137,6 +138,7 @@ export const unfollowModal = getMeta('unfollow_modal'); export const useBlurhash = getMeta('use_blurhash'); export const usePendingItems = getMeta('use_pending_items'); export const version = getMeta('version'); +export const translationEnabled = getMeta('translation_enabled'); export const languages = initialState?.languages; // Glitch-soc-specific settings -- cgit From 44c0ba445a61dfbe65d9d1056933c6a8d190c907 Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 24 Oct 2022 18:37:57 +0200 Subject: [Glitch] Add mention of the translation provider when translating a post Port 30453fab80d55fc10766f0e067c31d96753ccfda to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/components/status_content.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/components') diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index a510cd24d..9244b6f27 100644 --- a/app/javascript/flavours/glitch/components/status_content.js +++ b/app/javascript/flavours/glitch/components/status_content.js @@ -292,7 +292,7 @@ class StatusContent extends React.PureComponent { const translateButton = ( ); -- cgit From f7684a31fe6ea1f069e3885783ab25b1322e97f6 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 25 Oct 2022 18:47:21 +0200 Subject: [Glitch] Change design of translations in web UI Port fcca781aae609067bc9e43ad4a466ef6d2074bbb to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/status_content.js | 51 ++++++++++++++++++---- .../flavours/glitch/styles/components/index.scss | 2 +- .../flavours/glitch/styles/components/status.scss | 10 ++--- 3 files changed, 47 insertions(+), 16 deletions(-) (limited to 'app/javascript/flavours/glitch/components') diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index 9244b6f27..9ed9fbf9b 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 80b0598a5..84aca2ebc 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 054110e41..7cc6f5386 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 { -- cgit From afdd75e1f914ed5064cae2c9f96f9d494b79b5fe Mon Sep 17 00:00:00 2001 From: Claire Date: Wed, 30 Nov 2022 14:44:06 +0100 Subject: Fix translate button not being shown when the toot has no Content Warning --- app/javascript/flavours/glitch/components/status_content.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours/glitch/components') diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index 9ed9fbf9b..2c59c054f 100644 --- a/app/javascript/flavours/glitch/components/status_content.js +++ b/app/javascript/flavours/glitch/components/status_content.js @@ -432,7 +432,7 @@ class StatusContent extends React.PureComponent { /> {media} {extraMedia} - {!hidden && translateButton} + {translateButton} ); } else { @@ -453,7 +453,7 @@ class StatusContent extends React.PureComponent { /> {media} {extraMedia} - {!hidden && translateButton} + {translateButton} ); } -- cgit From e64909d8bfe084565595c4a277af837c57b65efa Mon Sep 17 00:00:00 2001 From: Claire Date: Wed, 30 Nov 2022 15:03:47 +0100 Subject: Move translate button above media attachments/preview cards --- app/javascript/flavours/glitch/components/status_content.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'app/javascript/flavours/glitch/components') diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index 2c59c054f..c59f42220 100644 --- a/app/javascript/flavours/glitch/components/status_content.js +++ b/app/javascript/flavours/glitch/components/status_content.js @@ -404,12 +404,11 @@ class StatusContent extends React.PureComponent { onMouseLeave={this.handleMouseLeave} lang={lang} /> + {!hidden && translateButton} {media} {extraMedia} - - {!hidden && translateButton} ); } else if (parseClick) { @@ -430,9 +429,9 @@ class StatusContent extends React.PureComponent { onMouseLeave={this.handleMouseLeave} lang={lang} /> + {translateButton} {media} {extraMedia} - {translateButton} ); } else { @@ -451,9 +450,9 @@ class StatusContent extends React.PureComponent { onMouseLeave={this.handleMouseLeave} lang={lang} /> + {translateButton} {media} {extraMedia} - {translateButton} ); } -- cgit