[Glitch] Change design of translations in web UI

Port fcca781aae to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
main
Eugen Rochko 2022-10-25 18:47:21 +02:00 committed by Claire
parent 44c0ba445a
commit f7684a31fe
3 changed files with 47 additions and 16 deletions

View File

@ -62,6 +62,43 @@ const isLinkMisleading = (link) => {
return !(textMatchesTarget(text, origin, host) || textMatchesTarget(text.toLowerCase(), origin, host)); 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 (
<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 export default @injectIntl
class StatusContent extends React.PureComponent { 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 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 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 content = { __html: status.get('translation') ? status.getIn(['translation', 'content']) : status.get('contentHtml') };
const spoilerContent = { __html: status.get('spoilerHtml') }; 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, 'status__content--with-spoiler': status.get('spoiler_text').length > 0,
}); });
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>
); );
if (status.get('spoiler_text').length > 0) { if (status.get('spoiler_text').length > 0) {
@ -376,7 +409,7 @@ class StatusContent extends React.PureComponent {
{extraMedia} {extraMedia}
{!hidden && renderTranslate && translateButton} {!hidden && translateButton}
</div> </div>
); );
} else if (parseClick) { } else if (parseClick) {
@ -399,7 +432,7 @@ class StatusContent extends React.PureComponent {
/> />
{media} {media}
{extraMedia} {extraMedia}
{!hidden && renderTranslate && translateButton} {!hidden && translateButton}
</div> </div>
); );
} else { } else {
@ -420,7 +453,7 @@ class StatusContent extends React.PureComponent {
/> />
{media} {media}
{extraMedia} {extraMedia}
{!hidden && renderTranslate && translateButton} {!hidden && translateButton}
</div> </div>
); );
} }

View File

@ -15,7 +15,7 @@
display: block; display: block;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
color: $ui-highlight-color; color: $highlight-text-color;
border: 0; border: 0;
background: transparent; background: transparent;
padding: 0; padding: 0;

View File

@ -206,15 +206,13 @@
} }
} }
.status__content__edited-label { .translate-button {
display: block; margin-top: 16px;
cursor: default;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
padding: 0; display: flex;
padding-top: 8px; justify-content: space-between;
color: $dark-text-color; color: $dark-text-color;
font-weight: 500;
} }
.status__content__spoiler-link { .status__content__spoiler-link {