From a3052dad04f2f520d4a91eff4db615233fab122a Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 23 Sep 2022 23:00:12 +0200 Subject: [PATCH 01/10] [Glitch] Add user content translations with configurable backends Port 0d6b878808a02aa4a544e894f06419c0f612c163 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/actions/statuses.js | 39 ++++++++++++++++++- .../flavours/glitch/components/status.js | 6 +++ .../glitch/components/status_content.js | 27 +++++++++++-- .../glitch/containers/status_container.js | 12 +++++- .../status/components/detailed_status.js | 7 ++++ .../flavours/glitch/features/status/index.js | 15 ++++++- .../flavours/glitch/reducers/statuses.js | 6 +++ 7 files changed, 105 insertions(+), 7 deletions(-) diff --git a/app/javascript/flavours/glitch/actions/statuses.js b/app/javascript/flavours/glitch/actions/statuses.js index 5930b7a160..a3e2a24f28 100644 --- a/app/javascript/flavours/glitch/actions/statuses.js +++ b/app/javascript/flavours/glitch/actions/statuses.js @@ -34,6 +34,11 @@ export const STATUS_FETCH_SOURCE_REQUEST = 'STATUS_FETCH_SOURCE_REQUEST'; export const STATUS_FETCH_SOURCE_SUCCESS = 'STATUS_FETCH_SOURCE_SUCCESS'; export const STATUS_FETCH_SOURCE_FAIL = 'STATUS_FETCH_SOURCE_FAIL'; +export const STATUS_TRANSLATE_REQUEST = 'STATUS_TRANSLATE_REQUEST'; +export const STATUS_TRANSLATE_SUCCESS = 'STATUS_TRANSLATE_SUCCESS'; +export const STATUS_TRANSLATE_FAIL = 'STATUS_TRANSLATE_FAIL'; +export const STATUS_TRANSLATE_UNDO = 'STATUS_TRANSLATE_UNDO'; + export function fetchStatusRequest(id, skipLoading) { return { type: STATUS_FETCH_REQUEST, @@ -310,4 +315,36 @@ export function toggleStatusCollapse(id, isCollapsed) { id, isCollapsed, }; -} +}; + +export const translateStatus = id => (dispatch, getState) => { + dispatch(translateStatusRequest(id)); + + api(getState).post(`/api/v1/statuses/${id}/translate`).then(response => { + dispatch(translateStatusSuccess(id, response.data)); + }).catch(error => { + dispatch(translateStatusFail(id, error)); + }); +}; + +export const translateStatusRequest = id => ({ + type: STATUS_TRANSLATE_REQUEST, + id, +}); + +export const translateStatusSuccess = (id, translation) => ({ + type: STATUS_TRANSLATE_SUCCESS, + id, + translation, +}); + +export const translateStatusFail = (id, error) => ({ + type: STATUS_TRANSLATE_FAIL, + id, + error, +}); + +export const undoStatusTranslation = id => ({ + type: STATUS_TRANSLATE_UNDO, + id, +}); diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 800832dc8e..4041b48194 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 c618cedcab..63d017a386 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} ); } diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js index c12b2e6143..947573fc7d 100644 --- a/app/javascript/flavours/glitch/containers/status_container.js +++ b/app/javascript/flavours/glitch/containers/status_container.js @@ -23,7 +23,9 @@ import { deleteStatus, hideStatus, revealStatus, - editStatus + editStatus, + translateStatus, + undoStatusTranslation, } from 'flavours/glitch/actions/statuses'; import { initAddFilter, @@ -187,6 +189,14 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({ dispatch(editStatus(status.get('id'), history)); }, + onTranslate (status) { + if (status.get('translation')) { + dispatch(undoStatusTranslation(status.get('id'))); + } else { + dispatch(translateStatus(status.get('id'))); + } + }, + onDirect (account, router) { dispatch(directCompose(account, router)); }, diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js index 46770930f5..7d2c2aace3 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -34,6 +34,7 @@ class DetailedStatus extends ImmutablePureComponent { onOpenMedia: PropTypes.func.isRequired, onOpenVideo: PropTypes.func.isRequired, onToggleHidden: PropTypes.func, + onTranslate: PropTypes.func.isRequired, expanded: PropTypes.bool, measureHeight: PropTypes.bool, onHeightChange: PropTypes.func, @@ -112,6 +113,11 @@ class DetailedStatus extends ImmutablePureComponent { window.open(href, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes'); } + handleTranslate = () => { + const { onTranslate, status } = this.props; + onTranslate(status); + } + render () { const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status; const { expanded, onToggleHidden, settings, usingPiP, intl } = this.props; @@ -305,6 +311,7 @@ class DetailedStatus extends ImmutablePureComponent { expanded={expanded} collapsed={false} onExpandedToggle={onToggleHidden} + onTranslate={this.handleTranslate} parseClick={this.parseClick} onUpdate={this.handleChildUpdate} tagLinks={settings.get('tag_misleading_links')} diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js index aaa9c7928f..e190652b06 100644 --- a/app/javascript/flavours/glitch/features/status/index.js +++ b/app/javascript/flavours/glitch/features/status/index.js @@ -33,7 +33,9 @@ import { deleteStatus, editStatus, hideStatus, - revealStatus + revealStatus, + translateStatus, + undoStatusTranslation, } from 'flavours/glitch/actions/statuses'; import { initMuteModal } from 'flavours/glitch/actions/mutes'; import { initBlockModal } from 'flavours/glitch/actions/blocks'; @@ -437,6 +439,16 @@ class Status extends ImmutablePureComponent { this.setState({ isExpanded: !isExpanded, threadExpanded: !isExpanded }); } + handleTranslate = status => { + const { dispatch } = this.props; + + if (status.get('translation')) { + dispatch(undoStatusTranslation(status.get('id'))); + } else { + dispatch(translateStatus(status.get('id'))); + } + } + handleBlockClick = (status) => { const { dispatch } = this.props; const account = status.get('account'); @@ -666,6 +678,7 @@ class Status extends ImmutablePureComponent { onOpenMedia={this.handleOpenMedia} expanded={isExpanded} onToggleHidden={this.handleToggleHidden} + onTranslate={this.handleTranslate} domain={domain} showMedia={this.state.showMedia} onToggleMediaVisibility={this.handleToggleMediaVisibility} diff --git a/app/javascript/flavours/glitch/reducers/statuses.js b/app/javascript/flavours/glitch/reducers/statuses.js index b47155c5f6..f0c4c804b7 100644 --- a/app/javascript/flavours/glitch/reducers/statuses.js +++ b/app/javascript/flavours/glitch/reducers/statuses.js @@ -13,6 +13,8 @@ import { STATUS_REVEAL, STATUS_HIDE, STATUS_COLLAPSE, + STATUS_TRANSLATE_SUCCESS, + STATUS_TRANSLATE_UNDO, STATUS_FETCH_REQUEST, STATUS_FETCH_FAIL, } from 'flavours/glitch/actions/statuses'; @@ -85,6 +87,10 @@ export default function statuses(state = initialState, action) { return state.setIn([action.id, 'collapsed'], action.isCollapsed); case TIMELINE_DELETE: return deleteStatus(state, action.id, action.references); + case STATUS_TRANSLATE_SUCCESS: + return state.setIn([action.id, 'translation'], fromJS(action.translation)); + case STATUS_TRANSLATE_UNDO: + return state.deleteIn([action.id, 'translation']); default: return state; } From b5ee275ed978d307b87ced8a0b98f7efcaf5a070 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 28 Sep 2022 01:02:01 +0200 Subject: [PATCH 02/10] [Glitch] Fix translations not being formatted, other issues in web UI Port 55a2e9b5beb1fc923c42257edee3df738e208b38 to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/components/status_content.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index 63d017a386..a4ad5d1c8c 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 = ( ); From 5e143db13aeffc5f0353ed7226b8f0df13763868 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 29 Sep 2022 06:21:51 +0200 Subject: [PATCH 03/10] [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(-) diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index a4ad5d1c8c..cadcf5c11c 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'); From e8d0a1b320713eda76f303b6e840d004f1890d27 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 18 Oct 2022 21:21:20 +0200 Subject: [PATCH 04/10] [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(-) diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index cadcf5c11c..7c13c7ee48 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'); From 47bd934061c8f6686bb478d5ea1eaa131bd1d1f9 Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 24 Oct 2022 18:30:58 +0200 Subject: [PATCH 05/10] =?UTF-8?q?[Glitch]=20Change=20=E2=80=9CTranslate?= =?UTF-8?q?=E2=80=9D=20button=20to=20only=20show=20up=20when=20a=20transla?= =?UTF-8?q?tion=20backend=20is=20configured?= 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(-) diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index 7c13c7ee48..a510cd24d8 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 5be177cedf..bbf25c8a85 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 From 44c0ba445a61dfbe65d9d1056933c6a8d190c907 Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 24 Oct 2022 18:37:57 +0200 Subject: [PATCH 06/10] [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(-) diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index a510cd24d8..9244b6f27f 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 = ( ); From f7684a31fe6ea1f069e3885783ab25b1322e97f6 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 25 Oct 2022 18:47:21 +0200 Subject: [PATCH 07/10] [Glitch] Change design of translations in web UI Port fcca781aae609067bc9e43ad4a466ef6d2074bbb 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 { From 620b079a7827173c493d9ba4c2bd31001bdbde5b Mon Sep 17 00:00:00 2001 From: Claire Date: Wed, 30 Nov 2022 13:52:43 +0100 Subject: [PATCH 08/10] =?UTF-8?q?Fix=20inconsistent=20with=20=E2=80=9Ctran?= =?UTF-8?q?slate=E2=80=9D=20button=20padding?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/javascript/flavours/glitch/styles/statuses.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/styles/statuses.scss b/app/javascript/flavours/glitch/styles/statuses.scss index 947a5d3aed..88fa3ffa07 100644 --- a/app/javascript/flavours/glitch/styles/statuses.scss +++ b/app/javascript/flavours/glitch/styles/statuses.scss @@ -268,7 +268,7 @@ a.button.logo-button { border: 0; background: transparent; padding: 0; - padding-top: 8px; + padding-top: 16px; text-decoration: none; &:hover, From afdd75e1f914ed5064cae2c9f96f9d494b79b5fe Mon Sep 17 00:00:00 2001 From: Claire Date: Wed, 30 Nov 2022 14:44:06 +0100 Subject: [PATCH 09/10] 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(-) diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index 9ed9fbf9bd..2c59c054f3 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} ); } From e64909d8bfe084565595c4a277af837c57b65efa Mon Sep 17 00:00:00 2001 From: Claire Date: Wed, 30 Nov 2022 15:03:47 +0100 Subject: [PATCH 10/10] Move translate button above media attachments/preview cards --- .../flavours/glitch/components/status_content.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index 2c59c054f3..c59f42220c 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} ); }