[Glitch] Change design of translations in web UI
Port fcca781aae
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
main
parent
44c0ba445a
commit
f7684a31fe
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue