mirror of
https://github.com/elyby/emails-renderer.git
synced 2024-12-23 13:49:48 +05:30
Localization support for images
This commit is contained in:
SleepWalker
parent
f1785faa08
commit
fcc5d024cc
@ -13,10 +13,17 @@ export function BitmapText(props) {
|
||||
throw new Error('The message.id must be contain 3 parts separated by dots');
|
||||
}
|
||||
|
||||
const src = require(`emails/${parts[1]}/images/${props.intl.locale}/${parts[2]}.png`);
|
||||
// TODO: we can improve this loader in future by adding an option to disable file emitting
|
||||
// because this thing is handled by url-loader
|
||||
const size = require(`image-size!emails/${parts[1]}/images/${props.intl.locale}/${parts[2]}.png`);
|
||||
let src;
|
||||
let size;
|
||||
try {
|
||||
src = require(`emails/${parts[1]}/images/${props.intl.locale}/${parts[2]}.png`);
|
||||
// TODO: we can improve this loader in future by adding an option to disable file emitting
|
||||
// because this thing is handled by url-loader
|
||||
size = require(`image-size!emails/${parts[1]}/images/${props.intl.locale}/${parts[2]}.png`);
|
||||
} catch (err) { // fallback to default locale
|
||||
src = require(`emails/${parts[1]}/images/${props.intl.defaultLocale}/${parts[2]}.png`);
|
||||
size = require(`image-size!emails/${parts[1]}/images/${props.intl.defaultLocale}/${parts[2]}.png`);
|
||||
}
|
||||
|
||||
const width = props.retina ? size.width / 2 : size.width;
|
||||
const height = props.retina ? size.height / 2 : size.height;
|
||||
@ -26,7 +33,7 @@ export function BitmapText(props) {
|
||||
<img src={src} alt={message} style={{
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
verticalAlign: 'middle'
|
||||
...props.style
|
||||
}}/>
|
||||
}</Message>
|
||||
);
|
||||
@ -39,11 +46,13 @@ BitmapText.propTypes = {
|
||||
id: PropTypes.string
|
||||
})
|
||||
]).isRequired,
|
||||
style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
|
||||
retina: PropTypes.bool
|
||||
};
|
||||
|
||||
BitmapText.defaultProps = {
|
||||
retina: true
|
||||
retina: true,
|
||||
style: {}
|
||||
};
|
||||
|
||||
import { injectIntl, intlShape } from 'react-intl';
|
||||
|
||||
@ -15,13 +15,6 @@ import violetManImage from './images/violetMan.png';
|
||||
import orangeManImage from './images/orangeMan.png';
|
||||
import darkBlueManImage from './images/darkBlueMan.png';
|
||||
|
||||
import confirmEmailImage from './images/ru/confirmEmail.png';
|
||||
import whatsNextImage from './images/ru/whatsNext.png';
|
||||
import chooseYouSkin from './images/ru/chooseYouSkin.png';
|
||||
import installOurPatch from './images/ru/installOurPatch.png';
|
||||
import useTLauncher from './images/ru/useTlauncher.png';
|
||||
import footerLogoImage from './images/ru/footerLogo.png';
|
||||
|
||||
export default function Register({username, link, code}) {
|
||||
return (
|
||||
<div>
|
||||
@ -33,7 +26,9 @@ export default function Register({username, link, code}) {
|
||||
<Message {...messages.hello_username} values={{username}} />
|
||||
</div>
|
||||
|
||||
<BitmapText message={messages.welcome_image} />
|
||||
<BitmapText message={messages.welcome_image} style={{
|
||||
verticalAlign: 'middle'
|
||||
}} />
|
||||
</td>
|
||||
</tr>
|
||||
</Table>
|
||||
@ -54,15 +49,9 @@ export default function Register({username, link, code}) {
|
||||
}}>
|
||||
<a href={link}>
|
||||
<Button style={styles.confirmEmailButton}>
|
||||
{/* TODO: текст и картинка */}
|
||||
<Message {...messages.confirm_email_image}>{(message) =>
|
||||
<img src={confirmEmailImage} alt={message} style={{
|
||||
width: '147px',
|
||||
// width: '104px',
|
||||
// width: '144px',
|
||||
verticalAlign: 'middle'
|
||||
}} />
|
||||
}</Message>
|
||||
<BitmapText message={messages.confirm_email_image} style={{
|
||||
verticalAlign: 'middle'
|
||||
}} />
|
||||
</Button>
|
||||
</a>
|
||||
</td>
|
||||
@ -96,15 +85,9 @@ export default function Register({username, link, code}) {
|
||||
...styles.contentCenterCell,
|
||||
...styles.whatsNextText
|
||||
}}>
|
||||
{/* TODO: текст и картинка */}
|
||||
<Message {...messages.whats_next_image}>{(message) =>
|
||||
<img src={whatsNextImage} alt={message} style={{
|
||||
width: '168px',
|
||||
// width: '202px',
|
||||
// width: '154px',
|
||||
verticalAlign: 'middle'
|
||||
}} />
|
||||
}</Message>
|
||||
<BitmapText message={messages.whats_next_image} style={{
|
||||
verticalAlign: 'middle'
|
||||
}} />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -118,15 +101,9 @@ export default function Register({username, link, code}) {
|
||||
}} />
|
||||
</td>
|
||||
<td style={styles.todoItemContent}>
|
||||
{/* TODO: текст и картинка */}
|
||||
<Message {...messages.choose_you_skin_image}>{(message) =>
|
||||
<img src={chooseYouSkin} alt={message} style={{
|
||||
width: '179px',
|
||||
// width: '159px',
|
||||
// width: '176px',
|
||||
verticalAlign: 'middle'
|
||||
}} />
|
||||
}</Message>
|
||||
<BitmapText message={messages.choose_you_skin_image} style={{
|
||||
verticalAlign: 'middle'
|
||||
}} />
|
||||
<div style={{
|
||||
...styles.paragraph,
|
||||
...styles.todoItemText
|
||||
@ -149,15 +126,9 @@ export default function Register({username, link, code}) {
|
||||
}} />
|
||||
</td>
|
||||
<td style={styles.todoItemContent}>
|
||||
{/* TODO: текст и картинка */}
|
||||
<Message {...messages.install_our_patch_image}>{(message) =>
|
||||
<img src={installOurPatch} alt={message} style={{
|
||||
width: '252px',
|
||||
// width: '264px',
|
||||
// width: '271px',
|
||||
verticalAlign: 'middle'
|
||||
}} />
|
||||
}</Message>
|
||||
<BitmapText message={messages.install_our_patch_image} style={{
|
||||
verticalAlign: 'middle'
|
||||
}} />
|
||||
<div style={{
|
||||
...styles.paragraph,
|
||||
...styles.todoItemText
|
||||
@ -180,15 +151,9 @@ export default function Register({username, link, code}) {
|
||||
}} />
|
||||
</td>
|
||||
<td style={styles.todoItemContent}>
|
||||
{/* TODO: текст и картинка */}
|
||||
<Message {...messages.use_tlauncher_image}>{(message) =>
|
||||
<img src={useTLauncher} alt={message} style={{
|
||||
width: '209px',
|
||||
// width: '138px',
|
||||
// width: '260px',
|
||||
verticalAlign: 'middle'
|
||||
}} />
|
||||
}</Message>
|
||||
<BitmapText message={messages.use_tlauncher_image} style={{
|
||||
verticalAlign: 'middle'
|
||||
}} />
|
||||
<div style={{
|
||||
...styles.paragraph,
|
||||
...styles.todoItemText
|
||||
@ -215,15 +180,9 @@ export default function Register({username, link, code}) {
|
||||
</td>
|
||||
<td style={styles.footerLogo}>
|
||||
<a href="http://ely.by">
|
||||
{/* TODO: текст и картинка */}
|
||||
<Message {...messages.footer_logo_alt}>{(message) =>
|
||||
<img src={footerLogoImage} alt={message} style={{
|
||||
width: '177px',
|
||||
// width: '139px',
|
||||
// width: '175px',
|
||||
verticalAlign: 'middle'
|
||||
}} />
|
||||
}</Message>
|
||||
<BitmapText message={messages.footer_logo_alt} style={{
|
||||
verticalAlign: 'middle'
|
||||
}} />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Loading…
Reference in New Issue
Block a user