bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'translate-icon' into 'develop'

Browse source 
Add icon to 'Translate' button

See merge request soapbox-pub/soapbox!2227
This commit is contained in:
marcin mikołajczak 2023-01-27 00:39:36 +00:00
commit 0d1ea0b6e8
1 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/soapbox/components/translate-button.tsx
View file

@ -6,7 +6,7 @@ import { translateStatus, undoStatusTranslation } from 'soapbox/actions/statuses
import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
import { isLocal } from 'soapbox/utils/accounts';
import { Stack } from './ui';
import { Icon, Stack } from './ui';
import type { Account, Status } from 'soapbox/types/entities';
@ -44,16 +44,21 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
if (!features.translations || !renderTranslate || !supportsLanguages) return null;
const buttonClassName = 'flex items-center gap-0.5 w-fit px-2 py-1 border-gray-600 hover:border-gray-700 dark:hover:border-gray-500 border-solid border text-gray-600 hover:text-gray-700 dark:hover:text-gray-500 text-start text-sm rounded-full';
if (status.translation) {
const languageNames = new Intl.DisplayNames([intl.locale], { type: 'language' });
const languageName = languageNames.of(status.language!);
const provider = status.translation.get('provider');
return (
<Stack className='text-gray-700 dark:text-gray-600 text-sm' alignItems='start'>
<FormattedMessage id='status.translated_from_with' defaultMessage='Translated from {lang} using {provider}' values={{ lang: languageName, provider }} />
<Stack className='text-gray-700 dark:text-gray-600 text-sm' space={1} alignItems='start'>
<span>
<FormattedMessage id='status.translated_from_with' defaultMessage='Translated from {lang} using {provider}' values={{ lang: languageName, provider }} />
</span>
<button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue hover:underline' onClick={handleTranslate}>
<button className={buttonClassName} onClick={handleTranslate}>
<Icon className='h-5 w-5 stroke-[1.25]' src={require('@tabler/icons/language.svg')} strokeWidth={1.25} />
<FormattedMessage id='status.show_original' defaultMessage='Show original' />
</button>
</Stack>
@ -61,7 +66,8 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
}
return (
<button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue text-start text-sm hover:underline' onClick={handleTranslate}>
<button className={buttonClassName} onClick={handleTranslate}>
<Icon className='h-5 w-5' src={require('@tabler/icons/language.svg')} strokeWidth={1.25} />
<FormattedMessage id='status.translate' defaultMessage='Translate' />
</button>
);